Ir para o conteúdo principal

Como criar um layout personalizado com Elementor

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Deseja criar seus próprios layouts personalizados no WordPress? Deseja criar facilmente um site com uma aparência profissional? Então você tem que Faça o download do plugin WordPress Elementor aqui.

Elementor é um construtor de páginas visuais que oferece o recurso "Arrastar e soltar" que permite criar facilmente layouts personalizados no WordPress sem nenhum conhecimento de codificação.

Neste tutorial, mostraremos como criar facilmente layouts personalizados do WordPress com o Elementor com apenas alguns cliques. Nós também oferecemos confira as outras alternativas deste belo plugin WordPress.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog

Então, voltemos ao porquê de estarmos aqui.

Por que e quando criar layouts personalizados no WordPress?

Antes de começar, você pode descobrir neste plugin do WordPress consultando os artigos Apresentação de uma página do construtor WordPress: Elementor ou descobrindo o Tutorial do Elementor: Apresentando a Interface

Muitos temas gratuitos e premium do WordPress oferecem várias opções de layout para diferentes tipos de páginas. No entanto, às vezes, nenhum desses modelos de layout atende às suas necessidades.

No entanto, se você é fã de PHP, HTML e CSS, tem a opção de criar seus próprios modelos de página ou até mesmo criar um tema filho para o seu site. Mas a maioria dos usuários do WordPress não são desenvolvedores, portanto, essa opção não funciona para eles.

Descubra também estes 8 WordPress plugins para criar facilmente seus layouts

Não seria ótimo criar layouts usando uma interface simples (arrastar e soltar)?

É exatamente o que a Elementor faz. Este é um plug-in de criação de página do WordPress que permite criar facilmente seus próprios layouts personalizados do WordPress sem nenhuma habilidade de codificação.

Possui uma interface de usuário intuitiva que permite criar layouts personalizados com visualização em tempo real. Ele vem com muitos módulos prontos para uso para todos os tipos de elementos de design da web.

Ele oferece vários modelos de página projetados profissionalmente que você pode carregar e usar instantaneamente como ponto de partida. Dito isso, vejamos como criar layouts personalizados do WordPress com o plug-in WordPress Elementor.

Introdução ao Elementor

Primeiro, você precisará comprar o plugin Elementor Pro ". Esta é a versão paga do plugin Elementor Gratuito, que oferece acesso a recursos adicionais e ao suporte ao cliente da 1.

Então você terá que instalar e ativar o plugin Elementor. Para mais detalhes, consulte o nosso guia passo a passo em como instalar um plugin do WordPress.

Após a ativação, visite a página " Elementor> Configurações Para configurar a operação deste plugin.

Aqui você pode ativar o "Elementor" para diferentes tipos de publicação. Por padrão, ele está ativado para seus artigos e páginas do WordPress. Se você tiver formatos de publicação personalizados em seu site, eles também aparecerão aqui e você também poderá habilitá-los.

Você pode excluir ou incluir funções de usuário que podem usar o Elementor ao escrever artigos ou páginas. Por padrão, ele está ativado apenas para administradores.

Descubra nosso 8 WordPress plugins para gerenciar funções e usuários

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Não se esqueça de clicar no botão « Salvar alterações Para salvar suas configurações.

Criando um layout personalizado com Elementor

Primeiro, você precisa criar uma nova página (ou publicação) no seu site WordPress. Na página de publicações, você notará o novo botão "Editar com Elementor".

Ao clicar nele, a interface do usuário Elementor será iniciada, onde você poderá editar sua página usando o construtor de páginas com o recurso de arrastar e soltar.

Agora você pode adicionar seções e criar sua página do zero, ou ainda pode carregar um dos modelos enviados padrão.

Os modelos são uma maneira mais rápida de começar rapidamente. Assim, a Elementor oferece vários modelos projetados profissionalmente que você pode personalizar o quanto quiser.

Vamos começar com um modelo clicando no botão " Adicionar um modelo ".

Isso exibirá uma janela pop-up onde você poderá ver os diferentes modelos disponíveis. Você deve procurar um modelo parecido com o que deseja.

Agora clique para selecionar o modelo desejado e, em seguida, clique no botão inserir Para adicioná-lo à sua página.

O Elementor carregará o modelo para você.

