VER ÍNDICE
ÍNDICE
- Usando o Elementor para editar seu conteúdo
- EDIÇÃO DE TEXTO
- TAGS DE HIERARQUIA
- EDIÇÃO DE BOTÕES
- EDIÇÃO DE IMAGEM
- EDIÇÃO DE GALERIA DE IMAGENS
- EDIÇÃO DE GALERIA MÚLTIPLA
- EDIÇÃO DE CARROSSEL DE LOGOS
- EDIÇÃO SLIDER CARROSSEL
- EDIÇÃO DE FUNDO DA SEÇÃO
- EDIÇÃO DE DEPOIMENTOS
- EDIÇÃO DE PERGUNTAS FREQUENTES/ FAQ
- EDIÇÃO DE ÍCONE
- EDIÇÃO DE LISTA DE ÍCONES
- EDIÇÃO DE CARD DE SERVIÇOS
- EDIÇÃO DE CONTADOR
- EDIÇÃO DE POP UP
- EDIÇÃO DE HEADER OU FOOTER
- EDIÇÃO DE TELEFONE OU E-MAIL NO FOOTER
- EDIÇÃO DE ÍCONES SOCIAIS
- EDIÇÃO DE MENU
- COMO EDITAR OS BOTÕES DO MENU
O Elementor é um dos “page builders” mais utilizados pra construção de páginas em WordPress. Com uma interface bastante intuitiva e fácil de administrar, o Elementor torna o processo de criar e alterar conteúdo ainda mais fácil e prático.
Neste tutorial aprenderemos como alterar o conteúdo na sua página do Elementor!
Localize a Página que será alterada
Assim que você entra no WordPress, procure no menu lateral esquerdo o botão “Páginas“
Após isso será aberto o painel de páginas.
Procure a página que você planeja editar, posicione o mouse sobre o nome da página (sem clicar) para aparecer as opções de edição.
Para editar a página clique em “Editar com Elementor“.
ATENÇÃO: O botão de “Editar” e “Editar com Elementor” fazem coisas diferentes! Não use o botão de “Editar” pois ele já vem configurado e mudar alguma coisa nesse meio de edição tem risco de quebrar o site ou quebrar a formatação;
O QUE OS OUTROS BOTÕES FAZEM?
“Edição Rápida“: Para edições pequenas que não são dentro da página, como alterar o título da página, URL da página (slug) e/ou deixá-la em modo rascunho ou publicá-la.
“Ver” ou “Visualizar“: Permite que você visualize o site sem o painel de edição, literalmente para visualizar como a página está no ar.
Usando o Elementor para editar seu conteúdo
Após clicar “Editar com Elementor“, você será redirecionado para seção de edição da página. Note que agora há dois menus: um superior e um lateral.
O menu superior
O menu superior contém ferramentas para construir e gerenciar o site.
No botão de “+” você pode adicionar elementos novos.
No botão da lupa você pode procurar textos dentro da página.
No botão do olho você pode pré visualizar as edições.
E em “Publicar” ou “Atualizar” você salva as suas edições.
O menu lateral é onde você fará a maior parte das edições da página, o menu lateral muda de acordo com o elemento que você selecionar para edição.
Note que dependendo do elemento que você selecionar para edição, o menu lateral fica diferente, entretanto as abas internas quase sempre serão as mesmas: “Layout“, ‘Estilo” e “Avançado“
A aba “Layout” serve para edições estruturais, como textos, links e âncoras, imagens, ícones, etc.
A aba “Estilo” serve para edições visuais, como cor de preenchimento, bordas, espaçamentos, tamanhos, etc.
A aba “Avançado” serve para edições complexas como margem, preenchimento e edições no código do elemento.
A maior parte das edições serão feitas em “Layout” e “Estilo“. Tome cuidado ao editar a área de “Avançado“, recomendamos que não altere os conteúdos dessa área para não correr o risco de quebrar o conteúdo ou formatação;
Lembre-se de sempre clicar no botão “Publicar” ou “Atualizar” para salvar qualquer alteração.
EDIÇÃO DE TEXTO
Quando planejar editar um texto, encontre-o na página, passe o mouse em cima da caixa do texto e clique no ícone de lápis.
O menu lateral mudará para que a edição dessa caixa de texto seja feita.
Edite o texto no menu lateral, NÃO edite diretamente na caixa da página pois tem o risco do texto quebrar; Sempre edite o conteúdo no menu lateral.
Os textos no formato de “Título” podem ser editados da mesma forma: clicando no lápis e editando no menu lateral
TAGS DE HIERARQUIA
As tags de hierarquia no Elementor funcionam definindo a importância estrutural do seu conteúdo para os mecanismos de busca. “H1‘ sendo a tag para o texto mais importante e “p” para conteúdo de baixa relevância que não corresponde a pesquisas no Google.
As tags não são para o quão importante aquele texto é no contexto do site, mas sim o quão importante o texto é para os mecanismos de busca.
H1: Essa tag normalmente vai ser o cabeçalho principal, que deve ser usada apenas uma vez por página para o título mais importante do conteúdo. Essa é a pesquisa principal que o usuário vai fazer
H2: As tags de subtítulo mais importantes, usadas para seções principais do conteúdo. As tags H2 são textos que estão contidas dentro da tag H1.
H3: As tags para subseções dentro de um H2.
H4 a H6: Tags para níveis de detalhamento ainda mais específicos.
p: São textos considerados “não pesquisáveis”, significa que ele tem baixa importância para a ferramenta de pesquisa do Google. Eles podem fazer sentido no contexto do site, mas se você não consegue se imaginar pesquisando aquilo no Google, provavelmente será um texto tipo “p”.
Por exemplo: “Sobre Nós”.
Os textos do seu site vão estar configurados e padronizados, mas caso queira editar a hierarquia ou adicionar textos novos, mantenha isso em mente!
EDIÇÃO DE BOTÕES
Passe o mouse por cima do botão que planeja editar, clique no ícone de lápis.
Isso mudará o menu lateral para a edição do botão.
Caso queira mudar o texto do botão, clique em “Texto“
Caso queira mudar o destino do botão, clique em “Link“, apague o link atual e cole o link novo ou âncora que você deseja que o botão redirecione para.
EDIÇÃO DE IMAGEM
Caso queira editar uma imagem, passe o mouse em cima da imagem e clique no ícone de lápis.
Isso abrirá um menu lateral para a edição da imagem. Em seguida clique na imagem no menu para editá-la.
Isso abrirá uma tela nova chamada “Inserir mídia“. Ela estará aberta automaticamente na aba “Biblioteca de mídia“, caso a imagem que você quer usar já está salva na biblioteca ou foi usada em outra parte do site, procure-a nessa seção.
Caso queira inserir uma imagem nova, clique em “Enviar arquivos“, em seguida clique em “Selecionar arquivos” e selecione a nova foto do seu computador, ou arraste a imagem e jogue-a nessa seção.
Certifique-se que a sua imagem é um arquivo tipo WEBP e não PNG, JPEG, JPG ou outro formato. Você pode converter a sua imagem para WEBP utilizando sites de conversão para formato WEBP.
Se quiser saber mais sobre como transformar imagens em WEBP clique aqui
Usar imagens no formato WEBP garante um carregamento mais rápido no seu site e, por consequência, uma avaliação melhor no SEO do Google, aumentando as chances do seu site ser recomendado para usuários.
Usar imagens de outros formatos pode colocar a performance do seu site em risco.
EDIÇÃO DE GALERIA DE IMAGENS
Para editar uma galeria de imagens, selecione a galeria desejada e clique no ícone de lápis, isso abrirá um menu lateral para a edição da galeria
Para remover uma imagem já inserida ou adicionar imagens novas, clique nos ícones das fotos. Isso abrirá uma tela nova de edição da galeria.
Para remover uma foto, clique no “X” no lado da foto desejada e clique em “Inserir galeria”
Para adicionar uma imagem nova, clique em “Adicionar à galeria”, isso abrirá uma seção igual a de edição de imagem que foi mencionada previamente, a diferença é que agora você pode selecionar múltiplas imagens de uma vez.
EDIÇÃO DE GALERIA MÚLTIPLA
No caso de uma galeria múltipla, o menu lateral fica um pouco diferente. Dessa vez vai ter mais de um botão com os nomes das galerias separadamente. Clique na que você planeja editar, isso abrirá uma seção igual a galeria padrão citada acima.
EDIÇÃO DE CARROSSEL DE LOGOS
Para editar o carrossel de logos, passe o mouse por cima da seção do carrossel e clique no ícone de lápis, isso abrirá um menu lateral para a edição do carrossel.
Para adicionar ou remover um logo do carrossel, clique no ícone dos logos selecionados “x imagens selecionadas” isso abrirá um painel igual o de edição de imagens.
Para editar o número de logos mostrado por vez, clique em “Slides para rolar”, assim você decide quantos logos serão mostrados por vez.
EDIÇÃO SLIDER CARROSSEL
Para editar o slider carrossel, clique no slider com o botão direito do mouse, clique em “Editar Slides”, é a primeira opção.
Isso abrirá um menu lateral com opções de edição. Para editar o slide desejado, selecione-o na lista “Slides”. Clicando no item de interesse algumas opções se abrirão.
Para excluir um slide, clique no botão de “X”, para adicionar um novo clique em “+ Adicionar Item”. Para alterar a imagem do slide, clique na imagem para editá-la e siga os passos da seção de edição de imagem desse tutorial. Para mudar a cor de sobreposição da imagem, clique em “Color” acima do ícone de imagem, para editar a direção do zoom da imagem do slider, clique em “Zoom Direction”
Para editar o texto do slide, clique em “Content”, clique em “Title” para editar o título e em “Description” para editar o texto.
EDIÇÃO DE FUNDO DA SEÇÃO
Para editar o fundo de uma seção, tanto para trocar a cor ou colocar/ trocar a imagem, passe o mouse por cima da seção que você deseja editar e clique nos pontinhos da caixa colorida;
Ou clique com o botão direito do mouse em uma área vazia da seção e clique em “Editar contêiner” (pode existir a chance do contêiner ter outro nome como “Sobre”, mas isso não afeta a edição)
isso abrirá um menu lateral para editar a seção. Mude para a aba “Estilo“, em “Plano de fundo” clique no ícone de pincel (caso já não esteja selecionado)
Clique no ícone quadrado em “Cor” para editar a cor da seção
Ou clique em “Imagem” para editar a imagem do fundo da seção
EDIÇÃO DE DEPOIMENTOS
Caso queira editar algum depoimento da seção de Depoimentos, passe o mouse sobre os depoimentos e clique no ícone de lápis.
Isso abrirá um menu lateral para a edição dos depoimentos. Em seguida, encontre o depoimento que você deseja editar e clique nele.
Ao abrir o depoimento que você deseja editar, aparecerá diversas opções.
O botão de “X” exclui o depoimento. Para editar o texto do depoimento clique em “Content” e edite a caixa de texto. Para trocar a imagem clique em “Image” e siga os passos na seção de edição de imagem desse tutorial. Para trocar o nome edite a caixa de texto em “Name” e para trocar o cargo edite a caixa de texto em “Title“
EDIÇÃO DE PERGUNTAS FREQUENTES/ FAQ
Para editar as perguntas frequentes, passe o mouse em cima na sanfona das perguntas e clique no ícone de lápis, isso abrirá um menu lateral para a edição dos itens.
Antes de começar a edição, note que existe um primeiro item na lista que não aparece na versão final. Esse item está na sanfona por questão do código e não deve ser removido, edite os itens abaixo dele.
Para eliminar um item, clique no botão de “X”, para adicionar uma pergunta nova clique em “+ Adicionar item”
Para editar uma pergunta, clique no item da sanfona que deseja editar e altere o texto na caixa do menu lateral. Essa caixa de texto funciona como uma mini versão do Word, você pode deixar o texto em negrito, itálico, sublinhado ou em tópicos. Não recomendamos alterar a seção de “Código” por risco de danificar ou quebrar os conteúdos.
EDIÇÃO DE ÍCONE
Passe o mouse em cima do ícone que você deseja editar e clique no ícone de lápis.
Isso abrirá um menu lateral para a edição do ícone.
Para mudar o desenho clique no ícone, isso abrirá uma biblioteca de ícones que você pode explorar e pesquisar ícones, caso encontre um que se interessa, clique nele e clique em “Inserir“
Caso não goste dos ícones disponíveis na biblioteca de ícones, você pode inserir um ícone próprio SVG. Você pode procurar ícones em bancos de imagens como o Freepik e escolher um ícone que te interessa.
Para inserir o seu ícone escolhido, clique em “Enviar arquivo SVG” quando passar o mouse por cima de “ícone” no menu lateral.
O ícone deve ser um arquivo SVG para que ele possa ser editável pela feramente (trocar a cor, tamanho, etc) e que não pese carregamento do site.
Clicando em “Título” você pode mudar o título do ícone, em “Descrição” você pode adicionar um texto extenso secundário e em “Link” você pode anexar um link na caixa de texto, transformando o ícone em um tipo de botão.
EDIÇÃO DE LISTA DE ÍCONES
Para editar uma lista de ícones, é bem similar a edição de texto ou botão. Ao passar o mouse em cima da lista de ícones, clique no ícone de lápis na caixa. Isso abrirá um menu lateral para a edição da lista de ícones
Para editar um item, clique na caixa do item que você deseja editar. Isso abrirá algumas opções para a edição.
Para deletar o ícone, clique no botão de “X”, para duplicar o ícone, clique no botão ao lado com o desenho de duas folhas de papel. Para editar o texto do ícone, clique em “Texto”, para editar o ícone, clique no desenho do ícone e siga os passos da seção acima, para adicionar um link, cole o link na seção “Link”.
EDIÇÃO DE CARD DE SERVIÇOS
Passe o mouse em cima do card de serviço que você deseja editar e clique no ícone de lápis.
Isso abrirá um menu lateral para a edição do serviço
Para editar o ícone clique em “ícone” e siga os passos da seção de edição de ícones desse tutorial
Para editar o título, edite na caixa de texto “Título”.
Para editar a descrição, edite na caixa de texto “Descrição”.
Para adicionar um link, cole o link na seção “Link” (nem sempre um ícone necessita um link).
EDIÇÃO DE CONTADOR
Passe o mouse em cima do contador que você deseja editar e clique no ícone de lápis.
Isso abrirá um menu lateral para editar o contador.
Para editar o número, edite a caixa de texto “Número final”.
Caso queira editar o título do contador, perceba que o título está como um elemento separado e não na parte de “título” do editor do contador. Edite o título separadamente como ensinado na seção de edição de texto.
EDIÇÃO DE POP UP
Para editar um Pop up, volte no menu inicial do WordPress e clique em “Modelos”, isso abrirá outras opções, clique em “Popups”.
Selecione o pop up desejado e clique em “Editar com Elementor“. No nosso exemplo, iremos editar um pop-up de carômetro.
Após isso, a edição do Elementor será aberta, e é possível editar o conteúdo do pop up assim como de uma página.
EDIÇÃO DE HEADER OU FOOTER
Para editar o Header ou o Footer, acesse o editor da página normalmente clicando em “Editar com Elementor”
Quando for editar tanto o Footer quanto o Header, eles terão uma cor diferente quando passar o mouse em cima, isso indica que você entrará na seção para a edição. Clique normalmente.
O Header e o Footer contam como páginas diferentes que estão contidas dentro da página principal, por conta disso é necessário carregar essa outra edição, por conta disso, talvez demore um pouco o carregamento dependendo da sua máquina.
Após carregado, você pode editar eles livremente.
EDIÇÃO DE TELEFONE OU E-MAIL NO FOOTER
No caso de você ter mudado de telefone, whatsapp ou e-mail, clique em “Editar com Elementor” na página do seu site e role até a seção do Footer.
Passe o mouse por cima do elemento que você deseja editar e clique no ícone do lápis.
Isso abrirá um menu lateral para editar o elemento.
Clique na caixa de texto “Descrição” para editar as informações
Depois disso, edite a caixa de “Link”
Se for um telefone: Coloque tel: antes do número, o número não pode ser traços ou parênteses. Exemplo: tel: 19912345678
Se for whatsapp: Coloque wa.me//55 antes do número, o número não pode ser traços ou parênteses e não deve ter um espaço entre a barra e o número. Exemplo: wa.me//5519912345678
Se for um e-mail: Coloque mailto: antes do e-mail e não deve ter um espaço entre os dois pontos e o e-mail. Exemplo: mailto:comercial@empresa.com.br
EDIÇÃO DE ÍCONES SOCIAIS
Para editar os ícones das redes sociais, role até a seção e passe com o mouse por cima dos ícones e clique no ícone do lápis para abrir o menu lateral de edição.
Abrindo o menu lateral, você terá novas opções de edição. Clicando em “ícones sociais” você poderá alterar as informações de cada item individualmente.
Clicando em “Forma” você poderá mudar o estilo dos ícones, em “Colunas” você pode mudar o número de colunas dos ícones e em “Alinhamento” você pode escolher o tipo de alinhamento dos ícones.
Clicando no item que deseja editar em “Ícones sociais”, novas opções de edição ficaram disponíveis.
Para excluir um ícone, clique no “X”
Para duplicar um ícone, clique no botão com o desenho de duas folhas de papel ao lado do “X”
Para fazer o ícone encaminhar para a sua rede social, cole o link do seu perfil daquela rede social na caixa de texto “Link”.
EDIÇÃO DE MENU
Para editar os botões do menu, volte para a tela de início do WordPress e clique em “Aparência” no menu lateral, isso abrirá mais opções, clique em “Menus”
Isso abrirá uma seção nova. Em “Selecionar um menu para editar” clique em “Menu Principal”.
Descendo um pouco, todos os botões do menu vão estar prontos para edição.
COMO EDITAR OS BOTÕES DO MENU
Clique no botão que você deseja editar. Nesse caso usaremos o botão “Serviços” para explicar a linkagem.
Em “URL” cole o link do seu site por completo. Você pode acessar o seu site no Google e copiar o link da barra superior.
Como que quero que o botão “Serviços” redirecione para a seção de serviços do site, eu coloco no final do link depois do / uma hashtag com o nome da seção do site. Nesse caso #servicos (evite usar ç ou acentos na hashtag).
Para ter certeza que o botão levará para a seção de Serviços, devemos checar se a seção de Serviços tem um ID de CSS. Basicamente estamos falando para o botão: “vá para a seção com esse nome” ou seja, a seção precisa ter o nome para o botão entender que ela é o destino.
Editando a página com “Editar com Elementor” e indo até a seção que queremos que o botão redirecione, clique na seção com o botão direito do mouse e clique “Editar Contêiner”
Indo para a seção “Avançado” e descendo, você vai encontrar “ID CSS”.
Aqui colocaremos o nome da seção, lembrando que deve ser o mesmo nome depois da hashtag no botão do menu. Nesse caso “servicos” sem o ç e sem a hashtag.
Salvando essas alterações, o botão levará para a seção correta.
CONCLUSÃO
Neste tutorial, você aprendeu como fazer algumas das edições e ajustes no seu site usando o Elementor Page Builder. Com esse conhecimento, fica mais fácil realizar correções sem complicação, mantendo tudo funcionando do jeito que você precisa. Agradecemos a sua atenção!
