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 Elementorpara 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.
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.
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.
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
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.
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
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
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.
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.
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.
Etapa 2: prepare o link do efeito sonoro
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.
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.
Etapa 3: adicione o seguinte código HTML
Para produzir som a partir do botão, precisamos usar o seguinte código HTML.
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.
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.
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.
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.
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.
Substitua o nome da classe CSS do botão
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.
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.
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.
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.
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ãoe 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.
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.
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).
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.
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
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.
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.
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.
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.
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.
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:
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
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:
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:
Você tem mais perguntas sobre como migrar o WordPress?
E isso conclui nosso guia sobre como migrar o WordPress, incluindo seu conteúdo Elementor.
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.
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.
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.
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.
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.
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".
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.
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"
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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 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.
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 InformaçãoWidgetpara 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 WidgetsElementor 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ácilTema 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.
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.
Confidencialidade e cookies: este site usa cookies. Ao continuar a navegar neste site, você concorda com o uso que fazemos dele.
Para saber mais, incluindo como controlar cookies, consulte o seguinte:
Política de cookies
Depois 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.
