Como usar o Elementor no WordPress? Guia completo

Para ajudar você a aprender mais sobre o Elementor e por que ele é o construtor de sites e plugin de construção de páginas WordPress mais popular no WordPress.org, criamos esta introdução que abordará tudo o que você precisa saber sobre o que é o Elementor e como ele ajuda você a criar melhores sites WordPress.

O que é Elementor para WordPress?

O Elementor é o melhor e mais gratuito editor de arrastar e soltar do WordPress , que permite que você crie lindos sites WordPress da maneira mais fácil e rápida possível.

O editor padrão do WordPress é bom para postagens de blog simples, mas não oferece muitas opções de design e você não consegue ver como seu design realmente ficará até clicar no botão de visualização.

O Elementor corrige isso dando a você flexibilidade total de design de arrastar e soltar com um construtor visual ao vivo – sem necessidade de conhecimento de CSS ou HTML. Ao criar um design, você verá seu design exatamente como seus visitantes verão, o que facilita o ajuste rápido do seu design conforme necessário.

O Elementor oferece inúmeras opções de design e dezenas de widgets de conteúdo pré-criados para tudo, desde botões a formulários, controles deslizantes, tabelas de preços e muito mais.

Além de criar postagens e páginas individuais, você também pode usar o Elementor para criar todo o seu tema WordPress, incluindo seu cabeçalho, rodapé e tudo o mais.

Como funciona o construtor de páginas Elementor?

O Elementor é um criador visual de sites WordPress que substitui o editor básico do WordPress por um editor de front-end ativo, para que você possa criar layouts complexos visualmente e projetar seu site ao vivo, sem precisar alternar entre o editor e o modo de visualização.

Com o Elementor, você pode criar designs bonitos e funcionais sem precisar usar código ou CSS, e sem depender de desenvolvedores para ajudar. Os designs que você cria são responsivos por padrão, o que significa que eles ficarão ótimos automaticamente em desktops, tablets e dispositivos móveis.

A interface do usuário é intuitiva e amigável para iniciantes, então você pode estar pronto e funcionando em minutos. Você pode inserir um das centenas de modelos projetados profissionalmente para economizar tempo e então personalizá-lo facilmente usando controles simples.

O melhor de tudo é que construímos a interface do Elementor com as últimas tecnologias para que ela ofereça uma experiência de design rápida e sem atrasos. Isso significa que você pode criar designs mais rápido e não será prejudicado por atrasos ou falhas.

Quanto custa o Elementor?

O plugin principal Elementor é 100% gratuito e está disponível no WordPress.org.

Se você quiser adicionar mais recursos e capacidades avançadas, você pode estender o plugin de núcleo gratuito comprando o Elementor Pro, que começa em apenas $49 para uso em um único site.

Vamos falar sobre as principais diferenças entre o Elementor gratuito e o Pro e qual versão é a melhor para você.

Elementor Versão Gratuita

Com apenas a versão gratuita do Elementor, você já terá acesso ao editor visual de arrastar e soltar e a uma ampla seleção de widgets e opções de estilo que você pode usar para criar seu conteúdo.

Você pode usá-lo para criar postagens e páginas de blog individuais – tudo o que você precisa fazer é iniciar o editor Elementor quando estiver editando uma postagem ou página.

Em geral, você pode se contentar com a versão gratuita do Elementor se quiser apenas criar algumas landing pages básicas ou adicionar algum estilo às suas postagens de blog.

No entanto, se você quiser usar o Elementor para criar todo o seu site, provavelmente vai querer os novos e poderosos recursos, opções de design e modelos do Elementor Pro.

Elementor Pro

O Elementor Pro aproveita os recursos da versão gratuita para criar uma ferramenta mais poderosa para web designers e profissionais.

Com o Elementor Theme Builder, você poderá criar seu tema inteiro usando a interface do Elementor, incluindo seu cabeçalho, rodapé, modelos de postagem de blog, páginas 404 e muito mais. Você também pode criar configurações globais que permitem controlar facilmente a paleta de design para todo o seu site.

Se você tem uma loja WooCommerce, o Elementor WooCommerce Builder oferece a mesma flexibilidade para sua loja e modelos de produtos individuais.

