WooCommerce + Elementor: vamos construir coisas legais

Deseja ajustar e projetar seu site WordPress sem contratar um desenvolvedor? Boas notícias: é completamente possível com os plugins do construtor de páginas do WordPress.

Um plug-in do construtor de páginas do WordPress vem com uma interface intuitiva de arrastar e soltar para criar belas páginas e sites personalizados. Assim, independentemente do seu conjunto de habilidades ou conhecimento técnico, os plugins do construtor de páginas facilitam o design do seu site ideal sem escrever uma única linha de código.

Agora, se você está se perguntando qual plugin do construtor de páginas do WordPress você deve considerar, você está no lugar certo. Neste artigo, revisaremos uma das opções mais populares: Elementor, que é considerado o padrão-ouro. O Elementor é o segundo plugin WordPress mais instalado com 2 milhões de instalações ativas – usado por cerca de 15,9% dos sites WordPress.

Começaremos com uma breve visão geral do Elementor e revisaremos a interface, os recursos e os preços do plug-in para ajudá-lo a determinar se é a escolha certa para o seu site. Vamos lá!

Plugin Elementor: uma breve visão geral

O Elementor é um plug-in de construtor de páginas WordPress visual de arrastar e soltar que permite criar páginas e postagens da Web exclusivas em comparação com os modelos de página padrão que acompanham seus temas WooCommerce ou WordPress.

Não requer codificação e permite que você defina facilmente as configurações e organize o conteúdo e os elementos da sua página com ferramentas de arrastar e soltar.

Vamos começar com a revisão do plug-in observando como a interface do Elementor funciona.

Entendendo a interface do plug-in Elementor

Comparado a muitos outros plugins de construtor de páginas, o Elementor tem uma das interfaces mais simples e perfeitas. Ao iniciar o plug-in pela primeira vez, você chegará a uma página como esta:

A área cinza pontilhada é sua área de conteúdo. Fora dessa área, seu tema regular aparecerá, enquanto, dentro da área pontilhada, você poderá adicionar widgets e criar seu próprio design.

No lado esquerdo, você verá widgets, que atuam como blocos de construção que você pode montar para criar sua página. Abaixo desses widgets, você encontrará configurações gerais para visualizar seus designs, desfazer alterações ou ativar o modo responsivo, conforme mostrado na imagem.

Veja como é simples arrastar e soltar os elementos desejados na página:

Quando você solta um elemento em sua página – o Elementor divide os elementos em duas estruturas de layout, fornecendo dois elementos estruturais diferentes, conforme mostrado abaixo.

Esses elementos estruturais incluem:

• Seção: marcada com a cor azul.
• Coluna: fica dentro da seção marcada em preto. Você pode adicionar quantas colunas forem necessárias dentro da seção.

Depois de soltar o elemento, você pode personalizar facilmente seu layout ajustando a largura e alterando o espaço e a altura da coluna.

Além disso, você também pode escolher uma estrutura de seção adequada para sua necessidade específica e adicionar outros elementos, como uma imagem, vídeo ou ícone, dentro das colunas.

Por exemplo, adicionei uma imagem e escolhi uma da biblioteca de imagens padrão do Elementor, conforme mostrado abaixo na imagem. Você pode alterar o tamanho e o alinhamento da imagem, adicionar uma legenda e vincular um URL adequado.

Para mais estilos de elementos, estruturas ou colunas – você pode usar as guias Estilo e Avançado na barra lateral. Basta clicar no conteúdo que você deseja estilizar e clicar nas guias da barra lateral para fazer as alterações.

Você também pode navegar das guias para a barra lateral de elementos simplesmente clicando no ícone quadrado exibido no canto direito da barra lateral.

Assim, o Elementor é bastante fácil de usar e com opções simples de arrastar e soltar e fácil personalização – você pode criar o site dos seus sonhos em pouco tempo.

Agora, sem demorar muito, vamos direto para os recursos do construtor de páginas Elementor.

Principais recursos do Elementor que o tornam um excelente construtor de páginas para WooCommerce

