Elementor Pro: 10 recursos incríveis para desbloquear - Parte I

Elementor Pro: 10 recursos incríveis para desbloquear - Parte I

Gostaria de saber os melhores recursos para dominar no Elementor Pro?

Todos os usuários do WordPress sabem disso. Elementor é um dos construtores de páginas mais populares. Por ser um plugin freemium, você pode aproveitar a experiência de criar uma bela página de forma visual usando o Elementor com a opção de atualizar para a versão profissional para desbloquear recursos mais avançados.

Leia nosso guia sobre: Como instalar o Elementor no WordPress

Na verdade, existem duas maneiras de estender a funcionalidade do Elementor. Além de atualizar para a versão profissional, você também pode instalar complementos de terceiros desenvolvidos por desenvolvedores conhecidos, como weDevs, Desenvolvedor WPD, vers Crocobloco. Se você preferir atualizar para o Elementor Pro e ainda se perguntando quais recursos você pode desbloquear, aqui está a lista.

20 principais recursos do Elementor Pro

1. Gerador de tema

WordPress é escrito em PHP. Dito isso, para criar um plugin ou tema WordPress, você também precisa ser proficiente em PHP e linguagens de suporte como JavaScript. Mas isso foi antes. Hoje você pode criar seu próprio tema WordPress sem codificação, graças ao recurso de criador de tema oferecido por alguns plug-ins de criação de página como o Elementor.

O que é um construtor de tema?

Para entender o conceito de um criador de tema, primeiro você precisa entender os componentes de um tema WordPress. Um tema WordPress consiste em arquivos de modelo. Cada arquivo de modelo controla o layout de parte do tema. Por exemplo, o arquivo header.php controla o layout do cabeçalho do tema, enquanto o arquivo footer.php controla o layout do rodapé do tema. A maioria dos temas do WordPress tem os seguintes arquivos de modelo:

  • header.php: Para controlar o layout do cabeçalho.
  • footer.php: Para controlar o layout do rodapé.
  • single.php: Para controlar o layout de um único artigo (postagem no blog).
  • sidebar.php: Para controlar o layout da barra lateral.
  • archive.php: Para controlar o layout das páginas de arquivo.
  • page.php: Para controlar o layout da página.

Um construtor de tema permite criar modelos customizados para substituir os modelos acima, bem como outros modelos que pertencem a um tema. Você pode construir o modelo customizado usando o editor visual do construtor de página que você está usando (Elementor neste caso).

elementor-pro-awesome-features-to-master

Uma das vantagens de usar um construtor de tema em vez de um tema é que você pode definir onde um modelo customizado será aplicado. Por exemplo, você pode definir um modelo de cabeçalho personalizado para aplicar a uma determinada postagem, página, postagens em certas categorias, todo o site, etc.

Em outras palavras, você pode ter layouts diferentes de uma determinada parte do tema (por exemplo, cabeçalho) criando vários modelos personalizados para a mesma parte. Outra vantagem, você tem opções de personalização ilimitadas.

2. Construtor WooCommerce

Você tem um site de comércio eletrônico baseado no WooCommerce? O Elementor Pro também é capaz de levar o design de seu site de comércio eletrônico para o próximo nível, permitindo que você crie modelos personalizados para sua loja online WooCommerce. Não há necessidade de comprar um tema WooCommerce.

Lire: Como criar uma página personalizada de uma loja WooCommerce com Elementor

Em vez disso, você mesmo pode personalizar partes do WooCommerce usando o editor visual do Elementor. As partes do WooCommerce para as quais você pode criar modelos personalizados são:

  • Única página de produto
  • Páginas de arquivo do produto (categorias e tags)
  • Página da loja

Você tem os seguintes widgets para criar os modelos personalizados para WooCommerce:

Produtos Classificação do produto
Breadcrumbs WooCommerce Estoque do produto
Adicionar personalizado ao carrinho Meta do Produto
Páginas WooCommerce Breve Descrição
Categorias de Produtos Conteúdo do Produto
Carrinho de Menu Guias de dados do produto
Título do Produto Informação adicional
Imagens de produtos Relacionado ao produto
Preço do produto Upsells
Adicionar ao cartão

