Árvore de páginas

Índice


Hablando de diseñador de páginas...

El diseñador de páginas le permite al usuario configurar los elementos que se deben presentar en la página, en lo que se refiere al ordenamiento y a las propiedades de cada elemento.

Se pueden agregar a la página los siguientes componentes web: Banner, Pie de página, Sección, Contenido externo, Párrafo, Galería de imágenes, Menú y Contenido del texto.

Cada cambio en la página se graba automáticamente cada 15 segundos. Estos cambios quedan en borrador hasta que el usuario active la opción "Publicar", en la esquina superior derecha de la página, para que la página sea accesible públicamente por medio de la URL definida.




Componentes web


Componentes web: para agregar un componente, solo debe activar este botón para desplegar los componentes, hacer clic en el componente que desee y arrastrarlo hasta el lugar de la página en el que debe aparecer.


Cuando el componente se agrega a la página, al pasar el mouse sobre él, se muestran las siguientes opciones:

Mover componente hacia abajo

Mover componente hacia arriba

Configurar componente (las opciones de configuración varían de acuerdo al tipo de componente)

Eliminar componente de la página


¡Sugerencia!

Si creó la página desde una plantilla, también puede utilizar la opción Configurar componente para acceder a la configuración de cada uno de los componentes y, así, personalizar la página de la forma que desee.

A continuación, se presentan los componentes que se pueden incluir en las páginas, así como sus configuraciones.


Parágrafo


Veja a imagem. Ver la imagen

Este componente permite incluir en su página un título y un párrafo de texto, con la opción de mostrar una imagen y botones. Con relación a este componente se muestran las siguientes configuraciones:

Geral: configura las propiedades generales del párrafo.

  • Título: título del párrafo.
  • Descrição: descripción que debe aparecer debajo del título.
  • Cor do texto: configura el color del texto del párrafo.
  • Habilitar container?: configuración de ancho del componente. Si está deshabilitado el container, el componente se cambiará de tamaño según el ancho de la pantalla, independientemente del dispositivo. Si el container está habilitado, el ancho máximo se ajustará a las medidas que se muestran en este cuadro.
  • Mostrar imagem?: indica si debe mostrar la imagen referida al párrafo.
  • Alinhar imagem à direita?: indica si la imagen se alineará a la derecha. Por defecto, la imagen se alinea a la izquierda.
  • Imagem: imagen que se debe mostrar en el párrafo. La imagen debe ser un archivo de la galería o del propio dispositivo.

Itens: introduce, elimina o configura los ítems que se deben mostrar en el párrafo.  

Adicionar item: esta opción permite agregar íconos al párrafo, y estos ítems conducen a otras direcciones web. Cada ítem tiene la siguiente configuración:

  • Título: configura el título de enlace.
  • URL: dirección web que se abrirá al activar el ítem.
  • Cor do texto: configura el color del texto del ítem.
  • Cor do fundo: configura el color que se debe mostrar para el ítem.
  • Abrir em uma nova aba?: indica si la dirección se debe abrir en una nueva pestaña o en la pestaña actual.


Seção


Veja a imagem. Ver la imagen

Este componente permite la división de la página en partes de contenido, llamadas sección. Cada sección se compone de una imagen, que puede tener un título y una descripción. Con relación a este componente se muestran las siguientes configuraciones:

Seção: configura las propiedades generales del componente.

  • Imagem de fundo: imagen que se debe mostrar como fondo en la sección. La imagen debe ser un archivo de la galería o del propio dispositivo.
  • Título: título de la sección.
  • Tamanho do título: tamaño de la fuente para el título de la sección.
  • Subtítulo: descripción que se debe mostrar debajo del título.
  • Tamanho do subtítulo: tamaño de la fuente para el texto de la sección.
  • Cor do texto: configura el color del texto de la sección.
  • Altura: altura de la página que se dedicará a esta sección.
  • Alinhamento: indica la alineación del título y del subtítulo. Se puede alinear a la izquierda, centralizado o a la derecha.
  • Parallax: indica si el efecto parallax se debe emplear para paralizar la imagen mientras se está recorriendo la página.
  • Máscara: indica si el efecto de máscara se debe emplear, para destacar más el texto de la sección.
  • Habilitar container?: configuración de ancho del componente. Si está deshabilitado el container, el componente se cambiará de tamaño según el ancho de la pantalla, independientemente del dispositivo. Si el container está habilitado, el ancho máximo se ajustará a las medidas que se muestran en este cuadro.


Banner


Veja a imagem. Ver la imagen

