Como criar páginas usando DIVI

Neste tutorial, falaremos sobre como criar páginas no WordPress usando o Divi Builder. Para aproveitar ao máximo este tutorial, é importante que você já saiba como usar o WordPress e tenha lido ou assistido aos Tutoriais #1 (Como instalar o DIVI no WordPress) e #2 (Como usar o Divi no WordPress). E se você ainda não conhece o WordPress, saiba que ele é a base do DIVI, ou seja, o DIVI só funciona se instalado sob este CMS (Sistema de Gerenciamento de Conteúdo). Um bom começo pode estar aqui, mas existem dezenas de tutoriais e e-books na web e, se tiver alguma dúvida, entre em contato conosco.

Então, mãos à obra!

Criando Páginas

Você pode criar conteúdo da maneira tradicional, ou seja, sem usar o Divi, mas sua criatividade será limitada. Então, comece clicando no botão "Usar o Divi Builder" para abrir uma das 3 opções: Criar conteúdo do zero, Importar um Layout da sua Biblioteca Divi ou Clonar uma Página.

Criando conteúdo simples

Escolha a opção “Construir do Zero”, ou seja, criar conteúdo do zero.

Escolha uma Coluna

Conforme explicado no Tutorial nº 2, você pode escolher entre diversas combinações de colunas. Neste exemplo, usaremos apenas uma coluna que cobrirá toda a área do seu texto. Futuramente, exploraremos outras combinações que podem ser usadas com uma linha de múltiplas colunas.

Escolha o Módulo de Texto

O módulo de texto inclui os mesmos recursos da tela clássica do WordPress que os usuários estão acostumados a usar, com a vantagem de poder ser aplicado a mais de uma coluna dentro da mesma linha, como ilustrarei mais adiante.

Adicionar Texto

Siga estes passos para redigir seu primeiro texto:
1) Clique no ícone de "Engrenagem" que abrirá a tela de Configurações de Texto
2) Escolha o estilo da fonte (tamanho) (Parágrafo, H1 a H6)
3) Ao terminar, clique na aba verde para salvar seu trabalho e publicar

Página Simples

Como podemos ver, o resultado é muito simples, pois não adicionamos efeitos visuais, imagens, botões ou qualquer outra coisa que faça do DIVI uma solução ideal e prática para dar asas à nossa criação. Mas nos exemplos a seguir, veremos o que pode ser feito para atingir esse objetivo.

Página com Layout

Para criar uma nova página a partir de um layout, use o mesmo exemplo da etapa 3.1 acima. Desta vez, escolha a opção do meio (Escolher um Layout Predefinido) para escolher um layout previamente importado para a biblioteca do seu site (Biblioteca Divi) ou escolha um download gratuito do Elegant Themes.

Escolher Layout

Neste exemplo, escolheremos um layout previamente importado para a Biblioteca Divi.
O layout pode ser para uma página inteira ou apenas uma seção. Se o layout incluir imagens, elas serão colocadas diretamente na sua Biblioteca de Imagens.

Demonstração de Wireframe

Em poucos segundos, todo o layout da página estará pronto para ser revisado e editado. Mova o mouse para ver a página inteira no modo WireFrame. Texto, imagens, botões, etc. podem ser editados diretamente nesta tela ou clique em "Criar no Front End" se preferir editar enquanto visualiza o resultado.

Demonstração via visualização frontal

Esse é um Preview da página.

Como mencionado em 3.9 você pode editar o conteúdo diretamente por aqui, já que a visão frontal é mais fácil de trabalhar, mas é opcional. Aproxime o mouse para ver a página inteira no modo Front View.

Clonar uma Página

A terceira e última opção é para quem deseja clonar uma página existente. Para isso, use o mesmo exemplo do passo 3.1 e, desta vez, escolha a opção à direita (Clonar Página Existente) nesta imagem.

No próximo tutorial, mostraremos como editar cada bloco de texto, imagem e outros módulos para adaptar seu conteúdo ao layout ou como usar o layout importado como inspiração, adaptando seu próprio estilo, cores e imagens.

Escolher Página

A próxima tela será aberta, mostrando as Páginas ou Posts já existentes no seu site. Basta escolher qual deseja inserir e o resultado na tela será semelhante aos passos 3.9 e 3.10 acima. Depois disso, basta editar o conteúdo.