Agora você pode começar a editar o modelo para atender às suas necessidades. Basta apontar e clicar em qualquer item para selecioná-lo, e o Elementor mostrará suas configurações na coluna da esquerda.

Agora vamos falar sobre como os layouts da Elementor funcionam.

Os modelos oferecidos pelo plugin Elementor são construídos em seções, colunas e widgets. As seções são como linhas ou blocos que você coloca na sua página.

Cada seção pode ter várias colunas e cada seção e coluna pode ter seus próprios estilos, cores, conteúdo etc.

Você pode adicionar itens às suas colunas e seções usando os widgets que o Elementor fornece.

Esses widgets são tipos de blocos de conteúdo que você pode colocar em seções de suas páginas.

Basta selecionar um widget e solte-o em sua seção ou coluna. Existe um extenso conjunto de widgets disponíveis que cobrem todos os elementos populares de web design que você pode imaginar.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Você pode adicionar imagens, texto, tópicos, galerias de imagens, vídeos, mapas, ícones, depoimentos, controles deslizantes, carrosséis e muito mais.

Veja também nossa Temas e modelos 15 Elementor para criar um site

Você também pode adicionar widgets padrão do WordPress e até widgets criados por outros plugins do WordPress no seu site.

Depois de terminar de criar seu próprio ou modificar seu layout, você pode clicar no botão " Enregistrer Para manter suas alterações.

Observação: Salvar um layout não irá publicar a página no seu site WordPress. Ele simplesmente salvará seu layout.

Neste ponto, você tem a opção de visualizar sua página ou acessar o painel do WordPress. O que o levará de volta ao editor padrão do WordPress. Agora você pode salvar sua página do WordPress ou publicá-la em seu site.

É isso aí, então terminei de criar uma página com o plugin WordPress Elementor.

Mas como muitos construtores de páginas, também oferece extensões isso permitirá que você crie novos layouts com facilidade e rapidez, adicionando mais elementos de design ao plug-in padrão.

Baixar Elementor

Descubra também alguns plugins premium do WordPress

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. JetElements

Este plug-in aprimorará seu pacote Elementor com uma ampla variedade de módulos, que serão extremamente úteis na criação de seu site. Elementos poderosos foram criados especialmente para serem integrados às funcionalidades da Elementor e, finalmente, para fornecer soluções versáteis e elementos elegantes.

Suas principais características são: muitos módulos úteis, contendo muitas opções de estilo, parâmetros funcionais e elementos absolutamente personalizáveis, elementos incríveis para iniciar rapidamente sua loja on-line, suporte para idiomas RTL, Suporte ao plugin WPML e um módulo Formulário de Contato 7 incrível, que permite adicionar seus formulários de contato e integrá-los ao seu site.

Descarregar | Demo| hospedagem na web

2. JetMenu

JetMenu é uma extensão muito funcional plugin Elementor, que permite criar megamenus com elementos de rolagem fáceis de usar. Este plugin não limita sua imaginação e tem o potencial de criar menus incríveis e renová-los de acordo com sua visão e suas necessidades.

Suas principais características são: Nenhum conhecimento em codificação é necessário, desde recursos avançados que combinam perfeitamente com simplicidade e clareza, uma grande variedade de módulos de conteúdo, desenvolvidos especialmente para ajudá-lo a criar seus menus, um layout altamente responsivo e muito mais.

Se você deseja incrementar os menus ou megamenus do seu site, este plugin do WordPress deve ser consultado.

Descarregar | Demo | hospedagem na web

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

3. JetWooBuilder

O JetWooBuilder é um complemento obrigatório que permite criar páginas de produtos completas do WooCommerce com Elementor.

Como recursos você encontrará, entre outros: vários modelos de páginas de produtos exclusivos, muitos elementos visuais criar páginas de produtos WooCommerce, muitos widgets de conteúdo atraente, como Adicionar ao carrinho, Visualização, Imagem, Notação, Relacionados e muitos outros, a capacidade de visualizar taxonomias de produtos e mais.

Descarregar | Demo | hospedagem na web

Alguns recursos úteis:

Conclusão:

Isso é tudo para este tutorial, espero que permita criar layouts modernos e profissionais com o plugin Elementor.

No entanto, você também poderá consultar nossos Ressources, 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.