Aqui estão alguns excelentes benefícios do Elementor que o tornam um dos construtores de páginas mais populares entre os sites WordPress e WooCommerce.

1. Extensa biblioteca de modelos pré-fabricados

O Elementor fornece uma ampla variedade de modelos. Clique no ícone Adicionar modelos abaixo para adicionar um modelo.

Escolha entre mais de 300 modelos da biblioteca de modelos Elementor e adicione-os à sua página com um único clique.

Desde o lançamento do Elementor 2.0, esses modelos vêm em dois formatos:

• Blocos: fornecem designs para seções específicas em vez de uma página inteira. Por exemplo, você pode adicionar uma seção Sobre a empresa ou uma seção de contato pré-criada a um layout de página existente usando blocos.

• Páginas – Ofereça designs de página inteira, que você pode importar com um único clique e ajustar conforme necessário.

Você também pode salvar alguns de seus designs como blocos e modelos para reutilizar posteriormente em outras páginas ou sites - tornando super conveniente manter um design de modelo comum em todo o site.

Também elimina o incômodo de criar um novo design de página do zero a cada vez.

2. Controles de design responsivos e visualizações móveis

O uso de dispositivos móveis está crescendo consistentemente a cada mês, e cerca de 73,1% dos web designers acreditam que um design de página não responsivo é uma das maiores razões por trás do abandono do site.

Todos os designs e páginas que você cria no Elementor são responsivos automaticamente e ficam ótimos em dispositivos móveis. Além disso, você pode visualizar rapidamente como seu site ficará em outros dispositivos sem sair da interface.

Clique no botão Modo responsivo na parte inferior da barra lateral e visualize as versões para desktop, celular e tablet do seu site clicando nos botões destacados nas imagens abaixo.

Ele permite que você personalize seus designs de página com base no tipo de dispositivo e permite mostrar ou ocultar determinados widgets em determinados dispositivos. Por exemplo, se a versão para computador do seu site tiver uma imagem de herói enorme, você pode evitar exibir essa imagem na versão para celular do seu site. Você pode selecionar essa imagem ou qualquer seção que deseja ocultar e ocultá-la em dispositivos móveis usando os controles de design responsivos do Elementor com um único clique de alternância.

Assim, ele garante que seu site seja 100% responsivo – para que fique ótimo em todos os dispositivos, incluindo desktops, tablets e dispositivos móveis.

3. Opções de personalização ilimitadas

A personalização é ilimitada com o Elementor e não há limites para como você pode projetar seu site e seus elementos.

Os menus Estilo e Avançado no editor Elementor oferecem muitas opções de personalização de estilo. Você pode estilizar o conteúdo de acordo com vários atributos, incluindo cor, largura, tamanho, filtros CSS e borda.

Ao mesmo tempo, o menu Avançado permite gerenciar o layout, efeitos de movimento, plano de fundo, borda, atributos e outros fatores, conforme mostrado abaixo.

4. Controles de layout detalhados

Aprofundando-se nas opções de personalização, o Elementor oferece controle detalhado sobre o design do layout , para que você não precise comprometer a flexibilidade do design devido à incapacidade de escrever código personalizado.

O Elementor simplifica o posicionamento de suas seções, widgets e colunas exatamente onde você deseja com muitas opções de controle intuitivas.

Usando os controles de layout no menu Avançado, você pode:

• Defina a margem e o preenchimento para seções, widgets e colunas manualmente.
• Escolha a largura da seção – padrão, largura total, em linha e personalizada.
• Ajuste a posição do widget dentro da coluna – padrão, fixo e absoluto.
• Ajuste o espaço entre as colunas e crie um espaço em branco para um layout limpo.

Assim, sem habilidades de codificação, você pode ajustar facilmente o posicionamento de seus widgets e personalizar colunas e seções conforme necessário.

5. Histórico de revisão completo do progresso com alterações de desfazer/refazer

Um dos melhores recursos do Elementor é que ele permite visualizar todo o histórico de todas as alterações feitas, registrando assim todas as ações no histórico.