3. Construtor de formulários

elementor-pro-awesome-features-to-master

O Elementor Pro dá acesso ao widget Form. Você pode usar este widget para adicionar um formulário ao modelo de construtor de página / tema no qual está trabalhando. Este widget permite que você crie uma ampla variedade de tipos de formulário, graças ao seu amplo suporte a tipos de campo. Aqui estão os tipos de campo suportados pelo widget Form do Elementor:

Texto Aceitação
Email oculto
Textarea HTML
URL Palavra-passe
Tel Carregar arquivo
Selecionar Horário
Caixa de seleção Data
rádio Sessão

Você pode incorporar seu formulário em reCAPTCHA para protegê-lo de spammers. Com um pequeno truque, você também pode usar o widget Form para criar um página de registro em seu site. Elementor também permite que você crie um formulário em várias etapas para permitir que você crie um formulário longo simplificado, bem como para fornecer um melhor experiência do usuáriopara seus usuários.

O próprio Elementor não possui uma funcionalidade padrão para lidar com os envios de formulários. O widget de formulário do Elementor suporta integrações com serviços populares GetResponse, ActiveCampaign, ConvertKit, Discord, etc.

4. Gerador de Popup

O construtor de pop-up é um dos recursos que você pode desbloquear após atualizar para o Elementor Pro. Esse recurso permite que você crie lindos pop-ups em seu site sem codificação. Você pode até usar os modelos de formulário prontos oferecidos para agilizar seu fluxo de trabalho.

Existem mais de 100 modelos pop-up prontos oferecidos pela Elementor.

elementor-pro-awesome-features-to-master

O próprio gerador de pop-up do Elementor suporta os seguintes tipos de gatilhos:

  • No carregamento da página - ao carregar a página
  • Na rolagem - Ao rolar
  • Ao rolar para o elemento - Ao rolar para o elemento
  • Ao clicar - Ao clicar
  • Após inatividade - Após inatividade
  • Intenção de saída na página - Intenção de saída na página

O Gerador de pop-ups do Elementor Pro também suporta condições de exibição, o que permite definir onde um pop-up aparecerá. Ele também permite que você exiba uma janela pop-up com base nas seguintes condições:

  • Depois de x visualizações de página
  • Depois de x sessões
  • Ao chegar de um determinado url
  • Quando os motores de busca chegam
  • Mostrar uma janela pop-up apenas para usuários offline
  • Exibir em tipos de dispositivos específicos (desktop, tablet, smartphone)
  • Mostrar em navegadores da web específicos

Com seu suporte para gatilho de clique, você também pode usar o gerador de pop-up para criar menu em tela cheia e um menu fora da tela.

5. Integrações de terceiros

Como mencionado acima, você pode usar o widget Form do Elementor para criar uma ampla variedade de formulários, graças ao seu amplo suporte para campos de formulário. Um deles permite que você use o widget Form para criar um formulário de registro de e-mail para gerar leads.

Você pode conectar seu formulário a serviços populares de marketing por e-mail, como ActiveCampaign, GetResponse, etc.

Aqui estão os serviços de terceiros com os quais você pode integrar seu formulário:

  • GetResponse
  • ActiveCampaign
  • MailerLite
  • ConverterKit
  • MailPoet
  • Mailchimp
  • Gotejamento
  • Slack
  • Discórdia
  • HubSpot

Essas integrações de terceiros são particularmente úteis se você deseja usar o Elementor para criar páginas iniciais.

6. CSS personalizado

É verdade que o Elementor permite que você crie belas páginas em seu site WordPress sem ter que lidar com CSS. No entanto, se você deseja criar um site totalmente exclusivo, pode usar suas habilidades em CSS. Este recurso permite implementar recursos CSS que ainda não estão disponíveis no Elementor, como CSS Transform para adicionar um efeito de foco estiloso ao Elementor.

Leia também: Como importar ou exportar modelos no Elementor

Você pode adicionar CSS personalizado a cada elemento Elementor. Seja uma seção, coluna ou widget. Você pode acessar o bloco CSS personalizado sob a guia avançado no painel de configurações (painel do lado esquerdo) no editor Elementor para adicionar CSS personalizado.

7. Efeitos de movimento