E além de criar seu tema, você também pode usar o Elementor Popup Builder para criar qualquer tipo de pop-up que você pode direcionar e acionar de acordo com suas necessidades.

Além de permitir que você use o Elementor para projetar todos os aspectos do seu site, o Elementor Pro também dá acesso a novos recursos poderosos que você pode usar em todos os seus designs. Aqui estão algumas das maiores adições:

• Um construtor de formulários visuais .
• Muitos novos widgets, incluindo controles deslizantes, listas de postagens, portfólios, tabelas de preços e muito mais.
• Novas opções de design, incluindo efeitos de rolagem e posicionamento personalizado.
• Suporte para conteúdo dinâmico de plugins como Advanced Custom Fields, Toolset e Pods .

Por fim, você também terá acesso a vários novos modelos pré-criados para ajudar você a economizar tempo.

Como instalar o Elementor

A versão gratuita do Elementor está disponível no WordPress.org, para que você possa instalá-lo diretamente do seu painel do WordPress.

Para começar, vá para Plugins → Adicionar novo e procure por “Elementor”. Então, clique no botão para instalar o plugin e ative-o após o término do processo de instalação.

Depois de ativar o Elementor, você verá um novo botão Editar com Elementor ao abrir o editor de uma postagem ou página. Mostraremos como usá-lo na próxima seção.

Se você quiser adicionar o Elementor Pro para acessar recursos de design ainda mais poderosos, primeiro precisará comprar uma cópia do Elementor Pro . Depois de concluir sua compra, você pode baixar uma cópia do Elementor Pro do seu painel do Elementor clicando em Download Zip .

Em seguida, vá para Plugins → Adicionar novo → Carregar plugin no seu painel do WordPress e carregue o arquivo Zip que você baixou do painel do Elementor. Assim que o upload for concluído, certifique-se de ativar o Elementor Pro.

Para finalizar e ativar todos os recursos premium, vá para Elementor → Licença no seu painel do WordPress para ativar sua licença Elementor Pro no seu site:

Como usar o Elementor no WordPress

Agora que você instalou o Elementor, vamos falar sobre como você pode usá-lo para criar seu primeiro design e construir seu site.

Para começar, crie uma nova postagem ou página e clique no botão Editar com Elementor para iniciar o editor Elementor.

Agora você deve ver uma prévia ao vivo do seu design à direita, junto com a barra lateral do Elementor à esquerda.

Para economizar tempo, você pode inserir um modelo pré-fabricado clicando no ícone da biblioteca:

Depois de adicionar o modelo, deixe a tela da sua página em largura total clicando no ícone de engrenagem no canto inferior direito para abrir a área de configurações da página e selecionando Elementor ou Largura total no menu suspenso Layout da página .

Agora, você está pronto para começar a editar. Primeiro, você vai querer entender a estrutura básica do Elementor. Um design Elementor é composto de três partes principais:

• Seções – dividem a página em linhas horizontais.

• Colunas – elas ficam dentro das seções e permitem que você divida a seção em colunas verticais.

• Widgets – são o que você usa para realmente adicionar conteúdo. Você pode colocar seus widgets dentro de uma coluna (e então a coluna fica dentro da seção).

Para adicionar um novo widget ao seu template, basta arrastá-lo da barra lateral. Se você quiser excluir um widget existente, basta clicar com o botão direito nele e selecionar Delete :

Para alterar as configurações e o design de um widget, coluna ou seção, tudo o que você precisa fazer é selecioná-lo para abrir suas configurações na barra lateral:

Como usar recursos avançados no Elementor

Agora que você sabe como o básico funciona no Elementor, vamos falar sobre alguns dos recursos mais avançados que você pode usar para criar sites ainda melhores com o Elementor Pro.

Widget de formulário

O widget de formulário do Elementor é um construtor de formulários flexível que pode ajudar você a eliminar a necessidade de usar um plugin de formulário separado .

Você pode usá-lo para formulários de contato, formulários de geração de leads que se conectam ao seu serviço de marketing por e-mail ou CRM favorito e muito mais.

Você poderá visualizar os envios do seu formulário diretamente no painel do WordPress e também poderá configurar notificações de e-mail personalizadas e mensagens de confirmação, se necessário.

Para criar seu primeiro formulário, basta adicionar o widget Formulário a qualquer design do Elementor:

