Você gostaria de descobrir como personalizar um tema WordPress com o Plugin Elementor ?
Personalizar seu tema WordPress é uma das principais tarefas ao construir sites WordPress. Como ela controla o design de um site, é aqui que muitos profissionais passam a maior parte do tempo.
A criação de um tema WordPress personalizado geralmente envolve trabalhar com os arquivos de tema e um editor de código. Mudanças de layout acontecem em arquivos de modelo, mudanças de design por meio de CSS. Além disso, você terá que atualizar constantemente a janela do navegador para mostrar suas personalizações, o que pode ser um pouco complicado.
Felizmente, com Elementor, este processo se torna extremamente fácil, então você pode querer dar uma olhada.
Mas antes, vamos descobrir juntos Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog.
Então, voltando ao motivo de estarmos aqui.
O que é um tema WordPress
Um tema WordPress é, em essência, uma coleção de modelos que definem a aparência visual de um site WordPress.
O tema WordPress engloba tudo o que afeta o design de um site, desde cabeçalhos e rodapés até esquema de cores, layout e muito mais.
Existem muitos temas disponíveis, gratuitos e premium, que se encaixam em quase todos os setores, como sites de fotografia, sites de clube de ginástica, sites de cabeleireiro, sites jurídicosE muito mais.
Por que personalizar um tema WordPress?
Uma das principais razões para criar um site é promover o seu negócio. Que melhor maneira de fazer isso do que criar um site único que promove o estilo e design da empresa.
Você pode imaginar Amazon, eBay ou Google sendo o que são sem seu design exclusivo?
Claro que não, e essa é uma das razões pelas quais queremos personalizar um tema WordPress. Queremos torná-lo único e adaptar-se à mensagem da nossa empresa.
Além disso, às vezes, ou melhor, com frequência, você encontra um tema WordPress que é afetado por um design ruim, cores que não combinam bem ou um tema que é muito pesado e afeta apenas o desempenho do site. rede. O tema WordPress pode ser poderoso, exceto pelo que o incomoda. Personalizá-lo e mudar isso pode resolver todos os seus problemas e criar melhor experiência do usuário.
Como personalizar um tema WordPress
Existem vários métodos para personalizar um tema WordPress.
- Manualmente, por meio do personalizador WordPress
- Com o código
- Com Elementor
Como personalizar manualmente um tema WordPress
Você pode personalizar o tema WordPress de sua escolha através do WordPress Customizer integrado. Se você fizer isso sem código, muitas vezes ficará limitado no que pode mudar. Algum Temas do WordPress premium permitem mais opções de personalização, mas, em essência, não há muitas opções de design para você.
Antes de nos aprofundarmos nessa área, gostaríamos de salientar que, quando você personaliza um tema WordPress existente, é melhor que você use um tema filho e não o tema pai.
Tema infantil WordPress
Um tema filho é um tema WordPress que tem exatamente as mesmas funções e características de outro tema WordPress, o tema pai. O tema filho é usado para personalizar e modificar o tema com segurança, sem afetar o tema pai e sem perder a capacidade de atualizá-lo.
Personalizador de tema WordPress
Agora que sabemos que é melhor trabalhar com um tema filho, vamos aprender como personalizar um tema com o WordPress Customizer. Para acessá-lo, vá ao seu painel, clique em apparence no lado esquerdo e escolha Personalizar.
Os principais recursos que você pode modificar com este personalizador são os seguintes:
Adicionar um título, logotipo e ícone do site
Para adicionar ou alterar seu título, logotipo ou ícone, você pode simplesmente ir ao painel Identidade do site. e escolha cada um desses elementos para modificá-los.
Mudando as cores do tema WordPress
Alguns Temas do WordPress permitirá que você altere seus esquemas de cores, mas não todos, e geralmente são Temas do WordPress Prêmio. Se o seu tema WordPress permite alterar o esquema de cores, você verá esta opção ao acessar o Personalizador.
Menus de navegação adicionados
O Customizador também permite adicionar e modificar facilmente os menus de navegação do seu site.
Como personalizar um tema WordPress com código
Você notará que na guia Aparência, você tem a opção de escolher o editor de temas. Clicar nele irá saudá-lo com uma janela com o código do tema. Esta opção requer um bom conhecimento da codificação CSS e não é recomendada para iniciantes.
Aqui você terá acesso a arquivos como style.css, função.php, e este é exatamente o cenário para o qual você precisará de um tema filho para não quebrar seu site.
A outra maneira de personalizar seu tema codificando é fazer upload de arquivos usando uma solução FTP. O processo envolve a criação de credenciais de FTP através de seu provedor de hospedagem, baixando e instalando uma solução FTP (como FileZilla), logando em sua conta e editando seus arquivos, que você então carregará através da mesma. Solução FTP.
Descubra o nosso guia em Como instalar o WordPress com FileZilla
A menos que você esteja familiarizado com a codificação, não recomendamos essa opção.
Personalize um tema WordPress facilmente com Elementor
Você pode fazer isso diretamente na interface do usuário. Não há necessidade de alterar uma única linha de código ou recarregar a janela do navegador, nem que seja uma vez.
O Elementor permite que você altere todos os elementos do site de forma rápida e fácil com alguns cliques do mouse e você pode até otimizar esses recursos para a plataforma móvel.
O Elementor torna esse processo muito mais fácil usando conteúdo dinâmico e permitindo que você visualize suas páginas. Dessa forma, você pode ver imediatamente como as mudanças de design afetarão seu site e conteúdo reais.
Personalize o cabeçalho e rodapé
Elementor permite flexibilidade total quando se trata de projetar seus cabeçalhos e rodapés. Todos nós sabemos como pode ser enfadonho, que você tem um tema WordPress e não pode alterar um único aspecto do design do cabeçalho ou rodapé. Você precisa de temas especializados, plug-ins, etc.
Com Elementor, é fácil.
1. Crie um modelo de cabeçalho
Primeiro, configure um novo modelo de cabeçalho. Para fazer isso, vá para Elementor> My Templates.
Aqui, uma maneira de começar é clicar no botão Adicionar novo na parte superior. Na próxima tela, use o menu suspenso para selecionar Cabeçalho como o tipo de modelo a ser criado.
Você também pode acessar essa tela clicando na guia Cabeçalho da tela anterior e, em seguida, pressionando o grande botão verde que aparece.
Ele pré-selecionará o cabeçalho como o tipo de modelo. De qualquer maneira, você precisa adicionar um nome apropriado para o modelo (para que você saiba qual é mais tarde) e então continuar clicando em Criar modelo.
Isso vai te levar aqui.
Com o Elementor Pro, você pode escolher blocos de cabeçalho pré-projetados. Esses são modelos de design que você pode usar como ponto de partida para seu próprio design, que é o que faremos neste caso.
Ao passar o mouse sobre um bloco de cabeçalho, clique inserção permite que você comece a projetá-lo imediatamente. Caso contrário, clique na imagem primeiro para ver uma versão maior. Então você pode sempre pressionar inserção acima.
Caso contrário, se você quiser começar do zero, basta fechar a janela clicando em X no canto superior direito.
2. Altere o design básico do cabeçalho
Após inserir o novo cabeçalho, a primeira coisa que você notará é que o logotipo e o menu que configuramos anteriormente já estão lá.
Este é exatamente o motivo pelo qual os colocamos juntos e vamos falar sobre como personalizá-los. No entanto, vamos primeiro ver como personalizar a própria seção do cabeçalho.
Para fazer isso, basta passar o mouse sobre ele e clicar no botão editar na parte superior. Isso abre uma lista de opções de edição à esquerda.
Aqui está o que você pode controlar nos diferentes menus:
- traçado - Controle a largura da seção, o tamanho do espaço entre as colunas, sua altura, coluna vertical e posicionamento do conteúdo, tag HTML atribuída e estrutura geral.
- Style - Aqui você pode alterar a cor de fundo, incluindo o efeitos de pairarMême adicionar imagem ou vídeo se desejar, adicione efeitos de sobreposição, borda e divisor, bem como altere as configurações de tipografia.
- Avançado - Esta parte permite adicionar atributos CSS como margem e índice z, animações, IDs e classes. Também permite que você torne a seção fixa e controle as configurações responsivas, bem como adicione alguns CSS personalizado.
Todos os itens acima são autoexplicativos e você obterá rapidamente o que deseja.
3. Personalize os elementos do cabeçalho
No entanto, você pode editar não apenas a seção do cabeçalho como um todo, mas também os itens incluídos nela. Por exemplo, para personalizar o logotipo do site, basta clicar nele. Isso também fornecerá opções de edição no lado esquerdo.
No caso do logotipo, isso oferece as seguintes opções:
- Conteúdo - Altere o tamanho da imagem, o alinhamento e o local ao qual ela está vinculada.
- Style - Controle a largura e a altura, adicione efeitos CSS e efeitos de foco, inclua borda e sombra, se desejar.
- Avançado - Aqui você encontrará essencialmente as mesmas opções da seção de cabeçalho.
Use as configurações para personalizar o logotipo da maneira que você deseja que seja bem exibido no cabeçalho. Observe também que cada item tem seu próprio tipo de opções, portanto, certifique-se de verificar cada uma delas.
4. Adicionar itens
Claro, com o Elementor você também pode adicionar itens ao cabeçalho. Basta clicar no símbolo no canto superior direito para ver o que está disponível.
Ao editar um template de cabeçalho, o Elementor exibe automaticamente os blocos relevantes no topo da lista, o que faz mais sentido nas circunstâncias. Nesse caso, são coisas como o logotipo do site, o menu de navegação e o título do site.
Por exemplo, se você deseja adicionar o título do site ao lado do logotipo, basta arrastar e soltar nele. No entanto, o modelo de cabeçalho que escolhemos atualmente nos permite adicioná-lo acima ou abaixo do logotipo. Mas, é um problema que será facilmente resolvido.
Em um caso como esse, passe o mouse sobre o cabeçalho e use o símbolo de mais –+-para adicionar uma seção acima.
Clique aqui no botão roxo para escolher um design de três colunas.
Em seguida, arraste os elementos da seção de cabeçalho existente para a nova seção e adicione o título do site no meio.
Mas espere, o estilo é totalmente diferente! sem problemas. Basta clicar com o botão direito no cabeçalho existente e selecionar Cópia de. Em seguida, clique com o botão direito na nova seção e clique aqui em Colar estilo. Elementor irá então aplicar o estilo da seção existente, que você pode fechar mais tarde.
Você pode fazer o mesmo processo com qualquer um dos outros elementos do cabeçalho e, é claro, com todos os outros elementos incluídos no Elementor.
Personalize um modelo de postagem exclusivo
No Elementor, você também pode personalizar um único modelo de postagem. Veja como:
1. Crie um novo modelo
A criação de um modelo funciona da maneira usual. No entanto, desta vez, escolha Individual como o tipo de modelo. Em seguida, abaixo, escolha o modelo exclusivo que deseja editar. Neste exemplo, o de Publique.
Se você deseja criar um novo design de página, edite sua página 404 (mais sobre isso mais tarde) ou edite um tipo de postagem personalizado em particular, você escolheria outra coisa. Em qualquer um dos casos, insira um nome e continue.
Na próxima tela, você pode escolher entre os modelos predefinidos como de costume. No entanto, neste caso, queremos criar um novo modelo do zero. Portanto, clique no X no canto superior direito para fechar esta janela.
2. Configure a visualização
Em seguida, defina a janela de visualização para uma postagem existente. Você pode fazer isso clicando no ícone de olho na parte inferior das opções do editor e Configurações.
No menu que é aberto, em visualização conteúdo dinâmico, escolha Publicar. Depois disso, na próxima linha, você pode pesquisar e escolher uma postagem existente pelo nome.
Depois de fazer isso, toque em Inscreva-se & visualização. Embora você não consiga ver nada neste momento (já que não há nada na página), ele dirá ao Elementor para usar os dados desta postagem a partir de agora. Você logo verá o que isso significa.
3. Vamos criar a seção Acima
Primeiro, criaremos a seção acima. Aqui você normalmente encontrará coisas como o título da postagem e metadados como autor, data e categoria.
O primeiro passo é clicar no sinal + e criando uma única seção de coluna.
Ao fazer isso, na seção de layout, você tem a opção de controlar sua largura, altura, posicionamento e estilo. Nesse caso, não há muito o que fazer aqui. Além disso, não se preocupe, você sempre pode voltar e fazer alterações mais tarde.
Em seguida, arraste o widget do título da postagem para a nova seção.
Ao fazer isso, certifique-se de usar todas as opções disponíveis para ajustar o design e o layout de acordo com sua preferência. Por exemplo, aqui estão minhas configurações para fazer isso:
Há também um recurso interessante que você deve aprender. Ao clicar no símbolo de chave do título da postagem, você pode adicionar conteúdo estático antes e depois de seus dados dinâmicos.
Por exemplo, se você criar um modelo para uma determinada categoria de postagem, como notícias ou receitas, poderá adicioná-lo ao título da postagem desta forma:
Dessa forma, os dados apareceriam para cada postagem nessa categoria. Não vou usar isso neste momento, mas achei que era uma observação importante para você.
Sob o título da postagem, inseriremos o Publique Info Widget para ver os metadados da postagem.
Aqui estão as configurações que uso:
Além disso, usei as opções de estilo para fazer o design caber no resto da página. Certifique-se de fazer o mesmo.
4. Configure o corpo da postagem
Após o cabeçalho, é hora de criar o corpo da página. Se você quiser que esta parte tenha um design diferente do cabeçalho, você precisará configurar uma nova seção. No entanto, mantenho as coisas simples, então não preciso.
A primeira coisa que queremos inserir é a imagem em destaque. Para isso, você pode colocar o widget de mesmo nome sob o que já está na página.
Eu basicamente não alterei nenhuma das configurações, apenas deixei tudo como está.
Então é hora de postar o conteúdo. Aqui também você tem um bloco correspondente.
Você notará que para imagens em destaque e conteúdo de postagem, Elementor puxa automaticamente o que já está no site. Faça todos os ajustes necessários ao design do novo bloco, por exemplo, brincando com as configurações tipográficas.
Fora isso, é tudo. Não há muito trabalho a fazer aqui para que possamos passar para a última parte.
5. Configure o rodapé
Nesse caso, queremos que o rodapé mostre o perfil do autor, as opções de compartilhamento e os comentários do leitor. Para fazer isso, em primeiro lugar, precisamos criar uma nova seção com duas colunas. Para criar mais espaço para o perfil do autor, você pode configurá-lo para um layout 66.33.
Depois disso coloque o widget Caixa do Autor na seção esquerda.
Certifique-se de personalizar o estilo para atender às suas necessidades. Eu adicionei um pouco de cor de fundo e ajustei ligeiramente as configurações de tipografia.
Depois disso, é hora de adicionar o bloco Share Buttons no lado direito.
Você pode ver minhas configurações na imagem acima.
Depois disso, tudo o que resta é criar uma seção mais uma coluna abaixo e arrastar e soltar o widget Post Comments nela.
(A propósito, se você tiver problemas para localizar qualquer um desses widgets, basta usar a função de pesquisa).
Faça os ajustes necessários na seção de comentários (deixei como está) e você estará pronto para postar. Aqui está o design final:
Personalize o modelo de arquivo
1. Configure o seu modelo de arquivo WordPress
Você já conhece a solução para a criação de novos modelos. A única diferença é que, neste caso, você escolherá arquivo como o tipo de modelo.
Depois disso, como de costume, você terá vários blocos para escolher ou também poderá criar seu próprio modelo do zero. No entanto, para arquivos, você tem aproximadamente apenas dois Widgets Elementor que são importantes de qualquer maneira.
2. Defina o título do arquivo
O primeiro bloco sobre o qual quero falar é o título do arquivo Título do Arquivo.
Além das configurações usuais em Estilo e Avançado, você pode encontrar uma opção importante ao clicar no símbolo de chave em Título.
Aqui você pode ativar e desativar se o Elementor mostra o tipo de arquivo na página, como a parte em que diz Autor: abaixo. Isso acontece através do botão abaixo Incluir Contexto.
A propósito, como de costume, você pode visualizar diferentes arquivos usando as configurações de visualização (Símbolo do olho> Configurações). Dessa forma, você pode ver o design de categorias, tags, autores exclusivos e muito mais. Tenha isso em mente.
3. Use o bloco de publicações de arquivo
O segundo widget importante para arquivos é Archive Posts. Isso traz todas as postagens pertencentes a qualquer arquivo em uma página. Quando você escolhe um modelo, eles já estão lá, mas você também pode adicioná-los facilmente com este bloco.
Vamos dar uma olhada nas opções que oferece para personalizar suas páginas de arquivo:
- Pele - Escolha exibir suas postagens em um design clássico ou estilo cartão.
- colunas - Determina o número de colunas em que suas postagens são exibidas.
- Mostrar imagem - Ative imagens em destaque nas páginas de arquivo
- Alvenaria – Exibe itens em projeto de alvenaria ou não.
- Tamanho da Imagem - O tamanho da imagem Elementor deve usar nas páginas de arquivo.
- Título - Quer mostrar os títulos das postagens ou não?
- Tag HTML de título - Em caso afirmativo, qual tag HTML deve ser envolvida nele?
- Excerto - Inclua trechos de suas postagens ou mostre apenas o título.
- Tamanho do Resumo - Determine o comprimento dos extratos.
- metadados - Define os metadados da postagem disponíveis para os visitantes.
- Separador Entre - Símbolo separador entre informações de metadados.
- Saiba Mais - Incluir um link "leia mais", sim ou não?
- Crachá - Permite adicionar mais informações às postagens, como categorias e tags.
- Crachá de taxonomia - Aqui você pode decidir quais informações incluir.
- Avatar – Com isso você pode alterar a foto de perfil dos autores dos artigos
Além das opções acima, você tem mais algumas opções. Debaixo Paging, você pode definir como a paginação do arquivo deve ser tratada. Por exemplo, como exibi-lo, o número de páginas a incluir e o alinhamento do texto.
Enfin, Avançado permite que você defina a mensagem a ser exibida quando um visitante chegar a um arquivo vazio. Todo o resto deve ser familiar. Apenas observe que as opções de estilo mudam dependendo da skin que você escolheu.
4. Controle o número de publicações por arquivo
Uma nota rápida sobre modelos de arquivo. Para alterar o número de postagens que aparecem em um arquivo (ou na página do seu blog), você precisa fazer isso no WordPress em Configurações> Leitura.
Aqui, basta inserir o número de postagens que deseja que os visitantes vejam.
personalização fácil Tema WordPress com Elementor
Personalizar temas do WordPress é o pão com manteiga de muitos profissionais. Embora isso geralmente envolva muita codificação e edição de arquivos, com o Elementor isso não é mais necessário.
Como você viu acima, o plugin é um editor de tema WordPress completo. Ele permite que você personalize cada parte de sua interface de usuário. Você pode editar o cabeçalho, rodapé, modelos de página e postagem do site, modelos de arquivo e muito mais.
Com a capacidade de usar conteúdo dinâmico e visualizar qualquer parte do seu site, você pode implementar todas as personalizações da moda
Resumindo, o Elementor facilita a personalização do seu tema WordPress. Em vez de fazer alterações meticulosamente em dezenas de arquivos e centenas de linhas de código, você pode fazer tudo rapidamente em um só lugar.
Obtenha o Elementor Pro agora!
Conclusão
Aí está ! É isso para este artigo que mostra como personalizar um tema do WordPress com o Page Builder Elementor. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