O Elementor Pro vem com opções de ajuste para permitir que você aplique efeitos de movimento a um elemento na página em que está trabalhando. Você pode usar o recurso para adicionar efeitos de animação à sua página sem precisar entender JavaScript.

Os efeitos de movimento oferecidos pelo Elementor Pro são de dois tipos: o efeito de rolagem e o efeito do mouse. Além disso, você também pode aplicar a opção pegajosa à seção e aos widgets.

8. Mais de 90 widgets

Como você sabe, o Elementor é lançado como um plugin freemium, o que significa que há uma versão gratuita disponível para você aproveitar a experiência do usuário do Elementor sem gastar um centavo. Embora Elementor Free ofereça widgets básicos, a versão pro vem com widgets mais avançados, como Formulário, Postagens, Login, Lista de Preços, etc.

Aqui estão os widgets que você pode desbloquear após atualizar para o Elementor Pro.

POSTAGENS Contagem regressiva pós Trecho
Portfólio Botões de compartilhamento Imagem em destaque
Slides Blockquote Caixa do Autor
Contato Botão do Facebook Postar comentários
Iniciar Sessão Comentários Facebook Post Navigation
Título Animado Incorporação do Facebook Informações da postagem
Lista de Preços Página do Facebook Produtos
tabela de preços Modelo Breadcrumbs WooCommerce
Flip box Logo do site Adicionar personalizado ao carrinho
Chamada para Ação titulo do site Páginas WooCommerce
Carrossel de mídia Bloco de Página Categorias de Produtos
Carrossel Depoimento menu de navegação Carrinho de Menu
Avaliações Formulário de Pesquisa Lottie
Mapa Título do Post Código de destaque
vídeo Playlist Botão PayPal hotspot

Existem mais de 90 widgets que você pode desbloquear no total (widgets gratuitos e widgets profissionais)

9. Conteúdo dinâmico

Você não pode apenas usar o Elementor para construir sites estáticos. Com seu suporte de conteúdo dinâmico, você também pode usar o Elementor para construir um site dinâmico, como blog, portal de notícias, site de anúncios e outros tipos de sites dinâmicos. Você pode adicionar conteúdo dinâmico a uma página de modelo ou criador de tema usando os seguintes widgets:

  • Logo do site
  • titulo do site
  • Título da página
  • Título do Post
  • pós Trecho
  • Imagem em destaque
  • Informações da postagem
  • POSTAGENS

10. Campos personalizados

Os widgets que mencionamos no ponto 9 acima podem ser usados ​​para adicionar conteúdo dinâmico padrão do WordPress, como título do post, meta do post, imagem em destaque, etc.

E os campos personalizados? Elementor Pro também permite que você adicione Os campos personalizados. Ao maximizar essa funcionalidade, você pode usar o Elementor para construir qualquer tipo de site com o mínimo possível de plug-ins. O Elementor Pro é compatível com os seguintes plug-ins de campos personalizados populares:

  • vagens
  • Avançado campos personalizados
  • Toolset
  • JetEngine

Como integrar um determinado plugin de campo personalizado com Elementor?

Você pode simplesmente criar o grupo de campos personalizados usando seu plug-in de campo personalizado favorito e usar o Elementor para exibir os dados dos campos personalizados que você criou. Você pode exibir campos personalizados em um modelo. Você pode ler nosso artigo anterior para descobrir como adicionar campos personalizados no Elementor.

No final

Elementor é uma ótima ferramenta para construir um belo site sem lidar com nenhum código. Quer se trate de códigos CSS, códigos HTML, códigos PHP ou códigos JavaScript. A versão gratuita do Elementor era ótima, mas para desbloquear seu potencial como o melhor plug-in de construtor de páginas, você precisa desbloquear todos os recursos, o que pode ser feito atualizando para a versão profissional.

Aqui termina esta primeira lista de recursos que você poderá desbloquear usando o Elementor Pro. Você descobrirá os próximos em outro artigo.

Obtenha o Elementor Pro agora!

Conclusão

Aqui ! É isso neste artigo que apresenta os melhores recursos incríveis para dominar no Elementor Pro. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...

Como criar uma página personalizada de uma loja WooCommerce com Elementor

