Saiba como usar o popular construtor de páginas WordPress Elementor para construir um site que se destaque e seja notado na multidão. Um site bem desenhado pode criar uma grande primeira impressão. Entretanto, construir um site de alto nível nem sempre é fácil – especialmente se você não tem experiência prévia em design ou desenvolvimento.
É aí que entra o construtor de site WordPress Elementor. Ao optar por este plugin moderno e fácil de usar, você pode criar um site impressionante sem escrever uma única linha de código.
Este post cobrirá tudo o que você precisa saber sobre este construtor de páginas WordPress extremamente popular. Então mostraremos a você como navegar em algumas das tarefas mais essenciais do Elementor, tais como criar layouts, páginas e até mesmo templates personalizados. Vamos começar!
Uma introdução ao Elementor
Nos primeiros tempos da Internet, a criação de um site exigia habilidades avançadas de desenvolvimento e web design, ou acesso a uma equipe especializada. Isto significava que construir um site era demorado, muitas vezes frustrante, e potencialmente caro.
Graças aos construtores de páginas modernos, você pode agora criar um site de design profissional, de alto desempenho e sem habilidades especializadas. Uma vez que seu site esteja pronto e funcionando, você pode rápida e facilmente adicionar conteúdo ou mudar o layout a qualquer momento, mesmo que você seja um não-codificador.
Existem vários construtores de páginas WordPress, mas com mais de cinco milhões de instalações ativas, o plugin do Elementor é um dos mais populares. O Elementor permite que você crie tudo, desde sites inteiros até páginas de destino individuais através de um editor intuitivo de arrastar e soltar.
Com o Elementor, você pode controlar todos os aspectos do design do seu site usando uma única plataforma. Dessa forma, seu site pode refletir perfeitamente a sua marca.
O editor intuitivo do Elementor é particularmente popular entre os proprietários de sites que não têm experiência em design e desenvolvimento. É também um ótimo ajuste para empreendedores e pequenas empresas com uma ideia para um empreendimento online, mas não necessariamente tem os fundos para contratar uma equipe dedicada a design ou desenvolvimento.
Mesmo que você seja um profissional experiente, há muitas razões para usar o Elementor. Só porque você tem habilidades de codificação não significa que seja sábio criar sempre tudo do zero.
o Elementor tem muitos recursos para ajudar você a construir sites premiados em menos tempo. Isto inclui mais de 90 widgets prontos e templates web desenhados profissionalmente.
Desta forma, o Elementor pode aumentar sua produtividade e seus lucros. Estes recursos de economia de tempo podem ser particularmente lucrativos se você construir regularmente sites WordPress (ou seja, para desenvolvedores autônomos e agências WordPress).
Elementor Free vs Elementor Pro
Elementor é um software “freemium”. Você pode baixar o plugin central do Elementor gratuitamente ou comprar uma licença Elementor Pro.
O plugin gratuito do WordPress vem com tudo que você precisa para construir páginas de vendas visualmente atraentes, listagens de produtos, sites de negócios e muito mais. Ele inclui mais de 40 widgets, 100 templates e mais de 300 blocos. Os blocos são templates de seção pré-desenhados que você pode misturar e combinar para criar designs exclusivos.
Se você quiser funcionalidades mais avançadas, você pode adquirir o Elementor Pro. Isto desbloqueia alguns widgets extras, juntamente com o Elementor Theme Builder.
Usando o Theme Builder, você pode editar quase todos os elementos do site, incluindo o cabeçalho e o rodapé. Você também pode criar designs personalizados de posts e páginas de arquivo.
Se você está desenvolvendo uma loja online, o Elementor Pro também inclui um WooCommerce Builder. Você pode usar isso para personalizar o conteúdo do WooCommerce do seu site, incluindo a página do produto, o arquivo do produto e a página de checkout. Você também terá acesso a widgets explicitamente projetados para impulsionar as conversões, tais como Custom Add To Cart, Upsells, e Product Related.
o Elementor Pro também vem com um Popup Builder e um Form Builder. Embora existam plugins separados que podem ajudá-lo a criar formulários e popups, ao optar pelo Elementor, você pode minimizar o número de plugins que você precisará instalar e manter.
Usar muitos plugins pode tornar o seu site mais vulnerável a hackers. Isso pode até impactar o desempenho do seu site. Portanto, é uma melhor prática minimizar o número que você tem instalado. Além disso, como você está projetando todos os elementos do seu site usando a mesma plataforma, você deve achar mais fácil conseguir uma aparência e uma sensação consistente.
As licenças do Elementor Pro incluem o acesso a mais de 60 kits de sites profissionais. Estes são pacotes de templates, páginas, popups e outros componentes que podem ajudar você a criar um site completo. Se você adquirir uma licença Expert ou superior, você também terá acesso a 20 kits de site Expert.
Além disso, cada licença Pro inclui suporte premium. Tipicamente, você receberá respostas da equipe de suporte especializado do Elementor dentro de um dia. Entretanto, se você optar pelo Elementor Pro Studio ou superior, você será atualizado para o suporte VIP. Isto permite que você participe de chats ao vivo com a equipe de suporte VIP do Elementor. Você também receberá respostas prioritárias em seus ingressos, que normalmente chegam em menos de 30 minutos.
Se você é uma agência, desenvolvedor ou designer, você pode estar interessado em um perfil de Rede de Especialistas. Lá, você pode mostrar seu trabalho e captar a atenção de clientes em potencial.
Se você está interessado em publicidade através da Rede de Especialistas, você também pode estar interessado nas licenças do Elementor Pro Expert, Studio, ou Agency. Estas licenças lhe dão o direito de criar um perfil neste mercado popular.
Os planos do Elementor Pro variam de $49 a $999 por ano. A empresa também oferece uma garantia de 30 dias de devolução do dinheiro, para que você possa experimentá-la antes de comprar.
Como instalar o Elementor
Por ser um plugin WordPress, a instalação do Elementor é rápida e fácil. Você pode baixar o plugin gratuito diretamente do seu painel do WordPress.
Para baixar a versão gratuita, navegue até Plugins > Add New. No campo de busca, digite Elementor. Quando o plugin aparecer, clique em Install Now.
Quando solicitado, clique em Activate. O plugin adicionará uma opção Elementor à sua barra lateral do WordPress.
Agora você está pronto para começar a usar o Elementor! Para começar, basta clicar na opção Elementor na barra lateral.
Alternativamente, você pode baixar o plugin do Elementor diretamente do repositório WordPress. Então, entre no seu painel do WordPress e navegue até Plugins > Adicionar Novo > Upload Plugin. Você pode então clicar em Choose File, e selecionar o arquivo .zip do Elementor que você acabou de baixar.
Como conectar o Elementor Pro ao WordPress
Há duas maneiras de conectar o Elementor Pro ao WordPress. Se você ainda não comprou uma licença do Elementor Pro, você precisará ir para o site oficial, e selecionar Get Started.
Você pode então seguir as instruções na tela para criar uma conta do Elementor. Quando solicitado, insira algumas informações sobre o tipo de site que você deseja fazer.
A seguir, escolha o plano que você quer comprar. Como o Elementor requer um site WordPress ativo, você precisará entrar no domínio do seu site. o Elementor então realizará uma verificação para verificar se o seu site está usando a plataforma WordPress.
Assumindo que você tenha um site WordPress ativo, o próximo passo é clicar em Install Elementor. Você será redirecionado automaticamente para a página do plugin Elementor se você estiver atualmente conectado ao seu site.
Quando solicitado, clique em Install Now > Activate. o Elementor irá então adicionar o plugin do construtor de páginas ao seu site.
Alternativamente, se você já comprou uma licença do Elementor Pro, vá até o site oficial e faça o login usando os detalhes que você recebeu em seu e-mail de confirmação.
Em sua conta do Elementor, selecione Subscriptions no menu do lado esquerdo. Você pode então clicar em Download Zip.
Em seguida, entre no seu painel de controle do WordPress e navegue até Plugins > Add new. Você pode então carregar o arquivo .zip do Elementor Pro que você acabou de baixar.
Depois de instalar e ativar o Elementor Pro, o WordPress deve solicitar que você digite sua chave de licença. Alternativamente, você pode navegar para Elementor > License > Connect & Activate.
O WordPress deve verificar sua licença automaticamente se você está atualmente logado em sua conta do Elementor. Se você não estiver, digite seu nome de usuário e senha do Elementor quando for solicitado a ativar sua licença.
Usando o Elementor: 4 tarefas essenciais para dominar
Com o Elementor, você pode projetar sites únicos sem habilidades especiais de design ou desenvolvimento. No entanto, isso ajuda a se familiarizar com os fundamentos antes de construir um site completo. Aqui está uma rápida introdução ao fluxo de trabalho do Elementor com isso em mente.
1. Abra o Elementor Page Builder
Para criar uma nova página ou postar no construtor de páginas do Elementor, navegue para Pages/Posts > Add New. Você pode lançar o editor do Elementor clicando em Edit with Elementor.
Alternativamente, você pode ter uma página existente que poderia se beneficiar de uma mudança de visual. Basta navegar até a página em questão e abri-la para edição neste cenário. Você pode então clicar no botão Edit with Elementor.
No lado esquerdo da tela, você verá a barra lateral do Elementor. Aqui você encontrará todos os elementos que você pode adicionar aos seus designs, tais como botões e cabeçalhos.
A barra lateral do Elementor também contém uma seção Global Widgets. Se você planeja reutilizar o mesmo widget em vários projetos, você pode querer salvá-lo como um Global Widget. Isto torna seu elemento personalizado facilmente acessível a qualquer momento. Ele também fornece um local central onde você pode editar o seu widget uma vez para fazer mudanças universais. o Elementor irá então replicar estas mudanças em todo o seu site.
À direita está a tela de pré-visualização ao vivo, onde você pode criar o seu design. o Elementor irá se atualizar automaticamente para exibir suas mudanças em tempo real enquanto você faz suas edições.
2. Adicione seções, colunas e widgets
O editor do Elementor fornece acesso a três blocos principais de construção: Seções, Colunas e Widgets. Já abordamos os widgets prontos da Elementor, então vamos ver como você pode adicioná-los aos seus projetos.
Tipicamente, você começará criando uma Seção, clicando no ícone + dentro da tela principal. o Elementor irá então pedir que você Select Your Structure.
As opções de estrutura consistem em uma ou mais Colunas. Eventualmente, você irá colocar sua widget dentro dessas Colunas. Elas desempenham um papel importante na criação de layouts mais organizados.
Após tomar sua decisão, o Elementor adicionará esta Seção ao seu layout. Para mover esta Seção para um novo site, dê um clique e então pegue o cabo azul pontilhado que aparece.
Para editar uma seção, simplesmente clique em Control-clique neste cabo azul pontilhado. Isto irá lançar um menu de contexto, onde você pode fazer mudanças simples, como copiar ou apagar a Seção selecionada.
Suponha que você queira fazer edições mais complexas, controle – clique na alavanca azul e selecione Edit Section. A barra lateral do Elementor agora será atualizada para exibir todas as mudanças adicionais que você pode fazer nesta Seção.
Você também pode adicionar widgets a esta seção. Na barra lateral Elementor, encontre o widget que você quer usar e arraste-o para a tela principal.
Enquanto você estiver arrastando o widget, o Elementor irá destacar todas as diferentes Seções e Colunas onde você pode soltar este item. Quando você estiver pronto, simplesmente solte seu mouse. o Elementor irá agora adicionar este widget à sua Seção escolhida.
3. Edite as configurações do seu site
Você pode usar o Elementor para editar as configurações de todo o seu site. Isto inclui a mudança da fonte padrão e das cores HTML. Você também pode modificar as bordas e sombras que o WordPress adiciona a elementos como as imagens do seu site.
Ajustando essas configurações no nível do site, você pode garantir uma aparência consistente em todo o seu site WordPress. Este processo também é significativamente mais rápido e fácil do que aplicar estas mudanças página por página. Para visualizar as configurações disponíveis no site, clique no menu hambúrguer na barra lateral do Elementor.
Agora você pode explorar suas opções e fazer quaisquer mudanças necessárias. Quando você estiver pronto para publicar suas novas configurações do site, clique no botão Update, na parte inferior da barra lateral do Elementor.
4. Verifique seu histórico de revisões
Enquanto você está editando seus projetos, a Elementor está silenciosamente registrando suas mudanças. Você pode facilmente recuperar suas edições, o que pode ser um salva-vidas se você perceber que cometeu um erro.
O registro de histórico do Elementor também lhe dá a liberdade de experimentar. Você pode testar várias mudanças e depois removê-las rapidamente. Ao encorajá-lo a experimentar, o Elementor pode melhorar a qualidade de seus projetos acabados.
Para ver o log do Elementor, clique no ícone History na parte inferior da barra lateral. A guia Actions registra cada mudança que você faz no Elementor. Isto pode ser qualquer coisa, desde a criação de uma nova seção até a edição de textos existentes:
Toda vez que você pressiona Save, o Elementor registra a versão atual da sua página como uma nova revisão. Você pode ver todos esses instantâneos na aba Revisions. Se você quiser reverter para uma revisão anterior, basta encontrá-la na lista de Revisions e clicar sobre ela.
Como construir uma página no Elementor (2 métodos)
Agora que você está familiarizado com o fluxo de trabalho essencial do Elementor, vamos ver como você pode usar este know-how para projetar algumas páginas novas. Primeiro, vamos cobrir a criação de uma página WordPress padrão usando o plugin gratuito do Elementor. Depois veremos como você pode desenvolver uma página de produto de alta conversão usando o WooCommerce e o Elementor Pro.
1. Como criar uma página padrão para WordPress
Cada página da web é diferente. Entretanto, há alguns elementos comuns que você encontrará em vários sites. Isto inclui cabeçalhos, corpo de texto e mídia, como imagens. Vamos ver como você pode criar uma página com estes componentes críticos.
Para começar, crie uma nova página navegando em Pages > Add New > Edit with Elementor. A seguir, adicione uma Seção ao seu design clicando no ícone +. Vamos começar com nosso cabeçalho, então vamos querer optar por um layout de uma única coluna.
Na barra lateral do Elementor, encontre o widget Heading. Agora, arraste e solte este widget em sua nova seção. Você pode então digitar seu texto de cabeçalho na barra lateral do Elementor e usar várias configurações para dar estilo ao seu título.
Então, clique no ícone + para adicionar uma segunda seção. Nós vamos incorporar uma imagem e então fornecer algum texto de suporte, então agora nós vamos optar por um layout com várias colunas.
Em seguida, arraste o widget do Editor de Texto da barra lateral do Elementor, e solte-o nesta nova seção. Você pode então adicionar e estilizar seu texto usando as configurações da barra lateral.
Quando você estiver satisfeito com o seu texto, encontre o widget Imagem. Mais uma vez, use o arrastar e soltar para adicionar este widget à sua Seção.
Na barra lateral, clique na miniatura de visualização. Agora você pode usar a Biblioteca de Mídia do WordPress para carregar uma nova imagem ou escolher um gráfico previamente carregado.
Para ver seu projeto em ação, clique no ícone do olho na parte inferior da barra lateral do Elementor. Isto exibe uma prévia do layout da sua página em uma nova aba.
Quando você estiver satisfeito com o seu projeto, clique no botão Publish. Note que se a sua página já estiver ao vivo, este botão irá pedir que você Update em seu lugar.
2. Como criar uma página de produto WooCommerce
Se você estiver administrando uma loja WooCommerce, você pode usar o Elementor Pro para criar uma página de produto personalizada. Isto pode envolver a modificação da página de WooCommerce de estoque para refletir melhor a marca do seu site. Alternativamente, você pode estar tentando otimizar sua página para conduzir mais conversões.
Para projetar uma página de produto WooCommerce personalizada, selecione Templates no painel do WordPress. Em seguida, clique no botão Add New. Na próxima janela, abra o primeiro menu suspenso e selecione Single Product.
Dê um nome descritivo ao seu novo modelo e clique em Create Template. Isto lançará a biblioteca do Elementor com todos os designs de Produtos Únicos disponíveis.
Para dar uma olhada mais de perto em um modelo, passe o mouse sobre ele e depois clique no ícone da lupa quando ele aparecer. Se você quiser aplicar este desenho na sua loja, clique em Insert.
Os templates do Elementor apresentam uma gama de componentes prontos para uso. Para editar qualquer um desses elementos, basta clicar sobre eles. A barra lateral do Elementor será atualizada para exibir todas as configurações para aquele item em particular.
O Elementor Pro fornece uma gama de widgets de WooCommerce que você pode adicionar aos seus designs. Para ver o que está disponível, vá para as seções WooCommerce ou Product na barra lateral do Elementor.
Estas seções incluem widgets com funcionalidades avançadas embutidas, tais como WooCommerce Breadcrumbs, Cart, e Checkout. Para adicionar estes elementos ao seu design, simplesmente arraste-os para a tela do Elementor e solte-os. Você pode então soltar o widget na seção onde você quer exibir este conteúdo.
Quando você estiver satisfeito com o seu projeto, clique em Publish. Você pode então selecionar Add Condition e especificar as áreas onde você quer usar este design. Por exemplo, você pode aplicar este modelo a uma categoria específica de produto ou usá-lo em toda a sua loja.
Como encontrar e instalar templates pré-moldados do Elementor
Os templates Elementor são Páginas e Blocos pré-desenhados que simplificam o processo de criação do site. Páginas são layouts de conteúdo completo, enquanto Blocos são Seções que contêm widgets pré-construídos. Alguns exemplos populares de Blocos incluem cabeçalhos, rodapés, revisões e testemunhos, e Perguntas Frequentes (FAQs).
O plugin livre do Elementor vem com mais de 100 templates de página inteira e mais de 300 Blocos. Se você atualizar para o Elementor Pro, você terá acesso a algumas opções adicionais.
Clique no ícone Adicionar Modelo para aplicar um modelo ao seu projeto atual. Este botão deve aparecer como parte de cada bloco de Seção e é representado por uma pasta branca. Isto irá lançar a Biblioteca do Elementor.
Aqui, você encontrará todos os templates de bloco e página que você pode aplicar à sua página. Você pode pré-visualizar qualquer modelo, passando o mouse sobre ele e clicando em seu ícone de lupa.
Quando você encontrar um modelo que você deseja usar, clique em Inserir. Se você não tiver se conectado previamente à biblioteca de templates do Elementor, o popup pedirá que você complete esse passo.
Após fazer esta conexão, o Elementor irá inserir o modelo que você escolheu. Agora você pode customizá-lo. Por exemplo, você pode adicionar mais widgets ou excluir qualquer conteúdo de espaço reservado.
Como construir templates com o Elementor
O Elementor vem com uma ampla seleção de templates prontos para uso. No entanto, às vezes você pode ter um olhar particular em mente. Nesse cenário, você pode preferir desenhar seus templates.
Criar seus projetos pode garantir a consistência em todo o seu site. Você pode até mesmo usar templates para acelerar o design e o desenvolvimento se você for uma agência WordPress. Por exemplo, você pode construir uma biblioteca de templates que apresentam todo o conteúdo e configurações que você normalmente aplica aos sites de seus clientes. Você pode então usar estes templates como ponto de partida para todos os projetos futuros.
Para começar, selecione Templates no painel do WordPress. Depois, clique em Add New.
No popup subsequente, abra o primeiro menu suspenso e escolha o tipo de modelo que você deseja criar. Suas opções são Page, Section, ou Landing Page.
Em seguida, dê um nome descritivo a este projeto e clique em Create Template. Isto irá lançar o construtor de páginas padrão do Elementor. Agora você pode construir seu template da mesma forma que você criaria uma página normal. Basta adicionar Seções, Colunas e widgets até que você esteja satisfeito com seu layout.
Para salvar este design como um modelo, clique na seta que aparece ao lado do botão Update/Publish. Você pode então selecionar Save as Template.
Este projeto agora será salvo na biblioteca do Elementor. Você pode acessá-la lançando a biblioteca e selecionando a aba My Templates.
Alternativamente, você pode acessar seus templates personalizados navegando para Templates > Saved Templates no painel de controle do WordPress. Você também pode abrir qualquer um de seus templates e fazer as alterações necessárias.
Dicas e truques para começar a usar o Elementor
o Elementor pode ajudar você a projetar e construir rapidamente um site WordPress fora da caixa. No entanto, alguns truques de economia de tempo podem aumentar ainda mais a sua produtividade.
Algumas vezes, você pode construir uma Seção que você quer reutilizar dentro da mesma página. Ao invés de recriar esta Seção manualmente, você pode criar uma cópia. Simplesmente clique para selecionar a Seção em questão, e então Control-clique no botão pontilhado que aparece.
Em seguida, selecione Duplicte. Isto cria uma seção duplicada diretamente abaixo do original.
Alternativamente, às vezes você pode querer reutilizar a mesma Seção em várias páginas, ou mesmo em sites diferentes. Você pode salvar qualquer Seção como um modelo de Bloco. Isto adiciona seu design à biblioteca do Elementor, de modo que está sempre ao seu alcance.
Para transformar um Bloco em um modelo reutilizável, clique em seu ícone pontilhado. Em seguida, selecione Save as Template.
Você pode editar qualquer widget selecionando-o em sua tela e depois usando os controles na barra lateral do Elementor. No entanto, navegar entre diferentes widgets pode se tornar incômodo quando você tem muitos outros widgets. Isto é particularmente verdadeiro para widgets sobrepostos ou quando você adicionou muitos elementos dentro de um espaço pequeno.
O Navegador do Elementor fornece uma lista de todos os widgets da sua página, organizados em suas Seções e Colunas correspondentes. Você pode navegar facilmente entre seus widgets, selecionando-os neste “painel de árvore” A barra lateral do Elementor será então atualizada para exibir todas as opções para o widget atualmente selecionado.
Os atalhos do teclado são a última palavra em economia de tempo, e o Elementor vem com várias teclas de atalho embutidas. Pressione Cmd/Ctrl + ? no seu teclado para ver esses atalhos.
Isto lança uma janela contendo todas as hotkeys disponíveis. Você pode sobrecarregar seu web design e desenvolvimento familiarizando-se com alguns ou todos esses atalhos.
Resumo
Criar um site WordPress nem sempre é fácil, especialmente se você não é um web designer ou desenvolvedor experiente. Felizmente, o construtor de páginas do Elementor pode tirar a dor e a complexidade da construção do seu site.
Independentemente de você optar pelo plugin gratuito ou premium, você pode usar o Elementor para projetar e construir qualquer tipo de post ou página que você precisar. Este construtor também vem com uma seleção de templates prontos para uso. Alternativamente, você pode criar seus templates e reutilizá-los em várias páginas ou em vários sites.
Você tem alguma pergunta sobre como usar o WordPress Elementor plugin? Informe-nos na seção de comentários abaixo!
Deixe um comentário