Como Criar Layouts Personalizados no WordPress com Elementor

Projetar seus próprios layouts de página personalizados no WordPress pode parecer um grande desafio. Muitas pessoas se preocupam que a criação de designs exclusivos exija habilidades de codificação. Isso pode ser frustrante se você quiser personalizar a aparência do seu site.

Felizmente, com o Elementor, você não precisa saber nenhum código. O Elementor é um construtor de páginas do WordPress de arrastar e soltar que torna o design de layouts fácil e intuitivo. Mesmo iniciantes podem criar páginas impressionantes com apenas alguns cliques.

Temos ajudado nossos leitores a personalizar seus sites com o Elementor por anos. Portanto, conhecemos as maneiras mais fáceis e eficazes de fazê-lo funcionar para você.

Neste artigo, guiaremos você pelas etapas para criar layouts personalizados do WordPress de forma rápida e fácil com o Elementor.

Por que e quando você precisa de layouts personalizados do WordPress?

Muitos temas gratuitos e premium do WordPress vêm com várias opções de layout para diferentes tipos de páginas. No entanto, às vezes, nenhum desses layouts atenderá aos seus requisitos.

Se você sabe codificar em PHP, HTML e CSS, pode criar seus próprios modelos de página ou até mesmo criar um tema filho para o seu site. No entanto, a maioria dos usuários do WordPress não são desenvolvedores, então essa opção não funciona para eles.

Então, não seria ótimo se você pudesse simplesmente projetar layouts de página usando uma interface de arrastar e soltar?

É exatamente isso que o Elementor faz. É um plugin construtor de páginas WordPress de arrastar e soltar que permite criar facilmente seus próprios layouts personalizados do WordPress sem nenhuma habilidade de codificação.

WordPress + Elementor é uma combinação poderosa que oferece uma interface de usuário intuitiva que permite construir layouts personalizados com visualização ao vivo. Ele vem com muitos módulos prontos para uso para todos os tipos de elementos de design da web.

O Elementor possui vários modelos projetados profissionalmente que você pode carregar e usar instantaneamente como ponto de partida. Ele funciona com todos os temas WordPress compatíveis com padrões e é compatível com todos os plugins populares do WordPress.

Para mais detalhes, você pode conferir nossa análise completa do Elementor.

Com isso em mente, mostraremos como criar layouts personalizados do WordPress com o Elementor. Aqui está uma visão geral rápida de todas as etapas que o guiarão:

1. Começando com o Elementor
2. Criando Layouts Personalizados do WordPress com Elementor
3. Criando seus próprios modelos no Elementor
4. Dica Bônus: Alternativas do Elementor para Criar Layouts Personalizados

Vamos começar!

Começando com o Elementor

Primeiro, você precisará adquirir o plugin Elementor Pro. É a versão paga do plugin Elementor gratuito e lhe dá acesso a recursos adicionais e 1 ano de suporte.

Em seguida, você precisará instalar e ativar o plugin Elementor. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você deve visitar a página Elementor » Configurações para configurar as opções do plugin.

Aqui, você pode habilitar o Elementor para diferentes tipos de postagem. Por padrão, ele está habilitado para suas postagens e páginas do WordPress.

Se você tiver tipos de postagem personalizados em seu site, eles também aparecerão aqui, e você poderá habilitá-los também.

Você pode excluir ou incluir funções de usuário que podem usar o Elementor ao escrever posts ou páginas. Por padrão, o construtor de páginas está habilitado apenas para administradores.

Em seguida, não se esqueça de clicar no botão 'Salvar alterações' para armazenar suas configurações.

Criando Layouts Personalizados do WordPress com Elementor

Primeiro, você precisa criar uma nova página ou post em seu site WordPress. Na tela de edição de post, você notará o novo botão 'Editar com Elementor'.

Clicar nele abrirá a interface do usuário do Elementor, onde você pode editar sua página usando o construtor de páginas de arrastar e soltar do Elementor.

Você pode adicionar seções e construir sua página do zero ou escolher um modelo.

Modelos oferecem uma maneira rápida e fácil de começar. O Elementor vem com vários modelos projetados profissionalmente que você pode personalizar o quanto quiser.

Vamos começar com um modelo clicando no botão 'Adicionar Modelo'.

Isso abrirá um pop-up onde você pode ver os diferentes modelos disponíveis. Você deve procurar um modelo que seja semelhante ao que você deseja para o layout da sua página.

Em nosso exemplo, estamos olhando para modelos de página 404.

Agora, você precisa clicar para selecionar o modelo que você gosta e, em seguida, clicar no botão 'Inserir' para adicioná-lo à sua página.

