Estilos globais

Como personalizar estilos globais?

Cor

Suporte a estilos globais 15 cores globais dividido em 5 categorias:

• Cor do botao
• Cor do texto
• Cor de fundo
• A linha de cor
• Cor de destaque 

Essas cores serão geradas a partir do seu tema publicado. Para substituir a cor existente, clique nela e escolha outra na paleta.

O que cada opção de cor afeta:

• Cor do botao: Aplica-se a todos os botões criados com o elemento Botão (por exemplo, Adicionar ao Carrinho, botões de CTA). Controla a cor de preenchimento principal e o estado de foco, se definido.
• Cor do texto: Define a cor de fonte padrão para títulos, parágrafos e outros elementos baseados em texto.
• Cor de fundo: Defina uma cor de fundo predefinida para elementos compatíveis, incluindo Carrossel, Código Personalizado, Janela Pop-up, Ícone, Lista de Produtos (cor dos pontos), Cronômetro Regressivo, Banner Principal, Lista de Ícones, Lista Avançada, Letreiro, Desconto de Pacote e Campo Personalizado de Produto.
• Cor da linha: Afeta a cor das linhas divisórias, bordas e separadores em todo o seu layout.
• Cor de destaque: Usado para destaques ou elementos interativos, como links, ícones e efeitos de foco.

Para alterar uma cor, clique na caixa de cores e selecione um novo tom na paleta. Quaisquer alterações serão aplicadas automaticamente a todos os elementos vinculados a essas variáveis ​​de cor globais.

Gerenciador de Fontes

O Global Styles fornece dois tipos de estilos de texto, a saber: Título e parágrafo. Você pode selecionar sua opção preferida no menu suspenso, e a fonte usada é retirada de Google Fonts. 

Tipografia

O GemPages oferece suporte a 6 tipos de Headings e 3 tipos de Parágrafos. Nas configurações do elemento, todas as configurações relacionadas aos estilos de texto serão selecionadas a partir dessas configurações globais de tipografia.

Ao instalar o GemPages, ele sincronizará a tipografia global com os estilos de texto dos seus temas. As informações de tipografia sincronizadas do seu tema Shopify incluem Família da fonte, tamanho da fonte, altura da linha, espessura da fonte, estilo da fonte e Espaçamento entre Letras.

Espaçamento

O GemPages permite que você sincronize o espaçamento em seu site configurando valores de espaçamento globais. Existem Tipos 10 de espaçamento global disponível, cada um dos quais pode ser personalizado com valores para três dispositivos: Desktop, Tablet e Mobile.

A unidade padrão para espaçamento global é pixels (px). O espaçamento global pode ser usado para configurar margem, preenchimento, espaçamento de itens ou espaços entre colunas.

Largura da linha padrão

Sobre a largura padrão da linha

Uma página geralmente consiste em várias seções, cada uma das quais requer um estilo distinto. Por exemplo, seções como Hero Banner geralmente têm fundos, e você pode preferir defini-los para largura total. No entanto, outras seções têm uma largura fixa para manter o layout e centralizar o conteúdo na tela. Portanto, um valor universal é necessário para ajustar automaticamente a largura dessas seções.

Como usar

• Largura da linha

GemPages define o valor de largura padrão para 1200px para Desktop e 100% para Tablet e Mobile, que é adequado para todos os modelos atuais. Você não precisa fazer nenhum ajuste, pois o GemPages aplicará esse valor automaticamente. 

No entanto, se você preferir um valor de largura diferente, você pode digitar um número na caixa. Por exemplo, se você digitar 1000px, a largura padrão para seções/linhas que não sejam de largura total será 1000px.

• Preenchimento de página

Insira um número para seu preenchimento preferido para seções/linhas. Observe que esse preenchimento não será aplicável para seções/linhas de largura total.

Cantos

O GemPages permite que você sincronize os cantos usados ​​no seu site configurando um valor de canto global. Você pode definir três estilos de canto: Pequeno, Suporte: e Grande. Basta clicar no lápis ícone para inserir o valor em pixels.  

Perguntas Frequentes

Posso desativar os estilos globais no GemPages?

• Selecione o elemento no Editor.
• Defina manualmente a cor, a fonte, o espaçamento ou os valores da borda na guia Configurações do elemento.