Los banners son componentes incluidos para destacar algún contenido de imagen o vídeo, que se alternan manualmente o automáticamente. Con relación a este componente se muestran las siguientes configuraciones:

Banner: configura las propiedades generales del componente.

  • Setas: indica si las flechas se deben mostrar en los laterales de los banners.
  • Bullets: indica si los bullets se deben mostrar en la parte inferior de los banners.
  • Máscara: indica si el efecto de máscara se debe emplear, para destacar más el texto del banner.
  • Altura: configura la altura de los banners. Si las imágenes son más grandes que la altura reservada para los banners, estas se adaptan automáticamente a la altura definida. Si la imagen es demasiado pequeña, esta puedes quedar distorsionada.

Composição de banner: agrega, elimina o configura los banners que se deben mostrar.

 Si se incluye más de un banner, la visualización de estos cambia automáticamente cada 5 segundos. Para cada banner es necesario configurar:

  • Conteúdo: indica si el contenido del banner será imagen o vídeo. Tanto la imagen como el vídeo deben ser archivos de la galería o del mismo dispositivo. Los formatos aceptados de imagen son: JPG, JPEG, GIF o PNG, y de video son: MP4 o OGG. Si el vídeo tiene más de 5 segundos de duración y si se muestran más banners, la visualización del vídeo se interrumpirá para dar lugar al siguiente banner.
  • Título: título del banner.
  • Subtítulo: descripción que se debe mostrar debajo del título.
  • Cor do texto: configura el color del texto del banner.
  • Alinhamento: indica la alineación del título y del subtítulo. Se puede alinear a la izquierda, centralizado o a la derecha.
  • Adicionar item: esta opción permite agregar botones al banner, y estos botones conducen a otras direcciones web. Cada ítem tiene la siguiente configuración: 
    • URL: dirección web que se abrirá al activar el botón.
    • Abrir em uma nova aba?: indica si la dirección se debe abrir en una nueva pestaña o en la pestaña actual.
    • Texto: configura el rótulo del botón.
    • Cor do texto: configura el color del rótulo del botón.
    • Cor do botão: configura el color que se debe mostrar para el botón.


Galeria de imagens


Veja a imagem. Ver la imagen

Este componente crea una galería de imágenes, que puede tener un título y una descripción, además de la posibilidad de configurar una máscara de color sobre cada imagen. Con relación a este componente se muestran las siguientes configuraciones:

Geral: configura las propiedades generales de la galería.

  • Título: título de la galería.
  • Subtítulo: descripción que se debe mostrar debajo del título.
  • Espaços: indica si se deben mostrar espacios alrededor de las imágenes.
  • Máscara: indica si el efecto de máscara se debe emplear en las imágenes.
  • Colunas: cuántas columnas de imágenes se deben mostrar.

Imagens: introduce, elimina o configura las imágenes que se deben mostrar en la galería. 

Haga clic en el botón para agregar nuevas imágenes. Cada imagen tiene la siguiente configuración:

  • Legenda: descripción que se debe mostrar al abrir la visualización de la imagen en la galería.


Menu


Veja a imagem. Ver la imagen

Este componente crea un menú con opciones para que el contenido de su página esté más organizado y accesible. Con relación a este componente se muestran las siguientes configuraciones:

Geral: configura las propiedades generales del componente.

  • Logotipo: imagen que se debe mostrar en el logotipo del menú. La imagen debe ser un archivo de la galería o del propio dispositivo.
  • Link do logotipo: dirección a la que se accede cuando se hace clic en el logo.
  • Cor do texto: configura el color del texto del menú.
  • Realce do texto: configura el color que se debe mostrar en el texto al pasar el mouse sobre el ítem de menú.
  • Cor do fundo: configura el color que se debe mostrar en el fondo del menú.
  • Realce do fundo: configura el color de fondo que se debe mostrar en el texto al pasar el mouse sobre el menú.
  • Alinhar à direita?: indica si los ítems de menú se deben alinear a la derecha. Por defecto, los ítems se alinean a la izquierda.
  • Habilitar container?: Configuración de ancho del componente. Si está deshabilitado el container, el componente se cambiará de tamaño según el ancho de la pantalla, independientemente del dispositivo. Si el container está habilitado, el ancho máximo se ajustará a las medidas que se muestran en este cuadro.
  • Tamanho do texto: tamaño de la fuente de los ítems de menú.

Itens: introduce, elimina o configura los ítems que se deben mostrar en el menú. Se pueden introducir hasta 10 ítems de menú.

