Oi pessoal
Hoje trago para vocês mais um tutorial do template Divi 3.
O modelo é um dos modelos mais fáceis e avançados que existem para o WordPress.
O Divi em sua versão 3 adicionou a possibilidade de editar diretamente no ambiente visual, dessa forma fica muito mais fácil aplicar o formato desejado, pois estamos vendo o resultado diretamente enquanto o editamos.
Aqui está o tutorial em vídeo:
Inscreva-se no meu canal:
Se criarmos uma nova entrada ou página, encontraremos uma tela semelhante à seguinte:
Podemos editar a partir dessa mesma tela com o magnífico editor do próprio Divi, que está a anos luz do que o WordPress traz por padrão, como veremos em outros tutoriais.
Mas se o que queremos é utilizar o construtor visual Divi 3, clicamos em “Usar Visual Builder” e ele nos leva à página tal como ela é exibida, mas com a possibilidade de editá-la diretamente.
Divi usa a seguinte hierarquia ao criar conteúdo:
Seções: É um bloco de informações que pode ser composto por várias linhas de informações. Normalmente, cada bloco de informações relacionadas entre si vai no mesmo bloco.
Linhas: Cada linha pode ter seu próprio layout de informações, como você pode ver na imagem acima.
Módulos: Em cada caixa de layout podemos adicionar conteúdo específico, adicionamos cada conteúdo específico com um módulo:
E como você pode ver, ele traz muitos módulos para adicionar diferentes tipos de conteúdo dependendo de nossas necessidades.
Conforme você digita no campo “pesquisar”, os módulos são filtrados.
Neste exemplo vou adicionar um slide de vídeo ou como é traduzido "Controle deslizante de vídeo":
Ao clicar temos várias opções de customização e um botão onde diz "Adicionar novo elemento", é aqui que vamos adicionar a url do vídeo que queremos:
E se salvarmos clicando no botão verde podemos ver em tempo real o resultado que estamos obtendo:
Se clicarmos nos círculos verdes, adicionamos linhas e se clicarmos nos círculos azuis, adicionamos novas seções.
Temos 3 tipos de seções:
Tipos de seções em DIVI 3
Regular: São as seções normais, as que vamos usar mais. Crie um espaço para você adicionar suas linhas e seus módulos.
Especial: Ao contrário do normal, ele deixa um espaço para você adicionar uma barra lateral ou barra lateral dentro da seção. Desta forma, ao criar uma linha, você tem menos espaço para exibir os módulos, pois também possui um espaço para adicionar módulos em uma nova barra lateral que é gerada:
O espaço laranja é onde a barra lateral iria dentro da própria seção.
Largura completa: Gera um espaço que ocupa toda a largura, sem margens. Esse tipo de seção fica ótimo adicionando uma imagem em segundo plano que ocupa todo o navegador. Nesse tipo de seção, ele pergunta diretamente qual módulo você deseja adicionar:
E finalmente, enquanto estamos editando com o construtor visual, temos um círculo roxo na parte inferior que, se clicarmos nele, temos as opções gerais:
A partir daqui podemos escolher várias opções:
Formato de visualização: Nos ícones à esquerda podemos optar por visualizar a página em formato de computador, tablet ou celular e assim podemos modificar o design em formatos específicos.
Podemos salvar o design, sair e uma opção que gosto muito é o histórico de alterações para poder retornar a qualquer versão anterior das que usamos. É a opção do ícone do relógio:
Até agora o tutorial sobre o construtor visual DIVI ou construtor visual.
Espero que tenham gostado 😉
lembranças
Oscar