Como criar Páginas usando DIVI

Nesse tutorial, vamos falar sobre como criar Páginas no WordPress usando o Divi Builder.  Para tirar maior proveito desse tutorial, é importante que você já saiba como usar o WordPress e tenha lido ou assistido os Tutoriais #1 (Como instalar DIVI no WordPress) e #2 (Como Usar Divi no WordPress).  E se você ainda não está familiarizado com o WordPress, saiba que ele é a base do DIVI, ou seja, DIVI só funciona se instalado sob esse CMS (Content Management System). Um bom começo pode ser aqui, mas existem dezenas de tutoriais e eBooks na rede e qualquer dúvida, fale conosco.

Portanto, mãos à obra!

Criando Páginas

É possível criar conteúdo da forma tradicional, ou seja, sem usar o Divi mas sua criatividade estará limitada. Portanto, comece pressionando o botão “Use the Divi Builder” para abrir uma das 3 opções que são: Criar conteúdo a partir do zero, Importar um Layout da sua Biblioteca Divi (Divi Library) ou Clonar uma Página.

Tutorial divi 3. 1 criando uma pagina

Criando conteúdo simples

Escolha a opção “Build from Scratch”, ou seja, criar conteúdo começando do Zero.

Tutorial divi 3. 2 1 criando uma pagina

Escolha uma Coluna

Como explicado no Tutorial # 2, você pode escolher várias combinações de colunas.  Nesse exemplo, vamos usar apenas 1 coluna que cobrirá toda a área do seu texto. Futuramente vamos explorar as demais combinações que podem ser usadas com uma fileira de múltiplas colunas.

Tutorial divi 3. 3 criando uma pagina

Escolha o Módulo de Texto

O módulo de texto inclui os mesmos recursos da tela clássica do WordPress à qual os usuários estão acostumados a usar, com a vantagem que ele  pode ser aplicado em mais de uma coluna dentro da mesma linha, como exemplificarei posteriormente.

Tutorial divi 3. 4 criando uma pagina

Adicionar Texto

Siga esses passos para compor seu primeiro texto:
1) Clique no ícone “Gear” que vai abrir a tela de Configuração de Texto (Text Settings)
2) Escolha o estilo (tamanho) de fonte (Parágrafo, H1 a H6)
3) Ao terminar clique na aba verde para salvar o trabalho e publique

Tutorial divi 3. 5 criando uma pagina

Pagina Simples

Como podemos ver, o resultado é muito simples, porque não adicionamos nenhum efeito visual, imagens, botões e tudo aquilo que faz do DIVI um solução ideal e prática para dar asas à nossa criação.  Mas nos exemplos seguintes, veremos o que é possível fazer para alcançar esse objetivo.

Tutorial divi 3. 6 criando uma pagina

Página com Layout

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

Tutorial divi 3. 2-2- criando uma página

Escolher Layout

Neste exemplo, vamos escolher um layout previamente importado para o Divi Library.
O Layout tanto pode ser de uma página inteira ou apenas uma seção. Se o layout incluir imagens, as mesmas serão alocadas diretamente na sua Biblioteca de Imagens.

Tutorial divi 3. 9- criando uma página

Demo via Wireframe

Em poucos segundos todo o layout da página estará pronto para ser revisado e editado. Aproxime o mouse para ver a página inteira no modo WireFrame. Textos, imagens, botões, etc. poderão ser editados diretamente nesta tela ou clique em “Build on the Front End” se preferir editar visualizando o resultado.

 

 

Tutorial divi 3. 10 scrolling - criando uma página

Demo via Front View

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.

Tutorial divi 3. 10 scrolling - criando uma página

Clonar uma Página

A terceira e última opção é para você que deseja clonar uma página já existente.  Para isso use o mesmo exemplo do passo 3.1 e dessa vez escolha a opção da direita (Clone Existing Page) nesta imagem.

Tutorial divi 3. 2-2- criando uma página

Escolher a Página

Essa próxima tela abrirá mostrando as Páginas ou Posts já existentes no seu site.  Basta escolher qual você deseja clocar e o resultado na tela será semelhante ao dos  passos 3.9 e 3.10 acima. Depois disso é só editar o conteúdo.

Tutorial divi 3. 12- criando uma página

No próximo tutorial vamos mostrar como editar cada bloco de texto, imagem e demais 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.