Árvore de páginas

Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

Versão 1 Próxima »

Index

Speaking of page designer...

The page designer allows users to configure elements to be displayed on screen, based on each element’s order and properties.

The following web components can be added to the page: Banner, Footer, Section, External content, Paragraph, Image gallery, Menu and Text content.


Changes made to the page are automatically saved every 15 seconds. These changes are saved as drafts until the user selects “Post” (upper right corner of the page), making the page available to the public through the defined URL.




Web components


Componentes web: To add a component, click the button to expand components, select the desired component and drag it to the area on the page where it will be displayed.


After adding the component to the page, place the mouse cursor over the component to display the following options:

Move component down

Move component up

Configure component (configuration options vary according to the type of component)

Remove component from page


The components that can be added to pages and their respective settings are detailed below.


Parágrafo


Veja a imagem. Veja a imagem

This component allows entering a title and a text paragraph to the page, optionally showing an image and buttons. The following settings are available for this component:

Geral: general properties of the paragraph.

  • Título: title of the paragraph.
  • Descrição: description to be shown below the title.
  • Cor do texto: paragraph text color.
  • Habilitar container?: component width. If the container is disabled, the component will be resized based on the screen width, regardless of the device. If the container is enabled, the maximum width defined in this area will be followed.
  • Mostrar imagem?: indicates if the image should be presented for the paragraph.
  • Alinhar imagem à direita?: indicates if the image will be aligned to the right. The image is aligned to the left by default.
  • Imagem: image shown in the paragraph. The image must be a file from the gallery or the device.

Itens: insert, remove or configure paragraph items. 

Adicionar item: add icons to the paragraph that redirect users to other web addresses. The following settings are available for each item:

  • Título: title of the link.
  • URL: web address opened after clicking the item.
  • Cor do texto: item text color.
  • Cor do fundo: item color.
  • Abrir em uma nova aba?: indicates whether the address should be opened in a new tab.


Seção


Veja a imagem. Veja a imagem

This component allows splitting the page into content portions, called sections. Each section has an image, which may have a title and a description. The following settings are available for this component:

Seção: general properties of the component.

  • Imagem de fundo: image displayed as the section’s background. The image must be a file from the gallery or the device.
  • Título: title of the section.
  • Tamanho do título: font size of the section title.
  • Subtítulo: description shown below the title.
  • Tamanho do subtítulo: font size of the section subtitle.
  • Cor do texto: section text color.
  • Altura: height of the page used for this section.
  • Alinhamento: alignment of the title and subtitle. Options: left, centered or right.
  • Parallax: indicates whether the parallax effect must be used to paralyze the image when the page is being scrolled.
  • Máscara: indicates whether the mask effect must be used to highlight the section’s text.
  • Habilitar container?: component width. If the container is disabled, the component will be resized based on the screen width, regardless of the device. If the container is enabled, the maximum width defined in this area will be followed.


Banner


Veja a imagem. Veja a imagem

Banners highlight image or video content, alternated manually or automatically. The following settings are available for this component:

Banner: general properties of the component.

  • Setas: indicates whether arrows must be displayed on the banner’s sides.
  • Bullets: indicates whether bullets must be displayed on the bottom of the banner.
  • Máscara: indicates whether the mask effect must be used to highlight the banner’s text.
  • Altura: banner height. If the images are larger than the banner height, they are automatically resized to fit the defined height. Images may be distorted if they are too small.

Composição de banner: add, remove or configure banners to be displayed.

 If more than one banner is used, they are automatically displayed alternately every 5 seconds. The following settings must be defined for each banner:

  • Conteúdo: image or video content. Images and videos shown in banners must be saved in the gallery or the device. Accepted image formats: JPG, JPEG, GIF or PNG. Accepted video formats: MP4 or OGG. If the video is more than 5 seconds long and there are more banners to be displayed, the video will be interrupted to display the next banner.
  • Título: banner title.
  • Subtítulo: description shown below the title.
  • Alinhamento: alignment of the title and subtitle. Options: left, centered or right.
  • Adicionar item: add buttons to the banner that redirect users to other web addresses. The following settings are available for each item: 
    • URL: web address opened after clicking the button.
    • Abrir em uma nova aba?: indicates whether the address should be opened in a new tab.
    • Texto: button label.
    • Cor do texto: sets button label color.
    • Cor do botão: sets the button color.


Galeria de imagens


Veja a imagem. Veja a imagem

This component creates an image gallery, which may have a title and a description, as well as a color mask for each image. The following settings are available for this component:

Geral: general properties of the gallery.

  • Título: title of the gallery.
  • Subtítulo: description shown below the title.
  • Espaços: indicates whether there must be spaces around the images.
  • Máscara: indicates whether the mask effect must be used in the images.
  • Colunas: number of image columns to be displayed.
  • Cor da máscara: the mask color can be selected in this component, unlike in others.

Imagens: insert, remove or configure gallery images.

