As seções são o maior bloco de construção no construtor Divi. Você pode pensar neles como blocos de empilhamento horizontais que podem agrupar seu conteúdo em áreas visualmente distinguíveis. No Divi, tudo que você constrói começa com uma seção. Este container de conteúdo tem várias configurações que podem ser usadas para fazer coisas realmente incríveis.

Como adicionar uma seção à sua página

Antes de adicionar um módulo de seção à sua página, você primeiro precisa ativar o Divi Builder. Depois que o Divi Theme for instalado em seu site, você notará um botão Usar Divi Builder acima do editor de postagem sempre que estiver criando uma nova página. Clicar neste botão ativará o Divi Builder, dando-lhe acesso a todos os módulos do Divi Builder. Em seguida, clique no botão Usar Construtor Visual para iniciar o construtor no Modo Visual. Você também pode clicar no botão Usar Visual Builder ao navegar em seu site no front end se estiver conectado ao painel do WordPress.

Depois de entrar no Visual Builder, você pode clicar no botão azul de adição para adicionar uma nova seção à sua página. Você será saudado com um pop-up que permite adicionar qualquer um dos três tipos de seção do Divi. Esses tipos incluem: Padrão, Especialidade e Largura total.

Assim que a seção for adicionada, você será saudado com a lista de opções da seção. Essas opções são separadas em três grupos principais: Conteúdo , Design e Avançado .

Opções de conteúdo da seção

Na guia de conteúdo, você encontrará todos os elementos de conteúdo da seção. Para as seções, esses elementos de conteúdo são limitados a elementos de fundo, como imagens e vídeos de fundo.

Imagem de fundo

Se definida, esta imagem será usada como plano de fundo para este módulo. Para remover uma imagem de fundo, simplesmente exclua o URL do campo de configurações.

Cor de fundo

Você também pode definir a cor do seu fundo como uma cor sólida ou um degradê.

MP4 de vídeo de fundo

Todos os vídeos devem ser enviados em ambos os formatos .MP4 .WEBM para garantir a compatibilidade máxima em todos os navegadores. Os planos de fundo do vídeo são desativados em dispositivos móveis. Em vez disso, sua imagem de plano de fundo será usada. Por esse motivo, você deve definir uma imagem de fundo e um vídeo de fundo para garantir os melhores resultados. Observação importante: para que o formato de vídeo MP4 funcione em todos os navegadores, seu servidor deve ter os tipos MIME corretos designados. Você pode aprender mais sobre como usar .htaccess para definir tipos MIME aqui. Se você notar que seus vídeos não estão sendo reproduzidos em determinados navegadores, provavelmente este é o motivo.

WEBM de vídeo de fundo

Todos os vídeos devem ser enviados em ambos os formatos .MP4 .WEBM para garantir a compatibilidade máxima em todos os navegadores. Faça upload da versão .WEBM aqui. Os planos de fundo do vídeo são desativados em dispositivos móveis. Em vez disso, sua imagem de plano de fundo será usada. Por esse motivo, você deve definir uma imagem de fundo e um vídeo de fundo para garantir os melhores resultados. Observação importante: para que o formato de vídeo WEBM funcione em todos os navegadores, seu servidor deve ter os tipos MIME corretos designados. Você pode aprender mais sobre como usar .htaccess para definir tipos MIME aqui. Se você notar que seus vídeos não estão sendo reproduzidos em determinados navegadores, provavelmente este é o motivo.

Largura do vídeo de fundo

Para que os vídeos sejam dimensionados corretamente, você deve inserir a largura exata (em pixels) do seu vídeo aqui.

Altura do vídeo de fundo

Para que os vídeos sejam dimensionados corretamente, você deve inserir a altura exata (em pixels) do seu vídeo aqui.

Rótulo de Admin

Nesta lista suspensa, você pode adicionar um rótulo administrativo que aparecerá no construtor de back-end, bem como na visualização do esqueleto do construtor visual.

Aba Design

Na aba de design, você encontrará todas as opções de estilo da seção, como dimensionamento e espaçamento. Esta é a guia que você usará para alterar a aparência de sua seção. Cada tipo de seção Divi tem uma longa lista de configurações de design que você pode usar para alterar praticamente qualquer coisa.

