Home 9 Elementor 9 Configurações do seu site design, estilo e configurações – Elementor

Configurações do seu site design, estilo e configurações – Elementor

Nesse post vamos mostrar como você pode personalizar toda a cara do seu site utilizando o Elementor, será possível alterar as Cores globais, Fontes Globais, Tipologia, Botões, Imagens, Campos do Formulário, Identidade do site, Fundo, Layout, Lightbox, CSS personalizado e Configurações adicionais.

Para acessar todos esses recurso, faça login no seu painel administrativo do WordPress (seudominio.com.br/wp-admin), após isso, acesse a página inicial da sua loja, uma barra de administração preta aparecerá em todas as páginas do seu site ou loja, clique na opção Editar com Elementor nesta barra. 

Após isso, na barra lateral esquerda da página de edição clique no ícone com três ricos mostrado na imagem abaixo.

No menu clique na aba Configurações do site.

Nessa página do menu você terá a opção de configurar os seguintes itens:
-Sistema de design- e Fontes Globais.
-Estilo do sistema- Tipologia, Botões, Imagens e Campos do Formulário.
-Configurações- Identidade do site, Fundo, Layout, Lightbox, CSS personalizado e Configurações adicionais.
Veja ponto a ponto abaixo.

Sistema de design – Cores globais

Crie seu próprio sistema de design com cores globais e estilos de texto que podem ser facilmente atribuídos a elementos em seu site.
Defina as cores globais predefinidas (cores primárias, secundárias, de texto e de destaque), cores personalizadas embutidas ou crie novas cores globais a partir das configurações globais do Elementor.

Cores Globais Predefinidas
Por padrão, as cores predefinidas (  Primária ,  Secundária ,  Texto  e  Acento ) são preenchidas previamente a partir do CSS do seu tema. Altere-os aqui para substituir as configurações do seu tema. Saiba quais elementos são afetados pela paleta de cores padrão.

Novas Cores Globais
Além das 4 cores globais predefinidas (Primário, Secundário, Texto e Assento), você pode adicionar qualquer cor que escolher a paleta global, para uso em qualquer opção de cor Elementor.

Sistema de design – Fontes Globais

Editar estilo de fonte global : Clique no  ícone de lápis  para selecionar as opções de tipografia para qualquer estilo de texto existente. Os nomes dos estilos também podem ser alterados. Clique no  nome  para alterá-lo. Por exemplo, você pode alterar Primário para Principal, Acento para Destaque, etc.

Adicionar estilo de fonte global : Clique no  botão Adicionar estilo para adicionar um novo estilo de texto personalizado

Excluir estilo de fonte global : passe o mouse sobre o ícone de lápis do estilo de texto e clique no ícone da  lixeira  que aparece

 

Estilo do sistema Tipologia

Nesse item você pode alterar as seguintes opções.

Cor do Texto : Escolha a cor do texto padrão
Tipografia : altere as opções de tipografia para o texto padrão
Espaçamento de parágrafo : defina a quantidade de espaçamento padrão após um parágrafo (margem inferior)

Link
Normal | Hover
Cor : Escolha a cor padrão dos links para os estados normal e flutuante
Tipografia : altere a tipografia padrão dos links para os estados normal e flutuante

H1-H6
Cor : Escolha a cor padrão para cada Título (H1, H2, H3, H4, H5 e H6)
Tipografia : defina as opções de tipografia padrão para cada título (H1, H2, H3, H4, H5 e H6)

 

Estilo do sistema Botões

Nesse item você pode alterar as seguintes opções.

Tipografia : altere a tipografia padrão dos botões
Sombra do texto : defina a sombra do texto padrão para os botões
Normal | Hover
Cor do texto : Escolha a cor padrão para o texto do botão
Cor de fundo : escolha a cor de fundo padrão dos botões
Tipo de borda : defina o tipo padrão de borda para os botões (nenhuma, sólida, dupla, pontilhada, tracejada, ranhura)
Sombra da caixa : defina as opções padrão de sombra da caixa para os botões
Raio da borda : defina o raio da borda padrão para controlar o arredondamento dos cantos dos botões
Preenchimento : altere as configurações de preenchimento de botão padrão

