Tutorial do elemento WordPress | Um guia passo a passo em 2024

Você deseja começar a usar o Elementor e está procurando um Tutorial do WordPress Elementor? Sua busca termina aqui. Neste artigo, irei informá-lo sobre tudo o que você precisa saber sobre o Elementor.

Desde a instalação até a criação de uma página com muito estilo, todas as suas dúvidas serão sanadas se você ler o artigo. Eu te asseguro; a leitura não será em vão!

Mas você precisa de um plugin de construção de sites para dar um toque profissional ao seu site.

Como você conseguiu isso? Bem, eu uso Elementor por isso. Elementor torna extremamente fácil para mim criar um site profissional com um simples recurso de arrastar e soltar. 

Curioso para saber mais sobre o Elementor, então confira meu detalhado Avaliação Elementor.

Como instalar o Elementor no WordPress

Bem, existem 2 maneiras de instalar o Elementor no WordPress. 

• Através do site oficial da Elementor

Acesse o site oficial da Elementor e clique no botão Download Grátis mostrado no site. 

Assim que você clicar no botão Download grátis, um pop-up aparecerá para se inscrever no site Elementor e, assim que você fizer o mesmo, o download do plugin começará automaticamente.

Você encontrará um arquivo zip baixado em seu laptop/PC. Agora vá para o painel do WordPress e clique na seção Plugins > Adicionar novo plug-in > Carregar plug-in

Escolha o arquivo Elementor e carregue-o no WordPress.

• Através do painel do WordPress

Você também pode instalar o plugin Elementor diretamente do painel do WordPress. Basta ir em Plugin e Adicionar Novo Plugin

No canto superior direito, você encontrará uma barra de pesquisa, digite Elementor na barra de pesquisa. O primeiro resultado é o que você precisa instalar no seu WordPress. Basta clicar em instalar e aguardar a instalação do plugin. Ative o plug-in e você terá um ótimo construtor de sites pronto para implantação.

Agora que você instalou o Elementor em seu painel do WordPress, vamos dar uma olhada nos recursos que ele oferece.

Recursos do Elementor e seu uso na construção de uma página da web

A lista de recursos que o Elementor oferece é interminável, então irei discutir muitos recursos vitais do Elementor. Certifique-se de lê-los e depois experimentá-los.

Existem dois planos para Elementor The Free e The Pro. Como o nome sugere para o plano Pro, você terá que jogar, mas também existem vários recursos que acompanham o plano gratuito.

Começarei discutindo primeiro os recursos do plano Gratuito, seguido do Pro.

Recursos do plano gratuito Elementor

Caracteristicas essenciais:

• Arrastar e soltar

O recurso de arrastar e soltar do Elementor é muito rápido e ajuda a tornar o design de páginas da web mais rápido. Desde a criação de um layout de página da web até o ajuste fino, tudo pode ser feito apenas arrastando e soltando.

Você não precisa alternar entre guias ou alterar a página para projetar seus cabeçalhos e rodapés. Com Elementor, você pode fazer isso na mesma página onde está sua página principal.

Você pode copiar e colar, até mesmo duplicar o estilo ou recurso que deseja usar. Isso economiza seu tempo para reconstruir o mesmo recurso repetidamente.

Com a opção da barra de pesquisa fornecida por Elementor, você pode navegar facilmente pelo site e acessar a guia desejada em segundos. Este recurso é realmente útil quando você tem uma página muito longa para construir.

Existem 3 opções para salvar seu design, desde excluir até fazer um backup. Você pode refazer/desfazer os designs que fez. Isso lhe dá a capacidade de fazer um teste A/B da página com suas observações. 

Você pode visitar todas as revisões na guia de revisão, ou seja, você pode dar uma olhada em todos os tipos de designs que experimentou até agora em sua página da web e selecionar uma versão anterior também se não gostar da sua página da web atual. 

Quer experimentar muitos recursos diferentes e ver o que está funcionando? Não há problema com Elementor; você pode projetar a página no modo rascunho, experimentar de tudo e pegar a página mais tarde, quando estiver totalmente pronto para publicá-la.

Como usar o recurso Elementor Drag and Drop

Todos os recursos de arrastar e soltar estão disponíveis no lado esquerdo da página assim que você cria uma página.

Após criar uma página no WordPress e dar um título a ela, basta clicar em editar com Elementor, que o levará ao editor live do Elementor, que se parece com a imagem abaixo.