Integrações

As integrações integradas do Elementor ajudam você a aprimorar seu site conectando-se a outras ferramentas de terceiros que você está usando.

Graças às integrações integradas, você pode conectar facilmente o widget Form a serviços como Mailchimp e HubSpot. Você também obtém uma integração Zapier para que possa se conectar a milhares de aplicativos no Zapier.

Além dessas ferramentas de marketing, o Elementor também se integra a vários outros plugins, redes sociais e serviços.

Para configurar integrações, vá para Elementor → Configurações → Integrações :

Construtor de Temas

O Elementor Theme Builder permite que você pegue o editor visual do Elementor e o use para projetar todo o seu site. Mais especificamente, você pode criar arquivos de modelo para diferentes partes do seu site, incluindo:

• Cabeçalho e rodapé
• Único (por exemplo, o modelo que todas ou algumas das suas postagens de blog usam)
• Arquivo (por exemplo, a página que lista suas postagens de blog)

Basicamente, você não precisa mais de um tema porque o Elementor permite que você controle cada parte do seu design. Ele atua como uma tela de base leve sobre a qual você pode projetar seu site usando o Elementor Theme Builder.

Para sites WordPress personalizados mais avançados , o Elementor também permite que você insira conteúdo dinâmico de campos personalizados que você adicionou com plugins como Campos Personalizados Avançados .

Para começar a usar seu primeiro modelo do Theme Builder, vá para Modelos → Theme Builder .

Configurações globais

O recurso Configurações Globais do Elementor Pro ajuda você a criar e gerenciar o sistema de design do seu próprio site para que você possa garantir consistência em todo o site e acelerar seus fluxos de trabalho.

Basicamente, o recurso Configurações Globais oferece uma área onde você pode definir as cores do seu site, tipografia , botões, configurações de imagem, campos de formulário e muito mais.

Sempre que você criar um novo design, ele herdará automaticamente suas configurações de suas Configurações Globais. E se você alterar algo em Configurações Globais, essa alteração será aplicada automaticamente em todo o seu site.

Claro, você nunca está preso – você sempre tem a opção de personalizar completamente um design página por página. Mas com as Configurações Globais, você pode garantir que seus designs padrão tenham exatamente a aparência que você quer e sejam consistentes em todo o seu site.

Para acessar as Configurações Globais, clique no menu de hambúrguer no canto superior esquerdo da barra lateral do Elementor enquanto trabalha no editor e selecione Configurações do Site :

Construtor de pop-ups

Popups podem ser incrivelmente úteis para marketing, navegação, experiência do usuário e muito mais. Com o Elementor Pro, você pode pular o plugin de popup separado graças ao Elementor Popup Builder .

Usando o editor visual de arrastar e soltar do Elementor, você poderá criar:

• Pop-ups de caixa de luz
• Barras de notificação
• Preenchimentos de tela cheia
• Slide-ins
• Etc.

Você terá controle total sobre a tela e o posicionamento do seu pop-up e poderá usar todos os widgets do Elementor em seus designs.

Quer criar um pop-up de captura de e-mail ? Basta adicionar o widget Form e conectá-lo ao seu serviço de marketing por e-mail. Quer criar um pop-up de formulário de login ? Basta adicionar o widget Login. Quer criar um anúncio? Basta adicionar algum texto e talvez um botão.

Depois de terminar o design, você pode usar regras de segmentação para controlar onde exibir seu pop-up e quem deve vê-lo. Além disso, você ainda terá regras de gatilho avançadas, incluindo intenção de saída.

Para criar seu primeiro pop-up, vá para Templates → Popups no seu painel do WordPress e comece a construir. Você pode criar seus pop-ups do zero ou escolher entre dezenas de templates pré-construídos:

Construtor WooCommerce

Se você estiver criando uma loja de comércio eletrônico com tecnologia WooCommerce, o Elementor WooCommerce Builder permite que você aproveite todos os excelentes recursos que viu acima e os aplique à sua loja WooCommerce.

Você poderá usar a interface de arrastar e soltar do Elementor para criar modelos de páginas de produtos individuais e páginas de arquivo da sua loja (as páginas que listam todos os seus produtos ou os produtos de uma determinada categoria).

