3 maneiras úteis de usar as opções de estouro no Divi

As opções de overflow integradas do Divi tornam super simples adicionar propriedades de overflow css (ou seja, visível, oculto, rolagem) a qualquer elemento na página. Isso é útil para criar designs exclusivos e conteúdo rolável com facilidade. Nesta postagem, vou explicar o que essas opções de estouro realmente fazem. E, vou percorrer três maneiras úteis de usar o overflow em seu próprio site Divi.

Vamos começar.

Compreendendo as opções de estouro do Divi

As opções de estouro do Divi permitem que você defina a propriedade css overflow de um elemento para um dos seguintes valores:

1. Padrão - o valor padrão é visível (veja abaixo).
2. Visível - O conteúdo excedente permanecerá visível e não será cortado ao se estender para fora da caixa. Como esta é a configuração padrão em Divi, raramente você precisará selecioná-la.
3. Rolar - o conteúdo transbordando ficará oculto, mas os usuários poderão rolar pelo conteúdo oculto vertical ou horizontalmente.
4. Oculto - o conteúdo excedente fora da caixa ficará oculto (sem a capacidade de rolar)
5. Automático - esta opção ativará a funcionalidade de rolagem sempre que necessário (ou seja, o conteúdo se estende além da caixa). Isso seria útil para designs com uma altura ou largura definida que precisam ter recursos de rolagem em navegadores menores.

Divi tem uma opção de estouro para estouro horizontal e vertical, permitindo que você defina valores de propriedade diferentes para cada um. Isso é útil quando você deseja adicionar a funcionalidade de rolagem vertical a um elemento, mas não quer que uma barra de rolagem apareça horizontalmente também.

Aqui estão algumas ilustrações rápidas tiradas dos designs neste tutorial para ajudá-lo a entender como funcionam as opções de estouro.

Estouro visível (padrão)

Neste exemplo, o conteúdo que foi posicionado fora do contêiner de linha permanece visível, que é a configuração padrão para todos os elementos em Divi.

Overflow Hidden

Depois de adicionar a propriedade oculta de estouro à linha, o conteúdo fora da caixa fica cortado e totalmente oculto da visualização.

Overflow Scroll

Usar a rolagem de estouro permite ocultar o conteúdo fora do contêiner da caixa (da mesma forma que o estouro oculto). A principal diferença é que uma barra de rolagem aparece permitindo ao usuário rolar pelo conteúdo que existe além dos limites do contêiner.

Por exemplo, aqui está um módulo de texto com altura de 400 px. O conteúdo do módulo de texto se estende além do módulo de texto, mas permanece visível por padrão.

Mas, depois de adicionar a propriedade de rolagem de estouro vertical ao módulo de texto, a barra de rolagem é exibida, permitindo ao usuário rolar pelo conteúdo oculto.

Agora que você entende as opções de estouro um pouco melhor, vamos começar a construir alguns exemplos úteis de maneiras úteis de usá-los na vida real.

Inscreva-se no nosso canal no Youtube

3 maneiras úteis de usar as opções de estouro do Divi no Divi

Nº 1: Uso de overflow oculto para recortar conteúdo transbordante para designs exclusivos

Para entender como usar a propriedade oculta overflow, vamos criar um projeto de exemplo rápido com texto e imagem transbordando. Em seguida, veremos como o design muda ao definir nossa linha para overflow hidden.

Primeiro, crie uma seção regular com uma linha de uma coluna. Antes de começar a adicionar módulos, vamos fornecer à seção o seguinte preenchimento:

Preenchimento personalizado: 12vw superior, 12vw inferior

Em seguida, atualize as configurações de linha da seguinte forma:

Largura: 80vw
Largura máxima: 80vw
Preenchimento: 0 px superior, 0 px inferior
Sombra da caixa: veja a imagem
Força do desfoque de sombra da caixa: 80 px

Em seguida, adicione um módulo de texto à linha e atualize as seguintes configurações do módulo de texto:

Primeiro adicione um cabeçalho h2 na caixa de conteúdo da seguinte maneira:

<h2>Overflow</h2>

Em seguida, atualize as configurações de design da seguinte forma:

Fonte do título 2: Lato
Peso da fonte do cabeçalho 2: negrito
Estilo da fonte do título 2: TT
Título 2 Alinhamento de texto: centro
Cor do texto do título 2: #dddddd
Título 2 Tamanho do texto: 15vw
Cabeçalho 2 espaçamento entre letras: 0,1em
Sombra do Texto do Título 2: veja a captura de tela
Cor da sombra do texto do cabeçalho 2: rgba (0,0,0,0.05)

Agora, para fazer o texto ultrapassar a área de conteúdo da linha, precisamos usar margens personalizadas. Adicione a seguinte margem personalizada ao módulo de texto para fazê-lo transbordar acima da linha (verticalmente) e em cada lado da linha (horizontalmente).

Margem: -6vw superior, -10vw esquerda, -10vw direita

Em seguida, adicione outro módulo de texto abaixo do que você acabou de criar e atualize o seguinte:

Contente:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(A propósito, trechos de código como este são uma ótima maneira de aproveitar a opção de rolagem de estouro.)

Fonte do texto: Lato
Alinhamento do texto do texto: à direita
Tamanho do texto do texto: 24px (desktop), 16px (telefone)
Altura da linha de texto: 1,3em
Largura máxima: 50%
Alinhamento do Módulo: direito
Preenchimento: 4vw certo

Agora, vamos adicionar uma imagem que extravasa para fora da linha. Crie um novo módulo de imagem abaixo dos dois módulos de texto e, em seguida, carregue uma imagem de sua escolha.