Na segunda imagem acima, você pode ver as opções de arrastar e soltar no lado esquerdo da página. Existem muitos widgets que você só precisa rolar para baixo ou também pode pesquisar um widget com a ajuda da barra de pesquisa na parte superior.

• Modelos de design

Você obtém modelos de design integrados com Elementor. Não apenas 5 ou 10, mas o Elementor oferece mais de 100 modelos de design de uso gratuito e muito mais quando você atualiza para a versão Pro.

Como selecionar o template desejado para a biblioteca de templates Elementor

Ao abrir pela primeira vez a página do construtor Elementor, você verá algo do tipo mostrado abaixo:

A imagem foi retirada do site da Elementor e é bastante autoexplicativa.

Assim que clicar na opção Pasta, você verá um pop-up mostrado abaixo.

• Widgets

Os widgets de arrastar e soltar que vêm com o Elementor são incontáveis. Alguns deles são:

• Seção interna: vamos dividir uma seção em duas.
• Título: coloque este campo em sua página da web para inserir um título atraente
• Imagem: coloque imagens em sua página da web com a ajuda deste widget
• Editor de texto: insira texto em sua página da web com a ajuda de um widget de editor de texto
• Vídeo: você pode usar um widget de Vídeo para colocar vídeos de qualidade em sua página. Isso aumentará a experiência do usuário
• Botão: As frases de chamariz são muito importantes para quase todo o site, com botões você pode colocar as frases de chamariz na sua página e vinculá-las à landing page do seu produto.
• Classificação por estrelas: a classificação por estrelas é benéfica para qualquer site de comércio eletrônico avaliar vários produtos diferentes que ele tem a oferecer.
• Divisor: Ajuda sua página web no recuo e gera espaços em branco para aumentar a experiência do usuário.
• Ícones: Com o widget de ícones, você pode colocar ícones atraentes de mídias sociais, bem como de diversos serviços para tornar sua página mais atraente.
• Contador: crie uma contagem regressiva para seus produtos ou serviços adicionais limitados para criar urgência.
• Depoimentos: Adicione depoimentos sobre seus produtos e serviços para construir a confiança dos visitantes do seu site.

Além disso, existem muitos outros widgets, como carrossel de imagens, galeria básica, abas, códigos de acesso, HTML, barra de menu, etc. Certifique-se de observar todos os recursos após instalar o plugin no WordPress.

Dê uma olhada em alguns dos widgets que o Elementor possui abaixo na imagem.

Como usar widgets Elementor

Para usar widgets Elementor:

Vá para o painel do Elementor e olhe no lado esquerdo da página. Existem vários widgets que você pode arrastar e soltar em sua página da web e iniciar seu trabalho.

• Design e edição responsivos

Com a regra do índice mobile-first chegando ao centro das atenções, o Google garante que o site compatível com dispositivos móveis tenha uma classificação mais elevada no Google, e o mesmo acontece agora com outras SERPs. 

Com Elementor, você não precisa se preocupar com a compatibilidade com dispositivos móveis, pois todos os modelos, sejam gratuitos ou pagos, são responsivos a dispositivos móveis, bem como a tablets e desktops. Você também pode editar quais recursos seus usuários verão quando acessarem pelo celular ou desktop. 

Você pode proporcionar a eles experiências diferentes em ambos os dispositivos, embora essa prática não seja recomendada, pois às vezes pode criar confusão na mente dos usuários sobre a marca.

Como ver a capacidade de resposta móvel de suas páginas da web

Na parte inferior do construtor de páginas da web, no canto inferior esquerdo, você verá três ícones que oferecem a opção de ver sua página da web via desktop, tablet e celular. O site terá exatamente a mesma aparência para outros usuários depois que você publicar seu site.

Recursos de fluxo de trabalho:

• Nenhum requisito de codificação

Você não precisa ser um especialista ou saber um pouco sobre codificação ao usar Elementor. Todos os widgets mencionados acima são arrastados e soltos, e você pode facilmente criar uma página da web elegante e sofisticada com eles. 

O próprio Elementor cuida da parte de codificação. Além disso, o código utilizado é otimizado e encurtado para diminuir o tempo de carregamento da sua página - um fator muito importante para uma classificação no topo.

• Barra de navegação

