Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Dicas para acelerar o processo de design com o Elementor

Você está em:

Dicas para acelerar o processo de design com o Elementor
Dicas para acelerar o processo de design com o Elementor

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

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

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

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

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 + CCopie uma seção, coluna ou widget
ColarCtrl / Cmd + VColar 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 editado
DuplicadoCtrl / Cmd + DDuplicar uma seção/coluna/widget editado
SalvarCtrl / Cmd + SSalve sua página no histórico de revisões

Vamos para

Painel/VisualizaçãoCtrl / Cmd + PAlternar entre o painel e a visualização de visualização
Edição móvelCtrl / Cmd + Shift + MAlterne entre as 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 de biblioteca de modelos
Atalhos do tecladoCtrl / Cmd + ?Abre a janela de ajuda dos atalhos de teclado
DesistirESCAbre 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:

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 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:

  1. 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.
  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 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.

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 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.

Estilos personalizados WunderWP

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.

Modelo personalizado WunderWP

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.

Modelo pré-fabricado WunderWP

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.

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.