Guia de configurações globais do Elementor: como usar as configurações do site Elementor para todo o seu site

Guia de definições de estilo global do Elementor Pro

O Elementor Pro fornece a função de definição de estilo global, basta instalar o Elementor Pro, pode fazer definições globais, semelhantes às definições do tema do tema. Isto pode ajudá-lo a predefinir o estilo geral da cor, o estilo do tipo de letra, a disposição e as predefinições dos elementos do seu sítio Web, reduzindo consideravelmente a carga de trabalho da pós-produção do sítio Web.

Por exemplo, pode definir várias cores globais e selecionar essas cores globais diretamente quando definir a cor do conteúdo.

Este tutorial apresenta-lhe as caraterísticas comuns dos estilos e definições globais do editor Web Elementor, tais como a definição de tipos de letra globais, cores, largura do conteúdo da página, espaçamento predefinido dos elementos, etc.

Aceda a [Definições do sítio

Depois de instalar e ativar o Elementor Pro, vá a qualquer página da janela do editor Elementor e clique em "Site Settings" (Definições do sítio), como mostra a figura abaixo, e verá as seguintes opções de configuração.

Sistema de conceção

O sistema de design permite-lhe definir cores globais e tipos de letra globais.

Definições globais de cor

A maior vantagem de definir cores globais é a capacidade de alterar rapidamente o estilo de cor do seu sítio Web. Por exemplo, se o seu sítio Web é atualmente dominado pelo verde, pode mudar rapidamente para um estilo azul, alterando simplesmente as cores nas definições de cores globais. Para tal, tem de conceber as suas páginas com todas as cores utilizando a configuração global de cores. Se as cores foram adicionadas manualmente, terá de as modificar manualmente.

Métodos para definir e utilizar cores globais:

1. Aceda a Cores globais nas Definições do sítio.
2. Defina algumas cores globais normalmente utilizadas.
3. Utilize estas cores globais para configuração quando conceber páginas.

As definições globais contêm as cores do sistema e as cores personalizadas. Existem quatro cores do sistema, que não podem ser eliminadas, mas podem ser modificadas. As cores personalizadas podem ser adicionadas e renomeadas de acordo com as suas necessidades.

Depois de ter definido a cor global, pode chamar a cor global a partir das definições de cor de qualquer elemento no Elementor.

Definições globais do tipo de letra

Tal como as cores globais, os tipos de letra globais podem ser personalizados para adicionar mais do que um. A utilização de tipos de letra globais na conceção de uma página pode aumentar a eficiência e facilitar a sua alteração consistente numa fase posterior.

As fontes globais têm quatro definições de fonte do sistema que não podem ser eliminadas, mas podem ser modificadas. Também pode adicionar tipos de letra globais personalizados.

Para um determinado tipo de letra global, pode definir o seguinte: tipo de letra, tamanho, espessura, conversão de maiúsculas e minúsculas, estilo (por exemplo, itálico), decoração (por exemplo, sublinhado, sublinhado), altura da linha, espaçamento entre letras e espaçamento entre palavras.

Estilo do tema/configurações globais de estilo do tema

Em Estilos globais de tema, pode definir estilos para tipos de letra, botões, imagens e campos de formulário.

Como cada tema tem uma compatibilidade diferente com o Elementor, não existe uma solução unificada. Como mostra a imagem abaixo, o Elementor oferece-lhe a opção de desativar a sua própria funcionalidade de cores e tipos de letra e optar por herdar a configuração do tema. Com estas duas opções, pode ajudá-lo a depurar os estilos.

Tipografia

Em [Tipografia], pode definir a cor do texto, o estilo do tipo de letra, o espaçamento entre parágrafos, a cor da hiperligação e o efeito de foco do conteúdo do sítio Web, bem como a cor e o estilo do tipo de letra das etiquetas H1-H6. Também pode utilizar diretamente as cores e os tipos de letra nas definições globais para unificar o estilo tipográfico.

Definições do botão/botão global

Em Definições globais do botão, pode definir as seguintes propriedades do botão: tipografia do texto, projeção do texto, cor normal e cor de fundo, cor do texto e cor de fundo ao passar o rato, tipo e cor do contorno, raio do canto e espaçamento interior.

Imagens/configurações globais de imagem

Nas Definições Globais de Imagem, pode configurar as seguintes propriedades da imagem: limites, raio dos cantos, transparência, projeção, filtros CSS para normal e pairar e tempo de transição do estado normal para o estado pairado.

Ficheiros de formulários/configurações globais de campos de formulários

Quando o site utiliza formulários, tais como formulários de contacto e formulários de inquérito, o estilo dos campos do formulário pode ser configurado aqui.

Pode definir a cor e a tipografia dos cabeçalhos dos campos, a tipografia do próprio campo, a cor do tipo de letra para regular e digitação, a cor de fundo, a sombra projetada, o contorno, o raio do canto e o espaçamento interno.

Definição

Definições da identidade do sítio (Identidade do sítio)

Aqui pode carregar e definir o nome, a descrição, o logótipo e o ícone do seu sítio Web.

Definições globais de fundo

Aqui pode definir a cor de fundo da página Web, sólida ou gradiente, bem como a imagem de fundo, e pode também definir a cor de fundo para telemóvel separadamente.

Configurações de Layout/Default Layout (pontos de interrupção móveis)

1. largura do conteúdoDefine a largura predefinida da área de conteúdo da página, o valor predefinido é 1140px. Se pretender que a página seja mais larga ou mais estreita, pode ajustá-la aqui.
2. Espaço para widgetsEspaçamento entre blocos de elementos: Define o espaçamento entre blocos de elementos, por defeito 20px.
3. Seletor de título de páginaTítulo da página: Utilizado para ocultar os títulos das páginas. Se o seletor de título de página do tema não for título de entradaSe estiver a utilizar o tema Hello Elementor, tem de o alterar aqui. Se estiver a utilizar o tema Hello Elementor, não é necessário alterar nada. Só deve considerar alterar esta definição se a funcionalidade Hide Header (Ocultar cabeçalho) não estiver a funcionar.
4. Secção esticada Ajustada aSe utilizar a secção do Elementor, pode ativar a funcionalidade "esticar secção" para esticar a secção até uma largura especificada. Introduza aqui o seletor do elemento pai (por exemplo #primário,.invólucro,principal etc.), a extensão adaptar-se-á a esse seletor. A predefinição é corpoSeguem-se algumas das alterações mais importantes que, normalmente, não são necessárias.
5. layout de página padrãoFormato da página: define o esquema predefinido da página, que é de largura total por defeito (Elementor de largura total), que contém o cabeçalho e o rodapé. Se definido como Tela do ElementorEm vez de um cabeçalho e rodapé, a página será uma tela em branco. Se selecionar temaSe tiver um tema com um esquema diferente, este herda as definições do tema. Temas diferentes podem oferecer opções de layout diferentes, depure e use-as conforme necessário.

Pontos de paragem

Pode adicionar artificialmente pontos de quebra para adaptar o seu sítio Web a dispositivos com diferentes resoluções, frequentemente designados por responsivos.

Caixa de luz/Configuração da caixa de luz

As caixas de luz podem ser entendidas como janelas pop-up para imagens, e o separador Caixa de luz global dá-lhe a possibilidade de ajustar as seguintes definições:

1. Caixa de luz de imagemInterruptor deslizante para ativar ou desativar globalmente a caixa de luz.
2. balcõesContador de imagens: Apenas para galerias com várias imagens. Se estiver ativado, o contador é apresentado no canto superior esquerdo da lightbox. Por exemplo, para uma galeria com 6 imagens, o contador apresentará 1/6, 2/6, etc. para indicar a posição da imagem atual na galeria.
3. Ecrã completoQuando ativado, é adicionado um ícone clicável que permite ao utilizador abrir a imagem numa caixa de luz de ecrã completo.
4. ZoomQuando ativado, é adicionado um ícone clicável que permite ao utilizador aumentar o zoom da imagem na caixa de luz. Quando aumenta o zoom, pode deslocar a vista para ver diferentes áreas da imagem.
5. PartilharQuando activada, a funcionalidade de partilha é adicionada à lightbox, permitindo aos utilizadores partilhar imagens no Twitter, Facebook e Pinterest, ou transferi-las para os seus computadores.
6. TítuloOpção: Opcionalmente, o título pode ser apresentado por baixo da imagem na lightbox. Escolha entre Nenhum, Título, Legenda, Alt ou Descrição.
7. DescriçãoDescrição: Opcionalmente, pode apresentar uma descrição por baixo da imagem na lightbox. Escolha entre Nenhum, Título, Legenda, Alt ou Descrição.
8. cor de fundoSelecione a cor de fundo e a opacidade da caixa de luz.
9. Cores da IUCor da interface do utilizador: Selecione a cor da interface do utilizador. Isto afecta as setas da caixa de luz, a navegação por pontos, os botões de fechar, etc.
10. Cor do Hover da IUCor do cursor da interface do utilizador: Selecione a cor do cursor da interface do utilizador. Isto afecta as setas da caixa de luz, a navegação por pontos, o botão de fechar, etc., quando o utilizador passa por cima de cada botão.

CSS personalizado

Quando a configuração de design existente não satisfaz as suas necessidades, pode definir estilos adicionando CSS personalizadas. Mas apenas se tiver uma boa noção de como as CSS são escritas.

Resumo:

Com a funcionalidade Definições de estilo globais do Elementor Pro, é fácil predefinir e ajustar os estilos gerais de cor, estilos de letra, esquemas e predefinições de elementos do seu sítio Web. Isto não só melhora a eficiência do design, como também assegura um estilo consistente do sítio. Quer se trate de definir cores globais, tipos de letra ou de ajustar o estilo de elementos como botões, imagens, campos de formulário, etc., pode reduzir drasticamente o trabalho de manutenção pós-produção. Além disso, o Elementor Pro também fornece poderosas funcionalidades CSS personalizadas, permitindo aos utilizadores alcançar necessidades de design mais sofisticadas, melhorando totalmente a experiência do utilizador e o efeito visual do sítio Web.