Como criar uma página personalizada de uma loja WooCommerce com Elementor

Gostaria de aprender como criar uma página personalizada para uma loja WooCommerce com Elementor?

Como você deve saber, o Elementor Pro vem com um recurso construtor WooCommerce que permite que você crie um site de comércio eletrônico personalizado com WooCommerce sem codificação. Este recurso permite que você crie páginas WooCommerce personalizadas usando o editor visual do Elementor, que oferece uma interface intuitiva.

Veja também: Como instalar o Elementor no WordPress

No momento de escrever este artigo, você pode criar páginas personalizadas para a página da loja, página do produto e páginas de arquivo do produto (tags e categorias). Em breve, você também poderá criar páginas personalizadas para a página de checkout e a página do carrinho.

Neste artigo, mostraremos como criar uma página de loja WooCommerce personalizada usando o recurso de construtor WooCommerce do Elementor Pro.

A página da loja em si é uma das páginas padrão do WooCommerce. Esta página funciona como uma vitrine para exibir seus produtos. Você pode acessar esta página indo para seusite.com/store. Por padrão, a página da loja WooCommerce exibe apenas produtos WooCommerce.

Ao criar uma página de loja personalizada usando o Elementor Pro, você pode adicionar elementos para tornar sua vitrine mais atraente.

Como criar uma página personalizada de uma loja WooCommerce com Elementor

Existem pelo menos dois widgets Elementor que você pode usar para criar uma página personalizada de uma loja WooCommerce: Produtos de arquivo e Produtos.

Neste exemplo, usamos o último.

A função do widget Produtos é bastante semelhante ao do widget Postagens. A diferença é que o widget Produtos é usado para exibir produtos WooCommerce enquanto o widget Postagens é usado para exibir postagens de blog.

Leia também: Como importar ou exportar modelos no Elementor

Observe que você só pode encontrar o widget Produtos quando o plug-in WooCommerce está instalado e ativado.

Para começar a criar uma página de loja WooCommerce personalizada usando Elementor Pro, vá para primeiro à Modelos -> Criador de temas no painel do WordPress. Clique na aba Produtos arquivo da página Theme Builder e, a seguir, clique no botão adicionar a ARQUIVO DE PRODUTOS.

Dê um nome à sua modelo e clique no botão CRIE UM MODELO.

como criar uma página personalizada para uma loja WooCommerce com ElementorExistem três modelos de página de loja personalizados que você pode escolher caso queira criar a página de loja personalizada a partir de um modelo. Se você deseja criar a página da loja personalizada do zero, basta fechar a biblioteca de modelos.

Veja também: Como usar o Color Sampler no Elementor

Neste exemplo, criaremos a página da loja personalizada do zero. Conforme mencionado acima, usaremos o widget Produtos para exibir os produtos.

Antes de adicionar o widget Produtos à caixa de edição, você pode definir o layout adicionando seções e colunas. Assim que o layout estiver pronto, você pode simplesmente arrastar o widget Produtos para a caixa de edição.

Como você pode ver, o widget Produtos carrega e exibe automaticamente os produtos WooCommerce mais recentes. Você pode modificar a consulta abrindo o bloco Inquerir sob a guia Conteúdo no painel de configurações. Existem cinco opções para escolher:

  • Consulta Atual - Consulta Atual
  • Últimos produtos - Últimos produtos
  • Venda - Venda
  • Apresentado - Apresentado
  • Seleção manual - Seleção manual

Você também pode definir a ordem em que os produtos são exibidos ou excluir certos

como criar uma página personalizada para uma loja WooCommerce com Elementor

Para definir o número de colunas e linhas, você pode abrir o bloco Conteúdo sob a guia Contente. A partir deste bloco, você também pode ativar o paginação.

Você pode brincar com o painel de configurações até obter as melhores configurações para o widget Produtos. Quando terminar de usar o widget Produtos, você pode adicionar mais widgets à sua página.

Leia também: Como usar o seletor de cores no Elementor

Assim que terminar de editar a página, você pode clicar no botão PUBLICAR na parte inferior do painel de configurações.