Estilo do sistema Imagens 

Nesse item você pode alterar as seguintes opções.

Tipo de borda : defina o tipo padrão de borda para imagens (nenhuma, sólida, dupla, pontilhada, tracejada, ranhura) nos modos Normal e Hover

Raio da borda : defina o raio da borda padrão para controlar o arredondamento dos cantos das imagens nos modos Normal e Hover

Opacidade : defina o nível de opacidade padrão das imagens nos modos Normal e Hover

Sombra da caixa : defina as opções de sombra da caixa padrão para imagens nos modos Normal e Hover

Filtros CSS : defina os filtros CSS padrão: desfoque, brilho, contraste e saturação para imagens nos modos Normal e Hover

Duração da Transição (ms) (somente Hover) : Defina a quantidade de tempo padrão, em milissegundos, para que a Transição Hover ocorra.

Estilo do sistema Campos do Formulário

Nesse item você pode alterar as seguintes opções.

Rótulo
Cor : Escolha a cor de texto padrão para os rótulos de campo
Tipografia : defina as opções de tipografia padrão para rótulos de campo

Campo
Tipografia : defina as opções de tipografia padrão para texto do campo de entrada
Normal | Focus

Cor do texto : Escolha a cor do texto padrão para o texto do campo de entrada
Cor de fundo : Escolha a cor de fundo padrão para campos de entrada
Tipo de borda : defina o tipo padrão de borda para campos de entrada (nenhum, sólido, duplo, pontilhado, tracejado, sulco)
Raio da borda : defina o raio da borda padrão para controlar o arredondamento dos cantos dos campos de entrada
Sombra da caixa : defina as opções de sombra da caixa padrão para campos de entrada
Duração da Transição (ms) (Foco apenas) : Defina a quantidade de tempo padrão, em milissegundos, para que a Transição do Foco ocorra.
Preenchimento : defina as opções de preenchimento padrão para campos de entrada

Configurações Identidade do site

Controlar a identidade do seu site, incluindo o seu nome do site , Descrição do Site , do site Logo , e Favicon direito de Elementor Configurações do site.
Nome do site : digite o nome do seu site.
Descrição do site : insira um slogan curto ou uma descrição do seu site
Logotipo do site : selecione a imagem do logotipo do seu site na biblioteca de mídia
Favicon do site : selecione a imagem favicon do seu site na biblioteca de mídia

Configurações Fundo

Controle o plano de fundo do site, incluindo seu plano de fundo móvel.

Tipo de Fundo
Clássico
Cor : Escolha a cor do fundo
Imagem : escolha uma imagem da biblioteca de mídia

Gradiente
Cor : Escolha a primeira cor gradiente
Localização : defina a localização da primeira cor. Isso afetará a propagação
Segunda cor : Escolha a segunda cor gradiente
Localização : defina a localização da segunda cor. Isso afetará a propagação
Tipo : Escolha entre um gradiente linear ou radial
Ângulo : defina o ângulo do gradiente

Plano de fundo do navegador móvel
Cor : Escolha a cor do plano de fundo do celular.

Configurações Layout

Controlar as configurações de layout globais de Elementor 

Largura do conteúdo (px) : defina uma largura padrão para a área de conteúdo
Espaço dos widgets (px) : define o espaço entre os widgets
Seletor de título da página : se você deseja ocultar o título da página, insira o seletor CSS aqui
Seção esticada Ajustar a : escolha o elemento pai ao qual os elementos esticados se encaixarão
Layout padrão : defina o layout da página para novas páginas, escolhendo entre Padrão, Element ou Canvas ou Element ou Full Width

Breakpoints

