Elementor Cloud: Como construir um site em 3 minutos

Elementor Cloud: Como construir um site em 3 minutos

Neste tutorial do WordPress, aprenda como criar um site com Elementor em apenas 3 minutos graças ao Elementor Cloud, uma solução automatizada para criar um Blog WordPress com Elementor para blogueiros ou webmasters iniciantes e experientes.

Se preferir seguir o tutorial em vídeo, clique no botão acima do vídeo a seguir:

Construir seu próprio site sem aprender a codificar ou contratar um desenvolvedor era quase impossível. No entanto, graças a plataformas como WordPress e plugins como Elementor, o que antes era uma missão impossível agora é uma realidade.

Neste tutorial, mostraremos como usar o WordPress e o Elementor para criar um novo site e orientá-lo no processo passo a passo.

Mas antes de convidá-lo a descobrir Como instalar o Elementor no WordPress ou Como instalar (adicionar) um plugin no WordPress

Crie um site WordPress com Elementor

WordPress é um poderoso sistema de gerenciamento de conteúdo que pode ser baixado e usado gratuitamente e permite criar qualquer tipo de site; desde simples blogs pessoais e sites de pequenas empresas até grandes sites corporativos e aplicativos ricos em recursos. 

Elementor, por outro lado, é um construtor de páginas robusto e fácil de usar que facilita para qualquer pessoa criar seu site, não importa o quão complexo seja.

Neste tutorial, mostraremos como criar um site WordPress em três minutos com a nova plataforma Elementor Cloud. O nome pode ser forte, mas a solução é realmente automatizada e fácil para qualquer iniciante.

a primeira coisa é ir para a página Elementor e ir até a parte inferior da página e encontrar o link Elementor Cloud.

crie um site com o Elementor Cloud

Você será redirecionado para uma nova página. Role para baixo e encontre a seção SEM FADAS ESCONDIDAS. À sua direita clique no botão Comprar agora Como na imagem abaixo.

criar um site com Elementor

A página de pagamento será aberta e você será solicitado a inserir seu e-mail. Após digitá-lo, clique no botão CRIAR CONTA

Criação de conta na nuvem Elementor

Em seguida, na próxima página digite o país, o estado, o endereço, o CEP e assim por diante, depois clique no botão Continuar

Depois disso, selecione a forma de pagamento. Você pode escolher entre Cartão de Crédito ou PayPal. Escolhemos o método PayPal.

Clique no botão amarelo do PayPal à direita da tela.

Un pop-up será aberto e você será solicitado a inserir suas informações de login do PayPal e validar.

Se o procedimento for bem sucedido, você será redirecionado para a página de agradecimento que possui dois botões. O primeiro Vá para Minha Conta irá levá-lo à sua conta e o segundo Comece a criar seu site para a criação automatizada do seu site.

Clique no segundo botão. Você terá direito a um novo Popup que o convidará a inserir o nome do seu site. Valide clicando em Seguinte.

Aguarde o término do procedimento automático de criação do seu site e clique no botão Vamos!

Clique Aceito como na imagem abaixo.

Clique em Open WP Dashboard para abrir seu painel.

No novo pop-up de boas-vindas, clique no botão Use um kit de site

Você será solicitado a selecionar um modelo de site da lista que o Elementor oferece. Você terá a possibilidade de filtrá-los por categoria clicando em um deles à esquerda.

crie um blog WordPress com Elementor

Se você encontrou o modelo que corresponde às suas aspirações, passe o ponteiro do mouse sobre ele, um novo botão aparecerá, clique em Ver demonstração

crie um blog WordPress com Elementor

Você será capaz de ver, o que este modelo oferece. Você poderá navegar em todas as páginas deste modelo e se estiver satisfeito com ele, clique no botão Aplicar kit quem instalará o modelo em seu site.

Se não estiver, o botão Voltar para a biblioteca irá levá-lo de volta à lista de modelos e você pode conferir outro.

Depois de clicar em Aplicar kit, um pop-up de confirmação perguntará se você realmente deseja instalar este modelo inteiro ou apenas algumas páginas. Você pode clicar Aplicar tudo ou Personalizar para personalizar suas escolhas.

Um resumo de sua seleção será apresentado, clique em Seguinte