Compartilhe especialmente este artigo em suas diferentes redes sociais.

...

Este artigo contém comentários 23
  1. Olá Thierry
    Do fundo do coração, muito obrigado pelo artigo. Agora tenho uma preocupação que me incomoda há alguns dias: comecei com o wordpress e uso o ocean WP como tema e, em seguida, instalei o elementor na versão gratuita, então, com essa versão gratuita, comecei a criar minhas páginas e isso é bom, mas o problema que surgiu para mim é que, quando eu publico minha página ou o artigo, quando as letras maiúsculas não aparecem depois de um ponto ou no início da minha frase, é necessário as configurações de tipografia ou família de fontes escolhidas em suma me ajudam a entender melhor onde é a versão gratuita que não tem capital após um ponto. Obrigado pela compreensão.

    1. Bom Dia,

      Eu recomendo que você entre em contato com o suporte ao plugin Elementor em sua página WordPress.org. Você certamente encontrará uma resposta dos autores.

  2. Olá
    Eu criei minha homepage através da guia personalizada da minha interface do wordpress. Por que não encontro o mesmo no elementor? no elementor minha barra de menu não está no mesmo lugar e eu não tenho o meu logotipo que aparece! Eu prefiro o do wordpress mas quando faço uma visualização do meu site é a homepage do elementor que aparece! Você pode me dizer como fazer isso?
    Obrigado p

  3. Bom Dia,
    Eu tenho um problema Nos últimos meses, eu não atualizei meu site no qual eu uso este elemento; hoje eu tentei fazer isso mas tenho um problema, a maioria das seções me mostra uma caixa com a palavra OFF SECTION e não consigo fazer nada. Eu só posso editar uma seção da página, aquela em que eu tenho o texto em si.
    Você sabe o que pode funcionar?

  4. Bom Dia,
    Estou aprendendo a construir um site com o WordPress, Elementor é um ótimo plugin, isso ajuda muito, eu descubro algo novo.
    Também problemas;) Eu costumo lidar com soluções. Não agora.

    Eu tenho um problema com a edição de texto. O parágrafo e os cabeçalhos são rígidos e não posso alterar a fonte, cor, espessura, etc. Apesar das mudanças nas configurações, nada muda. Este não é um problema de padrão porque sua fonte e esquema de cores são diferentes dos da Elementor.
    Eu não sei como mudar este parâmetro modelo que me aconteceu juntamente com o 1 cabeçalho, mas eu mudei digitando o código HTML no cabeçalho e ajudou, agora ele não funciona.

    Como isso vai mudar? - por favor ajude.

    1. Bom Dia,

      Tente desativar todos os plugins do WordPress e tente novamente. Se o seu problema for resolvido quando todos estiverem desativados, comece ativando-os um por um e, em seguida, verifique cada vez.

      Se for um problema de compatibilidade com outro plug-in, você saberá qual deles.

  5. Bonsoir.
    Adicionei uma foto no site (Landing Page) e tentei trocar por outra que não consegui ... apagar várias vezes e coloquei a nova foto mas ela não carrega ... a foto antiga fica ...
    Você poderia me ajudar?

  6. Olá e obrigado por este artigo que me reforça na escolha do Elementor como construtor de páginas. ^^

    Por outro lado, o que você acha da criação de um site filho antes das modificações? É necessário com o Elementor?

    Meu medo é que todas as alterações feitas sejam substituídas ao atualizar o tema? Não há risco?

    Obrigado pela sua resposta
    Bien à vous,
    Nicolas

  7. Olá e obrigado por este artigo muito interessante.
    Eu comecei a usar o Elementor e me perguntei se não era necessário antes de continuar a criar um tema filho do que eu uso. Caso contrário, não há o risco de que o tema ou o plug-in maJs sobrescrevam o layout integrado com o Elementor?
    Obrigado por seu retorno,

  8. Bom Dia,

    Eu gostaria de saber como ter o código PHP da extensão ELEMENTOR para integrá-lo à minha homepage?

    Agradeço sua atenção ao meu pedido.

  9. Bom Dia,

    artigo muito interessante.
    Eu tenho uma pergunta para o pro elementor que você é.
    É possível adicionar nos formulários gerados, um método = "POST"?

    Jeanson

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
23 ações
ação18
chilrear
Enregistrer5