Ir para o conteúdo principal

Tutorial Elementor: Apresentando a Interface

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

A criação de um site com uma aparência profissional não foi dada a todos, especialmente porque todos sentimos que era absolutamente necessário ser um profissional de codificação e web design. Atualmente, vemos novas ferramentas emergentes para o ecossistema do WordPress, para fornecer uma solução cada vez mais simples para projetar um site e isso ao alcance dos mais iniciantes.

Em relação ao design dos layouts do WordPress, já tínhamos que enviar o plugin Visual Composer, que é certamente uma das melhores ferramentas para o design de layout. Note-se, no entanto, que esta solução não é adequada para todos. Esta é a razão pela qual neste tutorial apresentaremos mais o plugin WordPress Elementor, que é um plugin freemium do WordPress (gratuito, mas expansí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. Sendo um plugin para WordPress, 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 Site Oficial do Elementor.

Principais características do Elementor

Antes de iniciar o tutorial com uma apresentação do plug-in, primeiro apresentaremos os principais recursos do plug-in (versão gratuita e versão completa).

versão gratuitaVersão Completa
Múltiplas ColunasMenu de navegação, item
Módulos Textos, TítulosMódulo WooCommerce (produtos, categorias)
Módulos De Vídeo, Imagem, Carrossel, Galerias, SoundcloudIntegração com o Facebook (página, botão, comentários)
Módulo de compartilhamentopreços de tabela
Módulo HTMLPortfólio, Forma
Módulo para o widget WordPressMódulo de Pesquisa

Observe que esta é uma lista incompleta dos diferentes recursos oferecidos pelo plugin. Você encontrará mais detalhes em explorando seu site.

Comece com o Elementor

Não cobriremos todo o processo de instalação aqui. Como este é um plugin do WordPress, o procedimento de instalação já foi explicado em um tutorial anterior. No entanto, após a instalação, você acessará a página inicial do plug-in.

página de apresentação delementor.png

Se você tiver esta página na tela, instalou corretamente o plug-in Elementor. No momento, estamos usando a versão completa deste tutorial, mas a interface não deve ser muito diferente da versão gratuita.

Antes de ir para a interface de edição, eu o convidarei a registrar sua licença. Isso é válido apenas para aqueles que optaram pela versão completa. Se você possui a versão gratuita, pode acessar a seção a seguir. Para registrar sua licença, você notará uma notificação no WordPress que solicitará que você registre sua licença.

plugin de notificação elementor.png

Basta clicar nele para ir para a página de registro e clicar em Ativação.

registro de uma licença elementor.png

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Você normalmente precisará da sua página de confirmação se a sua licença for válida.

licença ativa elementor.png

Se você não conseguir acessar esta página, convido você a entrar em contato com os desenvolvedores do plugin para ter mais assistência no problema.

Como usar o Elementor

Elementor trabalha em páginas e artigos no WordPress. Se você usa a interface clássica ou a nova interface Gutenberg, verá um botão que solicitará que você use o construtor Elementor.

construtor elementor.png

Na prática, você nem sempre precisará editar seus artigos usando o Elementor. Convido você a usar o plugin apenas em páginas. Ao clicar no botão, você será direcionado para a interface de design da Elementor, que oferece um ar de déjà vu (para aqueles que usam o WordPress Customizer).

interface de apresentação elementor.png

Então você tem à esquerda os vários controles oferecidos pelo plug-in e, à direita, tem a visualização ao vivo de suas alterações. Neste tutorial, usamos o tema Twenty Sixteen do WordPress.

As seções do Elementor

As seções Elementor são grupos de blocos de recursos que a Elementor oferece. O número de seções depende se você está usando a versão completa e se usa o WooCommerce, o Yoast SEO ou outros plugins compatíveis. Dependendo dessas condições, você terá mais ou menos seções em sua interface. Como usamos a versão completa com o plug-in WooCommerce ativado, eis a aparência da nossa interface.

seção elementor.png

Como colocar um bloco Elementor

Depois de desenvolver uma seção, você encontrará os blocos Elementor. Os diferentes blocos Elementor são colocados por "arrastar e soltar" na área destacada com linhas tracejadas.

adicionar blocos elementors.png

Como escolher um layout no Elementor

Antes de adicionar um bloco ao Elementor, você deve pensar em escolher um layout clicando no botão "+" na seção destacada.

escolha um layout elementor.png

Dependendo das suas necessidades, você escolherá o layout mais adequado. Depois de escolher um layout, você terá uma representação dessa seção na mesma área destacada. Esta seção exibirá o mesmo número de colunas que você deseja. No meu caso, escolhi uma coluna com colunas 3.

seção elementor com zone.png

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Os diferentes blocos com um sinal "+" dentro são as zonas que podem aceitar blocos Elementor. Se você adicionar um bloco Elementor sem escolher um layout antes, o layout de coluna única será escolhido por padrão.

As seções do 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.

movendo uma seção elementor.png

Aqui está um exemplo de uma seção que contém blocos 2, a saber, o bloco de título e o bloco de texto.

elemento de seção com 2 blocs.png

Como usar outras ferramentas de design

Depois de terminar seu design, uma das coisas que você deseja fazer é fazer backup do seu trabalho. Você encontrará essa opção na parte inferior da seção, exibindo as diferentes seções Elementor.

backup elementor.png

Você pode escolher entre gravação direta (publicação) e salvar como rascunho ou como modelo. Vamos explorar esses pontos mais tarde.

Durante o seu design, você também pode visualizar as alterações sem a interface Elementor adicional. Tudo o que você precisa fazer é clicar no ícone do olho.

preview das mudanças elementor.png

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.

ações elementor.png

Isso permitirá que você volte facilmente.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

A opção "Navegador", que vem logo antes do botão de histórico, permite modificar as diferentes seções em relação ao navegador usado pelos visitantes. Esta opção fornece acesso à edição avançada de estruturas de seção (larguras de coluna). Você deve fazer alterações aqui com muita cautela.

opção de navegador elementor.png

O botão "Configurações" permite modificar certas opções específicas da página, como o título, a imagem em um ou o estado, entre outros.

configurações elementor.png

Isso é tudo para este tutorial, exploraremos mais Elementor em nosso próximo tutorial. Não hesite em dar uma olhada Site oficial que oferece exemplos muito mais bem sucedidos.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
12 ações
ação6
chilrear3
Enregistrer3