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

Bem-vindo ao post 4 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.

Espero que você esteja gostando dos layouts de grade até agora. O layout de hoje é o número 4 da série e é um dos meus favoritos (e mais rápido de implementar). Não só é fácil (e divertido) de construir usando Divi, mas também é personalizável para se adequar ao esquema de cores do seu site. As opções de gradiente de fundo são a principal característica deste design, que foram usadas para criar as duas cores de tons separadas por uma linha diagonal. O espaçamento também é proposital para tornar os vídeos facilmente percebidos. Indiscutivelmente, este projeto pode estar fora do escopo do que normalmente chamaríamos de “grade”, mas acho que você verá o potencial.

Aqui vamos nos. Vou mostrar como é fácil construir este design de grade usando o módulo de vídeo e alguns elementos de fundo personalizados.

Aqui está como será o resultado final

O conceito e inspiração

Eu estava procurando um layout bonito e limpo que organizasse pequenos lotes de vídeos para serem usados ​​em coisas como tutoriais ou cursos. Isso combinado com minha ânsia impulsiva de brincar com gradientes de fundo, eu descobri isso. Espero que você goste.

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 largura total (1 coluna).

Em seguida, adicione um Módulo de Texto à coluna. Isso servirá como um título ou manchete para a seção da página.

Atualize as configurações de texto da seguinte forma:

Opções de conteúdo
Conteúdo: [insira o texto para o título]

Opções de Design

Cor do Texto: Claro
Fonte do Texto: Arimo
Tamanho da fonte do texto: 56px
Espaçamento entre letras do texto: 1px
Altura da linha de texto: 1em

Salvar configurações

Você não conseguirá ver nada ainda porque tem um texto branco em um fundo branco, mas tudo bem. Vamos adicionar nosso gradiente de fundo de seção. Vá para as Configurações da seção e, na Seção de conteúdo, atualize as seguintes opções:

Cores gradientes de fundo: # 121212, #ffffff
Tipo de gradiente: Linear
Direção do gradiente: 198deg
Posição inicial: 45%
Posição final: 45%

Em seguida, atualize as configurações de linha para a linha que você acabou de adicionar da seguinte maneira:

Opções de Design

Tornar esta linha com largura total: SIM
Usar largura de calha personalizada: SIM
Largura da calha: 4
Equalize a altura das colunas: SIM
Preenchimento personalizado: 1% superior, 5% direito, 5% inferior, 5% esquerdo

Salvar configurações

Agora adicione outra linha com uma estrutura ⅔ ⅓ (2 colunas) diretamente abaixo da linha que você acabou de criar.

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 seu vídeo]
URL de sobreposição de imagem: [insira o URL da imagem de sobreposição]

Salvar configurações

Em seguida, duplique (ou copie) o módulo de vídeo que você acabou de criar duas vezes e arraste (ou cole) os dois vídeos duplicados para que eles sejam empilhados na coluna certa.

Atualize o conteúdo dos vídeos para incluir o URL correto e as imagens da capa.

Vá em frente e adicione um Módulo Blurb sob os dois módulos de vídeo na coluna da direita. Isso pode servir como uma descrição dos vídeos nesta grade.

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

Opções de conteúdo

Título: [insira o título]
Conteúdo: [insira o conteúdo ou a descrição]

Opções de Design

Cor do Texto: Claro

Salvar configurações

Agora edite as configurações de linha para a linha que contém os vídeos que você acabou de criar, da seguinte maneira:

Opções de conteúdo

Cores gradientes de fundo: # 4999c1, # 121212
Tipo de gradiente: Linear
Direção do gradiente: 198deg
Posição inicial: 45%
Posição final: 45%

Opções de Design

Tornar esta linha com largura total: SIM
Usar largura de calha personalizada: SIM
Largura da calha: 4
Equalize a altura das colunas: SIM
Preenchimento personalizado: 5% superior, 5% direito, 5% inferior, 5% esquerdo

Excelente! Você terminou a primeira seção. Estamos quase terminando. Confira o progresso até agora.

Para criar a próxima seção, duplique toda a seção que acabou de construir clicando no botão duplicar seção.

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

Opções de conteúdo

Cores gradientes de fundo: #ffffff, # 121212 (essas cores estão na ordem oposta da primeira seção)

Em seguida, atualize as configurações do módulo de texto na seção duplicada com o seguinte:

Opções de Design

Cor do texto do texto: # 333333

Salvar configurações

Para completar esta seção, atualize as configurações de linha que contêm seus vídeos com o seguinte:

Opções de conteúdo

Cores gradientes de fundo: # 121212, # 4999c1 (basicamente, você muda a ordem das cores para que fiquem na ordem oposta da primeira seção)

Salvar configurações

Agora vamos verificar o resultado após adicionar a segunda seção ...

Se você ainda não percebeu, pode continuar adicionando mais seções facilmente, pois já temos essas duas seções criadas. Vamos criar mais uma seção apenas para garantir. Como a cor de fundo de nossa seção é preta na parte inferior, queremos iniciar a próxima seção com uma cor de fundo preta na parte superior. Isso significa que precisamos duplicar a primeira seção na parte superior e arrastá-la para a parte inferior da página sob a segunda seção. Isso mantém a continuidade do design em toda a página.

Esta é a aparência após a adição da terceira seção:

É isso! Tudo terminado.

Responsivo?

Na verdade, esse layout fica ainda melhor no celular, sem nenhuma modificação. Confira!

Personalização Adicional

Depois de construir este layout de grade com várias seções, você provavelmente já pode notar como seria fácil alterar as cores para combinar com o tema do seu próximo projeto. Basta alterar as cores do gradiente de fundo para as seções e linhas.

Se você quiser ajustar o design ainda mais, sugiro adicionar semitransparência às cores do gradiente para expor o fundo por trás delas. Ou tente se livrar de uma das cores gradientes e veja como fica. Aqui estão alguns exemplos do que a mudança de apenas uma cor gradiente pode fazer ...

Você também pode adicionar um Módulo de controle deslizante de vídeo à grade na coluna esquerda.

Chegando…

A seguir está o nosso último layout de grade de vídeo da série. Este oferece a opção de manter as coisas limpas e limpas com elementos de enquadramento sutis ou usando cores de uma maneira única para tornar cada vídeo destaque.

Até então, estou ansioso para ouvir de você nos comentários.

Aproveitar!