Dicas para acelerar o processo de design com Elementor

Não é segredo que o Elementor é um dos melhores criadores de páginas da comunidade WordPress atualmente. 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 básico gratuito do WordPress, sem escrever uma única linha de código!


Embora a Elementor ofereça muitas opções e recursos de personalização, geralmente perdemos os detalhes e peças menores do plug-in que podem ter um grande impacto no processo de design de um site..

O design de 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 pode acelerar o processo de design com a Elementor fazendo pleno uso 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ê perde 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 se você não usar um modelo pré-fabricado, sempre poderá usar a biblioteca de modelos como inspiração. Os modelos podem ser facilmente importados diretamente para a página com apenas um clique.

Modelos Elementor podem ser divididos em duas partes. Primeiro, quando você deseja importar uma página pré-fabricada de cima para baixo, por exemplo, pode importar uma página inteira (como uma página Sobre ou Contato) com todo o seu conteúdo. A segunda opção é se você deseja apenas importar uma seção ou bloco do design. Você pode fazer isso se, por exemplo, gostar de uma das seções de serviços, herói, entre em contato conosco ou se inscrever..

Maravilhosas coleções gratuitas e premium de modelos estão prontamente disponíveis na Web.

Envato Market

Envato Market

O mercado Envato é provavelmente o mercado mais popular, não apenas para modelos Elementor, mas também para temas e plugins do WordPress.

TemplateMonster

TemplateMonster

O TemplateMonster é outro provedor de ativos de modelo de boa qualidade, eles também têm alguns modelos gratuitos.

Biblioteca de modelos Elementor

Biblioteca de modelos Elementor

Biblioteca de modelos Elementor – É um armazém de modelos nativo para Elementor, novos modelos Free e Premium são exibidos com muita frequência.

Use teclas de atalho

Se você trabalha com Elementor apenas com o mouse, pare! Gaste 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ê deseja navegar entre o painel e o modo de visualização ou mudar 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

DesfazerCtrl / Cmd + ZDesfazer qualquer alteração feita na página
RefazerCtrl / Cmd + Shift + ZRefazer qualquer alteração feita na página
cópia deCtrl / Cmd + CCopiar uma seção, coluna ou widget
ColarCtrl / Cmd + VCole uma seção, coluna ou widget
Colar EstiloCtrl / Cmd + Shift + VCole o estilo de uma seção, coluna ou widget
ExcluirExcluirExcluir uma seção / coluna / widget que é editado
DuplicadoCtrl / Cmd + DDuplicar uma seção / coluna / widget que é editado
Salve Ctrl / Cmd + SSalve sua página no histórico de revisões

Vamos para

Painel / VisualizaçãoCtrl / Cmd + PAlterne entre o painel e a visualização de visualização
Edição para dispositivos móveisCtrl / Cmd + Shift + MAlterne entre visualizações de desktop, tablet e celular
HistóriaCtrl / Cmd + Shift + HVá para o painel de histórico
NavegadorCtrl / Cmd + IAbre o navegador
Biblioteca de modelosCtrl / Cmd + Shift + LAbre nosso modal da biblioteca de modelos
Atalhos do tecladoCtrl / Cmd + ?Abre a janela de ajuda dos atalhos de teclado
SairESCAbre 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 alternativa, mostrarei como incluir CSS personalizado para cada página. Esse truque economizará seu dinheiro se você quiser a versão Pro apenas para adicionar pequenas personalizações no nível da página.

Para fazer isso, você só precisa utilizar o widget HTML e esse pedaço de código dentro:

Veja este exemplo:

Código personalizado

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 isso pode levar muito tempo se você: salvar a página> voltar ao painel> abrir páginas > pesquise a página que você 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 otimizar e acelerar o processo de design. Em vez de passar por todo esse problema, você pode simplesmente usar o Elementor Finder. Você pode pular diretamente para qualquer configuração, modelo, página ou parte de um tema pesquisando na barra de pesquisa. O Finder pode ser acessado clicando nas teclas Cmd / Ctrl + E em qualquer lugar do painel do WordPress. Confira este vídeo para ver tudo o que você pode fazer com o Finder.

Use o Navegador

O Navegador é uma janela da árvore de navegação que fornece acesso fácil a todos os elementos no construtor de páginas. Essa pequena janela permite que você navegue pelos elementos e arraste e solte os widgets facilmente.

O Navegador é particularmente útil para páginas longas ou páginas com design complexo em várias camadas e para elementos que combinam o Índice Z, menos uma margem, posição absoluta etc. Ele permite acessar alças de elementos que podem ser posicionadas atrás de outros elementos.

Você pode acessar o Navigator de uma de três maneiras simples:

  1. Clique com o botão direito do mouse em qualquer elemento e clique em Navegador. Isso o redirecionará automaticamente para o elemento específico na árvore de navegação.
  2. Clique no botão de elementos no rodapé do painel.
  3. Use o atalho de teclado Cmd / Ctrl + I.

Dê uma olhada neste vídeo para vê-lo em ação:

O Navigator também tem outras funções, como nomear widgets, recolher e expandir widgets, flutuar ou encaixar o painel e mostrar ou ocultar widgets. Você pode ver uma resenha completa em suas documentação.

Definir 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 das cores repetidas em todo o site. Essas são as cores da marca que devem permanecer inalteradas. Isso significa que toda vez que adicionamos um novo widget na página, precisamos copiar e colar o código de cores ou lembrar qual é o código de cores 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 Seletor de cores e reutilizá-las sempre que acessar 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 widget pré-fabricados e reutilizáveis

O Elementor é um dos melhores criadores de páginas, mas você já pensou nos botões padrão e feios? Guias? Menus? Ou qualquer outro widget? Esses widgets padrão parecem ter sido projetados há vários anos atrás, ou, talvez você queira reutilizar o widget estilizado no projeto A no projeto B?

Atualmente, você não pode salvar e reutilizar estilos de widget para projetos futuros com a Elementor. Felizmente, o livre WunderWP O plugin oferece algumas maneiras de resolver esse problema.

Primeiro, o WunderWP inclui vários estilos de widget predefinidos à sua disposição. Estilos prontos para títulos, galerias, botões, divisórias, carrosséis, formulários, tabelas de preços e muito mais estão disponíveis com um clique. Simplesmente arraste um widget Elementor para sua página, selecione um estilo de widget WunderWP pronto e comece a adicionar conteúdo.

Predefinições WunderWP

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 na WunderWP Cloud (que é grátis!) E use-o mais tarde para widgets semelhantes. Isso funciona para widgets simples e complicados. Por exemplo, você pode usar isso para salvar um widget de cabeçalho que contenha valores tipográficos diferentes ou para um widget de imagem com sombras projetadas personalizadas.

Estilos personalizados do WunderWP

O mesmo vale para modelos – você pode salvar modelos completos ou parciais criados na WunderWP Cloud. O modelo estará lá. Assim, quando estiver pronto, você poderá inseri-lo facilmente em uma página ou site. Dessa forma, você precisará construí-lo apenas uma vez, economizando muito tempo.

Modelo personalizado do WunderWP

Ou você pode tirar proveito dos modelos de conteúdo pronto do WunderWP No momento, existem mais de 50 modelos de seção prontos – como contato, call to action, cabeçalho, rodapé, serviços, equipe, serviços, contagem regressiva e muito mais – para uma variedade de finalidades.

Modelo WmadeWP Premade

Empacotando

Até o momento, sem 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 otimizar e acelerar o processo de design e acelerar o tempo de entrega do projeto.

Qual dica você acha que é a 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.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me