Árvore de páginas

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


Tip!

If you created the page from a template, you can also use the Configure component option to access each component’s settings and customize the page.


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


Parágrafo


Veja a imagem. See the image

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. See the image

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. See the image

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.
  • Cor do texto: banner text color.
  • 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. See the image

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.

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. See the image

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.
  • Link 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. See the image

Unlike the paragraph, this component allows adding multiple texts that are displayed side by side horizontally, with up to 4 contents per line. Each text content can also have an image and buttons. The following settings are available for this component:

Conteúdo de texto: general properties of the component.

  • 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.
  • Alinhamento: alignment of the text content. Options: left, centered or right.
  • Conteúdo:  indicates if the text content should have an image or icon. Images and icons must be saved in the gallery or the device.
  • Imagem de fundo como ícone: enables or disables the feature to adjust the image as an icon, in order to avoid cuts or distortions.
  • Título: title of the gallery.
  • Texto: text content shown below the title.
  • Adicionar item: add buttons to the text content 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.


Rodapé


Veja a imagem. See the image

Footers are small areas on the bottom of the page, which are very important both for design purposes and to provide additional information. Footers typically contain information such as copyrights, social media links, slogans, etc. The following settings are available for this component:

Geral: general properties of the component.

  • Logotipo: logo image shown in the footer. The image must be a file from the gallery or the device.
  • Mensagem de Copyright: text shown below the logo and icons.
  • Cor do texto: color of the copyright message.
  • Cor de fundo: background color of the footer.

Itens: items displayed in the footer. 

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

  • Imagem: image shown in the footer link. The image must be a file from the gallery or the device.
  • Título: title of the link.
  • URL: web address opened after clicking the item.
  • Abrir em uma nova aba?: indicates whether the address should be opened in a new tab.


Conteúdo externo


Veja a imagem. See the image

This component was essentially designed as a link to the Forms tool, in order to use forms on the page. This allows adding contact, evaluation or suggestions forms, for example. The following settings are available for this component:


Conteúdo Externo: general properties of the component.

  • URL: web address of the content to be added. Some URLs cannot be loaded due to lack of permission.
  • Altura: height of the area reserved for external content. If the content is larger than the height value set in this field, the content shall be automatically resized to fit the defined height.
  • 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.



Please note!

This documentation is valid from the Liquid (1.6.5) update. If you use a previous update, it may contain information different from what you see on your platform.