Com a ajuda da navegação, você pode ver a estrutura que desenhou na página, ou seja, a sequência da sua página e o fluxo. Você também pode alterar, remover e duplicar os widgets, se desejar, por meio da barra do Navegador.

Como usar a barra de navegação

Para usar o Navigator, basta clicar com o botão direito no backend da sua página web aberta com Elementor e clicar em Navigator. Um pop-up aparecerá, conforme mostrado na imagem abaixo.

• Teclas de atalho

Teclas de atalho são teclas de atalho para o widget principal que está presente no painel do Elementor. Dê uma olhada na imagem para ver algumas das teclas de atalho predefinidas.

• Recurso de edição embutida

Com Elementor, você não precisa escrever seu conteúdo em outro lugar e copiar, colar e editar seu estilo. Você pode digitar diretamente no painel do WordPress com o estilo desejado e economizar seu valioso tempo.

Características de design

• Fontes globais

Com a ajuda do Elementor, você pode definir um estilo de fonte específico para todo o seu site com apenas um clique. Não importa se é um título, um parágrafo, uma citação ou mesmo um apelo à ação. 

• Cores globais

Da mesma forma, como a fonte Global está definida, você pode definir a cor de todo o texto do site como a mesma, se necessário.

• Gradientes de fundo

Com o recurso de cor gradiente, você pode iluminar o fundo definido para cada bloco e até mesmo para sua página inicial. Essas cores gradientes se aplicam a todas as páginas do seu site.

• Vídeos em segundo plano

Você pode usar vídeos como plano de fundo com Elementor. Vídeos em segundo plano podem realmente iluminar sua página da web.

Como usar recursos de design no Elementor

Todos os recursos mencionados acima podem ser facilmente encontrados no painel do Elementor, e você pode usá-los apenas clicando e testando o que fica bem em sua página da web.

• Outros Recursos
• Aplicar sobreposição de plano de fundo
• Coloque a apresentação de slides em segundo plano
• Crie uma tela para dar vida à sua página
• Faça uso de modos de mesclagem
• Filtros de estilo CSS
• Divisores de forma
• Sombra da caixa
• Ícones
• Exporte ícones SVG de outros sites

Recursos de layout

Você pode alterar o layout da página da web e otimizá-la para que tenha uma boa aparência com vários recursos que Elementor fornece, como largura e altura da seção, largura da coluna, lacuna e sua posição.

Você também pode ajustar as margens e o preenchimento, que é um recurso muito importante em uma página da web. 

Recursos do plano Elementor Pro

Essenciais

Além do recurso gratuito, o Elementor Pro tem mais 2 recursos a oferecer.

1. Construtor de pop-ups

Você pode criar pop-ups para inscrição, para uma oferta por tempo limitado, e também pop-ups de intenção de saída para aumentar suas vendas e tornar sua página mais atrativa.

O recurso, assim como outros widgets, está presente no dashboard do Elementor.

Com o Pop-up Builder, você pode criar os seguintes pop-ups:

• email Subscription
• Pop-ups do formulário de login
• Pop-ups de banner de promoção e vendas
• Captura leads (potencial cliente)
• Bloqueio de conteúdo e revelação de pop-ups
• Anúncios
• Sair da intenção
• Pop-ups do tipo Welcome Mat
• Produtos relacionados e upsells

2. Construtor de Temas

Com Elementor Pro, você tem controle total sobre todos os recursos que usa em seu site. Você pode criar as páginas 404 e direcionar seus usuários para a página de sua escolha. 

Você pode gerenciar o cabeçalho e o rodapé na mesma página em que está criando. Com a poderosa integração WooCommerce, você também pode otimizar suas páginas de produtos.

Características de design

1. CSS customizado

Com cada widget adicionado, você pode adicionar um snippet CSS personalizado para tornar o conteúdo mais personalizado e atraente. Mas para usar esse recurso, você deve ter um conhecimento razoável de CSS. 

Usá-lo sem qualquer conhecimento prévio também pode prejudicar. Portanto, se você não possui o conjunto de habilidades, é melhor ficar longe do recurso CSS personalizado.

2. Efeitos de movimento

Você pode adicionar ótimas animações e dar ao seu site um tipo de desenho animado. Isso ajuda a atrair um público-alvo específico e às vezes pode ser muito benéfico. 

Como usar o recurso de design no Elementor

