Elementos

Os elementos ajudam a estruturar e apresentar o conteúdo de forma eficaz. Eles variam de componentes baseados em texto como títulos, listas e destaques de texto a componentes interativos como botões e links. Elementos visuais como imagens, ícones, vídeos e animações também podem ser adicionados para melhorar a apresentação e organização do conteúdo.

Para adicionar ou modificar um elemento do site:

  1. Navegue até a página relevante do site e clique em Editar.

  2. Clique na seção da página onde deseja adicionar ou modificar um elemento.

  3. Faça as alterações necessárias.

  4. Clique em Salvar.

Nota

Os estilos padrão para títulos, botões, links e texto de parágrafo, por exemplo, são definidos na aba Tema do editor do site.

Digite / para adicionar elementos do site.

Títulos

Os títulos definem cabeçalhos e organizam o conteúdo do site em diferentes níveis para clareza e estrutura. Para inserir um título, digite /title, escolha o estilo de cabeçalho (Título 1, Título 2 ou Título 3) e digite o texto.

Dica

Como alternativa, digite o texto, selecione-o e escolha o estilo apropriado na seção Texto embutido na aba Personalizar do editor do site. Opções adicionais de formatação, como fontes e cores, também estão disponíveis nesta seção.

Botões

Botões são elementos interativos que permitem vincular a outra página ou a uma âncora de página. Para inserir um botão:

  1. Digite /button.

  2. Digite o rótulo do botão no campo Rótulo do link.

  3. Adicione a URL ou e-mail. Digite / para pesquisar uma página e # para vincular a uma âncora.

  4. Defina o Estilo, Tamanho e Layout para definir a aparência do botão.

  5. Se necessário, alterne a opção para abrir a página ou âncora vinculada em uma nova aba.

  6. Clique em Aplicar para salvar as alterações.

Dica

Para modificar um botão existente, clique no botão e edite as opções na seção Texto embutido do editor do site.

Imagens

Para inserir uma imagem:

  1. Digite /image.

  2. Pesquise no banco de dados Unsplash ou clique em Enviar uma imagem para escolher um arquivo das suas imagens locais.

  3. Clique em Adicionar.

  4. Para personalizar a imagem, clique na imagem e edite as opções na seção Imagem do editor do site. Por exemplo:

    • Substituir a imagem.

    • Defina uma tag alt no campo Descrição.

    • Digite uma tag de título no campo Dica. Este texto aparecerá quando os visitantes passarem o mouse sobre a imagem.

    • Adicione uma Forma; algumas formas também permitem personalização de cor.

    • Ajuste a Largura da imagem, por exemplo, para melhorar o desempenho. Um tamanho menor pode ser sugerido se for suficiente para exibição.

    • Redimensione a imagem usando a ferramenta Transformar.

    • Ajuste o Espaçamento para adicionar espaço (em pixels) ao redor da imagem.

    • Etc.

Vídeos

Para adicionar um vídeo, digite /video, insira o URL e ative as opções desejadas:

  • Reprodução automática: para reproduzir automaticamente o vídeo quando a página for acessada. O vídeo é silenciado automaticamente por padrão.

  • Loop: para reproduzir o vídeo em loop.

  • Ocultar controles do player

  • Ocultar botão de tela cheia

  • Iniciar em: para definir o momento em que o vídeo deve começar, no formato MM:SS.

Ícones

Para inserir um ícone, digite /image, vá para a aba Ícones, selecione um ícone e clique em Adicionar. Para modificar um ícone, clique nele e use a seção Ícone do editor do site para personalizar opções, como Cor, Tamanho, Animações, Forma, etc.

Listas

Listas ajudam a organizar o conteúdo de forma clara, tornando as informações mais fáceis de ler e melhorando as estruturas das páginas da web. Digite /list e escolha entre três tipos diferentes de listas: Listas com marcadores, Listas numeradas ou Checklists.

Destaques de texto

Destaques podem ser adicionados a títulos e textos usando a seção Texto em linha do editor do site. Para adicionar um destaque:

  1. Selecione o texto ou título que você deseja destacar.

  2. No editor do site, clique em Destaque.

  3. Selecione o estilo de destaque.

  4. Modifique sua Cor.

  5. Escolha sua Espessura.

Destacar textos e títulos

Animações

Animações são usadas para adicionar movimento aos blocos de construção e elementos do site, como imagens e texto. Três tipos de animação estão disponíveis: Na rolagem, Na aparição e Ao passar o mouse (somente para imagens).

Para adicionar uma animação a um elemento do site:

  1. Clique no elemento.

  2. No editor do site, vá para a seção relevante do elemento (por exemplo, Botão, Coluna, Texto em linha, etc.).

  3. No campo Animação, selecione o tipo de animação desejado.

  4. Personalize as configurações de animação conforme necessário. As opções disponíveis variam de acordo com o tipo de animação selecionado.

Animações na rolagem

Para animações na rolagem, é possível:

  • Escolha Entrada para adicionar a animação quando o elemento entrar na tela e Saída para adicioná-la quando ele sair da tela.

  • Selecione um Efeito.

  • Escolha a Direção do efeito.

  • Adapte a Intensidade do efeito.

  • Defina a Zona de rolagem, onde o primeiro valor representa a porcentagem da tela exibida quando o efeito começa e o segundo valor representa sua porcentagem no final.

Animações na aparição

Para animações na aparição, é possível:

  • Escolher entre diferentes efeitos.

  • Escolha a Direção do efeito.

  • Selecione uma opção de Gatilho para definir quando a animação ocorre: seja Somente a primeira vez ou Todas as vezes.

  • Adapte a Intensidade do efeito.

  • Se você deseja que a animação seja acionada após um número de segundos, defina esse número no campo Iniciar após.

  • Escolha uma Duração para a animação.

Animações ao passar o mouse (somente para imagens)

Animações Ao passar o mouse podem ser adicionadas a imagens. Você pode escolher o Efeito da animação, assim como a Cor e a Largura do traço.

Veja também

Editor HTML do Odoo