Como usar o personalizador de temas do WordPress como um profissional (guia definitivo)

Você sabia que o WordPress vem com um personalizador de temas integrado que permite que você faça alterações facilmente no design do seu site em tempo real?

Embora todos os temas tenham algum nível de suporte para as opções padrão do personalizador, muitos temas incluem guias e opções adicionais no personalizador de temas do WordPress, para que você possa personalizar facilmente seu tema sem nenhum conhecimento de programação.

Neste artigo, vamos orientá-lo pelos painéis padrão e mostrar como usar o personalizador de temas do WordPress como um profissional.

Como acessar o personalizador de temas do WordPress

O personalizador de temas é um recurso padrão do WordPress e faz parte de todos os sites do WordPress.

Para acessá-lo, faça login na área de administração do WordPress e, em seguida, acesse Appearance ” Customize ( Aparência ” Personalizar ) na barra lateral esquerda do painel de administração do WordPress. Isso abrirá a interface do Customizer com seu tema atual.

Você também pode usar a página do personalizador de temas do WordPress para qualquer um dos temas instalados em seu site, mesmo quando eles não estiverem ativos.

Isso permite que você veja uma visualização ao vivo do tema e faça alterações antes de ativá-lo.

Para fazer isso, você precisa ir até a página Appearance ” Temas.

Em seguida, passe o cursor do mouse sobre qualquer tema instalado e clique no botão Live Preview (Visualização ao vivo ) para abrir a página do personalizador de temas do WordPress.

Como usar o personalizador de temas do WordPress

Após abrir o personalizador de temas do WordPress, você verá todas as configurações de personalização no lado esquerdo da tela e a visualização ao vivo do seu site no lado direito.

O personalizador de temas do WordPress vem com um conjunto de painéis padrão, independentemente do tema que você estiver usando.

Você precisa clicar nos painéis individuais para fazer alterações neles. Você também pode clicar em qualquer um dos ícones de lápis azul no lado direito da tela para abrir as configurações desse item específico.

Observação: Os temas avançados do WordPress acrescentarão painéis de configuração adicionais para opções extras de personalização (mais sobre isso adiante).

Vamos dar uma olhada nas opções padrão disponíveis no personalizador de temas do WordPress.

Painel de identidade do site: Adicionar título, logotipo e favicon

O painel Site Identity (Identidade do site ) no personalizador de temas do WordPress permite que você adicione ou altere o título e o slogan do seu site.

Por padrão, o WordPress adiciona “Just Another WordPress Site” como slogan do site.

É recomendável alterá-la depois de instalar o WordPress em seu site. Você também pode mantê-la em branco, se quiser.

O painel Site Identity (Identidade do site) no personalizador de temas do WordPress também permite que você adicione o logotipo do seu site. Basta clicar na opção Select logo (Selecionar logotipo ) para carregar o logotipo de seu site.

Deseja adicionar um favicon ao seu site? Você pode fazer isso clicando na opção Selecionar ícone do site. Para obter instruções detalhadas, você pode seguir nosso guia sobre como criar e adicionar um favicon ao seu site.

Personalizador de temas do WordPress: Altere as cores em seu site

Os controles no painel Colors variam principalmente dependendo do tema do WordPress que você estiver usando.

Por exemplo, o tema Twenty Seventeen permite que você escolha a cor do texto do cabeçalho e selecione um esquema de cores para todo o site.

Outros temas do WordPress podem oferecer diferentes opções de cores para elementos do site, como cabeçalhos, links, corpo do texto e o plano de fundo do site.

Adição de menus de navegação no personalizador de temas

O painel Menus permite que você crie menus de navegação e controle a localização deles em seu site.

Nessa guia, você encontrará todos os menus existentes do WordPress que você criou anteriormente. Você pode clicar no botão “View All Locations” (Exibir todos os locais) para verificar os locais de menu disponíveis que seu tema suporta.

Para criar um novo menu, você precisa clicar no botão Create New Menu (Criar novo menu ).

Depois disso, você precisará dar um nome ao menu para poder gerenciá-lo facilmente mais tarde. Você também pode selecionar o local do menu e, em seguida, clicar em Next para continuar.

Para adicionar itens a esse menu, você precisa clicar no botão Add Items para abrir um novo painel. Agora você pode adicionar links personalizados, páginas, posts, categorias e tags como itens de menu.

Para reordenar os itens, você pode clicar no link Reorder e usar os ícones de seta para ajustar os itens do menu.

Controle os widgets em seu site no personalizador de temas

O painel Widgets permite que você adicione e gerencie os widgets em seu site.

Ao clicar nele, você verá os diferentes locais onde pode adicionar widgets. Isso varia de acordo com o tema que você está usando.

Por exemplo, o tema Twenty Seventeen oferece 3 locais para widgets, enquanto o tema Twenty Nineteen vem com apenas um local.

Ao clicar em qualquer um deles, você verá os widgets que adicionou anteriormente a esse local.