Haga clic en el botón para agregar nuevos ítems. Cada ítem tiene la siguiente configuración:

  • Abrir em uma nova aba?: indica si la dirección se debe abrir en una nueva pestaña o en la pestaña actual.
  • URL: dirección web que se abrirá al activar el ítem.
  • Título: configura el rótulo del ítem.


Conteúdo do texto


Veja a imagem. Ver la imagen

A diferencia del párrafo, este componente permite incluir diversos textos, que se muestran lado a lado horizontalmente, con el límite de 4 contenidos por línea. Cada contenido de texto puede mostrar una imagen y botones. Con relación a este componente se muestran las siguientes configuraciones:

Conteúdo de texto: configura las propiedades generales del componente.

  • Habilitar container?: Configuración de ancho del componente. Si está deshabilitado el container, el componente se cambiará de tamaño según el ancho de la pantalla, independientemente del dispositivo. Si el container está habilitado, el ancho máximo se ajustará a las medidas que se muestran en este cuadro.
  • Alinhamento: indica la alineación del texto. Se puede alinear a la izquierda, centralizado o a la derecha.
  • Conteúdo: indica si el contenido del texto debe tener imagen o ícono. Tanto la imagen como el ícono deben ser archivos de la galería o del mismo dispositivo.
  • Imagem de fundo como ícone: indica si se debe habilitar el recurso para ajustar la imagen al formato de ícono, para evitar que tenga cortes o distorsiones.
  • Título: título de la galería.
  • Texto: contenido de texto que se debe mostrar debajo del título.
  • Adicionar item: esta opción permite agregar botones al contenido de texto, y estos botones conducen a otras direcciones web. Cada ítem tiene la siguiente configuración:
    • URL: dirección web que se abrirá al activar el botón.
    • Abrir em uma nova aba?: indica si la dirección se debe abrir en una nueva pestaña o en la pestaña actual.
    • Texto: configura el rótulo del botón.
    • Cor do texto: configura el color del rótulo del botón.
    • Cor do botão: configura el color que se debe mostrar para el botón.


Rodapé


Veja a imagem. Ver la imagen

El pie de página es una pequeña área en la parte inferior, que tiene una gran importancia, tanto en términos de diseño como para proporcionar información complementaria. Por lo general incluye información como: derechos de autor, enlaces a redes sociales, slogan, etc. Con relación a este componente se muestran las siguientes configuraciones:

Geral: configura las propiedades generales del componente.

  • Logotipo: imagen de logo que se debe mostrar en el pie de página. La imagen debe ser un archivo de la galería o del propio dispositivo.
  • Mensagem de Copyright: texto que se muestra debajo del logo y de los íconos.
  • Cor do texto: configura el color del mensaje de Copyright.
  • Cor de fundo: configura el color de fondo del pie de página.

Itens: configura los ítems que se deben mostrar en el pie de página. 

Adicionar item: esta opción permite agregar íconos al pie de página, y estos íconos conducen a otras direcciones web. Cada ítem tiene la siguiente configuración:

  • Imagem: imagen que se debe mostrar en el enlace del pie de página. La imagen debe ser un archivo de la galería o del propio dispositivo.
  • Título: configura el título de enlace.
  • URL: dirección web que se abrirá al activar el ítem.
  • Abrir em uma nova aba?: indica si la dirección se debe abrir en una nueva pestaña o en la pestaña actual.


Conteúdo externo


Veja a imagem. Ver la imagen

Este componente se ha diseñado esencialmente para hacer un enlace con el recurso de Forms, para permitir el uso de formularios en su página. Esto permite incluir formularios de contacto, de evaluación o sugerencias, por ejemplo. Con relación a este componente se muestran las siguientes configuraciones:

Conteúdo Externo: configura las propiedades generales del componente.

  • URL: dirección web del contenido que se agregará. Algunas URL's pueden no cargarse por motivos de permiso.
  • Altura: configura la altura del área reservada al contenido externo. Si el contenido es mayor que la altura configurada en ese campo, el contenido se debe cambiar automáticamente para que se ajuste a la altura definida.
  • Habilitar container?: Configuración de ancho del componente. Si está deshabilitado el container, el componente se cambiará de tamaño según el ancho de la pantalla, independientemente del dispositivo. Si el container está habilitado, el ancho máximo se ajustará a las medidas que se muestran en este cuadro.



¡Esté atento!

Esta documentación es válida desde la actualización 1.6.5 - Liquid. Si utiliza una actualización anterior, puede contener información diferente de la que usted ve en su plataforma.