Em seguida, atualize as configurações de imagem da seguinte forma:

Largura máxima: 35vw
Margem: -12vw superior, -8vw inferior, -5vw esquerdo
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: -40px
Posição vertical da sombra da caixa: -50px
Cor da sombra: rgba (0,0,0,0.17)

Projeto com linha definida como Visível de estouro (padrão)

Agora vamos verificar o design mantendo nosso overflow de linha definido como visível (o padrão).

Como você pode ver, essas opções visíveis de estouro padrão são ótimas para criar alguns designs bonitos e modernos.

Projeto com linha definida para estouro oculto

Agora vamos ver o que acontece quando usamos a propriedade Overflow Hidden para a linha. Abra as configurações de linha e atualize o seguinte:

Excesso horizontal: oculto
Estouro vertical: oculto

Aqui está o resultado.

Como você pode ver, o conteúdo transbordando (o título superior e a imagem) agora está cortado e oculto para criar um design exclusivo. E com essa configuração, você pode aproveitar facilmente as opções de transformação para dimensionar e mover os elementos para obter o design perfeito.

# 2 Usando Overflow Role para permitir que os usuários percorram o conteúdo verticalmente

Este próximo exemplo apresenta a rolagem de estouro vertical. Essa opção de estouro é útil para adicionar conteúdo rolável a listas de links ou recursos. Você pode transformar qualquer módulo ou linha em um contêiner para conteúdo rolável. Veja como fazer isso com um módulo de texto.

Crie uma seção regular com uma linha de uma coluna. Em seguida, adicione um módulo de texto com o seguinte conteúdo:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

Em seguida, atualize as configurações de design do módulo de texto da seguinte forma:

Fonte do texto: Lato

Cor do texto do link: # 333333
Tamanho do texto do link: 18 px

Cor do texto da lista ordenada:
Tamanho do texto da lista ordenada: 20 px
Altura da linha da lista ordenada: 1.8em
Tipo de estilo de lista ordenada: decimal à esquerda

Peso da fonte do cabeçalho 3: ultra negrito
Tamanho do texto do título 3: 50px
Largura máxima: 500px
Preenchimento: 3% superior, 3% inferior, 8% esquerdo, 8% direito

Aqui está a aparência do módulo de texto antes de fornecermos uma rolagem de altura e estouro.

Agora, atualize o módulo de texto com uma altura máxima de 400px. Como o valor de estouro padrão para o módulo de texto é visível, você notará o estouro de texto abaixo do módulo.

Tudo o que precisamos fazer agora é definir o estouro vertical para rolar da seguinte maneira:

Excesso vertical: rolagem

Aqui está o design final.

Para obter mais exemplos de como usar a rolagem de estouro vertical em seu site Divi, confira estas postagens:

• Como criar um modelo de galeria de rolagem com as novas opções de estouro da Divi
• Como projetar uma área de widget de postagens recentes com rolagem na Divi

# 3 Usando Overflow Scroll para permitir que os usuários percorram o conteúdo horizontalmente

Usar a rolagem de estouro para rolagem horizontal é outra maneira de manter seu conteúdo acessível a partir de um local conciso. Além disso, também é uma ótima maneira de incorporar a funcionalidade de deslizamento lateral no celular sem um plug-in.

Para mostrar como fazer isso, vamos construir um exemplo rápido juntos.

Primeiro, crie uma seção regular com uma linha de uma coluna.

Em seguida, adicione um módulo blurb à linha.

Você pode substituir a imagem padrão por uma nova imagem ou ícone. Em seguida, atualize as configurações de design com alguns ajustes:

Alinhamento de texto: centro
Fonte do título: Lato
Peso da fonte do título: pesado
Preenchimento: 3% à esquerda, 3% à direita

Duplique o módulo de sinopses 5 vezes para que você tenha um total de 6 sinopses em sua coluna de linha.

Em seguida, atualize as configurações de linha com o seguinte CSS personalizado para o elemento principal da coluna.

display: grid;
grid-template-columns: repeat(6, 50%);

Isso dará à sua coluna de sinopses um layout de grade horizontal com 6 colunas, cada uma com uma largura de 50% do contêiner (ou, neste caso, a linha). Isso significa que duas sinopses / colunas ocuparão o espaço dentro da linha. Os outros 4 módulos se estenderão para fora da linha para o lado direito. É aqui que a propriedade overflow scroll se torna útil. Atualize a seguinte opção de estouro:

Excesso horizontal: Scroll

Agora você pode ajustar a largura da linha conforme necessário e as duas sinopses sempre ficarão bem alinhadas. Aqui está o design final.

Eu adicionei uma sombra de caixa à linha para que você possa ver a caixa de conteúdo um pouco melhor. Observe como duas sinopses serão exibidas inicialmente até que o usuário role para a direita.

Para mais informações, confira a postagem completa sobre a criação de cartões magnéticos horizontais.

Pensamentos finais

A sobreposição de elementos e elementos de posicionamento fora do layout de grade típico está se tornando mais comum nos dias de hoje. Principalmente, isso é feito exclusivamente para fins de design. Entender como usar as opções de estouro do Divi ajudará você a entender como ocultar ou mostrar o conteúdo fora de um contêiner para criar esses designs exclusivos. E, compreender a rolagem de estouro também será útil para adicionar conteúdo rolável ao seu site.

Espero que este artigo tenha ajudado a esclarecer a propriedade overflow e como você pode usá-la em seu próximo projeto Divi.

Estou ansioso para ouvir de você nos comentários.

Saúde!