crie um blog WordPress com Elementor

Finalmente clique em Voltar para o Dashboard para retornar ao painel do seu site.

No seu painel, clique em Nome do meu site acima e à esquerda da tela, em seguida, em Visit Site para ver o desempenho do seu site.

E aqui você acabou de criar seu site no WordPress com o Elementor Cloud.

Tudo o que resta a fazer é personalizá-lo como desejar. Para isso, oferecemos um Pacote Tutorial Elementor que convidamos você a descobrir.

Depois de terminar este guia, você pode querer conferir nossos outros guias e tutoriais para páginas mais específicas.

Com esses tutoriais, você poderá melhorar seu site e tirar o máximo proveito dele.

Obtenha o Elementor Pro agora!

Conclusão

Então ! É isso para este artigo que mostra como criar um site com o Elementor em 3 minutos. 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.

...

Elementor: como adicionar um efeito sonoro de botão

Elementor: como adicionar um efeito sonoro de botão

Precisa descobrir como adicionar um efeito de som de botão no Elementor? Descubra neste artigo.

Você vê esses 2 botões?

Quando você clica no Do gato, ele fará um miado, e quando você clicar no botão chien, ele produzirá um som de latido. Neste artigo, mostraremos como adicionar Elementor um efeito sonoro ao botão quando clicado.

Como adicionar efeito sonoro ao botão no Elementor

Etapa 1: criar um botão

Primeiro, você precisa criar o botão, você pode personalizar o botão como quiser, pois o Elementor tem muitas opções para deixar seu botão bonito.

Quando o botão estiver pronto, agora prepare o efeito sonoro para o botão e faça o upload para a biblioteca de mídia do WordPress. Você pode usar o formato de arquivo MP3 ou WAV para efeito de som.

Para fazer upload do arquivo de som para a biblioteca de mídia do WordPress, navegue até o painel do WordPress e clique em Mídia -> Adicionar. Você pode arrastar e soltar os arquivos ou clicar Selecionar arquivos para carregá-los.

efeito de som do botão no Elementor

Após o download dos arquivos, vá para a biblioteca de mídia e clique em um dos sons, depois na janela que aparece, copie o URL do arquivo para obter o link para o efeito sonoro.

efeito de som do botão no Elementor

Etapa 3: adicione o seguinte código HTML

Para produzir som a partir do botão, precisamos usar o seguinte código HTML.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

Adicione um widget HTML na área de tela e cole o código no bloco código HTML.

Use seu link de efeito sonoro para substituir URL de efeito sonoro na declaração

var audio1 = new Audio('Sound-Effect-URL')

Escolha as classes CSS para o botão e modifique o código das classes Classe CSS do botão

$(".button-class").mousedown

Depois de modificar o código, ficará assim.

efeito de som do botão no Elementor

Etapa 4: adicionar uma classe CSS ao botão

Para conectar o botão aos códigos, precisamos adicionar classes CSS ao botão, para que o código saiba qual botão foi clicado e acione os efeitos sonoros.

efeito de som do botão no Elementor

E isso é para um botão com um efeito sonoro. Agora você pode personalizar seu botão. E se você quiser adicionar mais botões com efeitos sonoros, é possível copiando parte do código e modificando-o um pouco.

Adicionados botões adicionais com efeitos sonoros

Crie o botão ou copie o botão existente

Você pode copiar o botão existente clicando com o botão direito do mouse no botão existente e selecionando Copiar e, em seguida, colá-lo em qualquer seção clicando com o botão direito do mouse dentro dessa seção.

efeito de som do botão no Elementor

Copie parte do código e ajuste as variáveis ​​e o nome da classe CSS do segundo botão

Vamos copiar algumas partes do código HTML anterior que aciona o efeito sonoro, é o seguinte código abaixo

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

Após copiar o código, cole-o logo abaixo por Áudio 1 Termina. Modifique a variável audio1 e todo o código que usa a variável audio1 no código recém-criado em audio2.

Veja também: Elementor: Como criar um cartão de efeito a partir de um portfólio

Em seguida, substitua o URL do efeito sonoro se estiver usando um novo efeito sonoro para o novo botão e altere o código classe de botão em suas classes CSS de botão recém-criadas.

O código final será parecido com a imagem a seguir.

efeito de som do botão no Elementor

Substitua o nome da classe CSS do botão

efeito de som do botão no Elementor

Seu botão recém-criado também terá um efeito sonoro quando clicado. Você pode criar quantos quiser.

Elementos de áudio estão entre as grandes adições a um site. Eles não apenas fornecem um elemento atraente para sites, mas também ajudam a criar uma impressão duradoura nos usuários finais.

Leia também: Elementor: Como migrar um site WordPress

No entanto, a ação ou resultado só deve ser acompanhado de som se reforçar ou esclarecer significativamente uma mensagem importante para o usuário. Informar o usuário sobre algo que precisa de sua atenção, para que não cause um impacto negativo em seu site.

Obtenha o Elementor Pro agora!

Conclusão

Então ! É isso para este artigo que mostra como adicionar efeito de som de botão no Elementor. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro de 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.

...

Elementor: Como criar um botão flutuante com índice Z

Elementor: Como criar um botão flutuante com índice Z

Você gostaria de criar um botão flutuante com índice Z no Elementor?

Temos certeza de que você está familiarizado com o botão que aparece na frente de todo o conteúdo da tela e geralmente com uma forma circular e um ícone no centro. Bem, esse é o botão de ação flutuante.

O botão de ação flutuante pode acionar uma ação ou enviar você para algum lugar. Como gatilhos para e-mails, redes sociais, direcionar os visitantes para se inscrever em um canal e muito mais.

No Elementor, existem dois métodos para criar um botão de ação flutuante, são os seguintes:

  • Ao definir Z-Index
  • Ao criar uma janela pop-up -Popup-

Neste tutorial, mostraremos apenas como criar um botão de ação flutuante definindo o índice Z. E usaremos a versão pro para fazer isso acontecer.

Mas primeiro, descubra: Como instalar o Elementor no WordPress

Como criar o botão de ação flutuante no Elementor

Você pode usar a versão gratuita do Elementor para criar o botão de ação flutuante com este método. Mas você precisa colar o botão que você projetou em todas as páginas em que deseja que o botão apareça em seu site.

Com Elementor Pro, você também pode acessar o recurso CSS customizado, que usaremos neste tutorial.

Vá para o seu editor Elementor; você pode modificar seu conteúdo existente (páginas, artigos, etc...) ou criar um novo. Neste tutorial, vamos modificar uma página.

Primeiro, crie uma nova seção com uma única coluna. Selecione o widget de botão e arraste e solte na área de edição do painel de widgets. Em seguida, altere o botão texto e o link. 

Neste tutorial, usaremos o botão como um gatilho para empurrar os visitantes para navegar no site da Elementor. Em seguida, na opção alignement, defina-o para direito et, Por fim, altere o Tamanho do botão Ligar Muito grande.

crie um botão flutuante com índice Z

Como você pode ver no GIF acima, este botão está estacionário na seção. Em seguida, faremos com que ele se mova enquanto rolamos, mantendo-o na mesma posição.

Vá para a guia avançado. No parâmetro Layout, defina a largura em linha (carro), Defina a posição em Fixo, definir orientação horizontal em direito e ajustá-lo décalage como desejado.

crie um botão flutuante com índice Z

Em seguida, vamos definir o essencial neste método. No campo Z-Index, digite o número 9999 fará com que o botão fique sempre na frente (flutuante).

crie um botão flutuante com índice Z

Agora é hora de girar o botão de ação flutuante. Sempre sob a guia avançado, Acesso aulas de css do bloco Layout, então escreva rotate dentro.

Veja também: Elementor: Apresentando o melhor construtor de páginas do WordPress

Depois disso vá para o bloco CSS customizado , cole o seguinte código no campo:

.rotate.rotate
{transform: rotate(90deg);}

Você pode ver que o botão acabou de girar, mas há uma lacuna estranha entre a lateral da tela. Então, vamos corrigi-lo ajustando o décalage em -92

crie um botão flutuante com índice Z

Finalmente, vamos fazer um último pequeno toque para este botão de ação flutuante. Acesse o bloco transformador, selecione-o VISÃO GERAL, acesse a opção mudança e defina cada opção para 7.

