Como criar layouts de grade impressionantes com o módulo de vídeo da Divi (parte 2)

Bem-vindo ao post 2 de 5 em nossa minissérie Como criar layouts de grade impressionantes com o módulo de vídeo da Divi . Nesta série, vamos mostrar como criar layouts de grade incríveis do zero usando o Divi Visual Builder. E se você está preocupado com isso ser muito complicado, pense novamente! Todos esses layouts podem ser criados e estilizados usando o Visual Builder sem código adicional.

Chegamos à parte 2 da série! E devo dizer que estou gostando muito de construir esses layouts. Hoje, vou mostrar como criar um layout de grade para seus vídeos que se assemelha a uma seção de recursos de uma página de produto ou página de destino. Este layout é composto por uma sequência de linhas de 1/2 1/2 coluna com cada linha contendo um vídeo e sua descrição correspondente em cada uma das duas colunas. Em seguida, a próxima seção alterna a ordem do vídeo e a descrição da esquerda para a direita e da direita para a esquerda. Como cada uma das linhas se estende por toda a largura da página e cada uma das colunas mantém a mesma altura vertical, o layout parece impressionante em todos os tamanhos de tela.

Vou usar o módulo de vídeo para adicionar os vídeos e o módulo de sinopse para servir como uma seção de título e descrição adjacente ao vídeo. Como todos os layouts desta série, este também é surpreendentemente fácil de implementar usando Divi.

Aqui está como será o resultado final

O conceito e inspiração

Este conceito não é novo de forma alguma. Na verdade, fiquei inspirado para criar esse layout por causa de sua familiaridade com os usuários. Muitos sites usam um layout semelhante para mostrar os recursos de seus produtos ou serviços. Isso permite áreas de conteúdo maiores, o que eu acho que cria um grande espaço negativo para o texto e imagens marcantes para o vídeo.

Isso seria perfeito para uma empresa que usa vídeo para promover recursos do produto, mas também tem muitos outros usos. Espero que você aproveite este design para seu próximo projeto.

Vamos começar.

Implementando o Design com Divi

Inscreva-se no nosso canal no Youtube

Primeiro, adicione uma seção regular com uma estrutura de 1/2 1/2 (2 colunas).

Em seguida, adicione um Módulo de Vídeo à coluna da esquerda.

Atualize as configurações de vídeo da seguinte forma:

Opções de conteúdo

Vídeo MP4 / URL: [insira o URL do vídeo]
URL de sobreposição de imagem: [carregue uma imagem personalizada para o seu vídeo ou gere uma automaticamente a partir do vídeo]

Opções de Design

Cor do ícone de reprodução: rgba (255,255,255,0,87)

Salvar configurações

Em seguida, adicione um Módulo Blurb na coluna direita diretamente adjacente ao Módulo de Vídeo que você acabou de criar.

Atualize as configurações do Blurb da seguinte maneira:

Opções de conteúdo:

Título: [insira o título do vídeo]
Conteúdo: [insira a descrição do vídeo]
Link: [você pode inserir o URL do link para outra página, se desejar]
Ícone de uso: SIM
Ícone: [selecionar ícone]

Opções de design:

Cor do ícone: # 666666
Cor do Texto: Claro
Orientação do Texto: Centro
Fonte do cabeçalho: Roboto
Tamanho da fonte do cabeçalho: 52 px
Espaçamento entre letras do cabeçalho: 1px
Fonte do corpo: Open Sans
Tamanho da fonte do corpo: 20px
Cor do corpo do texto: #dddddd
Preenchimento personalizado na área de trabalho: 5% superior (pode ser necessário ajustar isso dependendo da quantidade de texto que você tem em sua descrição)
Preenchimento personalizado no tablet e smartphone: 20 px superior, 20 px inferior

Opções avançadas