Adicione uma condição de exibição clicando no botão adicione uma condição. Como você deseja criar uma página de loja personalizada, selecione a opção Loja Página. Clique no botão SALVAR FECHAR para salvar a mudança.

como criar uma página personalizada para uma loja WooCommerce com Elementor

Até agora, você criou com sucesso a página da loja WooCommerce personalizada usando o Elementor Pro. Você pode ir em seu site.com/store para verificar o resultado.

Personalize o widget Produtos

Antes de publicar sua página, você pode personalizar o widget Produtos para torná-lo mais atraente. Para fazer isso, clique no widget na caixa de edição e navegue até a guia Estilo no painel de configurações. Existem quatro blocos que você pode abrir da seguinte maneira:

  • Produtos

Você pode abrir este bloco para definir a lacuna entre colunas e linhas. A partir deste bloco, você também pode definir a tipografia (família da fonte, tamanho da fonte, etc.), bem como a cor do texto dos elementos do produto, como título do produto, preço do produto, avaliação do produto. Produto, etc…. Você também pode definir a borda da imagem do produto,

  • Caixa

Nesse contexto, Box refere-se à embalagem de cada produto. Você pode abrir o bloco Caixa para definir a largura da borda do contêiner, o raio da borda, sombra da caixa, a cor de fundo, a cor da borda, etc.

  • Paginação

Se você ativar a opção Paginação do bloco Conteúdo, você pode abrir o bloco Paginação sob a guia Estilo para personalizar a paginação. Você pode definir coisas como espaçamento, cor da borda, cor de fundo, etc.

Você também pode definir parâmetros diferentes em cada estado (normal, apontando e ativo).

  • Venda Flash

Ao adicionar um novo produto no WooCommerce, você pode definir um atributo de preço de venda para mostrar aos visitantes que o produto associado tem desconto. Para enfatizar isso, você pode exibir o atributo de venda na página da loja para que os produtos com desconto tenham um emblema de venda.

Você pode abrir o bloco Venda Flash para personalizar o selo de venda. Você pode definir elementos como cor do texto, cor do fundo, tipografia, raio da borda, tamanho (largura e altura), distância, etc….

No final

WooCommerce Builder é um dos recursos oferecidos pelo Elementor Pro. Ele permite que você crie um site de comércio eletrônico exclusivo e personalizado com WooCommerce e sem codificação. Não há necessidade de instalar um tema WordPress que afirma ser projetado para WooCommerce. Em vez disso, você mesmo pode criar páginas WooCommerce personalizadas usando o editor visual do Elementor.

Leia também: Como adicionar divisor para criar seção no Elementor

Até a versão 3.2.2, o Elementor Pro permite apenas a criação de uma página de loja personalizada, página de produto único personalizado e páginas de arquivo de produto personalizado. Mas a Elementor anunciou que na próxima versão do Elementor Pro, você também será capaz de criar uma página de carrinho personalizada, uma página de checkout personalizada e uma página de conta de cliente personalizada.

Obtenha o Elementor Pro agora!

Conclusão

Aqui está ! É isso neste artigo que mostra como criar uma página personalizada para uma loja WooCommerce com Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...

Como importar ou exportar modelos no Elementor

Como importar ou exportar modelos no Elementor

Você gostaria de importar ou exportar modelos Elementor para acelerar seu fluxo de trabalho?

Exportar modelos de página é um dos meus recursos favoritos em Elementor. Por quê?

Porque me economiza tempo tendo que criar o mesmo modelo em outro site. Só preciso exportar o modelo de página e importá-lo para outro site.

Neste artigo, vou mostrar como fazer isso.

Mas, e se você tiver alguns problemas no processo?

Bem, é fácil e vou mostrar para você também.

Como criar um template

Apenas vá para o Modelos registrados sob modelos Elementor. Clique no botão " adicionar ".

Indique se deseja um modelo de página ou um modelo de seção ou qualquer outro modelo. Dê um nome a ele. Clique no botão " Crie um modelo ".

Basta selecionar um dos modelos gratuitos clicando no ícone da pasta Adicionar um modelo.

Selecione um modelo de sua preferência e clique em " inserir " Ele fará o download do modelo e o colocará na página.

Pressione " publicar E depois voltar para O EDITOR DE WORDPRESS ".