crie um botão flutuante com índice Z

Existem várias opções para alcançar uma determinada coisa no Elementor. Quando se trata do botão flutuante, existem duas opções que você pode usar. Aqui nós cobrimos apenas um método, o outro método será outro tutorial.

Leia também: Elementor: Como migrar um site WordPress

Se você deseja ter mais opções de estilo, criar um botão de ação flutuante usando o construtor de Popup será uma alternativa melhor, pois você terá opções para personalizar o botão, bem como o comportamento, como tempo de fechamento do botão, duração, animação de entrada ou saída, etc. .

Você acabou de concluir esta tarefa facilmente. Basta visualizar o trabalho do seu tablet e smartphone, tentando alterar as margens para corresponder a cada dispositivo.

Obtenha o Elementor Pro agora!

Conclusão

Assim ! É isso neste artigo que mostra como aplicar um efeito Zoom em um cartão de perfil. 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.

...

Elementor: Como migrar manualmente um site WordPress

Elementor: Como migrar manualmente um site WordPress

No tutorial: Como migrar manualmente um site WordPress com Elementor. Nós já mostramos como você pode migrar um site usando o plugin WordPress Duplicator.

Embora este plugin do WordPress torne as coisas mais fáceis, alguns podem precisar controlar o processo por conta própria, manipulando o código.

Portanto, se você tem um site particularmente grande ou apenas deseja fazer as coisas manualmente por algum motivo, também não é tão difícil migrar manualmente seu site WordPress.

Para este guia, não iremos nos aprofundar porque só recomendamos esse método se você já estiver familiarizado com algumas das operações mais técnicas do WordPress.

Etapa 0: algumas preliminares a serem observadas

Antes de iniciar este tutorial, você precisará:

  • Faça um backup do seu site
  • Tenha as credenciais de FTP dos hosts de site existentes e aquele para o qual deseja migrar seu site

E se você mudar de domínio, também deve direcionar os servidores de nome de seu novo domínio para o servidor do novo site.

A seguir, veja como migrar o WordPress manualmente.

Etapa 1: Mova os arquivos para o novo servidor

Existem várias maneiras de mover arquivos do seu site para o novo servidor. Uma maneira seria carregar todos os arquivos usando FTP e depois carregá-los para o novo servidor.

No entanto, como esse processo pode levar horas e horas, a maneira mais eficiente seria criar um arquivo compactado no cPanel e, em seguida, verificá-lo no novo host.

Etapa 2: exportar o banco de dados

Em seguida, você precisa exportar o banco de dados de seu site existente.

Embora você possa fazer isso manualmente através do phpMyAdmin, uma solução mais simples é o Plug-in WordPress gratuito para Migrate DB.

Além de exportar facilmente seu banco de dados, WP Migrate DB também lida com dados serializados e permite que você execute pesquisas e substitua caminhos de URL para garantir que tudo funcione bem se você alterar os nomes de domínio. .

Instale e ative o plugin no site que você deseja migrar. Então vá para Ferramentas → Migrar banco de dados

Escolha o botão de rádio Exportar arquivo ( deve ser selecionado por padrão).

Se você alterar os nomes de domínio, também poderá usar o recurso Encontrar / Substituir para substituir os URLs do banco de dados pelo novo nome de domínio.

Em seguida, clique Exportações para baixar uma cópia do seu banco de dados:

Como migrar o instalador 7 do elemento de site do wordpress

Etapa 3: crie um novo banco de dados MySQL

Em seguida, crie um novo banco de dados MySQL no host para o qual você migrou seu site, junto com um novo usuário e senha de banco de dados.

Mantenha essas informações à mão, pois você precisará delas.

Etapa 4: importar um banco de dados

Abra o phpMyAdmin no novo host da web e:

  • Encontre o banco de dados que você acabou de criar na etapa 3 usando a barra lateral à esquerda
  • Clique na aba importação
  • Selecione o arquivo de banco de dados que você baixou com WP Migrate DB na etapa 2
  • Clique Go

Como migrar o instalador 8 do elemento de site do wordpress

Etapa 5: edite o arquivo wp-config.php

Neste ponto, os arquivos e o banco de dados do seu site devem estar em seus novos locais.