Além de criar os modelos da sua loja, você também terá widgets WooCommerce dedicados que podem ser usados ​​para inserir conteúdo WooCommerce em qualquer lugar do seu site.

Perguntas frequentes sobre o Elementor

Para finalizar, vamos abordar algumas perguntas comuns que você pode ter sobre o Elementor.

Posso usar o Elementor com qualquer tema?

Sim – Elementor funciona com praticamente todos os temas WordPress.

O Yoast SEO funciona com o Elementor?

Sim – O Elementor funciona bem com o plugin Yoast SEO, sem necessidade de nenhuma configuração adicional. O Yoast SEO será capaz de analisar automaticamente o conteúdo em seus widgets Elementor, o que significa que você ainda pode se beneficiar dos recursos de análise de palavras-chave de foco do Yoast SEO.

Além disso, o Elementor tem uma integração dedicada com o Yoast SEO para que você possa acessar todas as suas configurações de SEO de dentro do editor do Elementor. Ou seja, sem sair do Elementor, você poderá configurar títulos e descrições de SEO, analisar palavras-chave e muito mais.

Por fim, o Elementor Pro também tem um widget especial Yoast SEO Breadcrumbs que você pode usar para incluir breadcrumbs em seus designs.

O Elementor é bom para SEO?

Sim. Primeiro, o Elementor permite todo o mesmo SEO básico na página que você obteria com o editor padrão do WordPress, então não há diferença quando se trata de táticas básicas de SEO.

Mas além de detalhes básicos como títulos de SEO e meta descrições, o Elementor pode ter um impacto positivo no SEO do seu site, ajudando você a criar designs mais amigáveis ​​e envolventes. Isso pode ajudar com métricas como tempo no site e taxa de rejeição, que o Google considera em suas classificações de pesquisa.

O que são os kits de modelos Elementor?

Os kits de modelos Elementor são conjuntos temáticos de modelos que ajudam você a construir rapidamente um site completo. Por exemplo, em vez de oferecer apenas um único modelo para uma landing page , um kit de modelo ofereceria vários modelos cobrindo páginas diferentes como:

• Página inicial
• Sobre a página
• Página de contato
• Etc.

O Elementor funciona com outros plugins do WordPress?

Bem, depende do plugin específico. Mas, em geral, a resposta é sim – Elementor funcionará com a maioria dos outros plugins que você estiver usando.

Há algumas maneiras de usar o Elementor com outros plugins.

O primeiro é algum tipo de integração interna, seja porque o Elementor tem integração interna para esse plugin ou porque os desenvolvedores do plugin construíram sua própria integração Elementor. Como o Elementor cresceu e se tornou tão popular, muitos desenvolvedores de plugins criaram suas próprias integrações para o Elementor.

Por exemplo, o MemberPress inclui uma integração Elementor integrada para sites de membros , o Tutor LMS fornece integração integrada para cursos online, o TranslatePress oferece suporte ao Elementor para sites multilíngues e muito mais.

A segunda maneira de usar o Elementor com outros plugins é por meio de recursos regulares do WordPress, como shortcodes. Por exemplo, digamos que um plugin fornece um shortcode que você deseja incluir em um design do Elementor. Bem, tudo o que você precisa fazer é colar esse shortcode no widget Shortcode do Elementor .

O Elementor incluirá o conteúdo desse shortcode no seu design, e você poderá até mesmo visualizar como ficará o conteúdo do shortcode do front-end enquanto trabalha no editor do Elementor.

Então, embora dependa do plugin, o Elementor deve funcionar com a grande maioria dos plugins que você esteja usando.

Comece a usar o Elementor hoje mesmo

Se você estiver pronto para começar a usar o Elementor no seu site WordPress, instale a versão gratuita do WordPress.org hoje mesmo .

A versão gratuita dá acesso ao editor visual do Elementor, que lhe mostrará como é mais fácil criar designs com o Elementor.

Depois que você pegar o jeito, compre o Elementor Pro para estender a versão gratuita com novas e poderosas ferramentas de criação de sites, como:

• O widget de formulário e todas as suas integrações
• Construtor de Temas
• Construtor de pop-ups
• Construtor WooCommerce
• Configurações globais
• …muito mais!

Comece hoje mesmo e experimente a melhor maneira de criar um site WordPress.