Bem, não é ciência de foguetes. Como outros widgets, você pode rolar o painel do painel e procurá-los ou apenas digitar o nome do widget no painel de pesquisa.

Marketing

Esses recursos são os que estão ausentes na versão gratuita do Elementor.

• Widget de formulário

Com o construtor de formulários Elementor, você pode fazer várias alterações e tornar seus formulários interessantes e atraentes de preencher.

• Escolha o layout e o espaçamento desejados com bastante facilidade.
• Mais de 10 campos para escolher, que você deseja em seu formulário.
• Escolha entre diversas cores e tipografias que combinem com o design e o esquema de cores da página da web.
• Você também pode criar formulários dinâmicos
• Se você precisar de um formulário longo com o construtor de formulários Elementor, você pode construí-lo e dividi-lo em várias etapas para que os usuários o preencham de maneira fácil.

• Widget de carrossel de testemunho

• Você pode usar os modelos pré-concebidos que vêm com a versão Pro do Elementor e fazer um carrossel de depoimentos impressionante para sua empresa obter mais conversões.
• Alinhe o conteúdo e o layout do carrossel. Tenha controle total sobre a aparência e o alinhamento do carrossel.
• Os modelos de personalização fornecidos no Elementor Pro são fáceis de usar e oferecem uma experiência amigável tanto para quem o constrói quanto para quem o vê.

Como usar o widget carrossel de depoimentos no Elementor Pro

• Procure por Testimonial Slider na barra de pesquisa do painel. Abra o widget e você poderá começar criando o controle deslizante imediatamente. Existem duas skins para escolher: a padrão e a bolha. Escolha o que você precisa de acordo com o estilo.
• Alinhe e finalize o layout dos seus depoimentos, o que pode ser feito através de 5 opções: Imagem inline, imagem empilhada, imagem acima, imagem à esquerda e imagem à direita.
• Escolha o estilo e design de acordo com seu esquema de cores e adicione conteúdo ao controle deslizante.
• Você pode reproduzir automaticamente os slides no controle deslizante, pausá-lo quando os usuários clicarem nele ou definir um horário específico na opção de mudança de slide. Prefiro usar a pausa na opção de interação para meus controles deslizantes de depoimento.
• Links de ação

Você pode conectar seu site ao WhatsApp, Google Calendar e muitos outros aplicativos com Elementor Pro.

Como usar links de ação no Elementor Pro

• Vou ao Elementor painel e pesquise campos de link, que é um dos widgets Pro que a Elementor possui.
• Escolha a opção dinâmica que está disponível no canto superior direito do pop-up do widget.
• Escolha o URL de contato na opção de ação.
• Adicione todos os detalhes solicitados pelo widget e você estará pronto para integrar sua plataforma de contato ao seu site.

Recurso Theme Builder

• Conteúdo Dinâmico
• Utilize uma integração impecável para criar uma página web dinâmica.
• Você pode adicionar cores dinâmicas, imagens, até logotipos de sites e muito mais à sua página.
• O melhor é que você pode salvar o layout do conteúdo dinâmico que criou e utilizá-lo em qualquer lugar do site.

Como usar conteúdo dinâmico com Elementor Pro

Estarei mostrando o exemplo de utilização de um editor de texto e dinamização do conteúdo. Certifique-se de ver todos os outros widgets e experimentá-los.

1. Abra um editor de texto e digite o texto que deseja em sua página web. Agora clique no ícone no canto superior direito do editor, conforme imagem abaixo.
2. Ao clicar no ícone, você verá uma lista de opções que aparecem em um menu suspenso. Eles são classificados em postagem, arquivo e site. Escolha a opção desejada e comece seu trabalho imediatamente.
3. Agora para editar ainda mais o título da sua página, você deve clicar em um ícone, que é uma chave inglesa, conforme mostrado na imagem abaixo.

Nas caixas exibidas na imagem acima, ou seja, antes, depois e fallback, é necessário colocar o título antes da alteração, um título que deverá ser após a alteração e um conteúdo consistente que será exibido no lugar do conteúdo dinâmico quando não há antes e depois do título.

Outros recursos do construtor de temas no Elementor Pro