Como importar ou exportar modelos no Elementor

Dê uma olhada em seus modelos salvos e veja se seu modelo está salvo.

Exportar um modelo para o Elementor

Agora, para exportar um modelo, basta passar o mouse sobre o modelo salvo e clicar em "Exportar modelo".

Como importar ou exportar modelos no ElementorEle baixará um arquivo JSON para o seu computador. Você pode renomeá-lo se quiser torná-lo mais fácil de identificar.

Importar um modelo para o Elementor

Vá para o outro site e navegue até seus modelos salvos. Clique no botão “Importar modelos”.

Como importar ou exportar modelos no Elementor

Selecione o modelo ou arquivo JSON que você baixou e clique em "Importar agora".

Você verá em seus modelos salvos que o modelo foi importado.

Leia também: Como usar o Color Sampler no Elementor

Outra maneira de fazer isso é ao criar um novo modelo ou adicionar um modelo, há uma opção para importar um modelo.

Selecione o modelo ou arquivo JSON que você baixou e ele será adicionado à sua biblioteca Meus modelos. Agora você pode inserir o modelo na página.

Como importar ou exportar modelos no Elementor

Erro ao importar um modelo e como corrigi-lo

E se você tentar importar um modelo e encontrar um erro de arquivo inválido?

Não se preocupe. Este é um erro comum e normalmente ocorre quando o modelo que você está tentando importar é criado a partir de uma versão mais antiga do Elementor.

Veja também: Como usar o seletor de cores no Elementor

Existe uma correção para isso? Sim, certamente existem.

Então aqui está o que você precisa fazer. Faça downgrade de sua versão do Elementor.

Como? Apenas vá para o Lista de plug-ins Elementor e na visualização avançada, você encontrará a seção Versão anterior na parte inferior.

Como importar ou exportar modelos no Elementor

Eu sugiro que você selecione e baixe a última versão estável do Elementor.

Agora, existem duas maneiras de fazer o downgrade de sua versão do plugin.

Em primeiro lugar, você precisa acessar os plug-ins. Desative e exclua Elementor. Você pode então baixar e ativar a versão antiga que você baixou.

Em segundo lugar, você pode instalar um plugin chamado Atualizações fáceis de tema e plug-in. Na verdade, é um dos meus plug-ins favoritos. O que ele faz é que mesmo se você tiver um plugin instalado, ele permite que você instale um plugin nele. Acho muito conveniente e uso em todos os meus sites.

Como importar ou exportar modelos no Elementor

Então, com este plugin instalado, você pode baixar a versão antiga do Elementor e sobrescrever a versão atual que você tem. Ative o plugin.

Você verá que o Elementor foi rebaixado para a versão anterior.

Leia também: Como adicionar paginação no Elementor

Vá para a sua biblioteca Elementor e importe o modelo criado a partir da versão antiga. Você verá que ele já foi importado para sua biblioteca.

Volte para os plug-ins e atualize sua versão do Elementor para a versão mais recente. Ao atualizar seu painel, você poderá ver isso em seu Modelos registrados, o modelo está lá e foi importado corretamente.

Obtenha o Elementor Pro agora!

Conclusão

Aqui está ! É isso neste artigo que mostra como importar ou exportar modelos no Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...

Como usar o Color Sampler no Elementor

Como usar o Color Sampler no Elementor

Você gostaria de usar o Color Sampler no Elementor?

Hoje vamos falar sobre outro recurso bastante popular no Elementor. Embora permaneça amplamente subestimado, esse recurso o ajudará a melhorar sua produtividade com o Elementor.

Descubra: Como instalar o Elementor no WordPress

A paleta de cores de um site é uma parte essencial de a experiência do usuário. Escolher a paleta errada pode tornar essa experiência um desastre e custar um grande número de leitores. Mas encontrar o melhor esquema de cores pode melhorar não apenas a experiência do usuário.

O Color Sampler permite que você extraia cores de imagens e outros elementos em sua página para criar um esquema de cores perfeito que pode ser usado em um site de uma única página ou em todo o site.

Leia também: Como usar o seletor de cores no Elementor

Agora, vamos ver como esse recurso funciona.