Click the  button to insert new images. The following settings are available for each image:

  • Legenda: description shown when opening the image in the gallery.


Menu


Veja a imagem. Veja a imagem

This component creates a menu with options, in order to make the page content more organized and accessible. The following settings are available for this component:

Geral: general properties of the component.

  • Logotipo: image shown as the menu logo. The image must be a file from the gallery or the device.
  • URL do logotipo: address accessed by clicking the logo.
  • Cor do texto: menu text color.
  • Realce do texto: text color displayed when placing the mouse cursor over the menu item.
  • Cor do fundo: menu background color.
  • Realce do fundo: background color displayed when placing the mouse cursor over the menu.
  • Alinhar à direita?: indicates whether the menu items should be aligned to the right. Menu items are aligned to the left by default.
  • Habilitar container?: Component width. If the container is disabled, the component will be resized based on the screen width, regardless of the device. If the container is enabled, the maximum width defined in this area will be followed.
  • Tamanho do texto: font size of menu items.

Itens: insert, remove or configure menu items. Up to 10 menu items can be inserted.


Click the button to insert new items. The following settings are available for each item:

  • Abrir em uma nova aba?: indicates whether the address should be opened in a new tab.
  • URL: web address opened after clicking the item.
  • Título: item label.


Conteúdo do texto


Veja a imagem. Veja a imagem

Diferentemente do parágrafo, esse componente possibilita incluir diversos textos, que são apresentados lado a lado horizontalmente, com o limite de 4 conteúdos por linha. Cada conteúdo de texto pode mostrar uma imagem e botões. Referente a esse componente são apresentadas as seguintes configurações:

Conteúdo de texto: configura as propriedades gerais do componente.

  • Conteúdo: indica se o conteúdo do texto deve ter imagem ou ícone. Tanto a imagem quanto o ícone devem ser arquivos da galeria ou do próprio dispositivo.
  • Título: título da galeria.
  • Texto: conteúdo de texto que deve ser apresentado abaixo do título.
  • Adicionar item: essa opção permite adicionar botões ao conteúdo de texto, e esses botões direcionam para outros endereços web. Cada item tem a seguinte configuração:
    • URL: endereço web que será aberto ao acionar o botão.
    • Abrir em uma nova aba?: indica se o endereço deve ser aberto em uma nova aba ou na atual.
    • Texto: configura o label do botão.
    • Cor do texto: configura a cor do label do botão.
    • Cor do botão: configura a cor que deve ser apresentada para o botão.


Rodapé


Veja a imagem. Veja a imagem

O rodapé é uma pequena área na parte inferior, que tem uma grande importância, tanto em termos de design como para fornecer informações complementares. Normalmente inclui informações como: direitos autorais, links para redes sociais, slogan, etc.  Referente a esse componente são apresentadas as seguintes configurações:

Geral: configura as propriedades gerais do componente.

  • Logotipo: imagem de logo que deve ser apresentada no rodapé. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.
  • Mensagem de Copyright: texto apresentado abaixo da logo e dos ícones.
  • Cor do texto: configura a cor da mensagem de Copyright.
  • Cor de fundo: configura a cor de fundo do rodapé.

Itens: configura os itens que devem ser apresentados no rodapé. 

Adicionar item: essa opção permite adicionar ícones ao rodapé, e esses ícones direcionam para outros endereços web. Cada item tem a seguinte configuração:

  • Imagem: imagem que deve ser apresentada no link do rodapé. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.
  • Título: configura o título do link.
  • URL: endereço web que será aberto ao acionar o item.
  • Abrir em uma nova aba?: indica se o endereço deve ser aberto em uma nova aba ou na atual.


Conteúdo externo


Veja a imagem. Veja a imagem

Esse componente foi elaborado, essencialmente, para fazer um link com o recurso de Forms, para possibilitar o uso de formulários na sua página. Isso permite que sejam incluídos formulários de contato, de avaliação ou sugestões, por exemplo.

Referente a esse componente são apresentadas as seguintes configurações:

Conteúdo Externo: configura as propriedades gerais do componente.

  • URL: endereço web do conteúdo da ser adicionado. Algumas URL's podem não ser carregadas por motivos de permissão.
  • Altura: configura a altura da área reservada ao conteúdo externo. Caso o conteúdo seja maior do que a altura configurada nesse campo, o conteúdo deve ser automaticamente redimensionado para se adequar à altura definida.
  • Habilitar container?: Configuração de largura do componente. Se estiver desabilitado o container, o componente será redimensionado conforme a largura da tela, independentemente do dispositivo. Se o container foi habilitado, a largura máxima irá obedecer às medidas apresentadas nesse quadro.



Fique atento!

Esta documentação é válida a partir da atualização 1.6.5 - Liquid. Se você utiliza uma atualização anterior, ela pode conter informações diferentes das quais você vê na sua plataforma.

indicates whether the address should be opened in a new tab.

  • Sem rótulos