Construir y modificar las páginas de su front-end mediante el builder

El builder es una herramienta sencilla e intuitiva para crear sus páginas sin necesidad de tener conocimientos específicos de desarrollo o integración. En este artículo, le explicamos cómo utilizarlo.

Diríjase al menú Administración - Front-end Haga clic en la pestaña "Páginas". Busque la página que desea construir o modificar. Puede realizar una búsqueda mediante el campo de búsqueda y/o utilizar los filtros por tipo de página y estado, o bien encontrarla directamente en la lista de páginas creadas.

Cuando haya encontrado su página, haga clic en el icono del builder al final de la línea. Ahora se encuentra en el builder. Aquí puede ver el aspecto de una página vacía. Raramente se encontrará con este caso; esta vista indica que la página que está configurando no tiene ningún componente, y tampoco tiene encabezado ni pie de página. Si ese es el caso, le invitamos en primer lugar a configurar los componentes de su encabezado y de su pie de página, después de haberlos creado. Encontrará más información sobre la creación de este tipo de página aquí.

Añada componentes a sus páginas

Para añadir un componente a su página, haga clic en el componente de su elección en la barra de la derecha y, a continuación, arrástrelo y suéltelo en el lugar que desee. Debe aparecer una línea verde para indicarle que el componente se va a soltar correctamente.

Para modificar un componente de su página, haga clic sobre el componente en cuestión. Aparecerá entonces un pequeño menú a la derecha, en la parte superior o inferior, según el tamaño del componente. En este menú encontrará, en orden:

• La flecha hacia arriba: al hacer clic en este icono, sube un nivel en la selección de su componente. Por ejemplo, si selecciona el logotipo en la pantalla que aparece a continuación, aparecerá un pequeño menú justo encima del logotipo (el logotipo es un subcomponente del componente "menú compacto"); si hace clic en la flecha, el efecto será seleccionar el componente "menú compacto" y, por tanto, mostrar el menú que se ve en la captura de pantalla a continuación.
• La flecha multidireccional: si hace clic en este icono sin soltar, puede desplazar el componente entre los demás componentes.
• La duplicación: al hacer clic en este icono se crea una copia del componente.
• La papelera: al hacer clic en este icono se elimina el componente de su página.
• La rueda dentada: al hacer clic en este icono puede acceder a la configuración del componente o del subcomponente.

Configure los parámetros de cada componente.

Cada componente o subcomponente tiene sus propios parámetros. Le invitamos a probar los diversos parámetros para comprobar su resultado.

Puede, por ejemplo, modificar qué menú de su front-end desea mostrar en el componente "menú compacto". Para aprender a crear y configurar sus menús, haga clic aquí@.

Para modificar una imagen en un componente, haga doble clic sobre ella. Aparecerá entonces una ventana emergente de carga de imagen.

Una vez cargada su nueva imagen, puede seleccionarla haciendo clic sobre ella. Se aplica automáticamente. A continuación, puede cerrar la ventana emergente haciendo clic en la croix en la parte superior derecha de la ventana emergente, o haciendo clic en el builder visible en segundo plano.

Para modificar un icono en este tipo de componente, abra la configuración del componente. En "Tipo de icono", seleccione el tipo de icono que desea utilizar. Puede usar imágenes o iconos. Si elige el tipo "Imagen", bastará con hacer doble clic sobre cada icono para modificarlo.

Si elige el tipo "Icono", modifique cada icono mostrando sus parámetros de la siguiente manera: En los parámetros del icono, indique el nombre del icono que desea mostrar. El nombre se compone así:

• Comienza por "bi-" (prefijo por defecto)
• Termina con el atajo del icono bootstrap. Para ayudarle, encontrará una lista de iconos bootstrap en este sitio: icons.getbootstrap.com

Ejemplos de iconos: bi-box, bi-circle, bi-arrow-down-left-square...

Para editar los colores de su front-end, haga clic en el icono "paleta". La paleta de colores está configurada para el conjunto de su front-end. Será la misma para todas las páginas.

Modifique los colores de la paleta de su front-end. Defina los colores principales de su tema. Estos podrán utilizarse en la configuración de cada componente de su front-end. Para modificar un color, haga clic en el cuadrado de color. Defina sus colores con la ayuda de un cuentagotas, o rellenando directamente los campos RGB. Haga clic en el botón "Guardar" cada vez que haya terminado de configurar un componente o su paleta.

Es posible editar el CSS pero... ... le desaconsejamos firmemente utilizar esta funcionalidad si no está acostumbrado a integrar en CSS. A tener en cuenta: el CSS está configurado para el conjunto del builder. Será el mismo para todas las páginas. Cualquier modificación realizada en este editor podrá alterar el correcto funcionamiento de su front-end. Cualquier intervención de nuestros equipos relacionada con el uso de este editor será facturada.

La barra de acceso rápido.

Desde esta barra, puede:

• Cambiar el estado de su página haciendo clic en el estado actual: pasar de borrador a publicada, o de publicada a borrador (sin conexión).
• Editar los parámetros de la página haciendo clic en el icono "página".
• Cambiar de página haciendo clic en el icono "flechas invertidas".

La barra de publicación

Desde esta barra de iconos, puede (en orden):

• Visualizar su página antes de la publicación.
• Guardar el borrador de sus últimas modificaciones.
• Cancelar sus modificaciones.
• Publicar sus últimas modificaciones.

No olvide configurar todos sus componentes en cada idioma mostrado en su front-end. Atención, añadir o eliminar un componente en un idioma afecta a los demás idiomas. Solo la configuración es independiente idioma por idioma.

Para salir del builder, haga clic en el icono de salida.