• Condição de exibição: você pode decidir o que mostrar e onde mostrar
• Cabeçalho e rodapé: simplesmente arrastando e soltando, você pode personalizar o cabeçalho e rodapé da sua página da web
• Cabeçalho fixo: adicione um cabeçalho fixo a páginas específicas ou para todo o seu site globalmente.
• Página 404: crie uma página 404 personalizada e redirecione seus usuários e público para a página desejada.

Conteúdo do tema

• Widget da barra do menu de navegação

• Existem muitas opções de estilo que você pode escolher para sua barra de navegação.
• Esses estilos respondem a todos os dispositivos e você pode vê-los na versão mobile e fazer as alterações necessárias, se necessário.
• Você pode animar sua barra de navegação com efeitos de animação e foco. Isso realmente ilumina sua página.
• Você pode escolher como posicionar o menu, ou seja, horizontalmente, verticalmente, visualizá-lo em tela cheia, talvez tentar a opção hambúrguer.

Como usar o widget da barra do menu de navegação

1. Vá para o painel e procure a barra de menu
2. Você pode definir seu menu como horizontal, vertical ou suspenso de acordo com o estilo que combina com seu site.
3. Você também pode adicionar linhas simples e duplas abaixo de cada conteúdo do menu para destacar e até mesmo alterar a cor do texto por meio do painel.

• Widget de pesquisa

O widget de pesquisa vem com três skins: o widget de pesquisa padrão, mínimo e em tela inteira.

Você pode ajustar o design da barra de pesquisa, bem como o botão, para combinar com o estilo da sua página da web.

Como usar a barra de pesquisa com Elementor Pro

Vá para o painel do Elementor e procure o widget da barra de pesquisa, escolha o estilo desejado, padrão, tela inteira ou mínimo e altere a tipografia e as cores da barra de pesquisa para combinar com seu tema de cores.

• Outros recursos de conteúdo temático que você obtém com Elementor Pro

• Widget de postagem: modifique a aparência da barra lateral colocando suas postagens recentes lá.
• Widget de comentários do WordPress: Com este widget, os leitores podem comentar sobre a postagem que você escreveu.
• Widget de portfólio: se você tiver muitos portfólios para exibir, use este widget de portfólio para exibi-los em um estilo inovador e atraente.

Todos esses recursos estão disponíveis no painel principal do Elementor, semelhante a outros widgets. Certifique-se de dar uma olhada em todos esses recursos.

Preços Elementor Pro

comentário do usuário 

Links Rápidos:

• Tutorial Elementor Pro
• MELHORES COMPLEMENTOS DE ELEMENTO
• Âncora do menu Elementor
• Duda x Elementor

Perguntas frequentes sobre o tutorial do WordPress Elementor

Leia também:

• Beaver Builder vs Divi
• Beaver Builder vs Elementor

Conclusão: Tutorial do WordPress Elementor 2024

Um dos principais softwares de design de páginas da web, Elementor, é uma plataforma confiável e vívida para construir seu site. Desde a criação de uma página de blog básica até a criação de uma landing page de produto elegante e de tirar o fôlego, tudo pode ser feito com Elementor.

A versão Pro do Elementor possui infinitos recursos para trabalhar e levar seu site a um novo nível. Dá a você a liberdade de ter controle total do seu site também.

Você não precisa ser um programador para usar o Elementor. Usar o Elementor é tão simples quanto aprender como clicar, arrastar e soltar recursos.

Sim, leva um pouco de tempo para ver todos os recursos e saber quais recursos são úteis para o seu site, mas o tempo que você dedicar ao Elementor valerá a pena, posso garantir.

Então, experimente o Elementor e conte-me sua experiência comentando abaixo! 

Elementor Vídeos populares

Elementor nas redes sociais

Cúpula do Construtor de Páginas 2021 (@summit_camp) começa amanhã! Obtenha seu ingresso GRATUITO e converse com mais de 35 especialistas do setor, incluindo @bpines1 . Estou entusiasmado por patrocinar este grande evento. Vejo você lá! 💻🎉https://t.co/gDtFpUJLBH

- Elementor (@elemntor) 9 de maio de 2021

Passe para o lado e dê as boas-vindas à nossa Vitrine de Abril de 2021. 🏆🌷 Este mês aplaudimos 10 agências de design de todo o mundo. Esta coleção diversificada representa o talento de criação web da Elementor em todo o mundo. 🌎 https://t.co/bwwOUDQCuu

- Elementor (@elemntor) 19 de maio de 2021