Agora você precisa dizer ao seu site para usar o novo banco de dados criado na etapa 3.

Para fazer isso, edite o arquivo wp-config.php no site migrado e insira as novas informações do banco de dados:

migrar manualmente um site WordPress Elementor

Etapa 6: encontre e substitua URLs no conteúdo do Elementor (se alterar o domínio)

Se você estiver alterando nomes de domínio, vá para Elementor → Ferramentas. Em seguida, clique na guia Substituir URL e use a ferramenta para atualizar os URLs do conteúdo do Elementor:

Etapa 7: Gerar CSS do Elementor

Depois de atualizar os URLs para o seu conteúdo Elementor, vá para Elementor → Ferramentas e clique no botão Regenerar arquivos para forçar o Elementor a regenerar seu CSS:

migrar manualmente um site WordPress Elementor

Você tem mais perguntas sobre como migrar o WordPress?

E isso conclui nosso guia sobre como migrar o WordPress, incluindo seu conteúdo Elementor.

Obtenha o Elementor Pro agora!

Conclusão

Se você tiver dúvidas sobre como mover com segurança sites que você criou com WordPress e Elementor Pro para novos hosts da web e / ou nomes de domínio? Deixe-nos saber em 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.

...

Elementor: Apresentando o melhor construtor de páginas do WordPress

Elementor: Apresentando o melhor construtor de páginas do WordPress

Quer descobrir a apresentação do melhor Construtor de Páginas WordPress: Elementor?

WordPress é o CMS mais popular do mundo. No entanto, quando se trata de projetar uma página no frontend, o kit de ferramentas padrão do WordPress fica muito aquém de outras plataformas de criação de sites, como Wix ou Squarespace.

Essa desvantagem do WordPress começa a deixar de estar com sua infinidade de plugins poderosos que simplificam o trabalho. Esta é a razão pela qual apresentaremos você neste tutorial, um plugin do WordPress que permitirá criar páginas iniciais incríveis, tudo de graça.

Elementor é um construtor de páginas que permite que você crie páginas com aparência profissional em uma velocidade incrível, e tudo isso ao vivo em seu blog. O plugin é gratuito e está disponível no Diretório de plugins do WordPress.

Elementor foi recentemente apresentado em Caça produto e chamou a atenção de muitos usuários do WordPress em grupos do Facebook.

Você pode se perguntar como a Elementor consegue lidar com tantas página Builder Isso já existe.

A vantagem da velocidade

Quando temos que lidar com construtor de página », a questão da velocidade é importante. Elementor é o construtor de páginas mais rápido no momento. Seja no " arrastar e soltar Que funciona sem lag, ou os tempos de carregamento rápido das páginas projetadas pela Elementor.

Veja também: Como criar um cartão de efeito de um portfólio com Elementor

A velocidade e o desempenho não afetam apenas o site, mas também a experiência do usuário. A ideia de um " construtor de página "Isso permite que você trabalhe ao vivo sem perder velocidade, é um fator determinante para a experiência do usuário.

DragDropDesign interface plug-in

A vantagem do Open Source

Elementor é um código aberto. Embora existam outros " construtor de página "Free, nenhum outro projeto de código aberto semelhante, oferece esses amplos recursos de design, com uma variedade de recursos e widgets.

Uma versão gratuita estará disponível em breve, mas a versão gratuita ainda permitirá que os usuários criem páginas profissionais.

Veja também: Como alterar uma imagem ao passar o mouse sobre o texto com o Elementor 

Após o seu lançamento, foi dotado de mais de 6 widgets. Você pode contar com ele: espaçador, caixa de ícones, caixa de imagens, galeria de grade, galeria de imagens e galeria de carrossel.

O benefício da comunidade

A comunidade do WordPress tem um papel vital no desenvolvimento do Elementor. O projeto está no GitHub, e os desenvolvedores podem ajudar a melhorá-lo.

Veja também nosso tutorial sobre Como personalizar um tema WordPress com Elementor

Também foi traduzido para vários idiomas, incluindo japonês, alemão e hebraico. É um dos únicos " construtor de página »Compatível com fraldas RTL (direita para a esquerda). A comunidade está crescendo apenas com o tempo, o que é muito promissor para o futuro do plugin.

