Não é segredo que o Elementor é um dos melhores construtores de páginas da comunidade WordPress hoje. E não é mais apenas um construtor de páginas. O Elementor evoluiu tanto que você pode criar sites totalmente funcionais, mesmo com um tema WordPress gratuito e básico, sem escrever uma única linha de código!
Embora o Elementor ofereça muitas opções e recursos de personalização, muitas vezes perdemos os detalhes e partes menores do plug-in que podem ter um grande impacto no processo de design de um site.
Projetar páginas da Web com o Elementor já é rápido e fácil, mas se você deseja acelerar o processo de design, está no lugar certo. Neste artigo, você aprenderá como acelerar o processo de design com o Elementor fazendo uso total do editor com ferramentas de terceiros.
Comece com modelos pré-fabricados
Modelos pré-fabricados podem acelerar o desenvolvimento do seu projeto. Projetar novas páginas do zero leva tempo e, na maioria das vezes, você está perdendo esse tempo enquanto ajusta constantemente o layout e os estilos da página. É exatamente aqui que os modelos são úteis. A biblioteca de modelos do Elementor é um ótimo recurso para acelerar o processo de design. Mesmo que você não use um modelo pré-fabricado, você sempre pode usar a biblioteca de modelos como inspiração. Os modelos podem ser facilmente importados diretamente para a página com apenas um clique.
Os templates Elementor podem ser divididos em duas partes. Primeiro, quando você deseja importar uma página pré-criada de cima para baixo, por exemplo, você pode importar uma página completa (como uma página Sobre ou Contato) com todo o seu conteúdo. A segunda opção é se você quiser apenas importar uma seção ou bloco do desenho. Você pode fazer isso se, por exemplo, gostar de uma das seções de serviços, herói, entre em contato conosco ou assine as seções.
Maravilhosas coleções gratuitas e premium de modelos estão prontamente disponíveis na web.
Mercado Envato
O mercado Envato é provavelmente o mercado mais popular não apenas para modelos Elementor, mas também para temas e plugins do WordPress.
Modelo Monstro
O TemplateMonster é outro provedor de recursos de modelo de boa qualidade, eles também têm alguns modelos gratuitos.
Biblioteca de Modelos Elementor
Biblioteca de modelos Elementor – É o armazém de modelos nativo do Elementor, novos modelos gratuitos e premium estão aparecendo com muita frequência.
Use teclas de atalho
Se você estiver trabalhando com o Elementor apenas com o mouse, pare! Passe 10 minutos aprendendo códigos de acesso, o que economizará muito tempo e acelerará o processo de design do seu site. Além dos simples, como copiar e colar, você também pode usar atalhos personalizados mais avançados. Eles podem ser extremamente úteis, especialmente se você quiser navegar entre o painel e o modo de visualização ou alternar para a edição móvel.
Aqui está uma lista de atalhos que podem aumentar seriamente a velocidade de criação do seu site:
Ações
| Desfazer | Ctrl / Cmd + Z | Desfazer qualquer alteração feita na página |
| Refazer | Ctrl / Cmd + Shift + Z | Refazer qualquer alteração feita na página |
| cópia de | Ctrl / Cmd + C | Copie uma seção, coluna ou widget |
| Colar | Ctrl / Cmd + V | Colar uma seção, coluna ou widget |
| Colar estilo | Ctrl / Cmd + Shift + V | Cole o estilo de uma seção, coluna ou widget |
| Excluir | Excluir | Excluir uma seção/coluna/widget editado |
| Duplicado | Ctrl / Cmd + D | Duplicar uma seção/coluna/widget editado |
| Salvar | Ctrl / Cmd + S | Salve sua página no histórico de revisões |
Vamos para
| Painel/Visualização | Ctrl / Cmd + P | Alternar entre o painel e a visualização de visualização |
| Edição móvel | Ctrl / Cmd + Shift + M | Alterne entre as visualizações de desktop, tablet e celular |
| História | Ctrl / Cmd + Shift + H | Vá para o painel de histórico |
| Navegador | Ctrl / Cmd + I | Abre o navegador |
| Biblioteca de modelos | Ctrl / Cmd + Shift + L | Abre nosso modal de biblioteca de modelos |
| Atalhos do teclado | Ctrl / Cmd + ? | Abre a janela de ajuda dos atalhos de teclado |
| Desistir | ESC | Abre Configurações e salta para Sair para o Painel |
CSS personalizado para páginas
Você sabia que pode ter CSS personalizado para cada página? Sim, mas observe que esse recurso está incluído apenas na versão Pro do Elementor. Como solução para isso, mostrarei como incluir CSS personalizado para cada página. Esse truque economizará dinheiro se você quiser a versão Pro apenas para adicionar pequenas personalizações em um nível de página.
Para fazer isso, você só precisa utilizar o widget HTML e este pedaço de código dentro:
<estilo>
/*Seu código CSS personalizado aqui*/
.elementor p {
cor vermelha;
tamanho da fonte: 25px;
decoração de texto: sublinhado;
altura da linha: 40px;
}
</style>
Dê uma olhada neste exemplo:
Barra de pesquisa do Elementor Finder
Muitas vezes, quando você está trabalhando no design da página, deseja pular para outras páginas, configurações, uma página de vendas ou qualquer outro lugar, e pode ser demorado se você: salvar a página> voltar ao seu painel> abrir páginas > procure a página que deseja abrir. Isso pode desperdiçar muito tempo e energia se você tiver que fazer isso várias vezes.
Felizmente, a Elementor possui uma solução integrada para agilizar e acelerar o processo de design. Em vez de passar por todos esses problemas, você pode simplesmente usar o Elementor Finder. Você pode pular diretamente para qualquer configuração, modelo, página ou parte do tema pesquisando na barra de pesquisa. O Finder pode ser acessado clicando nas teclas Cmd/Ctrl + E em qualquer lugar no painel do WordPress. Confira este vídeo para ver tudo o que você pode fazer com o Finder.
Usar o navegador
Navigator é uma janela de árvore de navegação que fornece acesso fácil a todos os elementos do construtor de páginas. Esta pequena janela permite que você navegue pelos elementos e arraste e solte os widgets facilmente.
O Navigator é particularmente útil para páginas longas ou páginas com design complexo de várias camadas e para elementos que combinam o Z-Index, menos uma margem, posição absoluta, etc. Ele permite acessar alças de elemento que podem ser posicionadas atrás de outros elementos.
Você pode acessar o Navigator de 3 maneiras simples:
- Clique com o botão direito do mouse em qualquer elemento e clique em Navegador. Isso irá redirecioná-lo automaticamente para o elemento específico na árvore de navegação.
- Clique no botão de elementos no rodapé do painel.
- Use o atalho de teclado Cmd/Ctrl + I.
Dê uma olhada neste vídeo para vê-lo em ação:
O Navigator também possui algumas outras funções, como nomear widgets, recolher e expandir widgets, flutuar ou encaixar o painel e mostrar ou ocultar widgets. Você pode ver uma revisão completa em sua documentação .
Defina sua paleta de cores
Normalmente, quando criamos um site, seguimos um padrão de design criado pelo designer. Esse padrão geralmente contém uma combinação de cores repetidas em todo o site. São cores da marca que devem permanecer inalteradas. Isso significa que toda vez que adicionamos um novo widget na página, temos que copiar e colar o código de cor ou lembrar qual é o código de cor para aplicá-lo na configuração do widget. Fazer isso pode ser demorado. Felizmente, a Elementor tem uma solução para nós.
Você pode definir as cores da sua marca nas configurações do Color Picker e reutilizá-las sempre que estiver acessando as opções de cores para o estilo do widget. Basta escolher uma paleta predefinida ou definir suas próprias cores personalizadas para economizar tempo ao projetar.
Dê uma olhada neste vídeo:
Estilos e modelos de widgets pré-fabricados e reutilizáveis
O Elementor é um dos melhores construtores de páginas, mas você já pensou nos botões padrão e feios? Abas? Menus? Ou qualquer outro widget? Esses widgets padrão parecem ter sido projetados há vários anos, ou talvez você queira reutilizar o widget que você estilizou no projeto A no projeto B?
Atualmente, você não pode salvar e reutilizar estilos de widget para projetos futuros com o Elementor. Felizmente, o plugin WunderWP gratuito oferece algumas maneiras de resolver esse problema.
Em primeiro lugar, o WunderWP inclui vários estilos de widget predefinidos à sua disposição. Estilos prontos para títulos, galerias, botões, divisores, carrosséis, formulários, tabelas de preços e muito mais estão disponíveis com um clique. Basta arrastar um widget Elementor para sua página, selecionar um estilo de widget WunderWP pronto e começar a adicionar conteúdo.
Com o WunderWP, você também pode salvar e reutilizar facilmente seus próprios estilos de widget no Elementor. É simples: estilize um widget, salve-o no WunderWP Cloud (que é gratuito!) e use-o posteriormente para widgets semelhantes. Isso funciona para widgets simples e complicados. Por exemplo, você pode usar isso para salvar um widget de título que contém valores tipográficos diferentes ou para um widget de imagem com sombras projetadas personalizadas.
O mesmo vale para os modelos – você pode salvar modelos completos ou parciais que você cria na WunderWP Cloud. O modelo estará lá, então, quando estiver pronto, você poderá inseri-lo facilmente em uma página ou site. Dessa forma, você só precisará construí-lo uma vez, economizando muito tempo.
Ou você pode aproveitar os modelos de conteúdo prontos do WunderWP No momento, existem mais de 50 modelos de seção prontos – como contato, chamada para ação, cabeçalho, rodapé, serviços, sobre, equipe, serviços, contagem regressiva e muito mais – para uma variedade de propósitos.
Empacotando
Até este momento, sem sombra de dúvida, o Elementor é um dos melhores construtores de páginas do WordPress . Quase todos os dias, novas ferramentas e recursos são adicionados para agilizar e acelerar o processo de design e acelerar o tempo de entrega do projeto.
Qual dica você acha mais útil e qual você não conhecia antes? Talvez você também saiba algo não mencionado aqui? Por favor, compartilhe com outras pessoas.