Além disso, você pode facilmente desfazer as alterações e reverter para a versão anterior sempre que necessário. Além disso, sempre que você salvar um novo design, poderá reverter facilmente para uma revisão completamente nova, se necessário.

6. Deixa para trás um código limpo

Se você deseja desativar o Elementor no futuro por algum motivo, não precisa se preocupar em deixar para trás toneladas de códigos de acesso como o Divi Builder.

O Elementor deixa para trás um código limpo, garantindo desempenho e velocidade de página ideais.

Mais recursos do Elementor

Aqui estão mais alguns recursos do plug-in do construtor de páginas Elementor:

• Editor de cabeçalho e rodapé: você pode editar facilmente os cabeçalhos e rodapés do seu site com o Elementor sem nenhuma habilidade de codificação.
• Edição de texto em linha: Este recurso permite que você edite texto ao vivo na tela – facilitando a edição de conteúdo de texto existente ou a redação de postagens de blog.
• Pronto para RTL e tradução: o Elementor vem em 23 idiomas traduzidos e você pode traduzi-lo facilmente para idiomas adicionais devido ao suporte total ao idioma RTL.
• Widgets WooCommerce: fornece widgets WooCommerce pré-construídos, como listas de preços e tabelas de preços, para facilitar a criação de sites de comércio eletrônico.
• Integrações de terceiros: o Elementor suporta integrações de terceiros, incluindo ActiveCampaign e MailChimp.
• Cores globais e opções de tipografia: o Elementor permite definir tipografia e cores globais para criar designs abrangentes em todas as páginas. Além disso, você também pode escolher entre mais de 800 fontes do Google para o design do seu site.
• Modo de manutenção: você pode aproveitar os modelos de modo de manutenção do Elementor para definir seu site no modo de manutenção.

Revisão do Elementor Pro

Embora o construtor de páginas principal do Elementor seja de código aberto e gratuito, você pode atualizar para a versão Elementor Pro - que fornece funcionalidades úteis adicionais.

Aqui está uma breve olhada em alguns recursos do novo plugin Elementor Pro:

• Ele permite que você crie um tema WordPress inteiro.
• Possui widgets mais interessantes, incluindo controles deslizantes, botões de compartilhamento social, formulários, cronômetros de contagem regressiva e formulários de login.
• Ele fornece vários modelos Elementor Pro premium de alta qualidade.

Assim, se você deseja mais recursos, modelos premium e widgets globais - pode optar pelo plug-in Elementor Pro, a partir de apenas US $ 49.

Revisão de preços da Elementor

Se você deseja criar sites simples e de estilo básico, a versão gratuita do plug-in deve atender às suas necessidades – considerando ser o construtor de páginas gratuito mais rico em recursos.

No entanto, para criar sites mais profissionais, o Elementor oferece quatro planos premium com recursos premium, como suporte VIP e Elementor Expert Profile.

O plano Essential, Expert, Studio e Agency do plugin Elementor custa $ 49, $ 199, $ 499 e $ 999 por ano. Assim, o Elementor é para todos, e seja você um web designer, desenvolvedor ou proprietário de uma agência - o Elementor fornece recursos para todas as necessidades e demandas.

Conclusão: Veredicto Final

Após esta revisão abrangente, é seguro dizer que o Elementor fornece todos os recursos essenciais necessários para criar um site WordPress ou WooCommerce.

Ele vem com uma interface leve, simples, fácil de entender e não inchada, permitindo que designers de sites sem experiência em codificação criem sites bonitos. E a melhor parte é que ele vem com planos de preços para as necessidades de todos. Além disso, os desenvolvedores do Elementor continuam lançando e lançando novos recursos e melhorias.

Depois de analisar a facilidade de uso, os recursos gerais, o desempenho, o suporte, a interface e os preços do plug-in, classificamos o Elementor no topo dos plug-ins do construtor de páginas do WordPress. Portanto, confira e experimente o plug-in Elementor por conta própria e escolha o plano adequado às suas necessidades específicas de negócios.