A evolução do plugin

O Elementor foi baixado mais de uma vez o 10.000. Ele foi destaque no boletim informativo Product Hunt e já conquistou mais de votos favoráveis ​​no 700. Novos recursos são adicionados semanalmente.

Passo primeiro

Após instalar o plugin, você notará um novo menu no painel "Elementor".

Menu Elementor WordPress

Clicar nele o levará para a página de configurações do plugin. Mas essa etapa não é realmente necessária, pois as configurações padrão podem funcionar na maioria dos sites.

No entanto, se você quiser, por exemplo, definir os formatos de publicação personalizados que usarão o plug-in, precisará fazer alguns ajustes.

Leia nosso guia sobre Como alterar a imagem com o clique de um botão com Elementor

Para começar a criar uma página, tudo que você precisa fazer é acessar uma página (ou para a interface para criar o tipo de publicação personalizada) Você notará nesta página um novo botão intitulado: " Editar com Elementor"

editor de construtor de páginas WordPress

Em seguida, você acessará a interface ao vivo em seu blog. É a partir daí que toda a magia irá operar. Dessa interface, você pode adicionar elementos disponíveis à direita da interface do seu blog. Você notará como as coisas são feitas rapidamente.

tutorial Elementor

Você provavelmente terá dificuldade em se acostumar com isso, mas não precisa se preocupar. Isso é tudo que você precisa saber por enquanto. Se você tiver alguma dúvida, sinta-se à vontade para postar comentários. 

Obtenha o Elementor Pro agora!

Conclusão

Aí está ! É isso para este artigo que mostra como alterar uma imagem ao passar o mouse sobre um texto. 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.

...

Elementor: Como personalizar um tema do WordPress

Elementor: Como personalizar um tema do WordPress

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 construir um site é promover o seu negócio. Que melhor maneira de fazer isso do que criar um site exclusivo que promova o estilo e o design do negócio.

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.

  1. Manualmente, por meio do personalizador WordPress
  2. Com o código
  3. Com Elementor

Como personalizar manualmente um tema WordPress

Você pode personalizar o tema WordPress de sua escolha por meio do Customizador WordPress integrado. Se você fizer isso sem um código, geralmente ficará limitado no que pode alterar. Alguns temas premium do WordPress 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 WordPress permitirão que você altere seus esquemas de cores, mas não todos, e geralmente são temas WordPress premium. Se o seu tema WordPress permitir que você altere o esquema de cores, você verá essa 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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 1

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 2

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 3
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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 4

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 5

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á.

Como personalizar elemento de tema wordpress ou template de cabeçalho 6

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 7

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.
  • Estilo - 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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 8
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.
  • Estilo - 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.

personalize um tema WordPress com o plugin Elementor.
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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 10

Clique aqui no botão roxo para escolher um design de três colunas.

Como personalizar elemento de tema wordpress ou template de cabeçalho 11

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 12

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. 

Como personalizar elemento de tema wordpress ou template de cabeçalho 13

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 14

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 15

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 16Depois de fazer isso, toque em Aplicar & 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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 17
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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 18

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:

Como personalizar elemento de tema wordpress ou template de cabeçalho 19

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:

Como personalizar elemento de tema wordpress ou template de cabeçalho 20

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 Informação Widget para ver os metadados da postagem.

Como personalizar elemento de tema wordpress ou template de cabeçalho 21

Aqui estão as configurações que uso:

Como personalizar elemento de tema wordpress ou template de cabeçalho 22

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 23

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 24
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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 25

Depois disso coloque o widget Caixa do Autor na seção esquerda.

Como personalizar elemento de tema wordpress ou template de cabeçalho 26

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 27

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 28

(A propósito, se você tiver problemas para localizar qualquer um desses widgets, basta usar a função de pesquisa).

Como personalizar elemento de tema wordpress ou template de cabeçalho 29

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:

Como personalizar elemento de tema wordpress ou template de cabeçalho 30

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 31

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 32

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 33

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.

Como personalizar elemento de tema wordpress ou template de cabeçalho 34

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. 

Como personalizar elemento de tema wordpress ou template de cabeçalho 35

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.

...