Para completar este tutorial, crie uma página ou modelo. Aqui, importamos um modelo de página. Para fazer isso, clique no ícone da pasta na caixa de edição.

Como usar o Color Sampler no Elementor

No Popup que aparece, digite na barra de pesquisa "Portfólio" e escolha o último elemento da lista de resultados

Clique inserir e o modelo será inserido em sua página ou postagem. Na imagem abaixo você descobrirá nossa home page.

Vamos modificar o fundo azul à direita usando o Color Sampler para extrair cores da imagem à esquerda.

Clique em Editar Coluna

No painel esquerdo, clique na guia Estilo e no bloco fundo, clique em Tipo de fundo Clássico.

Em seguida, na opção de cor, clique no selecionador de cores e depois no Amostrador de cores.

Como usar o Color Sampler no Elementor

Clique na imagem à esquerda, um Popup apresentará a paleta de cores encontrada nesta imagem. Selecione o que você gosta e o fundo à direita receberá imediatamente essa cor.

Como usar o Color Sampler no Elementor

E aí está, você criou um esquema de cores perfeito que combina perfeitamente com sua imagem.

Obtenha o Elementor Pro agora!

Conclusão

Aqui está ! É isso neste artigo que mostra como usar o Color Sampler no Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...

Como usar o seletor de cores no Elementor

Como usar o seletor de cores no Elementor

Gostaria de usar o seletor de cores no Elementor?

Elementor acaba de lançar um novo recurso, Seletor de cores. Este recurso é muito útil porque agora você pode usar a mesma cor em qualquer parte do seu site com apenas um clique. Portanto, não é mais necessário colar manualmente o código hexadecimal como antes.

Mas como você usa esse recurso? Leia mais para descobrir.

Leia também: Como usar fontes globais no Elementor

Caso você tenha esquecido, existem mais de 10 milhões de cores neste mundo. No mundo da web, uma cor pode ser representada com um código hexadecimal ou um código RGB. O próprio Elementor oferece suporte a ambos os códigos de cores. Para usar a mesma cor, você pode copiar o código hexadecimal ou código RGB da cor desejada e colar o código em qualquer parte onde deseja usar a cor.

Foi antes.

Com o seletor de cores do Elementor, agora você pode salvar uma determinada cor e usá-la repetidamente sempre que trabalhar com o Editor do Elementor. Com apenas um clique. Esse novo recurso é muito legal porque encontrar uma cor adequada é uma das tarefas complicadas do web design além de escolher uma fonte.

Veja também: Como usar cores globais no Elementor

Como usar o seletor de cores do Elementor

Para usar o seletor de cores do Elementor, primeiro adicione um widget como de costume. Assim que o widget for adicionado, vá para a guia Estilo no painel esquerdo. Escolha qualquer configuração que envolva cor (por exemplo, cor do texto ou cor de fundo).

Leia também: Como criar um formulário de upload de arquivo no Elementor

Escolha sua cor favorita no seletor de cores. Depois de encontrar uma cor adequada, clique no botão de adição dentro do seletor de cores.

Você será solicitado a confirmar se deseja criar uma nova cor global. Digite um novo nome e clique no botão Crio.

Como usar o seletor de cores no Elementor

De agora em diante, você pode reutilizar a cor que acabou de adicionar acima sempre que quiser definir uma cor no Elementor. Seja a cor de fundo, cor da fonte ou outras configurações que envolvam cor.

Leia também: Como adicionar paginação no Elementor

Para provar isso, você pode procurar outro elemento que aceite a cor, como o título, você pode reutilizar essa cor como achar melhor.

Como usar o seletor de cores no Elementor

Se você deseja gerenciar essas cores, recomendamos que você leia nosso guia sobre Como usar cores globais no Elementor

Palavras finais

Em web design, escolher uma cor é uma das tarefas difíceis além de escolher uma fonte. Depois que uma cor adequada é encontrada, você normalmente copia o código hexadecimal ou o código RGB para usá-lo em outras partes da página em que está trabalhando.

Veja também: Como adicionar um índice no Elementor

Com o seletor de cores do Elementor, este método antigo não se aplica mais. Agora você pode salvar uma determinada cor e reutilizá-la com um clique, em vez de colar o código hexadecimal.

