O recurso Personalização do blog permite ajustar a aparência do blog, incluindo cores, fontes, tamanhos, espaçamentos e dimensões de imagens e logotipos.
As opções estão organizadas por área do blog. Assim, você pode personalizar cada parte separadamente, como o cabeçalho, a página inicial, as postagens e o rodapé.
Nos campos de tamanho e espaçamento, o valor define a dimensão do elemento na unidade indicada ao lado, como pixels (px). Nos campos de cor, você define a cor utilizada no elemento correspondente.
Geral
Reúne as configurações gerais de aparência do blog e os ajustes de seções, posts, tags, busca e newsletter.
· Cor de fundo: define a cor de fundo geral do blog.
· Cor geral do texto: define a cor padrão dos textos do blog. Áreas que possuem uma configuração própria de cor podem ser personalizadas separadamente.
· Tamanho da fonte: ajusta o tamanho padrão dos textos do blog. Títulos e outros elementos com controles específicos possuem ajustes próprios.
· Proporção das miniaturas: define a relação entre a largura e a altura das imagens de miniatura dos posts. Uma proporção de 5/3, por exemplo, representa uma imagem mais larga do que alta.
· Cor do texto (layout sobreposto): define a cor dos textos exibidos sobre as imagens dos posts no layout sobreposto.
· Cor da máscara (layout sobreposto): define a cor da camada aplicada sobre as imagens no layout sobreposto. Essa camada ajuda a dar contraste entre a imagem e o texto. Quando a cor utiliza transparência, também permite controlar o quanto da imagem permanece visível.
Seções
· Tamanho do título: ajusta o tamanho dos títulos das seções do blog.
· Cor do título: define a cor dos títulos das seções.
· Alinhamento do título: determina a posição horizontal dos títulos das seções, conforme a opção selecionada, como o alinhamento à esquerda.
Posts
· Tamanho do título: ajusta o tamanho dos títulos dos posts nas listagens do blog. O título dentro da página da postagem possui uma configuração específica na seção Postagem.
· Cor do título: define a cor dos títulos dos posts nas listagens.
Assuntos (tags)
· Cor de fundo da tag: define a cor de fundo das etiquetas utilizadas para identificar os assuntos dos posts.
· Cor do texto da tag: define a cor do texto exibido dentro dessas etiquetas.
Busca
· Cor de fundo geral: define a cor de fundo da área de busca.
· Cor do campo de busca: define a cor de fundo do campo no qual o visitante digita o que deseja pesquisar.
· Cor do texto: define a cor do texto da busca.
· Cor do ícone: define a cor do ícone de busca.
· Cor da borda: define a cor da borda do campo de busca.
· Cor de fundo do botão: define a cor de fundo do botão utilizado para realizar a pesquisa.
· Cor do texto do botão: define a cor do texto exibido no botão de busca.
Newsletter
· Cor de fundo do botão: define a cor de fundo do botão de inscrição na newsletter.
· Cor do texto do botão: define a cor do texto exibido nesse botão.
· Cor de fundo do campo de texto: define a cor de fundo do campo de preenchimento do formulário de newsletter.
· Cor da borda do campo de texto: define a cor da borda desse campo.
· Cor do texto inserido: define a cor do texto digitado pelo visitante no campo da newsletter.
Topo
Permite personalizar o cabeçalho do blog, incluindo o logotipo, os ícones e o menu de navegação.
· Altura do cabeçalho: define a altura da área superior do blog.
· Cor de fundo: define a cor de fundo do cabeçalho.
· Largura do logotipo: ajusta a largura de exibição do logotipo no cabeçalho.
· Altura do logotipo: ajusta a altura de exibição do logotipo no cabeçalho.
· Tamanho dos ícones do topo: ajusta o tamanho dos ícones exibidos no cabeçalho.
· Cor dos ícones do topo: define a cor desses ícones.
Menu
· Tamanho do texto: ajusta o tamanho dos textos dos itens do menu de navegação.
· Cor do texto: define a cor dos textos do menu em seu estado normal.
· Cor do texto ao passar o mouse: define a cor do texto de um item do menu quando o visitante posiciona o mouse sobre ele.
· Cor de fundo: define a cor de fundo dos itens do menu em seu estado normal.
· Cor de fundo ao passar o mouse: define a cor de fundo de um item do menu quando o visitante posiciona o mouse sobre ele.
Página inicial
Reúne os ajustes de espaçamento da página inicial e de aparência das áreas de posts em destaque e posts recentes.
Margem entre seções: define o espaço entre as seções da página inicial. Valores maiores deixam os blocos mais afastados; valores menores os aproximam.
Posts em destaque
· Cor de fundo: define a cor de fundo da área de posts em destaque.
· Cor do texto: define a cor dos textos dessa área.
· Espaçamento interno: ajusta o espaço entre as bordas da área de destaques e seu conteúdo.
· Margem superior: define o espaço acima da área de posts em destaque, separando-a do conteúdo anterior.
· Cor de fundo da categoria: define a cor de fundo da identificação de categoria exibida nos posts em destaque.
· Cor do texto da categoria: define a cor do nome da categoria nesses posts.
· Altura da imagem (layout sobreposto): ajusta a altura das imagens dos posts em destaque quando o layout sobreposto é utilizado.
· Margem entre posts (layout sobreposto): define o espaço entre os posts em destaque no layout sobreposto.
Posts recentes
· Cor de fundo: define a cor de fundo da área de posts recentes.
· Cor do texto: define a cor dos textos dessa área.
· Cor de fundo do botão: define a cor de fundo do botão exibido na área de posts recentes.
· Cor do texto do botão: define a cor do texto desse botão.
Barra lateral
Permite ajustar a aparência dos blocos de conteúdo exibidos na lateral do blog.
· Cor de fundo: define a cor de fundo da barra lateral.
· Cor do texto: define a cor dos textos exibidos nessa área.
· Tamanho do título: ajusta o tamanho dos títulos dos blocos da barra lateral.
· Espaçamento interno: define o espaço entre as bordas dos blocos da barra lateral e seu conteúdo.
· Margem inferior: ajusta o espaço abaixo dos blocos da barra lateral, ajudando a separá-los verticalmente.
· Cor de fundo da categoria: define a cor de fundo das identificações de categoria exibidas na barra lateral.
· Cor do texto da categoria: define a cor dos nomes das categorias nessa área.
Postagem
Reúne os ajustes de tamanho dos textos da página de uma postagem e as configurações da área de comentários.
· Tamanho do texto: ajusta o tamanho do texto do conteúdo da postagem.
· Tamanho do título: ajusta o tamanho do título principal na página da postagem.
Comentários
· Cor de fundo: define a cor de fundo da área de comentários.
· Cor do texto: define a cor dos textos dessa área.
· Espaçamento interno: ajusta o espaço entre as bordas da área de comentários e seu conteúdo.
· Margem inferior: define o espaço abaixo da área de comentários em relação ao conteúdo seguinte.
· Botão mostrar comentários (fundo): define a cor de fundo do botão utilizado para exibir os comentários.
· Botão mostrar comentários (texto): define a cor do texto desse botão.
· Botão comentar (fundo): define a cor de fundo do botão utilizado para enviar um comentário.
· Botão comentar (texto): define a cor do texto do botão de envio de comentário.
Rodapé
Permite personalizar a área inferior (o rodapé) do blog.
· Cor de fundo: define a cor de fundo do rodapé.
· Cor do texto: define a cor dos textos exibidos no rodapé.
· Cor do título: define a cor dos títulos dos blocos do rodapé.
· Tamanho do título: ajusta o tamanho desses títulos.
· Altura do logo: ajusta a altura de exibição do logotipo no rodapé.
· Largura do logo: ajusta a largura de exibição do logotipo no rodapé.
Mobile
Reúne os ajustes específicos para a visualização do blog em dispositivos móveis.
Topo
· Altura do cabeçalho: define a altura do cabeçalho na versão mobile.
· Largura do logotipo: ajusta a largura de exibição do logotipo no cabeçalho mobile.
· Altura do logotipo: ajusta a altura de exibição do logotipo no cabeçalho mobile.
Página inicial
· Altura da imagem (destaques – layout sobreposto): define a altura das imagens dos posts em destaque na versão mobile quando o layout sobreposto é utilizado.
Menu mobile
· Cor de fundo geral: define a cor de fundo da área do menu mobile.
· Cor de fundo (cabeçalho): define a cor de fundo do cabeçalho do menu mobile.
· Cor do texto: define a cor dos textos dos itens do menu mobile.
· Cor das bordas: define a cor das bordas e divisões do menu mobile.
Rodapé
· Largura do logotipo: ajusta a largura de exibição do logotipo no rodapé da versão mobile.
· Altura do logotipo: ajusta a altura de exibição do logotipo no rodapé da versão mobile.
Fontes
Permite escolher as fontes utilizadas nos diferentes tipos de texto. Esses campos alteram o estilo tipográfico; os tamanhos são ajustados nas seções correspondentes.
· Fonte principal: define a fonte padrão utilizada nos textos do blog.
· Fonte – Títulos: define a fonte utilizada nos títulos.
· Fonte – Categorias (menu): define a fonte utilizada nos nomes das categorias exibidos no menu.
· Fonte – Nome do produto (detalhes): define a fonte do nome do produto na área de detalhes, quando esse elemento estiver presente no layout.