Para adicionar um novo widget, você precisa clicar no botão “Add a Widget”. Isso abrirá um novo painel no qual você verá uma lista de todos os widgets disponíveis.

Você precisa clicar no widget que deseja adicionar. Você também pode fazer alterações nos widgets recém-adicionados e ajustar sua posição arrastando-os para cima ou para baixo.

Painel de configurações da página inicial no personalizador de temas

Por padrão, o WordPress exibe as últimas publicações do blog em sua página inicial.

No entanto, para sites comerciais, os usuários preferem usar uma página inicial personalizada. Ela permite que você tenha uma página de destino adequada que exiba seus produtos e serviços.

Para usar uma página inicial personalizada, você precisa selecionar o botão de opção “Uma página estática” no painel Configurações da página inicial.

Isso abrirá dois novos menus suspensos que podem ser usados para selecionar uma página para a sua página inicial e outra para exibir as postagens do seu blog.

Caso não tenha as páginas em seu site, você pode criar uma nova clicando no link “+ Add New Page” (Adicionar nova página) presente abaixo do menu suspenso. Isso criará uma página em branco com o nome de sua escolha.

Painel CSS adicional para adicionar CSS personalizado

Deseja adicionar código CSS personalizado para estilizar seu site? Você pode fazer isso no painel Additional CSS.

Os usuários intermediários e avançados do WordPress geralmente personalizam seus sites adicionando código CSS diretamente ao arquivo style.css do tema. Isso adiciona etapas adicionais, como ter acesso FTP à hospedagem do WordPress, modificar arquivos de tema etc.

Uma solução mais fácil para iniciantes é adicionar seu código CSS personalizado ao painel CSS adicional no personalizador de temas do WordPress. Isso permitirá que você faça alterações em seu site e as veja ao vivo no lado direito da tela.

Quando você começar a escrever algum código CSS, o WordPress sugerirá automaticamente atributos para você com base nas letras que você digitar. Ele também exibirá mensagens de erro se você não tiver escrito uma declaração CSS adequada.

Observação: Se você quiser personalizar seu site sem escrever nenhum código, continue lendo. Compartilharemos três opções amigáveis para iniciantes que permitirão que você personalize facilmente seu tema e até mesmo crie um tema personalizado do WordPress.

Outras opções do personalizador de temas

Alguns temas gratuitos e premium oferecem mais opções de personalização do tema.

Dependendo do tema que estiver usando, você poderá alterar o estilo da fonte, adicionar uma imagem de fundo, alterar o layout, modificar cores, adicionar imagens de cabeçalho aleatórias e muito mais.

Você também pode adicionar recursos específicos ao personalizador de temas com a ajuda de plug-ins. Por exemplo, você pode adicionar fontes personalizadas no WordPress usando o plug-in Easy Google Fonts.

Visualize seu site em diferentes resoluções de tela

É importante que todos os proprietários de sites se certifiquem de que seus sites sejam responsivos a dispositivos móveis e tenham boa aparência em todos os tamanhos de tela.

Graças ao personalizador de temas do WordPress, você pode verificar facilmente a aparência do seu site em diferentes tamanhos de tela.

Na parte inferior do painel do Theme Customizer, você encontrará três ícones e o link “Hide Controls” (Ocultar controles).

Esses ícones permitem que você teste seu site em diferentes resoluções de tela, como desktop, tablet e dispositivos móveis.

O link Hide Controls (Ocultar controles ) é útil para ocultar o painel do WordPress Customizer para que você possa visualizar seu site corretamente no modo desktop.

Publicar, salvar ou programar suas configurações do personalizador

Depois de fazer as alterações necessárias, você precisa aplicá-las ao seu site. Caso contrário, todo o seu trabalho árduo será perdido.

Vá em frente e clique no botão Publish (Publicar ) para aplicar as alterações. Quando terminar, clique no botão Fechar, presente no canto superior esquerdo da tela, para sair do personalizador de temas.

E se você precisar de mais tempo para finalizar seu novo design? Nesse caso, você pode salvá-lo como rascunho e até mesmo compartilhar seu novo design com alguém sem dar a essa pessoa acesso à sua área administrativa.

Para fazer isso, você precisa clicar no ícone de engrenagem ao lado do botão Publicar. Isso abrirá o painel Ação.

Aqui você encontrará três opções: Publicar, Salvar rascunho e Agendar.

Você precisa selecionar o botão de rádio Save Draft (Salvar rascunho ) no painel Action (Ação) e, em seguida, clicar no botão Save Draft (Salvar rascunho ) para armazenar suas alterações.

Agora você pode copiar o link de visualização e compartilhá-lo com outras pessoas para obter feedback.

Por outro lado, a opção Schedule permite que você publique suas alterações em uma data e hora específicas. Você pode usar essa opção para programar as alterações do tema para que sejam publicadas no momento em que você recebe menos tráfego.

Por fim, se você quiser redefinir as alterações não publicadas, poderá clicar no link Discard changes (Descartar alterações ) no painel Action (Ação).

Visualizar diferentes temas sem entrar em operação

Há ocasiões em que você deseja verificar como um novo tema ficaria em seu site. No entanto, você não quer ativá-los em seu site ativo.

Nesse caso, você pode abrir o WordPress Customizer para testar novos temas sem entrar no ar.

No painel do Customizer, você encontrará o nome do seu tema ativo e o botão Alterar.

Se você clicar nesse botão, o WordPress exibirá todos os seus temas instalados no lado direito da página.

Para verificar um tema específico, você precisa clicar no botão Live Preview (Visualização ao vivo ).

Você também pode visualizar temas do Repositório de Temas do WordPress. Para fazer isso, você precisa marcar a caixa de seleção “Temas do WordPress.org” no painel esquerdo.

Isso mostrará os temas do diretório WordPress.org. Você pode clicar no botão “Install & Preview” (Instalar e visualizar) para verificar o tema de sua preferência.

Você também pode filtrar os temas clicando no botão Filter Themes (Filtrar temas ), localizado no canto superior direito da tela.

Observação: Recomendamos usar um site de teste do WordPress para testar novos temas em vez de usar o personalizador em um site ativo.

Importar ou exportar configurações do personalizador de temas

Você sabia que pode importar e exportar as configurações do personalizador de temas?

Isso é extremamente útil quando você está fazendo alterações no tema em seu servidor local ou em um site de teste. Em vez de copiar as configurações manualmente para o site ativo, você pode simplesmente exportar as configurações do personalizador de temas para economizar tempo.

Para obter instruções detalhadas, você pode seguir nosso guia sobre como importar e exportar configurações do personalizador de temas no WordPress.

Alternativas ao personalizador de temas do WordPress

Embora o WordPress Customizer permita que você faça alterações no seu site, o número de controles varia de acordo com o tema que você está usando.

E se você gostar do seu tema, mas quiser que ele tenha mais opções de personalização?

Nesse caso, a melhor solução é usar um dos três plug-ins de personalização que funcionam junto com o personalizador de temas do WordPress.

SeedProd

O SeedProd é o melhor construtor de sites de arrastar e soltar para WordPress. Você pode usar o SeedProd para criar facilmente temas personalizados do WordPress e layouts de página sem editar nenhum código.

O SeedProd oferece centenas de layouts de página pré-fabricados para páginas de destino, páginas de vendas, páginas de registro de webinar, páginas de lançamento em breve, páginas de modo de manutenção e muito mais.

A personalização é fácil com blocos prontos, como formulários de opt-in, perfis sociais, botões, cronômetros de contagem regressiva, formulários de contato e muito mais.

Também é possível definir esquemas de cores, salvar combinações de fontes e reutilizar páginas e elementos de página para que você não precise criá-los novamente.

Criador de temas Thrive

OThrive Theme Builder é outro plugin popular de criação de temas de arrastar e soltar para WordPress. Você pode usá-lo para criar facilmente um tema WordPress personalizado, sem necessidade de codificação.

Ele vem com quatro modelos de temas prontos diferentes para que você possa começar rapidamente. Cada modelo de tema inclui uma variedade de páginas pré-fabricadas que você pode adicionar ao seu site.

Você pode editar cada parte do tema, inclusive o cabeçalho, o rodapé, as postagens do blog, as páginas de categoria e muito mais, simplesmente apontando e clicando.

Além disso, há mais de 100 elementos de design e construção de sites que você pode adicionar rapidamente ao seu tema arrastando e soltando-os no lugar.

Herói CSS

OCSS Hero é um plug-in do WordPress que permite personalizar seu site sem escrever uma única linha de código. Você tem a liberdade de estilizar todos os elementos do seu site sem complicações.

Deseja personalizar a página de login do seu site WordPress? O CSS Hero permite que você faça isso em poucos minutos.

Você também pode editar e visualizar as alterações no front-end para garantir que o design fique perfeito em todos os dispositivos.

Construtor Beaver

O Beaver Builder é outro dos principais criadores de páginas para WordPress. Ele permite que você crie páginas incríveis para o seu site usando uma interface de arrastar e soltar.

A melhor parte é que o Beaver Builder funciona com quase todos os temas do WordPress. Isso permite que você o use com seu tema atual.

O Beaver Builder suporta o uso de códigos de acesso e widgets. Ele também oferece diferentes tipos de módulos que você pode usar para estilizar facilmente seu site. Consulte nosso guia sobre como criar layouts personalizados no WordPress para obter instruções detalhadas.

Esperamos que este guia tenha ajudado você a aprender a usar o personalizador de temas do WordPress como um profissional. Talvez você também queira ver nosso guia sobre como criar uma página personalizada no WordPress ou nossas escolhas de especialistas dos melhores plug-ins e ferramentas do WordPress para seu site.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.