Como criar layouts de grade impressionantes com o módulo de vídeo da Divi (parte 3)
Publicados: 2017-06-22Bem-vindo ao post 3 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.
Bem-vindo à parte 3 da série! Tenho a sensação de que este vai surpreendê-lo um pouco. Hoje, vou mostrar como usar gradientes e cores de fundo semitransparentes para criar várias variações de cores de borda. No final, vou mostrar como você pode mudar completamente o esquema de cores com apenas alguns cliques. Este layout é composto por uma combinação de duas linhas de estrutura de colunas de 1/4 1/2 1/4 e uma linha de estrutura de colunas de 1/4 1/4 1/4 1/4.
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 no meio da grade. Como todos os layouts desta série, este também é fácil de implementar usando Divi.
Aqui está como será o resultado final
O conceito e inspiração
Na verdade, a ideia original do layout veio do popular site giphy.com, pois mostra um gif maior em destaque na coluna do meio cercado por gifs menores. Achei que essa ideia funcionaria bem para um layout de grade de vídeo, uma vez que permitiria a você apresentar um vídeo maior com os outros vídeos ao seu redor. No entanto, não me importei com o estilo de alvenaria das imagens ciganas ao redor, então, para este post, optei pela abordagem de coluna uniforme para tornar tudo mais simétrico.
Além do layout, eu queria explorar um pouco mais os recursos de fundo semitransparente do Divi para criar algo único.
Vamos começar.
Implementando o Design com Divi
Primeiro, adicione uma seção regular com uma estrutura de 1/4 1/2 1/4 (2 colunas). 
Em seguida, adicione um Módulo de Vídeo à primeira coluna.
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]
Salvar configurações
Em seguida, adicione um Módulo Divisor diretamente sob o Módulo de Vídeo.
Nas configurações do divisor, sob o
Agora, como adicionaremos muitos vídeos, acho mais fácil duplicar o módulo de vídeo recém-criado e arrastar para os lugares certos. Depois, posso voltar e alterar o URL do vídeo e as imagens de capa mais tarde.
Primeiro, vamos duplicar o módulo de vídeo que você acabou de criar e arrastá-lo para baixo do módulo divisor na primeira coluna.
Depois disso, você pode continuar a duplicar os primeiros elementos da coluna (o vídeo, o divisor e o vídeo) e arrastá-los para a coluna da extrema direita. Em seguida, você pode duplicar um dos módulos de vídeo e arrastá-lo para a coluna central. Depois de atualizar todo o conteúdo do vídeo, você deve ter algo parecido com isto ...
Antes de continuarmos, vá em frente e adicione sua cor de fundo à sua seção e colunas de linha. Vá para as configurações da Seção (área azul) e atualize o seguinte:
Opções de conteúdo
Cor de fundo: # 333333
Opções de design:
Preenchimento personalizado: 0 px superior, 0 px inferior
Salvar configurações
Agora edite suas configurações de linha com as seguintes atualizações:
Opções de conteúdo:
Cores gradientes de fundo: rgba (255,255,255,0,58) e # b684e8
Direção do gradiente: 360 graus
Cor de fundo da coluna 1: rgba (0,0,0,0,69)
Cor de fundo da coluna 2: rgba (255,255,255,0,45)
Cor de fundo da coluna 1: rgba (0,0,0,0,85)
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: 20px superior, 20px direito, 20px inferior, 20px esquerdo
Preenchimento personalizado da coluna 2: 20px superior, 20px direito, 20px inferior, 20px esquerdo
Preenchimento personalizado da coluna 3: 20px superior, 20px direito, 20px inferior, 20px esquerdo
Salvar configurações
Agora é hora de adicionar a segunda linha. Vá em frente e adicione outra linha de estrutura de 1/4 1/2 1/4 (3 colunas) sob a primeira.
Para obter uma vantagem inicial na configuração das opções para as Configurações de linha, use a funcionalidade de clique com o botão direito para copiar o estilo da primeira linha e colá-lo na segunda linha.
Agora, para as configurações de linha, tudo o que você precisa atualizar são as opções de conteúdo da seguinte maneira:
Gradiente de fundo: nenhum (apague o que foi copiado)
Cor de fundo da coluna 1: rgba (0,0,0,0,69)
Cor de fundo da coluna 2: rgba (0,0,0,0,0) - é o mesmo que nenhum ou transparente
Cor de fundo da coluna 3: rgba (0,0,0,0,35)
Agora que as configurações de sua linha estão concluídas, duplique e arraste (ou copie e cole) um módulo de vídeo na primeira (extrema esquerda) e também na terceira linha (extrema direita). Em seguida, atualize o conteúdo do vídeo.
Para a coluna do meio, adicione um módulo de sinopse e atualize as configurações da seguinte maneira:
Opções de conteúdo
Título: [insira o título da página ou vídeo]
Conteúdo: [insira o conteúdo ou a descrição do vídeo ou página]
Opções de Design
Cor do Texto: Claro
Orientação do Texto: Centro
Fonte do cabeçalho: PT Sans
Tamanho da fonte do cabeçalho: 52 px
Espaçamento entre letras do cabeçalho: 1px
Fonte do corpo: PT Sans
Tamanho da fonte do corpo: 20px
Agora é finalmente a hora da última linha. Claro, você pode adicionar mais, se necessário.
Vá em frente e adicione uma linha de estrutura 1/4 1/4 1/4 1/4 (4 colunas) na linha anterior.
Como você fez antes, copie o design da linha anterior e cole na linha atual para ter uma pequena vantagem no design.
Em seguida, atualize as configurações de linha da seguinte forma:
Opções de conteúdo
Cor de fundo da coluna 1: rgba (0,0,0,0.34)
Cor de fundo da coluna 2: rgba (0,0,0,0,69)
Cor de fundo da coluna 3: rgba (0,0,0,0,34)
Cor de fundo da coluna 4: rgba (0,0,0,0,69)
Opções de Design
Preenchimento personalizado da coluna 4: 20px 20px 20px 20px
Salvar configurações
Em seguida, duplique ou copie os módulos de vídeo em cada uma das quatro colunas. Depois de atualizar todo o seu conteúdo de vídeo, pronto!
Confira seu novo layout de grade ...
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.
Atualize as configurações da seção da seguinte forma:
Opções de conteúdo:
Cor de fundo: rgba (0,0,0,0.12)
Atualize todas as configurações de linha da seguinte forma:
Basicamente, volte para cada uma das três configurações de linha e onde quer que você veja uma cor de fundo sendo usada, simplesmente clique na opção de paleta de cores brancas. Isso transformará todos os fundos escuros semitransparentes em fundos claros semitransparentes.
Atualize as configurações do módulo Blurb da seguinte maneira:
Opções de Design
Cor do Texto: Escuro
Isso vai bastar! Confira a versão light.
Altere facilmente o projeto com as opções de plano de fundo da seção
Como a grade é construída com fundos semitransparentes, você pode facilmente alterar a cor do fundo da seção, gradiente ou imagem para dar ao seu site uma aparência nova que corresponda perfeitamente ao seu site.
Veja a diferença que isso pode fazer ao adicionar uma imagem de plano de fundo às configurações de seção.
Outra forma de combinar seu site é combinar as cores do gradiente de fundo que adicionamos na primeira linha.
Chegando…
O próximo post desta série será uma sensação completamente diferente. Este é para manter as coisas limpas e simples. E alguns truques de gradiente de fundo.
Até então, estou ansioso para ouvir de você nos comentários.
Aproveitar!