Editar Elementos
Para todos usuários
Atualizado Set 2025
Seu site é composto por vários elementos — textos, imagens, botões e muito mais. Cada um deles pode ser personalizado para combinar com seu estilo e necessidades. Com o editor do Oniva.io, editar esses elementos é simples e intuitivo: basta passar o mouse sobre um elemento e clicar nele para começar a editar.
Ao fazer isso, uma interface de edição aparecerá. O tipo de interface depende de dois fatores:
- O tipo de elemento (por exemplo, textos exibem uma barra de formatação, enquanto imagens ou botões abrem o painel de edição à esquerda).
- O seu modo de edição — Edição Fácil ou Edição Avançada.
Este guia irá mostrar como editar cada tipo de elemento e explicar como a edição funciona em ambos os modos, para que você possa transformar seu site em algo que realmente tenha a sua cara.
Elementos de Texto
O Oniva.io suporta os seguintes elementos de texto:
- Título 1 (H1) – Título principal da página, usado uma vez por página para SEO.
- Título 2 (H2) – Títulos de seção.
- Título 3 (H3) – Subseções dentro de uma seção.
- Título 4 (H4) – Subseções menores.
- Título 5 (H5) – Títulos menores, frequentemente usados em cards ou pequenos destaques.
- Título 6 (H6) – O menor título, frequentemente usado para legendas.
- Parágrafo (P) – Texto regular.
Modo de Edição Fácil:
Como editar:
1. Clique no elemento de texto
2. Uma barra de ferramentas aparece acima do texto.
3. Edite o texto diretamente na tela
4. Use a barra de ferramentas para formatar (negrito, itálico, links, cor, fonte, etc.)
Observação: Elementos de texto são os únicos que não exibem a barra lateral esquerda no modo Edição Fácil. Eles são editados diretamente na tela, usando uma barra de ferramentas flutuante.
Modo de Edição Avançada:
Como editar:
1. Clique no elemento de texto
2. Uma barra de ferramentas aparece acima do texto. (como no modo de edição fácil)
3. Um painel à esquerda será exibido, com uma aba CSS Personalizado para estilização avançada.
Painéis disponíveis:
- Avançado
Elementos de Mídia
O Oniva.io oferece suporte aos seguintes elementos de mídia:
- Imagem
- Ícone
- Incorporação
Observação: O elemento Incorporação permite inserir HTML personalizado, vídeos, formulários e outros conteúdos de terceiros na sua página.
Imagem:
Modo de Edição Fácil:
Como editar:
1. Clique no elemento de imagem
2. O painel de edição à esquerda será aberto. Clique em Selecionar Ativo para enviar uma nova imagem, escolher uma das suas imagens existentes ou selecionar uma da Pexels.
3. Adicione ou atualize a descrição da imagem / texto alternativo (alt text) — importante para acessibilidade e otimização para motores de busca (SEO).
4. Escolha a resolução da imagem. Se não souber qual resolução selecionar, clique no ícone de informação ao lado do campo de resolução para obter orientações.
Dica: Para dar zoom in ou zoom out, basta girar a roda do mouse para cima ou para baixo enquanto a imagem estiver selecionada.
Painéis disponíveis:
- Arquivo
Advanced Editing Mode:
Como editar:
1. Clique no elemento de imagem
2. O painel de edição à esquerda será aberto. Clique em Selecionar Ativo para enviar uma nova imagem, escolher uma das suas imagens existentes ou selecionar uma da Pexels.
3. Adicione ou atualize a descrição da imagem / texto alternativo (alt text) — importante para acessibilidade e otimização para motores de busca (SEO).
4. Escolha a resolução da imagem. Se não souber qual resolução selecionar, clique no ícone de informação ao lado do campo de resolução para obter orientações.
5. Se você quiser personalizar/adicionar classes CSS, abra a aba Avançado.
Painéis disponíveis:
- Ajustes
- Avançado
Ícone:
Como editar:
O elemento Ícone é o único cujo painel de edição é igual nos modos Edição Fácil e Edição Avançada.
1. Clique no elemento de ícone
2. No painel à esquerda, escolha um novo ícone da lista.
3. Por padrão, novos ícones usam a cor primária do seu tema. Para manter a cor original, clique em Cor do Ícone e depois no ícone de lixeira para redefinir.
Incorporação:
Modo de Edição Fácil:
Como editar:
1. Clique no elemento Incorporação
2. Um painel à esquerda será aberto
3. No painel à esquerda, cole a URL de incorporação (por exemplo, iframe do YouTube, Google Maps).
Painéis disponíveis:
- Link
Modo de Edição Avançada:
Como editar:
1. Clique no elemento Incorporação
2. Um painel à esquerda será aberto
3. No painel à esquerda, cole a URL de incorporação (por exemplo, iframe do YouTube, Google Maps).
4. Se você quiser personalizar/adicionar classes CSS, abra a aba Avançado.
Painéis disponíveis:
- Ajustes
- Avançado
Elementos de Layout
O Oniva.io oferece suporte aos seguintes elementos de layout:
- Container
- Grade
- Card
- Seção
Container:
Um container é um elemento de agrupamento que contém outros elementos e ajuda a organizar a estrutura da sua página. Ele é útil para agrupar conteúdo, controlar a largura máxima, centralizar elementos e adicionar espaçamento consistente.
Modo de Edição Fácil:
Como editar:
1. Clique no elemento container
2. Um painel à esquerda será aberto
3. No painel à esquerda, edite o fundo do container (tipo e cor).
Painéis disponíveis:
- Fundo
Containers no Modo de Edição Fácil:
Você pode notar que nem todos os containers são clicáveis no modo Edição Fácil. Isso é intencional! A maioria dos containers funciona “nos bastidores” para posicionar seu conteúdo, então eles ficam ocultos para manter a interface simples. Os containers que podem ser editados no modo fácil são os decorativos — aqueles com fundos, bordas ou cores visíveis que você pode querer personalizar.
Modo de Edição Avançada:
Como editar:
1. Clique no elemento container
2. Um painel à esquerda será aberto
3. Use as diferentes abas para personalizar seu elemento:
- Aparência: Edite o fundo do container (tipo e cor).
- Elementos: Visualize e gerencie todos os elementos dentro deste layout (como uma estrutura em árvore do seu conteúdo). Você pode duplicar elementos existentes ou adicionar novos clicando em Adicionar Novo Elemento.
- Avançado: Adicione ou personalize classes Tailwind CSS.
Painéis disponíveis:
- Elementos
- Aparência
- Avançado
Dica
A aba Elementos é especialmente útil para layouts complexos. Você pode clicar em qualquer elemento aninhado na árvore para selecioná-lo e editá-lo sem precisar clicar diretamente na tela.
Grade:
Um elemento de grade cria um layout responsivo baseado em colunas, que se ajusta automaticamente conforme o tamanho da tela. Perfeito para exibir cards, imagens ou conteúdos em linhas e colunas organizadas. Você pode controlar o número de colunas e o espaçamento entre os itens.
Modo de Edição Fácil:
Como editar:
1. Clique no elemento grade
2. Um painel à esquerda será aberto
3. Use as diferentes abas para personalizar seu elemento:
- Elementos: Gerencie os itens dentro da grade— duplique ou crie novos elementos mantendo o comportamento responsivo.
- Ajustes:
- Número máximo de colunas: Controla quantos itens podem aparecer lado a lado em uma linha. Por exemplo, se você definir como 3, serão exibidos até 3 itens lado a lado. Se houver 6 itens, eles aparecerão em 2 linhas de 3. Em dispositivos móveis, isso é ajustado automaticamente para 1 coluna, garantindo melhor legibilidade.
- Espaçamento: Defina o espaçamento vertical e horizontal entre os itens da grade.
Painéis disponíveis:
- Elementos
- Ajustes
Grade no Modo Fácil:
A grade é o único elemento de layout que exibe a aba Elementos no modo Edição Fácil. Isso permite gerenciar os itens dentro do grid — duplicar elementos existentes ou criar novos — enquanto preserva automaticamente o layout e o comportamento responsivo do seu design. Outros elementos de layout exibem a aba Elementos apenas no modo Avançado.
Modo de Edição Avançada:
Como editar:
1. Clique no elemento grade
2. Um painel à esquerda será aberto
3. Use as diferentes abas para personalizar seu elemento:
- Elementos: Gerencie os itens dentro da grade— duplique ou crie novos elementos mantendo o comportamento responsivo.
- Ajustes:
- Número máximo de colunas: Controla quantos itens podem aparecer lado a lado em uma linha. Por exemplo, se você definir como 3, serão exibidos até 3 itens lado a lado. Se houver 6 itens, eles aparecerão em 2 linhas de 3. Em dispositivos móveis, isso é ajustado automaticamente para 1 coluna, garantindo melhor legibilidade.
- Espaçamento: Defina o espaçamento vertical e horizontal entre os itens da grade.
- Avançado: Adicione ou personalize classes Tailwind CSS.
Painéis disponíveis:
- Elementos
- Ajustes
- Avançado
Card:
Um card é um elemento contido com fundo, borda e espaçamento interno (padding) que agrupa informações relacionadas. Cards são comumente usados para produtos, membros de equipe, posts de blog ou qualquer conteúdo que se beneficie de estar visualmente separado e organizado.
Modo de Edição Fácil:
Como editar:
1. Clique no elemento card
2. Um painel à esquerda será aberto
3. No painel à esquerda, edite a aparência do card — fundo, borda, raio da borda e sombra.
Painéis disponíveis:
- Aparência
Modo de Edição Avançada:
Como editar:
1. Click on the card element
2. Um painel à esquerda será aberto
3. Use as diferentes abas para personalizar seu elemento:
- Aparência: Edite a aparência do card — fundo, borda, raio da borda e sombra.
- Elementos: Visualize e gerencie todos os elementos dentro deste layout (como uma estrutura em árvore do seu conteúdo). Você pode duplicar elementos existentes ou adicionar novos clicando em Adicionar Novo Elemento.
- Avançado: Adicione ou personalize classes Tailwind CSS.
Painéis disponíveis:
- Elementos
- Aparência
- Avançado
Elementos de Ação
O Oniva.io oferece suporte aos seguintes elementos de ação:
- Botão
- Itens de Navegação
- Redes Sociais
Botão:
Um botão é um elemento clicável que dispara uma ação quando os usuários interagem com ele.
Modo de Edição Fácil:
Como editar:
1. Clique no elemento botão
2. Um painel à esquerda será aberto
3. Use as diferentes abas para personalizar seu elemento:
- Ajustes:
- Texto do Botão: O texto que aparece dentro do botão, geralmente sua chamada para ação (call-to-action).
- Ação: Todo botão precisa de uma ação — o que acontece quando alguém clica nele. No Oniva.io, você pode escolher entre: rolar até uma seção da mesma página, navegar para outra página do seu site ou abrir um link externo em uma nova aba.
- Aparência: Edite a aparência do botão — fundo, borda, cor do texto e ícone.
Painéis disponíveis:
- Ajustes
- Aparência
Modo de Edição Avançada:
Como editar:
1. Clique no elemento botão
2. Um painel à esquerda será aberto
3. Use as diferentes abas para personalizar seu elemento:
- Ajustes:
- Texto do Botão: O texto que aparece dentro do botão, geralmente sua chamada para ação (call-to-action).
- Ação: Todo botão precisa de uma ação — o que acontece quando alguém clica nele. No Oniva.io, você pode escolher entre: rolar até uma seção da mesma página, navegar para outra página do seu site ou abrir um link externo em uma nova aba.
- Aparência: Edite a aparência do botão — fundo, borda, cor do texto e ícone.
- Avançado: Adicione ou personalize classes Tailwind CSS.
Painéis disponíveis:
- Ajustes
- Aparência
- Avançado
Itens de Navegação
Itens de navegação são links usados em menus e barras de navegação para ajudar os usuários a se deslocarem pelo seu site. Eles geralmente são agrupados para criar a navegação do site.
Modo de Edição Fácil:
Como editar
1. Clique no elemento de itens de navegação — geralmente encontrado no cabeçalho e/ou rodapé do site.
2. Um painel à esquerda será aberto
3. Clique no último ícone de cada item de navegação para abrir o painel de edição. A partir daí, você pode alterar o texto e selecionar a ação que deseja que o botão execute.
Dica: Para reorganizar os itens de navegação, basta arrastá-los e soltá-los na ordem que você preferir.
Painéis disponíveis:
- Itens de Navegação
Ações dos botões
Ações do Botão são as ações que o elemento executa ao ser clicado. Elas podem ser:
- Rolar para seção: Rola suavemente até uma seção específica na mesma página.
- Navegar para página: Ir para outra página do seu site.
- Abrir link externo: Abrir uma URL de um site externo.
Modo de Edição Avançada:
Como editar:
1. Clique no elemento de itens de navegação — geralmente encontrado no cabeçalho e/ou rodapé do site.
2. Um painel à esquerda será aberto
3. Clique no último ícone de cada item de navegação para abrir o painel de edição. A partir daí, você pode alterar o texto e selecionar a ação que deseja que o botão execute.
4. Se você quiser personalizar/adicionar classes CSS, abra a aba Avançado.
Painéis disponíveis:
- Ajustes
- Avançado
Classes CSS
Quando você aplica classes CSS na aba Avançado de um elemento de Itens de Navegação, essas classes serão aplicadas a todos os itens dentro do menu de navegação.
Redes Sociais:
Um elemento de redes sociais exibe ícones que linkam para os seus perfis em redes sociais (Facebook, Instagram, Twitter, LinkedIn, etc.). Você pode escolher quais redes sociais exibir e personalizar sua aparência.
Modo de Edição Fácil:
Como editar:
1. Clique no elemento de redes sociais — geralmente encontrado no rodapé (para exibir os perfis oficiais da empresa) ou em seções onde os membros da equipe são apresentados.
2. Um painel à esquerda será aberto
3. Clique no último ícone de cada botão de rede social para abrir o painel de edição. A partir daí, você pode alterar a plataforma, colar a URL da sua rede social e personalizar tanto a cor do botão quanto a cor do ícone.
Dica: Para reorganizar os botões de redes sociais, basta arrastá-los e soltá-los na ordem que você preferir.
Painéis disponíveis:
- Redes sociais
Modo de Edição Avançada:
Como editar:
1. Clique no elemento de redes sociais — geralmente encontrado no rodapé (para exibir os perfis oficiais da empresa) ou em seções onde os membros da equipe são apresentados.
2. Um painel à esquerda será aberto
3. Clique no último ícone de cada botão de rede social para abrir o painel de edição. A partir daí, você pode alterar a plataforma, colar a URL da sua rede social e personalizar tanto a cor do botão quanto a cor do ícone.
4. Se você quiser personalizar/adicionar classes CSS, abra a aba Avançado.
Painéis disponíveis:
- Ajustes
- Avançado
Classes CSS
Quando você aplica classes CSS na aba Avançado de um elemento de Itens de Redes Sociais, essas classes serão aplicadas a todos os itens dentro do menu de redes sociais.
Elementos Globais
Alguns elementos são configurados globalmente e aparecem em todas as páginas do seu site. Esses são o Cabeçalho e o Rodapé.
O que são elementos globais?
Cabeçalho e Rodapé são seções especiais que aparecem de forma consistente em todas as páginas do seu site. Ao editá-los, as alterações são aplicadas automaticamente em todo o site.
Lembre-se: Qualquer edição no Cabeçalho ou Rodapé será aplicada instantaneamente em todas as páginas do seu site. Não importa de qual página você faça a atualização, as alterações permanecerão consistentes em todo o site.
Editando o Rodapé:
O rodapé funciona como qualquer outra seção — você edita cada elemento dentro dele seguindo os métodos padrão de edição:
1. Clique em qualquer elemento dentro do rodapé (texto, botões, imagens, etc.)
2. Edite-o de acordo com o tipo de elemento (veja as seções acima).
3. As alterações aparecerão automaticamente em todas as páginas.
Editando o Cabeçalho:
O cabeçalho também funciona como uma seção padrão, onde você edita os elementos individualmente. Porém, ele inclui uma configuração especial para dispositivos móveis:
Configurando Variante Móvil:
Como acessar as configurações do variante móvil:
1. Localize o cabeçalho na sua página.
2. Clique no elemento Navegação dentro do cabeçalho.
3. Procure pelas configurações de Variante Móvil no painel à esquerda.
4. Escolha a variante do seu menu de celular:
- Planilha: O menu desliza a partir do lado esquerdo, sobrepondo o conteúdo.
- Menu deslizante: O menu desliza a partir da parte inferior, sobrepondo o conteúdo.
Dicas para localizar o elemento Navegação:
1. Mude para o modo de Edição Avançada
2. Clique no cabeçalho
3. Vá para a aba Elementos
4. Encontre o elemento de Navegação (navbar) na lista aninhada
Dicas para o menu móvel:
- Visualize seu site em dispositivos móveis/tablet para ver como sua escolha aparece
- O menu móvel aparece automaticamente em telas menores
- Seus itens de navegação serão exibidos na vertical no menu móvel