Como criar uma página de destino com Elementor e PowerPack

O WordPress tornou mais fácil para todos construir sua presença online, seja um blog ou um site de negócios ou um ERP complexo. Os temas e plug-ins do WordPress tornam ainda mais fácil para os usuários construir seus sites sem se preocupar em contratar um especialista. Os plug-ins do Construtor de páginas desempenharam um papel vital na transformação da maneira como os sites são criados com o WordPress. Elementor é um popular plugin de criação de páginas.

Se você é um web designer e deseja dar vida aos seus designs sem ter que se preocupar com o código, você pode usar o Elementor. Mas e se você for um desenvolvedor? Bem, se você é um desenvolvedor, também pode usar o Elementor por causa de sua funcionalidade amigável ao desenvolvedor e fácil de estender a API.

Neste post, você aprenderá mais sobre o Elementor e como você pode usá-lo com addons do Elementor para construir sites, landing pages, popups, rapidamente.

O que é Elementor?

Elementor é um popular plugin do Construtor de Páginas para WordPress. Elementor fornece blocos de conteúdo prontos para uso chamados Widgets junto com elementos estruturais básicos como seções e colunas.

Você pode arrastar e soltar esses widgets em qualquer página do seu site WordPress e construir um layout personalizado de acordo com suas necessidades.

Elementor Pro vem com mais de 60 widgets e muitos modelos pré-concebidos que você pode usar para criar qualquer página.

Características do Elementor

O Elementor vem com vários recursos e funcionalidades que podem tornar o desenvolvimento do seu site mais confortável e rápido. Vamos ver todos os recursos impressionantes do Elementor que o fazem valer a pena.

Rápido e fácil de usar

Elementor é otimizado para desempenho. Mesmo se você for um usuário novato, você achará muito fácil usar e navegar sem esforço no Elementor. Você nunca sentirá o Elementor arrastando você de volta em seu processo de design e apenas tornará as coisas mais rápidas e fáceis para você.

Embora o Elementor seja extremamente rápido, você pode obter mais do Elementor ao usar a hospedagem do Cloudways Elementor. O CW tem tudo a ver com desempenho e fornece super controle sobre o funcionamento do servidor. Quando se trata de segurança, Cloudways oferece servidores realmente confiáveis ​​e seguros regidos por suas práticas de segurança proativas para manter seus servidores seguros e protegidos. O número de recursos que vêm com o Cloudways é algo difícil de encontrar na indústria hoje.

Modelos de página pré-concebidos

Com o Elementor, você obtém muitos modelos pré-concebidos que pode usar para criar uma página da web com um único clique. Existem modelos para quase todas as categorias de página da web, como página de destino, página sobre, etc. e podem tornar o processo de design do site muito mais rápido.

Se você não conseguir encontrar um bom modelo na Biblioteca do Elementor, você pode verificar os modelos do Elementor de terceiros. Com uma comunidade próspera de designers e desenvolvedores, é fácil levar o Elementor para o próximo nível.

Carregado com Widgets

As versões gratuita e Pro do Elementor vêm com widgets carregados de recursos. De widgets de conteúdo simples como cabeçalhos, editor de texto, botões e widgets avançados como grade de postagens, formulário de login, WooCommerce, compartilhamento social, você obtém muitas funcionalidades com o Elementor.

Se você deseja ter mais poder quando se trata de widgets, você pode experimentar addons Elementor de terceiros. Recomendamos usar PowerPack para Elementor. É um complemento líder para Elementor e desenvolvido pela mesma equipe por trás do popular complemento PowerPack Beaver Builder.

Construtor Elementor Pop up

O construtor Popups é uma das últimas adições ao construtor Elementor. O recurso de criador de pop-up elimina a necessidade de usar um plug-in de criador de pop-up de terceiros em seu site. Você pode usar o Elementor para criar pop-ups impressionantes com regras e funcionalidades avançadas de segmentação.

Você pode criar formulários de login, tapetes de tela inteira, pop-ups de desconto e tudo o mais com o recurso de criação de pop-up.

Configurações globais

Quando você constrói um site, é importante ter configurações de cores consistentes, tipografia, etc. Você pode personalizar as cores, fontes e até mesmo o seletor de cores antecipadamente para facilitar o processo de design com configurações globais no Elementor.

Crie partes do tema como cabeçalho, rodapé, arquivos, etc.

Com o Elementor, seu design não se limita apenas à área de conteúdo de uma página . Você pode criar um cabeçalho personalizado, rodapé, barra lateral e quase todas as partes do site sem ter que se preocupar em escrever o código. Tudo isso pode ser facilmente criado usando a funcionalidade Theme Builder no Elementor Pro.

Conteúdo Dinâmico

Com a funcionalidade de Conteúdo Dinâmico no Elementor Pro, você pode exibir Dados / Conteúdo Dinâmico de campos personalizados do WordPress, ACF, Toolset, Pods, MetaBox ou qualquer outro plugin de campos personalizados. Você pode usar os dados de campos personalizados e exibi-los com widgets Elementor em qualquer parte do seu site. Você pode aprender mais sobre conteúdo dinâmico aqui.

