Projetar um site com aparência profissional não era para todos, especialmente porque todos nós sentíamos que você precisava ser um desenvolvedor profissional de programação e web. Hoje em dia, vemos surgirem novas ferramentas para o ecossistema WordPress, de forma a proporcionar uma solução cada vez mais fácil para desenhar um site e esta ao alcance da maioria dos iniciantes.
Em relação ao design dos layouts do WordPress, já tínhamos que enviar o plugin Visual Composer, que é definitivamente uma das melhores ferramentas quando se trata de design de layout. Deve-se notar, no entanto, que esta solução não é adequada para todos. Esta é a razão pela qual neste tutorial, vamos apresentar-lhe mais WordPress Plugin Elementor, que é um WordPress Plugin freemium (gratuito, mas extensível sob assinatura).
Onde obter Elementor para WordPress
Estamos pensando seriamente em fazer você ver o potencial do plug-in, e a solução gratuita ajudará você a começar sem pagar um centavo. Esta solução gratuita está disponível em WordPress.org. Começar um WordPress Plugin, este último é instalado como qualquer outro plugin do painel.
Se o plug-in conseguir satisfazê-lo completamente, você poderá obter a licença completa com todas as funcionalidades do site elementor oficial.
Principais características do Elementor
Antes de iniciar o tutorial com uma visão geral do plugin, primeiro apresentaremos os principais recursos do plugin (versão gratuita e versão completa).
| versão gratuita | Versão Completa |
|---|---|
| Múltiplas Colunas | Menu de navegação, artigo |
| Módulos Textos, Títulos | Módulo WooCommerce (produtos, categorias) |
| Módulos De Vídeo, Imagem, Carrossel, Galerias, Soundcloud | Integração com o Facebook (página, botão, comentários) |
| Módulo de compartilhamento | preços de tabela |
| Módulo HTML | Portfólio, Forma |
| Módulo para o widget WordPress | Módulo de Pesquisa |
Observe que esta é uma lista um tanto exaustiva dos diferentes recursos oferecidos pelo plugin. Você encontrará mais detalhes em explorando seu site.
Comece com o Elementor
Não vamos cobrir todo o processo de instalação aqui. Por se tratar de um plugin para WordPress, o procedimento de instalação já foi explicado em um tutorial anterior. No entanto, após a instalação, você será levado para a página inicial do plugin.
Se você tem esta página em sua tela, então você instalou corretamente o Plugin Elementor. No momento, estamos usando a versão completa para este tutorial, mas a interface não deve ser muito diferente da versão gratuita.
Antes de ir para a interface de edição, vou convidá-lo a registrar sua licença. Isso é válido apenas para aqueles que optaram pela versão completa. Se você tiver a versão gratuita, vá para a próxima seção. Para registrar sua licença, você notará uma notificação no WordPress que solicitará que você registre sua licença.
Basta clicar nele para ir para a página de registro e clicar em Ativação.
Você normalmente precisará da sua página de confirmação se a sua licença for válida.
Se você não chegar nesta página, convido você a entrar em contato com os desenvolvedores do plugin para mais ajuda com o problema.
Como usar o Elementor
Elementor funciona em Pages e Posts no WordPress. Esteja você usando a interface clássica ou a nova interface Gutenberg, você verá um botão que solicitará que você use o construtor Elementor.
Na prática, você nem sempre precisará editar suas postagens usando o Elementor. Portanto, convido você a usar o plugin apenas nas páginas. Ao clicar no botão, você acessa a interface de design do Elementor que dá um ar de déjà vu (para quem usa o WordPress Customizer).
Assim, você tem à esquerda os vários controles oferecidos pelo plugin e à direita, você tem a visualização ao vivo de suas alterações. Neste tutorial, estamos usando o tema Twenty Sixteen WordPress.
Seções elementor
As seções no Elementor são grupos de blocos de funcionalidade que o Elementor oferece. O número de seções depende se você está usando a versão completa e se você está usando WooCommerce, Yoast SEO ou outros plug-ins compatíveis. Dependendo dessas condições, você terá mais ou menos seções em sua interface. Já que estamos usando a versão completa com o plugin WooCommerce ativado, esta é a aparência da nossa interface.
Como colocar um bloco Elementor
Depois de expandir uma seção, você encontrará os blocos Elementor. Os vários blocos Elementor são colocados por "Drag & Drop" na área destacada com linhas pontilhadas.
Como escolher um layout no Elementor
Antes de adicionar um bloco no Elementor, você precisa se lembrar de escolher um layout clicando no botão "+" na seção destacada.
Dependendo de suas necessidades, você escolherá o layout mais adequado. Depois de escolher um layout, você tem uma representação dessa seção na mesma área em destaque. Esta seção exibirá o mesmo número de colunas correspondentes à sua escolha. No meu caso, escolhi uma coluna com 3 colunas.
Os diferentes blocos com um sinal "+" dentro, são as áreas que podem aceitar blocos Elementor. Se você adicionar um bloco Elementor sem escolher um layout primeiro, o layout de coluna única será escolhido por padrão.
As seções Elementor podem ser reordenadas entre si, seguindo o mesmo princípio de “arrastar e soltar”. Você também pode excluir uma seção, se não quiser mais usá-la.
Aqui está um exemplo de uma seção que contém 2 blocos, nomeadamente o bloco de título e o bloco de texto.
Como usar outras ferramentas de design
Depois de terminar seu design, uma das coisas que você vai querer fazer é salvar seu trabalho. Você encontrará esta opção na parte inferior da seção exibindo as diferentes seções Elementor.
Você pode escolher salvar diretamente (Publicar) e salvar como rascunho ou modelo. Exploraremos esses diferentes pontos mais tarde.
Durante seu projeto, você também pode querer visualizar as alterações sem a interface adicional do Elementor. Tudo que você precisa fazer é clicar no ícone do olho.
Ocorre que durante o design, ocorre um erro (uma ação involuntária). Nesse caso, o Elementor oferece um histórico, que permite navegar por todas as suas ações.
Isso permitirá que você volte facilmente.
A opção “Navegador”, que vem logo antes do botão de histórico, permite que você modifique ainda mais as diferentes seções em relação ao navegador usado pelos visitantes. Esta opção dá acesso à modificação avançada de estruturas de seção (largura da coluna). Você deve fazer alterações aqui com muito cuidado.
O botão "Configurações" permite que você modifique certas opções específicas da página, como o título, a imagem em destaque ou o status, entre outros.
Para este tutorial é isso, exploraremos o Elementor mais em nosso próximo tutorial. Não hesite em dar uma olhada no Site oficial que oferece exemplos muito mais bem sucedidos.
