As seções flexíveis são linhas com duas colunas flexíveis padrão que criam um layout básico. Depois de adicionar uma seção, você pode adicionar, remover ou reorganizar colunas adicionais, flexboxes ou grades avançadas para criar o layout desejado. Em seguida, você pode adicionar widgets a esse layout.
Observação:
Este artigo é relevante apenas para usuários que começaram a usar o Flex após 18 de julho de 2022. Se você estiver usando a versão 1.0 do Flex, consulte Adicionar e editar seções do Flex (1.0)
Adicionar seção
Para adicionar uma seção:
- Faça login na sua conta Guesty.
- Na barra de navegação superior, clique no seletor de modo e selecione Modo de crescimento.
- Clique em Distribuição.
- Clique na miniatura dos sites da Guesty.
- À direita do site em questão, clique em Editar.
- Posicione o cursor entre as linhas e clique. +Adicionar seção. Ou clique com o botão direito para abrir o menu de contexto e clique em Adicionar e, em seguida, selecione Seção flexível.
- No painel lateral, clique Seções flexíveis.
- Selecione a seção flexível desejada.
- Clique Salvar.
Observação:
Salvar seção
Para salvar uma seção:
- Posicione o cursor sobre a seção desejada e clique em Seção flexível no canto superior esquerdo da seção.
- Clique em Salvar como seção e, em seguida, clique em Selecione apenas esta linha.
- Digite o nome da seção, selecione a categoria na qual a seção será salva e selecione as permissões para a seção.
- Clique em Comece a criar.
- Clique em Feito.
Excluir seção
Para excluir uma seção, clique com o botão direito do mouse para abrir o menu de contexto e selecione Excluir. Ou clique no ícone excluir no menu flutuante.
Adicionar coluna
Depois de adicionar uma seção ao seu site, você pode adicionar colunas para conter widgets dentro da seção. Todas as seções contêm colunas por padrão, mas você ainda pode adicionar colunas adicionais.
Observação:
Ao adicionar um elemento a uma coluna, a posição é determinada pelas configurações de layout automático. Para alterar a direção do layout automático, abra o painel de design e, na seção Layout, selecione horizontal ou vertical.
Para adicionar uma coluna:
-
Clique para selecionar uma coluna existente.
-
No menu flutuante, clique no ícone de três pontos horizontais (
), em seguida, selecione Adicionar uma coluna. Ou clique no ícone de mais (+) na borda esquerda ou direita da coluna.
Duplicar coluna
Você pode duplicar uma coluna e ela será adicionada à direita do cartão original. Não é possível adicionar colunas que excedam 100% da largura, incluindo o espaçamento.
Para duplicar uma coluna:
-
Clique para selecionar uma coluna.
-
No menu flutuante, clique no Duplicar ícone. Ou você pode clicar com o botão direito do mouse na coluna para abrir o menu de contexto e selecionar Duplicar.
Excluir coluna
Você pode excluir uma coluna para removê-la da seção. No entanto, cada seção deve conter pelo menos uma coluna, o que significa que você não pode excluir a última coluna de uma seção.
Para excluir uma coluna:
-
Clique para selecionar a coluna.
-
No menu flutuante, clique no Excluir ícone. Ou você pode clicar com o botão direito do mouse na coluna para abrir o menu de contexto e selecionar Excluir.
Adicionar widget
Você pode adicionar widgets a colunas, flexboxes ou grids avançados de diversas maneiras. Se você já estiver no modo flexbox, pode adicionar widgets diretamente do painel lateral clicando em Widgets, e selecionando o widget desejado.
Observação:
No editor clássico, não é possível arrastar e soltar um widget em uma coluna flexível a partir do painel lateral.
Para adicionar um widget:
-
- Clique em uma coluna, flexbox ou grade avançada para selecioná-la.
- Clique no ícone de mais (+) no meio da coluna, flexbox ou grade avançada. Ou clique no ícone de mais (+) no menu flutuante.
- Selecione um widget.
Você também pode adicionar widgets a partir do painel de camadas.
Para adicionar um widget a partir do painel de camadas:
- Clique para selecionar uma coluna.
- No painel lateral, clique Camadas.
- No painel de camadas, passe o cursor sobre a coluna, flexbox ou grade avançada à qual deseja adicionar um widget e clique no ícone de mais (+).
- Selecione um widget.
Classes CSS para elementos flexíveis (modo flexível)
No modo flexível, você pode adicionar classes CSS a elementos flexíveis (seção, coluna, coluna interna e grades avançadas). O uso de classes CSS pode economizar tempo ao estilizar elementos. Por exemplo, em vez de usar o painel de design para alterar o espaçamento e o tamanho de uma única coluna, você pode criar uma classe CSS e aplicar essas alterações de estilo a qualquer número de colunas.
A mesma classe pode ser aplicada a vários elementos na mesma página, e várias classes podem ser aplicadas ao mesmo elemento.
Observação:
Você precisa ter acesso ao modo de desenvolvedor para usar este recurso.
Para adicionar ou editar uma classe CSS:
- Selecione o elemento flexível desejado (seção, coluna, coluna interna ou grade avançada).
- Selecione Adicionar nome da classe CSS no menu flutuante ou no menu de contexto.
- Digite um novo nome de classe CSS ou selecione um nome de classe existente no menu suspenso (você pode selecionar várias classes).
- (Opcional) Se você ainda não adicionou a classe CSS ao código, clique em "Abrir modo de desenvolvedor".
- Clique em Concluído.
