A Elementor oferece regularmente temas que ajudam você a construir um site completo a partir deles. Todos os meses, lançamos novos temas que são construídos em torno de um nicho específico, mas flexíveis o suficiente para que você possa finalmente personalizá-los para atender às suas necessidades.

Combinados com o Elementor Pro, esses temas ajudam você a começar rapidamente com todas as partes do seu site, incluindo:

o pidades estáticas, como a página inicial,

  • o cabeçalho
  • o rodapé
  • página 404
  • a seção Arquivo 
  • o blog
  • Popups e outros

Portanto, neste tutorial, mostraremos como construir um site completo usando o construtor de página visual Elementor.

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.

Como construir um site completo com temas Elementor

Neste tutorial, você aprenderá a usar um tema como base para todas as partes importantes do seu site e, em seguida, reunirá tudo para criar um site coeso.

Mais precisamente, o tema Agência digital.

Seu site terá várias páginas básicas, como páginas:

  • Inicio
  • sobre
  • Serviços
  • Clientes
  • Blog
  • Contato

E também oferece seções dedicadas também ao conteúdo dinâmico. Por exemplo, os arquivos e modelos de postagem de seu blog correspondem automaticamente às suas páginas independentes. Você também pode alterar seu cabeçalho, rodapé e páginas 404.

Como criar um elemento de site completo ou blogpascher 1

Então, veja como criar um site com um tema Elementor:

1. Instale e ative o tema Elementor Hello 

Como você vai usar o Elementor e um template de tema para construir todo o seu site, você não precisa procurar por outros elementos.

Em vez disso, você só precisará de um site leve e com desempenho otimizado, fornecido pelo tema Elementor Hello.

Para começar, vá para Aparência → Temas → Adicionar e pesquisar " Olá elementor" Em seguida, instale e ative o tema. 

2. Configure as páginas estáticas básicas do seu site

Em seguida, vá para o menu Páginas → Adicionar para criar as páginas básicas do seu site.

Primeiro, crie uma página chamada " Inicio E clique no botão Editar com Elementor para iniciar o Elementor.

aberto Configurações de página e modificar seu layout de modo que seja igual a Largura total do Elementor.

Em seguida, abra a biblioteca de modelos Elementor e pesquise "Agência Digital" em PÁGINAS :

Como criar um elementor blogpascher completo 2.

Você deve ver uma lista de modelos de página deste tema. Inserir modelo Home da lista de modelos.

Agora você deve ver uma página inicial completa. O cabeçalho parece um pouco enfadonho por enquanto - mas não se preocupe, vamos corrigir isso em breve..

Como criar um elemento de site completo ou blogpascher 3

Em seguida, use o Elementor Finder para adicionar outra página para usar em sua página " sobre"

Como antes, altere o Layout - Layout da página - à Elementor largura total. Em seguida, abra a biblioteca de modelos e insira o modelo Sobre Nós do tema Agência Digital.

Agora, basta repetir o mesmo processo para criar todas as outras páginas, incluindo: Serviços, Clientes e Contato.

Não se preocupe com a página do Blog ainda. Esta página não é estática como as outras. Por esse motivo, você o criará lá por meio de um método diferente (que abordaremos mais tarde neste tutorial).

Para terminar de configurar suas páginas estáticas, você precisa dizer à instalação do WordPress para usar uma página inicial estática. Para fazer isso…

  • ir a Configurações → Leitura
  • Escolher  Página estática nas configurações da sua página inicial 
  • Selecione a página que incorpora o modelo de página inicial do tema

3. Crie as outras partes do seu site

Agora você está pronto para construir as outras partes do seu site usando o Elementor. Elementor permite que você vá além da criação de páginas estáticas (como você fez acima).

Com o Elementor, você também pode projetar seções como: en-head; o rodapé, etc ...

E graças ao tema Elementor, você poderá importar modelos para todas as seções que já estão nas páginas estáticas que você criou na etapa anterior.

Para acessar o construtor visual do Elementor, vá para Modelos → Criador de temas. Você precisará instalar o Elementor Pro para poder acessá-lo.

Agora é hora de criar suas seções

cabeçalho

Para começar, vá até a guia cabeçalho da interface do construtor visual e clique em Adicionar Novo Cabeçalho. Na próxima tela, dê um nome e clique em Criar modelo.

Em seguida, você verá uma seleção de modelos na biblioteca Elementor. Assim como você fez com as páginas estáticas, pesquise “Agência Digital” e insira-a:

Como criar um elemento de site completo ou blogpascher 4

Agora você deve ver uma visualização do seu cabeçalho, bem como algum espaço vazio para o seu menu de navegação.

No momento, o menu de navegação está vazio porque você ainda não criou um menu. Para criar o seu menu ...

  • ir a  Aparência → Menus no seu painel do WordPress
  • Dê um nome ao seu menu
  • Clique Crie o menu

Como criar um elemento de site completo ou blogpascher 4

Depois de criar um menu, você pode adicionar as páginas criadas na etapa 2 ao menu de navegação.

Leia também: 10 ferramentas de automação para marketing de pequenas empresas

Quando terminar de adicionar itens de menu, salve seu menu e retorne ao modelo de cabeçalho na interface do Elementor.

privativa, publicar seu cabeçalho e usar condições de exibição para exibir seu modelo de cabeçalho em todo o site. Se desejar, você também pode usar as condições de exibição para criar diferentes cabeçalhos para diferentes tipos de conteúdo:

Como criar um elemento de site completo ou blogpascher 6

Então aperte Salvar e fechar.

rodapé

Agora é hora de criar o rodapé do seu site:

  • Retorne à interface do construtor de página visual
  • Clique na aba Rodapé 
  • Clique no botão para Adicionar novo rodapé
  • No pop-up, dê um nome ao rodapé e clique em Criar modelo

Agora você deve ver uma lista de modelos de rodapé, assim como fez com seu cabeçalho. Procure por "Agência Digital" e insira o template de rodapé.

Depois de inserir o modelo de rodapé, você deverá ver uma visualização do seu rodapé:

Como criar um elemento de site completo ou blogpascher 7

privativa, publicar seu modelo de rodapé e use os termos de exibição para exibi-lo em todo o seu site.

página Blog

Ao contrário das páginas estáticas que você criou na etapa 2, a página do blog do seu site é um " arquivo " Basicamente, isso significa que ele exibe dinamicamente o conteúdo mais recente do seu site.

Se um usuário clicar em um item específico da página do blog, ele será levado a uma página com o conteúdo desse item. Isso é chamado de página "única". Seu design exclusivo garante que todo o seu conteúdo terá o mesmo estilo básico - a única coisa que muda é o conteúdo real (como título da postagem, corpo, imagem em destaque, etc ...).

Descubra também Como adicionar índice no WordPress com Elementor

Para criar páginas de arquivo e modelos de página exclusivos, você deve usar o construtor visual Elementor - não zonas página ou artigo Padrão do WordPress.

Começar…

  • Abra a interface do Theme Builder
  • Vá para a guia Arquivo
  • Clique em Adicionar Novo Arquivo
  • Dê um nome e clique em Criar modelo

Tal como acontece com o cabeçalho e rodapé, você verá uma lista de modelos de página de arquivo. Procure o template “Agência Digital” e insira-o.

Agora você deve ver o design básico de sua página de notícias, embora o único conteúdo seja o padrão “Hello World! Do WordPress:

Como criar um elemento de site completo ou blogpascher 8

Por enquanto, tudo que você precisa fazer é publicar sua página de arquivo e configure-a para ser exibida em todos os arquivos.

Leia nosso guia sobre Como migrar manualmente um site WordPress

Em seguida, você pode ir para a área de posts regulares do WordPress e criar novos posts no blog. Atribua cada artigo a uma categoria chamada “Além das notícias”.

Agora, quando você navegar para a página de arquivo, deverá ver automaticamente todas essas novas postagens:

Como criar um elemento de site completo ou blogpascher 9

Criação da página de modelo de postagem do blog

Neste ponto, a página do seu blog tem uma aparência bastante amigável. Mas se você clicar em uma postagem específica do blog, o layout não será compatível com o restante do seu site.

Para resolver esse problema, você precisa criar um modelo "exclusivo" com o Elementor:

  • Construtor visual Open Elementor
  • Vá para a guia Única
  • Clique Adicionar novo single

No pop-up Novo modelo :

  • Dê-lhe um nome
  • selecionar Publique na lista suspensa Selecione o tipo de postagem. Isso diz ao Elementor que você deseja usar este modelo para as suas postagens de blog (ao contrário de Páginas ou algum outro tipo de postagem personalizado que você possa usar)

Mais uma vez, você verá a biblioteca de modelos Elementor. Encontre o modelo de artigo exclusivo do modelo "Agência Digital" e insira-o.

Leia também Modo de manutenção no WordPress: Explicação e configuração

Se desejar, você pode usar os vários widgets de dados de publicação dinâmica para controlar a aparência de sua página.

Por exemplo, se você modificar o widget  Informações da postagem, você poderá controlar os elementos de metadados que aparecem, como na publicação ...

  • Auteur
  • Data de publicação
  • comentários
  • Etc.

Como criar um elemento de site completo ou blogpascher 10

Quando estiver satisfeito com o modelo do item, clique em Publicar. Em seguida, você pode usar as opções de exibição para que este modelo exclusivo se aplique apenas a postagens na categoria "Além das notícias"

  • Selecione a partir do catégorie
  • Escolha a categoria Além das notícias

Como criar um elemento de site completo ou blogpascher 11

Então aperte Enregistrer et fechar.

Agora, todas as postagens do seu blog devem ter um design que corresponda ao restante do seu site.

Para terminar as coisas, vá para Aparência → Menus e adicione sua página de blog ao menu de navegação. Para fazer isso, você pode adicionar um link para a categoria "Beyond News" na seção Categorias.

Página 404

Finalmente, você precisa criar a página 404 do seu site. A página 404 do seu site é o que os visitantes verão se seguirem um link quebrado ou tentarem visitar uma página que não existe.

Descubra também nossa 5 WordPress plugins para gerenciar melhor os erros 404

Para criar sua página 404, use o construtor visual Elementor para adicionar outro modelo exclusivo. Só agora use a lista suspensa Selecione o tipo de postagem selecionar 404 Página :

Como criar um elemento de site completo ou blogpascher 12

Insira o modelo de página 404 como feito acima. Em seguida, publique seu modelo para completar seu site.

Obtenha o Elementor Pro agora!

Conclusão

Aqui está ! É isso neste guia que mostra passo a passo como construir um site completo com o Elementor. Se você tem comentários ou sugestões, não hesite em nos informar na seção reservada.

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

...

0 ações
ação
chilrear
Enregistrer