Obtenha o Elementor Pro agora!

Conclusão

Aqui está ! É isso neste artigo que mostra como usar o seletor de cores no Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...

Como adicionar paginação no Elementor

Como adicionar paginação no Elementor

Precisa adicionar paginação no Elementor?

Você pode usar o Elementor para construir quase todos os tipos de sites. Incluindo sites dinâmicos como e-zines ou blogs. Para sites como e-zines ou blogs, um dos elementos cruciais é a navegação.

Veja também: Como instalar o Elementor no WordPress

A paginação permite que você divida o conteúdo do seu site em várias páginas. Digamos que você tenha centenas de artigos que deseja mostrar na página inicial. Com a paginação, você pode dividir esses artigos em várias páginas. Você pode, por exemplo, exibir apenas 10 artigos por página. Para exibir os outros artigos, você pode usar a paginação.

A discussão sobre paginação pode ser mais ampla do que mencionamos acima. Mas queremos nos concentrar neste contexto.

Leia também: Como adicionar um índice no Elementor

Elementor permite que você adicione paginação ao seu site. Você pode encontrar o parâmetro de paginação ao trabalhar com o widget POSTAGENS e o widget Arquivar postagens. Neste artigo, mostraremos como adicionar paginação ao trabalhar com esses widgets.

Observação: Os widgets Posts e Archive Posts estão disponíveis apenas no Elementor Pro.

Como adicionar paginação no Elementor com widgets de Postagens e Arquivar Postagens

Para começar, você pode criar uma nova página / postagem e editá-la com o Elementor. Você também pode editar uma página existente.

Em seguida, no editor Elementor, adicione o widget POSTAGENS arrastando-o do painel esquerdo para a caixa de edição.

Como adicionar paginação no Elementor

Assim que o widget for adicionado, vá para o painel esquerdo e abra a opção Paginação sob a guia Conteúdo. Selecione o tipo de paginação no menu suspenso. Neste exemplo, usamos Números.

Por padrão, sua paginação limita as páginas a 5. Você pode alterar esta opção dependendo do número de artigos que possui. Há uma coisa crucial que você deve observar aqui. O limite de página é o número máximo de páginas que seu visitante pode acessar.

Veja também: Como adicionar reCAPTCHA ao seu formulário Elementor

Se você tiver um grande número de postagens (digamos, mais de 100), você deve definir o limite da página para um número maior para permitir que seus visitantes vejam as postagens por página na navegação. Se você definir o limite de páginas como 5, embora defina as postagens por página como 10, o visitante só poderá ver as últimas 50 postagens em seu site.

WordPress (ou Elementor mais precisamente) irá ocultar postagens mais antigas que não as últimas 50 postagens.

Como adicionar paginação no Elementor

Para tornar sua paginação curta e organizada, você pode ativar a opção Encurtar.

Personalização da paginação

Para personalizar sua paginação, você pode abrir a opção Paginação em a guia Estilo do painel esquerdo.

Você pode definir o estilo da fonte, o tamanho da fonte e a família da fonte na seção Tipografia. Clique no ícone de lápis para abrir a configuração de tipografia.

Para definir a cor da paginação, você pode clicar no seletor de cores na seção Cores. Existem 3 cores que você pode definir: NORMAL, HOVER e ACTIVE (a página ativa). Você pode definir o espaço entre os números de paginação na seção Espaço entre.

Quando terminar, você pode clicar no botão PUBLICAR para publicar sua página. Ou, se você estiver editando uma página, pode clicar no botão ATUALIZAR para aplicar as novas alterações.

Como adicionar paginação no Elementor

Palavras finais

A paginação é crucial o suficiente em sites dinâmicos, como e-zines ou blogs. No Elementor você pode usar widgets POSTAGENS para ver artigos do seu site. Você também pode usar o widget Arquivo Posts para ver os arquivos do seu site.

Leia também: Como criar um formulário de upload de arquivo no Elementor

Esses widgets têm opções de configurações de paginação, que permitem adicionar navegação a qualquer parte do site onde você os usa.

Obtenha o Elementor Pro agora!

Conclusão

Aqui está ! É isso neste artigo que mostra como adicionar paginação no Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...