Mostrar sombra interna

Aqui você pode selecionar se sua seção tem uma sombra interna. Isso pode ficar ótimo quando você tem planos de fundo coloridos ou imagens de plano de fundo.

Use efeito parallax

Se habilitado, sua imagem de fundo permanecerá fixa na tela, criando um divertido efeito de parallax. Você também pode escolher entre dois métodos de paralaxe: CSS e Parrallax Verdadeiro.

Espaçamento

Aqui você pode ajustar o padding e margin da seção para valores específicos ou deixar em branco para usar o preenchimento padrão.

Opções avançadas de seção

Na guia avançada, você encontrará opções que os web designers mais experientes podem considerar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado à sua seção. Você também pode aplicar classes CSS e IDs personalizados à seção, que podem ser usados ​​para personalizar a seção dentro do arquivo style.css do tema filho.

ID CSS

Insira um ID CSS opcional a ser usado nesta seção. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Insira classes CSS opcionais a serem usadas nesta seção. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas no seu Divi Child Theme ou no CSS personalizado que você adiciona à sua página ou site da Web usando as Opções do Divi Theme ou Divi Builder Page Settings.

Custom CSS

CSS personalizado pode ser aplicado à seção aqui. Na seção CSS personalizado, você encontrará um campo de texto onde pode adicionar CSS personalizado diretamente a cada elemento. A entrada CSS nessas configurações já está contida nas tags de estilo, portanto, você só precisa inserir as regras CSS separadas por ponto-e-vírgula.

Visibilidade

Esta opção permite controlar em quais dispositivos sua seção aparece. Você pode optar por desabilitar sua seção em tablets, smartphones ou computadores desktop individualmente. Isso é útil se você quiser usar seções diferentes em dispositivos diferentes ou se quiser simplificar o design do celular eliminando certas seções da página.

Usando Seções de Largura Total

As seções de largura total fornecem acesso a um novo conjunto de módulos de largura total. Esses módulos atuam de maneira um pouco diferente porque aproveitam toda a largura do navegador. Módulos de largura total só podem ser colocados dentro de seções de largura total.

Depois de adicionar uma nova seção de largura total à sua página, você pode clicar no botão “Adicionar módulos” dentro da seção para adicionar um módulo de largura total. Ao contrário da seção normal, não existe o conceito de linhas ou colunas, já que os módulos de largura total sempre aproveitam 100% da tela. Módulos de largura total são uma ótima maneira de adicionar uma pausa visual à página!

Um ótimo exemplo de módulo de largura total é o slider de largura total. Este slider de largura total funciona como um slider normal, exceto que se expande para 100% da largura. Exibir um slider em tal escala pode ser bastante impressionante, basta verificar o nosso demo divi para obter um exemplo.

Usando Seções Especiais

Seções especiais foram criadas para permitir estruturas de coluna mais avançadas. Ao contrário das seções normais, quando você usa uma seção especializada, pode adicionar variações de coluna complexas ao lado de barras laterais verticais de extensão total, sem adicionar quebras indesejadas à página. Esses tipos de layouts não são possíveis usando seções normais.

Depois de adicionar uma seção especial à página, você notará que uma área tem um botão “adicionar módulo”, enquanto a outra tem um botão “inserir linha”. A área “inserir módulo” representa sua barra lateral vertical. Você pode adicionar quantos módulos aqui, em uma única linha, eles ocuparão a largura vertical da seção, adjacente à estrutura da coluna que você construiu ao lado dela. Clicar em “inserir linha” permitirá que você insira linhas adicionais à esquerda / direita de sua barra lateral. De certa forma, isso pode ser considerado como adicionar linhas dentro de linhas!

O resultado é a capacidade de criar praticamente qualquer estrutura de coluna com a qual você poderia sonhar e, independentemente da estrutura que você escolher, garantimos que a combinação ficará ótima! Aqui está um exemplo de um layout de página criado usando seções especiais. Como você pode ver, o efeito é um layout de barra lateral dupla, com duas linhas de extensão vertical à esquerda / direita de uma estrutura de coluna complexa no meio.