Animação de imagem / ícone: direita para esquerda (esta animação combinada com o ícone de seta chamará mais atenção para o vídeo à esquerda.

Salvar configurações

Antes de continuarmos, vá em frente e adicione sua imagem de plano de fundo à sua seção. Vá para as configurações da Seção (área azul) e atualize o seguinte:

Opções de conteúdo:

Imagem de fundo: [insira uma imagem de fundo (a minha é 2.000 x 2.200)]

Use o efeito de paralaxe: SIM
Método Parallax: True Parallax

Opções de design:

Preenchimento personalizado: 0 px superior, 0 px inferior

Salvar configurações
Em seguida, edite as configurações de linha com as seguintes atualizações:

Opções de conteúdo

Cor de fundo da coluna 2: rgba (0,0,0,0,69)

Opções de Design

Tornar esta linha com largura total: SIM
Usar largura de calha personalizada: SIM
Largura da calha: 1
Equalize a altura das colunas: SIM
Preenchimento personalizado: 0 px superior, 0 px inferior
Marcação personalizada: 0px superior, 0px inferior
Preenchimento personalizado da coluna 1: 0 px superior, 0 px inferior
Preenchimento personalizado da coluna 2: 0 px superior, 0 px inferior

As coisas estão começando a acontecer agora. Você tem sua imagem de plano de fundo e criou sua primeira linha. Agora você está pronto para duplicar essa linha. Clique no ícone duplicado na barra de menu da linha dentro do construtor visual.

Na nova linha que você acabou de duplicar, arraste o módulo de vídeo para a coluna da direita e arraste o módulo de sinopse para a coluna da esquerda.

Agora você só precisa atualizar o conteúdo do módulo de vídeo para incluir o novo URL do vídeo e a nova imagem da capa. Para o Módulo Blurb, você precisará atualizar o cabeçalho e o conteúdo que corresponde ao seu vídeo. E você também precisará ajustar o ícone de sinopse para uma seta que aponta para a direita (se você usou o mesmo ícone que eu usei) e mudar a Animação de Imagem / Ícone para “Da esquerda para a direita”.

Em seguida, precisamos atualizar as configurações de linha duplicada para definir o plano de fundo da primeira coluna. Vá para as configurações de linha e atualize o seguinte na guia Conteúdo :

Cor de fundo da coluna 1: rgba (0,0,0,0,69)
Cor de fundo da coluna 2: nenhuma

Estamos fazendo algum progresso. Agora vamos ver como são as nossas duas primeiras linhas ...

Para as próximas duas linhas, repita o processo de duplicação e atualize o conteúdo. Lembre-se de que quanto mais linhas você tiver, mais longa a imagem de plano de fundo da seção terá que se esticar para acomodar o comprimento do conteúdo.

Para este exemplo, adicionei mais duas linhas, totalizando quatro linhas. Confira o resultado final.

Criando a versão light

Para alterar o design da grade de vídeo escura anterior para uma versão clara, tudo o que você precisa fazer é atualizar algumas das opções de design.

Para essas edições, pode ser um pouco mais fácil usar a visualização wireframe.

Atualize as configurações da seção da seguinte forma:

Opções de conteúdo

Imagem de fundo: [insira uma imagem de fundo clara]

Atualize as configurações da primeira linha da seguinte maneira:

Opções de conteúdo

Cor de fundo da coluna 2: rgba (255.255.255.0,68)

Atualize as configurações do módulo Blurb da primeira linha da seguinte maneira:

Opções de Design

Cor do ícone: # 333333
Cor do Texto: Escuro
Cor do texto do cabeçalho: # 444444
Fonte do corpo: Roboto
Cor do corpo do texto: # 666666

Atualize as configurações da segunda linha da seguinte maneira:

Opções de conteúdo

Cor de fundo da coluna 1: rgba (255,255,255,0,45)

Use as opções de clique com o botão direito para copiar o design do módulo do blurb na primeira linha e colá-lo no módulo do blurb na segunda linha.

É isso! Confira o resultado final.

Responsivo?

Este é um pouco complicado quando se trata de como se comporta em telas menores. Como a ordem de empilhamento padrão coloca a coluna esquerda acima da coluna direita, o resultado desse layout é um pouco confuso. Você pode aprender como corrigir esse problema em meu post anterior sobre como alterar a ordem de empilhamento das colunas do Divi.

Chegando…

A próxima grade vai te surpreender. As cores e gradientes de fundo semitransparentes tornam o design muito fácil de combinar com o seu próprio site. Confira a prévia…

Espero que você esteja gostando da série até agora. Estou ansioso para ouvir de você nos comentários.

Saúde!