Versão Lite e Pro

Embora o Elementor tenha muito a oferecer, não é necessário que os usuários paguem muito para ter acesso a ele. Na verdade, o Elementor tem duas versões, Lite e Pro. Você pode obter acesso a vários recursos do Elementor na própria versão lite. Ambas as versões têm seus próprios recursos a oferecer. Aqui está uma comparação detalhada de Elementor Lite e Pro que pode ajudá-lo a tomar uma decisão.

PowerPack para Elementor

Elementor definitivamente é o pacote completo. A única ferramenta de que você precisa para começar a projetar páginas da web com um ângulo mínimo de aprendizado.

Pode haver momentos em que você se sinta um pouco restrito ao usar o Elementor. Para isso, complementos de terceiros bem codificados, como o complemento PowerPack Elementor, vêm em nosso socorro. Este add-on é um dos melhores em sua categoria e oferece widgets excelentes e impressionantes com muitas opções de personalização para os usuários.

Atualmente, existem mais de 50 widgets na versão Pro do PowerPack, e a equipe continua adicionando novos widgets, o que o torna uma ótima escolha entre os complementos do Elementor.

O PowerPack é desenvolvido por uma equipe de desenvolvedores e designers especialistas em WordPress com o desempenho em mente. O plugin é bem codificado e atualizado regularmente para compatibilidade com as versões mais recentes do Elementor e WordPress

Vamos ver como você pode usar o Elementor e o complemento PowerPack juntos para criar páginas da web fantásticas.

Criação de uma página de destino

Neste tutorial, você aprenderá como criar uma página de destino rápida com o addon Elementor e PowerPack Elementor. É fácil começar a usar o Elementor , tudo graças à interface amigável.

Certifique-se de ter o Elementor e o PowerPack instalados em seu site. Você pode obter as versões gratuitas nos links abaixo:

1. Elementor
2. PowerPack Lite para Elementor

Criando uma página com Elementor

Entre no seu painel de administração do WordPress e clique na opção Adicionar novo em Páginas . Agora dê um título / nome à sua página e clique no botão Editar com Elementor .

Neste tutorial, estamos criando uma landing page para uma Pizzeria, então nomearemos nossa página de acordo. Aqui está como nosso resultado final deve ser:

Vamos começar com a primeira seção . Antes de fazermos isso, altere o layout para Elementor Canvas clicando no pequeno ícone de configurações no canto inferior esquerdo do editor.

Etapa 1: Seção Hero

A seção do herói é composta por uma imagem de fundo, dois widgets de títulos e um botão CTA.

Primeiro, clique no ícone de adição e adicione uma estrutura de coluna única a partir das opções. Agora vá para as configurações de seção e ative a opção de seção esticada e defina o preenchimento inferior e superior para 250 na guia avançada.

Agora, você pode selecionar a imagem desejada para o plano de fundo na guia de estilo> tipo de plano de fundo> Clássico e escolher a imagem na exibição de mídia.

Temos o fundo pronto. Agora vamos adicionar os títulos e o botão à nossa seção de heróis.

Arraste e solte o widget Dual Heading na página e altere o texto respectivamente. Agora, certifique-se de dividir o primeiro e o segundo título de acordo para enfatizar mais o preço, como fizemos na imagem abaixo. Altere a tipografia para ambas as partes do título.

Existem muitas outras alterações que você pode fazer para tornar o título de seu herói da maneira que desejar.

Depois de fazer as alterações, arraste e solte outro widget Título abaixo do título duplo e altere as configurações de texto e tipografia conforme necessário. Aqui, alterei o tamanho do texto para 90 , a fonte para Elsie e o peso da fonte para 600 .

Agora vamos adicionar o botão CTA .

Arraste e solte o widget Botão Elementor na seção logo abaixo do widget Título. Agora começaremos a alterar as configurações do botão.

Aqui estão as alterações que fiz no botão:

• Texto alterado para Peça agora!
• Botão alinhado ao centro.
• Adicionado o link CTA
• Tipografia alterada para Elise; 24; 600 para fonte, tamanho e peso, respectivamente.
• Alterou a cor de fundo para vermelho ( # ff0000 ) e a cor da fonte para branco ( # ff0000 ).
• Adicionado preenchimento 18, 40, 18, 40 para superior, direito, inferior, esquerdo, respectivamente.

Depois de fazer as alterações, é assim que a seção do herói se parece.

Etapa 2: A seção Sobre

Agora vamos trabalhar na seção Sobre, vá em frente e adicione uma estrutura de duas colunas à página clicando no ícone “+”.

Agora, pretendemos criar um layout semelhante a este, portanto, adicionaremos um widget de título, um widget de editor de texto e o widget Depoimentos na coluna esquerda. Na coluna direita, adicionaremos um widget Título, um widget Texto e um widget Botão.

Simplesmente comece a arrastar e soltar os widgets na seção e alterá-los para que se pareçam com os da imagem fornecida acima. Adicione o título e altere a tipografia do mesmo.

Aqui está como será:

Agora adicione o editor de texto abaixo do título na coluna da esquerda e altere a tipografia para a mesma exibida abaixo.

Agora iremos adicionar o widget Testimonial Carousel abaixo do widget do editor de texto. Adicione os “Itens” ou Testemunhos para mostrar no seu site. Você também pode usar o widget Testemunhos do PowerPack, que oferece muito mais poder de personalização.

Assim que terminar de fazer as alterações, a coluna esquerda da seção Sobre deve ficar assim.

Agora, para a coluna certa , adicione o fundo para adicionar um pouco de contraste à seção.

Agora crie uma duplicata do título que fizemos na coluna da esquerda e arraste e solte na coluna da direita. Faça o mesmo para o Editor de Texto, pois isso evitará redundâncias desnecessárias e também economizará tempo. Agora, para o botão, simplesmente duplique o botão da seção Hero e arraste e mova-o para a coluna direita da seção Sobre.

Alinhe verticalmente a coluna direita ao meio da coluna de edição> layout> alinhamento vertical e você tem sua seção Sobre pronta!

Este é o resultado final da seção Sobre:

Etapa 3: seção CTA “Saiba mais”

Estaremos adicionando outra seção falando sobre Pizzeria. Esta seção será semelhante à que criamos antes, mas a estrutura será um pouco diferente.

Então, queremos que nosso resultado final seja assim:

Você notou algo semelhante aqui?

Sim! O título, editor de texto é semelhante ao que já criamos anteriormente. Portanto, em vez de redesenhar todos os widgets, vamos simplesmente duplicá-los e arrastá-los para o lugar.

Vamos fazê-lo!

Primeiro, adicione uma nova estrutura de duas colunas e vá para as configurações da seção e adicione a imagem de fundo da janela de mídia e adicione preenchimento superior de 100 para fazer o painel parecer mais espaçoso. Além disso, ative a opção Esticar seção nas configurações.

Agora vá para a seção anterior e duplique o título, o editor de texto e o widget de botão . Você pode simplesmente fazer isso clicando com o botão direito no widget e selecionando a opção duplicar . Uma vez duplicado, arraste e solte os widgets duplicados em suas novas posições.

Esta é a aparência da seção:

Agora, para a coluna certa, arraste e solte o widget de imagem e selecione a imagem na galeria de mídia. Ajuste a imagem em termos de tamanho da imagem, etc. e quando terminar, é assim que a seção se parece.

Etapa 4: a seção Contato / Pedido

Esta é a seção CTA que ajudará o usuário a fazer o pedido. Agora, o que toda esta seção deve incluir? Vamos ver o que pretendemos fazer aqui.

Precisamos criar dois widgets de editor de texto e título, um formulário de contato e o widget de menu de lista de preços do PowerPack.

Em primeiro lugar, sabemos que devemos manter o design e a aparência do título e do editor de texto. Você pode ir em frente e duplicá-los da seção anterior e colocá-los aqui. Agora mude o texto com o que você deseja.

Você pode usar o widget Formulários no Elementor Pro para criar um formulário de contato pelo processo simples de arrastar e soltar. Depois de fazer isso, o formulário de contato aparecerá na página. Agora você pode fazer mais personalizações nos formulários. Aqui estão as alterações que fiz:

• Adicionados campos de formulário e alterado o tamanho do campo.
• Alterou o texto, tamanho e alinhamento do botão.
• Adicionou o e-mail como ação do botão de envio e adicionou os detalhes do e-mail.
• Ajustou as lacunas das colunas e refez a tipografia e cores do texto e campos
• Outras alterações necessárias para tornar o formulário de contato mais atraente .

Se você usar qualquer plugin de formulário de contato como Gravity Forms, WPForms, Ninja Forms, etc, você pode usar o widget de estilizador de formulário do PowerPack para estilizar o formulário com Elementor.

Agora, na coluna da direita, estaremos adicionando a Lista de Preços dos produtos. Para isso, estaremos utilizando o widget Menu Preço da PowerPack. Basta arrastar e soltar, adicionar os detalhes e alterar o design e layout do mesmo. Esta é a aparência de toda a seção:

Entre no Giveaway Now!

PowerPack Giveaway Hosted by Cloudways

Enrolando!

Depois de fazer todas as alterações, todo o nosso layout ficaria assim.

Agora você pode fazer um layout bonito para você também com Elementor e PowerPack para Elementor. Embora o Elementor ofereça muitos recursos, o PowerPack o estende ainda mais com widgets criativos e orientados para a funcionalidade. Com mais de 50 widgets úteis em seu kit de ferramentas, você pode construir sites mais rapidamente.

O Elementor e o PowerPack podem economizar seu tempo, esforço e ajudá-lo a expandir seu negócio de web design. Além disso, os dois produtos contam com o respaldo de uma equipe incrível de especialistas em WordPress para que você tenha total tranquilidade.