O Elementor agora carregará o modelo para você.

Agora você pode começar a editar o modelo para atender às suas necessidades. Simplesmente aponte e clique em qualquer elemento para selecioná-lo, e o Elementor mostrará suas configurações na coluna esquerda.

Como Funcionam os Layouts do Elementor

Agora, vamos falar sobre como os layouts do Elementor funcionam.

Os layouts do Elementor são construídos usando seções, colunas e widgets. As seções são como linhas ou blocos que você coloca na sua página.

Cada seção pode ter várias colunas, e cada seção e coluna pode ter seus próprios estilos, cores, conteúdo e assim por diante.

Você pode adicionar qualquer coisa em suas colunas e seções usando os widgets do Elementor. Esses widgets são diferentes tipos de blocos de conteúdo que você pode colocar em suas seções do Elementor.

Existe um extenso conjunto de widgets disponíveis que cobrem todos os elementos populares de design web que você pode imaginar. Simplesmente selecione um widget e solte-o em sua seção ou coluna.

Você pode adicionar imagens, textos, títulos, galerias de imagens, vídeos, mapas, ícones, depoimentos, sliders, carrosséis e muito mais.

Você também pode adicionar widgets padrão do WordPress e até mesmo widgets criados por outros plugins do WordPress em seu site. Por exemplo, se você estiver usando WPForms para criar diferentes formulários para o seu site, então você pode usar o seu widget no Elementor.

Quando terminar de editar, você pode clicar na seta ao lado do botão 'Publicar' para ver diferentes opções de salvamento.

Agora você pode visualizar sua página ou ir para o painel do WordPress.

Isso o levará de volta ao editor de conteúdo. Agora você pode salvar sua página do WordPress ou publicá-la em seu site.

Criando seus próprios modelos no Elementor

O Elementor permite que você salve seus próprios layouts personalizados como modelos. Dessa forma, você pode reutilizar seus próprios modelos para criar novas páginas ainda mais rapidamente no futuro.

Simplesmente edite a página que você gostaria de salvar como modelo com o Elementor. Na interface do construtor do Elementor, vamos clicar na seta ao lado do botão ‘Publicar’.

Agora você verá mais opções para salvar sua postagem. Simplesmente clique na opção ‘Salvar como Modelo’.

Isso abrirá um pop-up onde você precisará fornecer um nome para o seu modelo.

Após inserir o nome, basta clicar no botão ‘Salvar’.

Na próxima vez que você estiver criando um layout de página personalizado, poderá selecioná-lo na aba ‘Meus Modelos’.

Tudo o que você precisa fazer é clicar no botão ‘Inserir’ para o layout da sua página personalizada.

Você também pode exportar este modelo e usá-lo em outros sites WordPress usando o Elementor.

Simplesmente clique no ícone de 3 pontos e depois clique na opção ‘Exportar’.

A partir daqui, você pode baixar o modelo para o seu computador.

Dica Bônus: Alternativas do Elementor para Criar Layouts Personalizados

Além do Elementor, existem outros construtores de páginas e sites que permitem criar layouts personalizados para o seu site.

Aqui estão algumas das melhores alternativas ao Elementor que você pode usar:

• SeedProd é o melhor construtor de sites WordPress de arrastar e soltar que permite criar layouts personalizados para suas páginas de destino. Existem mais de 300 modelos de temas ou páginas de destino para escolher. O SeedProd também oferece muitas opções de personalização e blocos para criar páginas impressionantes. Para mais detalhes, você pode ver nossa análise completa do SeedProd.
• Divi é um tema visual e construtor de páginas. Ele está no mercado há mais de 14 anos e oferece diferentes recursos para criar layouts WordPress, incluindo uma biblioteca de layouts. Existem muitas opções de personalização no construtor visual, e você não precisa editar nenhum código.
• Thrive Architect é um construtor de páginas poderoso e amigável para iniciantes que você pode usar para criar layouts bonitos. Ele vem com mais de 352 modelos e muitas opções de personalização. Você pode usar seu construtor visual front-end para editar qualquer elemento na página. Para mais detalhes, veja nossa análise do Thrive Architect.
• Beaver Builder é outro construtor de páginas popular de arrastar e soltar para WordPress. É fácil de usar e você pode configurar facilmente layouts para páginas e posts usando Beaver Builder. Ele também oferece modelos pré-construídos para páginas de destino, mas não há tantos quanto com SeedProd ou Divi.

Esperamos que este artigo tenha ajudado você a aprender como criar layouts personalizados do WordPress com o Elementor. Você também pode querer ver nossa comparação especializada de Elementor vs. Divi vs. SeedProd e nossas escolhas para o melhor software de design web.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.