Tablet : Defina o ponto de interrupção para dispositivos tablet. Abaixo deste ponto de interrupção e acima do ponto de interrupção móvel, o layout do tablet aparecerá (Padrão: 1025px)
Móvel : define o ponto de interrupção para dispositivos móveis. Abaixo deste ponto de interrupção, o layout móvel aparecerá (Padrão: 768px)

Configurações Lightbox

A guia Lightbox global permite que você ajuste as seguintes configurações:

Lightbox da imagem : deslize o botão para habilitar ou desabilitar o lightbox globalmente.
Contador : apenas para galerias com várias imagens. Se definido como Sim, adiciona uma contagem de imagens ao canto superior esquerdo da caixa de luz. Por exemplo, se a galeria contém 6 imagens, o contador exibirá 1/6, 2/6, etc. para indicar “Primeira de 6 imagens”, “Segunda de 6 imagens”, etc.
Tela inteira : se definido como Sim , adiciona um ícone clicável para permitir que o usuário abra a imagem em uma caixa de luz em tela inteira.
Zoom : se definido como Sim , adiciona um ícone clicável para permitir que o usuário amplie a imagem no lightbox. Depois de aumentar o zoom em uma imagem, você será capaz de movimentar a visualização e rolar pelas diferentes áreas da imagem.
Compartilhar : se definido como Sim , os recursos de compartilhamento são adicionados à lightbox, permitindo ao usuário compartilhar a imagem no Twitter, Facebook e Pinterest, ou baixá-la para seu computador.
Título : opcionalmente, exiba um título sob a imagem na caixa de luz. Selecione entre Nenhum , Título , Legenda , Alt ou Descrição
Descrição : opcionalmente, exiba uma descrição sob a imagem na caixa de luz. Selecione entre Nenhum , Título , Legenda , Alt ou Descrição
Cor de fundo : Escolha a cor de fundo e a opacidade da caixa de luz.
Cor da IU : escolha a cor da IU . Isso afeta a seta do lightbox e as navegações por pontos, o botão Fechar, etc.
UI Hover Color : Escolha a UI Hover Color . Isso afeta a seta do lightbox e as navegações por pontos, o botão Fechar, etc., quando o usuário passa o mouse sobre cada um.

 

Configurações CSS personalizado

Com o Elementor Pro, você pode definir CSS personalizado globalmente. Isso permite que você adicione regras CSS personalizadas que se aplicam a todo o seu site.

Configurações Configurações adicionais

Em configurações adicionais você terá alguma escolhas que será possível configurar ao seu gosto, entre elas estão, Tipos de post, Ativar ou desativar cores padrão, Ativar ou desativar fontes padrão e opções de compartilhamento de Dados de Uso.

Categorias:

Últimos posts:

Elementos Gerais aprenda qual são e seu uso – Elementor

Elementos Gerais aprenda qual são e seu uso – Elementor

Nesse post vamos mostrar como é fácil criar uma nova página ou um novo post usando os elementos básicos do elementor, o primeiro passo é criar uma nova página ou um novo post, para isso veja o caminho abaixo: Nova página, acesse Páginas > Adicionar nova.Novo post,...

Elementos Pro aprenda qual são e seu uso – Elementor

Elementos Pro aprenda qual são e seu uso – Elementor

Nesse post vamos mostrar como é fácil criar uma nova página ou um novo post usando os elementos básicos do elementor, o primeiro passo é criar uma nova página ou um novo post, para isso veja o caminho abaixo: Nova página, acesse Páginas > Adicionar nova.Novo post,...

Como atender seus clientes na plataforma Jivo Chat

Como atender seus clientes na plataforma Jivo Chat

Interação Cliente x JivoChat Um cliente inicia o chat pela página inicial do site e preenche os dados conforme a configuração do canal. Você receberá uma notificação baseada nas suas configurações e verá um sinal no ícone Central de Atendimento, no topo à direita.  Na...

Posts relacionados:

[prev]
[next]

0 comentários

Enviar um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *