Fonte personalizada para títulos – Tema Woodmart
Para realizarmos essa personalização devemos inserir no título que queremos alterar a fonte, uma classe personalizada.
Iremos primeiro em Páginas > Todas as páginas e selecionar a página onde está presente o título que vamos alterar.
Após isso iremos identificar dentro do menu de edição da página a seção correspondente ao título que vamos alterar e clicar em “Editar”.
No menu de edição do título vamos fazer dois procedimentos:
– Analisar uma informação
– Inserir uma classe personalizada
A informação que vamos buscar para seguir com nossa personalização é “Title tag” ou “Tag do título”.
Após descobrirmos essa informação vamos inserir a classe personalizada.
Existem algumas regras para criar essa classe:
– Não é permitido espaço entre os termos. Ex.: titulo principal.
– Não é permitido acentos apenas – (hífen) e _ (underline).
Após inserirmos a classe personalizada vamos salvar as alterações e atualizar.
Agora vamos precisar de acesso ao painel do tema indo no seguinte caminho:
Acessando o painel do tema vamos procurar a opção Tipografia > Tipografia avançada e vamos dar um clique no campo (3).
Ao clicarmos no campo (3) da imagem acima irá abrir vários elementos para serem selecionados, role até a ultima opção “Custom selector” e dê um clique.
Após marcar a opção “Custom selector” irá aparecer um campo abaixo escrito: “For ex.: .my-custom-class”, esse campo será onde iremos inserir as configurações da classe personalizada com a seguinte regra:
– Sempre adicione um . (ponto) antes de escrever o nome da classe, por Ex.: .titulo_principal
– Será necessário o uso da informação do “Title tag” ou Tag do título como visto anteriormente, por Ex.: .titulo_principal h4 (Após o nome da classe personalizada deve colocar espaço para informar a tag do titulo (ponto)+(classe personalizada)+(espaço)+(tag do titulo)).
Campo 2 – Campo onde é selecionado a família da fonte, Ex: Open Sans.
Campo 3 – Campo onde é selecionado o Estilo da fonte, Ex.: Negrito.
Campo 4 – Campo onde é selecionado o Subconjunto da fonte, Ex.: Latin.
Campo 5 – Campo onde é selecionado a transformação do texto, Ex.: Maiúsculo.
Capitalize: Coloca em maiúsculo a primeira letra de cada palavra.
Lowercase: Coloca todas as letras em minúsculo.
Uppercase: Coloca todas as letras em maiúsculo.
None: Não realiza nenhuma alteração.
Inherit: Faz com que a transformação do texto seja herdado de outro elemento.
Campo 6 – Campo onde é selecionado o tamanho da fonte.
Campo 7 – Campo onde é selecionado a altura da linha da fonte.
Campo 8 – Campo onde é selecionado a cor da fonte.
Campo 9 – Campo onde é selecionado a cor da fonte ao passar o mouse em cima.
Campo 10 – Pré-visualização da fonte.
Após configurar a fonte para a classe personalizada basta salvar e conferir o resultado na página da loja.
Resultado:
