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.
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
O mercado Envato é provavelmente o mercado mais popular, não apenas para modelos Elementor, mas também para temas e plugins do WordPress.
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 – É 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
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
Copiar uma seção, coluna ou widget
Colar
Ctrl / Cmd + V
Cole 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 que é editado
Duplicado
Ctrl / Cmd + D
Duplicar uma seção / coluna / widget que é editado
Salve
Ctrl / Cmd + S
Salve sua página no histórico de revisões
Vamos para
Painel / Visualização
Ctrl / Cmd + P
Alterne entre o painel e a visualização de visualização
Edição para dispositivos móveis
Ctrl / Cmd + Shift + M
Alterne entre 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 da biblioteca de modelos
Atalhos do teclado
Ctrl / Cmd + ?
Abre a janela de ajuda dos atalhos de teclado
Sair
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 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:
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:
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.
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 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.
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.
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.
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.
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.
07.06.2020
Dicas para acelerar o processo de design com Elementor
Jeffrey Wilson
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.
Contents
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
O mercado Envato é provavelmente o mercado mais popular, não apenas para modelos Elementor, mas também para temas e plugins do WordPress.
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 – É 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
Vamos para
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:
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:
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.
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.
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.
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.
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.