Você gostaria de descobrir e entender como é a interface do Elementor? Este guia é para você.
Desenhar um site com aparência profissional não era para todos, principalmente todos tínhamos a impressão de que precisávamos ser profissionais em codificação e web design.
Hoje em dia, vemos surgir novas ferramentas para o ecossistema WordPress, com o objetivo de fornecer uma solução cada vez mais simples para a concepção de um site ao alcance até 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 quando se trata de design de layout.
Deve-se notar, entretanto, que esta solução não agrada a todos. É por isso que neste tutorial apresentaremos o plugin Elementor WordPress, que é um plugin freemium para WordPress (gratuito, mas expansível mediante assinatura).
conteúdo
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. Por ser um plugin do WordPress, ele é 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 recursos do Elementor
Elementor é um dos criadores de páginas mais populares para WordPress, e por um bom motivo. Com seus recursos robustos e interface intuitiva, oferece uma solução poderosa para a criação de sites profissionais sem a necessidade de habilidades de codificação. Aqui está uma visão geral dos principais recursos do Elementor que o tornam indispensável para qualquer usuário WordPress:
Editor visual de arrastar e soltar : Elementor oferece um editor visual intuitivo que permite criar páginas arrastando e soltando elementos. Você pode ver as alterações em tempo real, facilitando muito a personalização do seu site.
Widgets ricos : Com uma ampla variedade de widgets disponíveis, Elementor permite adicionar vários elementos às suas páginas, como botões, galerias, carrosséis, formulários e muito mais. A versão Pro amplia essa funcionalidade com widgets avançados, como formulários de contato, controles deslizantes e portfólios.
Modelos predefinidos : Elementor oferece uma biblioteca de modelos pré-fabricados que podem ser usados como ponto de partida para suas páginas. Esses modelos cobrem vários estilos e necessidades, facilitando a criação de páginas esteticamente agradáveis e funcionais.
Editor de Tema : Com Elementor Pro, você pode personalizar não apenas o conteúdo de suas páginas, mas também os cabeçalhos, rodapés e outras partes gerais do seu site, graças ao editor de temas integrado. Isso permite que você crie consistência visual em todo o site.
Criação de modelos de postagem : o recurso de criação de modelo de postagem permite criar layouts para tipos de postagem específicos, como postagens de blog ou produtos WooCommerce. Esta opção é particularmente útil para criar designs consistentes para diferentes tipos de conteúdo.
Construtor de pop-up : Elementor Pro inclui um construtor de pop-up que permite criar pop-ups personalizados para anúncios, formulários de inscrição ou outras interações de visitantes. Você pode definir condições de exibição para atingir com precisão o seu público.
Controles de layout avançados : Elementor oferece controles avançados para tipografia, margens, espaçamento e layout responsivo. Você pode ajustar o layout do seu site para diferentes tipos de dispositivos, garantindo uma experiência de usuário ideal em dispositivos móveis, tablets e desktops.
Suporte e documentação : Elementor fornece suporte abrangente, com documentação detalhada, tutoriais online e uma comunidade ativa. Os usuários Pro se beneficiam de suporte premium direto, garantindo ajuda rápida e eficiente na resolução de quaisquer problemas.
Extensões e integrações : Elementor é compatível com uma variedade de plugins e integrações, possibilitando adicionar funcionalidades adicionais ao seu site. Se você deseja integrar ferramentas de marketing, plug-ins de SEO ou soluções de comércio eletrônico, o Elementor facilita a expansão dos recursos do seu site.
Aqui está uma tabela que resume os recursos do Elementor.
| Funcionalidades | Elementor grátis | Elementor Pro |
| Editor de páginas de arrastar e soltar | sim | sim |
| Modelos predefinidos | sim | sim |
| Widgets básicos | sim | sim |
| Pro Widgets | não | sim |
| Editor de cabeçalho e rodapé | não | sim |
| Criando modelos de postagem | não | sim |
| Criação de modelos WooCommerce | não | sim |
| Construtor de pop-up | não | sim |
| Suporte a widgets de terceiros | não | sim |
| Apoiar | não | sim |
| Recursos de marketing (formulários | não | sim |
| Acesso à biblioteca de modelos premium | não | sim |
| Efeitos e animações avançados | não | sim |
| Ferramentas de revisão e backup | não | sim |
| Criação de formulários | não | sim |
| Controle tipográfico avançado | não | sim |
| Controle de layout responsivo | não | sim |
| Acessibilidade para atualizações regulares | sim | sim |
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
Começar a usar o Elementor é rápido e fácil, mesmo se você for novo na construção de sites WordPress. Siga estas etapas para configurar o Elementor e começar a projetar suas páginas como um profissional.
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.
Instalando o Elementor
- Acesse seu painel do WordPress: Faça login no painel de administração do WordPress.
- Navegue até Extensões: Vá em “Extensões” e clique em “Adicionar”.
- Pesquisar por Elementor: Digite “Elementor” na barra de pesquisa. Você encontrará Elementor (versão gratuita). Para começar, instale e ative a versão gratuita.
- Instale o Elementor: Clique em “Instalar agora” e depois em “Ativar” quando a instalação for concluída.
Porém, após a instalação, você será direcionado para a página inicial do plugin.
Se você tem esta página em sua tela, então instalou com sucesso o plugin Elementor. Atualmente estamos usando a versão completa para este tutorial, mas a interface não deve ser muito diferente da versão gratuita.
Antes de passar para a interface de edição, convido você a registrar sua licença. Isso só é válido para quem optou pela versão Pro.
Se você possui a versão gratuita, pode acessar a próxima seção. Para registrar sua licença, você notará uma notificação no WordPress solicitando que você registre sua licença.
Então basta clicar em atualize agora para acessar a página de inscrição e clicar em Ativação.
Normalmente você verá sua página de confirmação se sua licença for Ativo.
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.
Interface Elementor
A interface do Elementor foi projetada para fornecer uma experiência de usuário suave e intuitiva, facilitando a criação e personalização de suas páginas WordPress. Aqui está uma visão geral detalhada das principais seções da interface do Elementor, junto com exemplos visuais para ajudá-lo a entender melhor cada elemento.
A área de trabalho (área de conteúdo)
La Zona de trabalhoou área de conteúdo, é o espaço central onde você cria e visualiza sua página. É aqui que você adiciona e edita widgets e seções. O layout é exibido em tempo real, permitindo que você veja as alterações conforme elas acontecem.
O painel Widgets
Le painel de widgets está localizado à esquerda da interface. Ele contém vários elementos que você pode arrastar e soltar na área de trabalho. Os widgets são organizados em categorias, como “Geral”, “Básico”, “Layout”, etc., para facilitar a localização e adição de elementos à sua página.
Grupos de widgets Elementor
Grupos de widgets Elementor são grupos de blocos de funcionalidade que 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. Como estamos usando a versão completa com o plugin WooCommerce habilitado, esta é a aparência da nossa interface.
Barra de ferramentas superior
La barra de ferramentas superior inclui opções essenciais como:
- Logo: Exibe em um menu recursos como: construtor de temas, histórico, preferências de conta, atalhos de teclado, etc.
- Botão para adicionar elementos: Permite exibir o painel de widgets a serem inseridos nas páginas
- Botão de configurações do site: Exibe muitas configurações de opções globais do site
- Botão Estrutura: Permite que você veja a estrutura geral da sua página e navegue por ela sem preocupações. Se a sua página tiver várias seções aninhadas, esta funcionalidade será de grande ajuda para você.
- Título/artigo da página: Exibe o título da página ou artigo, bem como seu status (rascunho, publicado, etc.)
- Menu de navegação móvel : permite alternar entre visualizações em desktop, tablet e celular. Isso é essencial para garantir que seu design seja responsivo e bem ajustado para todos os tipos de dispositivos.
- Configurações de página : acessa as configurações da página, incluindo opções de layout e configurações de estilo.
- Publicar/Atualizar : salva e publica as alterações feitas na página.
- Pré-visualização : Simbolizado por um olho e permite ver como sua página se comporta em uma situação real.
Então à esquerda você tem os diferentes widgets que o plugin oferece e à direita você tem a visualização em tempo real de suas modificações. Neste tutorial, usamos o tema Hello gratuito da Elementor.
Como usar o Elementor
Criando sua primeira página
Elementor funciona em páginas e posts do WordPress. Quer você use a interface clássica ou a nova interface Gutenberg, você verá um botão que o convidará a usar o construtor Elementor.
- Crie uma nova página: Vá em “Páginas” e clique em “Adicionar”.
- Nomeie sua página: Dê um título à sua página e publique-a.
- Edite com Elementor: Clique no botão “Editar com Elementor” para iniciar o editor visual do Elementor.
Na prática, nem sempre você precisará editar suas postagens usando o Elementor. Portanto, convido você a usar o plugin apenas nas páginas.
Ao clicar no botão, você acessará a interface de design do Elementor que dá um ar de déjà vu (para quem usa o WordPress Customizer).
Como adicionar widgets ao editor Elementor
Arraste widgets como títulos, imagens, botões e muito mais do painel esquerdo para a área de conteúdo. Você pode ajustar as configurações de cada widget clicando nele.
Personalizar widgets: Clique no widget para abrir suas opções de personalização. Você pode ajustar texto, imagens, cores, tamanhos e muito mais.
Usar modelos: Para agilizar o processo, use os modelos predefinidos. Clique no ícone da pasta para acessar a biblioteca de modelos, onde você pode escolher um modelo e importá-lo com um clique.
Casos práticos
Como colocar um bloco Elementor
Depois de expandir uma seção, você encontrará widgets Elementor. Os diferentes widgets Elementor são colocados “Arrastar e Soltar” na área destacada com linhas quebradas.
Como escolher o layout de uma seção no Elementor
Antes de adicionar widgets Elementor, você deve pensar em 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ê terá uma representação dessa seção na mesma área destacada. Esta seção exibirá o mesmo número de colunas correspondente à sua escolha. No meu caso escolhi uma coluna com 2 colunas.
As diferentes colunas com um sinal “+” dentro são as áreas que podem aceitar widgets 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 “ Arraste e solte"
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.
Ao projetar, você também pode visualizar as alterações sem a interface adicional do Elementor. Tudo que você precisa fazer é clicar no ícone do olho na barra superior do editor Elementor.
Acontece que durante o projeto ocorre um erro (uma ação involuntária).
Neste caso, Elementor oferece um histórico, que permite navegar por todas as suas ações.
Exclua as ações que deseja desfazer da lista
Isso permitirá que você volte facilmente.
O " configurações » permite modificar certas opções específicas da página, como título, imagem em destaque ou status, entre outras.
Perguntas frequentes
O que é Elementor?
Elementor é um construtor de páginas de arrastar e soltar para WordPress, que permite aos usuários criar sites visualmente sem codificação. Oferece uma interface intuitiva com ferramentas de arrastar e soltar para adicionar e personalizar elementos em suas páginas.
O Elementor é gratuito?
Elementor oferece uma versão gratuita com funcionalidades básicas suficientes para a criação de páginas web simples. A versão Pro, disponível por assinatura, oferece recursos avançados, como widgets adicionais, modelos premium e amplas opções de personalização.
Quais são as vantagens da versão Pro do Elementor?
A versão Pro do Elementor oferece widgets avançados, modelos profissionais, opções de design mais detalhadas e a capacidade de criar cabeçalhos, rodapés e arquivos personalizados. Ele também permite maior integração com ferramentas e recursos de marketing de terceiros.
Como instalo o Elementor no meu site WordPress?
Para instalar o Elementor, vá ao painel do WordPress, clique em “Plugins” e depois em “Adicionar”. Procure por “Elementor” na caixa de pesquisa, clique em “Instalar agora” e por fim em “Ativar”. Você também pode instalar o Elementor Pro baixando o arquivo ZIP do site da Elementor e importando-o através de “Extensões” > “Adicionar” > “Carregar extensão”.
Como usar o Elementor para criar uma página?
Após instalar o Elementor, acesse uma página ou postagem no painel do WordPress e clique em “Editar com Elementor”. Você será levado ao editor Elementor, onde poderá arrastar e soltar widgets e seções para projetar sua página. Use os painéis esquerdos para adicionar e personalizar elementos à sua página.
O Elementor é compatível com todos os temas WordPress?
Sim, o Elementor foi projetado para ser compatível com a maioria Temas do WordPress. Porém, para uma integração ideal, é recomendado o uso de temas desenvolvidos especificamente para Elementor, que oferecem maior compatibilidade e flexibilidade.
Posso usar o Elementor para construir um site de comércio eletrônico?
Sim, Elementor é compatível com WooCommerce, permitindo criar e personalizar páginas de produtos, páginas de compras e modelos de páginas de checkout. A versão Pro oferece widgets específicos do WooCommerce para melhorar a aparência da sua loja online.
Como posso visualizar as alterações feitas com Elementor?
Você pode visualizar suas alterações clicando no botão “Visualizar” no editor Elementor. Isso permite que você veja como ficará sua página antes de publicar as alterações ao vivo.
A Elementor oferece suporte técnico?
Sim, a Elementor oferece suporte técnico por meio de fóruns, base de conhecimento e sistema de tickets para usuários Pro. Você também pode acessar tutoriais e guias detalhados no site oficial da Elementor.
Posso usar extensões de terceiros com Elementor?
Sim, o Elementor é compatível com muitas extensões de terceiros que adicionam recursos e widgets adicionais. Você pode instalá-los como WordPress plugins normais para expandir as capacidades do Elementor.
Recursos semelhantes a este artigo
- Como criar um formulário com Elementor livreObtenha o Elementor Pro agora !!!
- Como criar pop-ups com Elementor
- Elementor Grátis vs Elementor Pró: comparação detalhada de recursos
- Elementor : Como alterar a imagem com o clique de um botão
- Como criar um layout com Elementor
Conclusão
Elementor é uma solução poderosa e versátil para criar páginas WordPress excepcionais sem a necessidade de codificação. Com sua interface intuitiva e recursos robustos, permite que iniciantes e profissionais criem sites atraentes e funcionais rapidamente.
Ao compreender as seções principais da interface do Elementor, você será capaz de navegar no editor com eficiência, usar widgets de maneira ideal e personalizar cada aspecto de suas páginas para atender às suas necessidades específicas.
Os áreas de trabalho, painéis de widgetse outras ferramentas são projetadas para fornecer flexibilidade máxima e, ao mesmo tempo, manter a facilidade de uso. Ao integrar seções e colunas perfeitamente e aproveitar as vantagens das opções de estilo e layout, você pode transformar sua visão em realidade.
Não se esqueça de aproveitar os recursos de visualização em tempo real para garantir que seus designs tenham uma ótima aparência em todos os dispositivos. Com Elementor, cada projeto se torna uma oportunidade de criar um site impressionante que realmente se destaca.
Para mais dicas e tutoriais sobre como usar o Elementor, assine nosso blog e fique ligado nas últimas atualizações e dicas. Compartilhe este artigo com outros entusiastas de WordPress e web design para ajudá-los a aproveitar todo o potencial do Elementor.
Comece a explorar as infinitas possibilidades que o Elementor oferece agora e transforme suas ideias em um web design cativante!