Ir para o conteúdo principal

Tutorial Elementor: Apresentando a Interface

Divi: o tema WordPress mais fácil de usar

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]

Projetar um site com uma aparência profissional não foi dado a todos, especialmente porque todos sentimos que era absolutamente necessário ser um profissional de codificação e web design. Hoje em dia, vemos novas ferramentas que estão surgindo para o ecossistema do WordPress, para fornecer uma solução cada vez mais simples para criar um site e isso para alcançar os mais iniciantes.

Em relação ao design de layouts do WordPress, nós já tivemos que enviar o plugin Visual Composer, que é certamente uma das melhores ferramentas para o 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 o plugin WordPress Elementor, que é um plugin WordPress freemium (grátis, mas expansível sob assinatura).

Onde obter o Elementor para WordPress

Estamos pensando seriamente em fazer com que você veja o potencial do plug-in, e a solução gratuita ajudará você a começar sem precisar 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 plugin 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 começar o tutorial com uma apresentação do plugin, vamos primeiro apresentar-lhe as principais características do plugin (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)
Video Modules, Image, Carousel, 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

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

Comece com o Elementor

Nós 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 home page do plug-in.

página de apresentação delementor.png

Se você tiver esta página em sua tela, então você instalou corretamente o plugin 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, 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, você pode acessar 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.

plugin de notificação elementor.png

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

registro de uma licença elementor.png

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

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]

licença ativa elementor.png

Se você não pode acessar esta página, eu 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. Quer utilize a interface clássica ou a nova interface do Gutenberg, verá um botão que o irá pedir para utilizar o construtor Elementor.

construtor elementor.png

Na prática, você nem sempre precisará editar seus artigos usando o Elementor. Eu convido você a usar o plugin apenas nas páginas. Ao clicar no botão, você será levado à interface de design do Elementor, que oferece um ar de déjà vu (para quem usa o WordPress Customizer).

interface de apresentação elementor.png

Então 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, usamos o tema Twenty Sixteen do WordPress.

As seções do Elementor

As seções Elementor são grupos de blocos de recursos que o 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 plug-ins compatíveis. Dependendo dessas condições, você terá mais ou menos seções na sua interface. Como usamos a versão completa com o plug-in WooCommerce ativado, veja 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 de suas necessidades, você escolherá o layout mais adequado. Depois de escolher um layout, você terá uma representação dessa seção na mesma área realçada. 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 blocos diferentes com um sinal "+" interno são as áreas que podem aceitar blocos Elementor. Se você adicionar um bloco Elementor sem escolher um layout antecipadamente, 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, ou seja, 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 ter terminado o seu design, uma das coisas que você vai querer fazer é fazer o backup do seu trabalho. Você encontrará essa opção na parte inferior da seção, exibindo as diferentes seções do Elementor.

backup elementor.png

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

Durante seu design, você também pode querer 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

Acontece que durante o projeto, ocorre um erro (uma ação involuntária). Neste 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 que você modifique as diferentes seções em relação ao navegador usado pelos visitantes. Esta opção dá acesso a edição avançada de estruturas de seção (larguras de coluna). Você deve fazer mudanças aqui com muito cuidado.

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, vamos explorar mais Elementor no nosso próximo tutorial. Não hesite em dar uma olhada Site oficial que oferece exemplos muito mais bem sucedidos.

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
Whatsapp