Como recriar o vídeo passo a passo do ET's Click com Divi

Compartilhar visualizações de vídeo em seu site pode aumentar a interatividade e ajudar os visitantes a entender melhor e mais rapidamente seus produtos e / ou serviços. Agora, no site Elegant Themes, adotamos essa abordagem para nós mesmos e criamos um design de vídeo de clique direto que permite às pessoas navegar por alguns de nossos recursos mais populares. Nós recriamos esse design dentro do Divi e hoje vamos mostrar como recriá-lo do zero. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe GRATUITAMENTE o Layout do Passo a Passo do Click Video

Para colocar as mãos no layout de vídeo de clique grátis, primeiro você precisa baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Inscreva-se no nosso canal no Youtube

Vamos começar a recriar!

Adicionar nova seção regular

Comece adicionando uma nova seção regular à página em que você está trabalhando.

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e aplique as seguintes configurações de dimensionamento:

• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Largura: 85vw (desktop), 90% (tablet e telefone)
• Largura máxima: 100%

Configurações da coluna 1

Abra as configurações da coluna 1 a seguir.

Espaçamento

Vá para as configurações de espaçamento e adicione um pouco de preenchimento superior na área de trabalho.

• Preenchimento superior: 5vw (desktop), 0vw (tablet e telefone)

Classe CSS

Vá para a guia avançada e adicione uma classe CSS. Posteriormente na postagem, usaremos essa classe CSS para criar um efeito de grade em tablets e celulares.

• Classe CSS: item-responsive-grid

Adicionar Módulo Blurb à Coluna 1

Adicionar Título

Vamos começar a adicionar módulos! Para cada item clicável, usaremos um Módulo Blurb. Começaremos com o primeiro e o reutilizaremos para os itens de clique restantes. Adicione um novo Módulo Blurb à coluna 1 e insira um título de sua escolha.

Selecione o ícone

Selecione um ícone a seguir.

Configurações de ícone padrão

Passe para o design e altere as configurações do ícone de acordo:

• Cor do ícone: # e8e9ea
• Posicionamento do ícone: Esquerda
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 2vw (desktop), 4.5vw (tablet), 7vw (telefone)

Configurações do ícone de pairar

Modifique a cor do ícone ao passar o mouse.

• Cor do ícone: # b0c8ff

Configurações de texto do título

Passe para as configurações de texto do título e faça algumas alterações lá também.

• Fonte do título: Lato
• Peso da fonte do título: negrito
• Estilo da fonte do título: maiúsculas
• Tamanho do texto do título: 0,8vw (desktop), 1,7vw (tablet), 2,5vw (telefone)
• Altura da linha de título: 2vw (desktop), 4.5vw (tablet), 7vw (telefone)

Espaçamento Padrão

Vamos modelar o Módulo Blurb usando alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior: 0,5 vw (desktop), 1,5 vw (tablet e telefone)
• Preenchimento esquerdo: 1.2vw (desktop e tablet), 5vw (telefone)
• Preenchimento direito: 1.2vw (desktop e tablet), 5vw (telefone)

Espaçamento de pairar

Crie um efeito de foco de destaque modificando os valores da margem de foco.

• Margem esquerda: -0,5vw
• Margem direita: -0,5vw

Fronteira

Adicione alguns cantos arredondados também.

Sombra de caixa padrão

Junto com uma sombra de caixa sutil.

• Posição vertical da sombra da caixa: 10 px
• Força do desfoque de sombra da caixa: 70 px
• Cor da sombra: rgba (0,0,0,0.11)

Hover Box Shadow

Altere a cor da sombra da caixa ao pairar.

• Cor da sombra: rgba (103,151,255,0,22)

CSS ID e classe

Por último, mas não menos importante, vá para a guia avançada do Módulo Blurb e adicione um ID CSS e uma classe.

• ID CSS: video-walkthrough-item-1
• Classe CSS: video-item-cursor

Clone o módulo do Blurb três vezes

Depois de concluir o primeiro módulo do Blurb, você pode cloná-lo três vezes.

Mudar o Conteúdo

Altere o conteúdo de cada Módulo Blurb duplicado.

Alterar todos os IDs CSS do módulo Blurb duplicados

Junto com os IDs CSS.

• 1) Construa visualmente: video-walkthrough-item-1
• 2) Efeitos: video-walkthrough-item-2
• 3) Divisores de forma: video-walkthrough-item-3
• 4) Edição em massa: video-walkthrough-item-4

Reutilizar coluna 1

Remover Coluna 3

Depois de preencher a primeira coluna, você pode abrir as configurações de linha e remover a terceira coluna.

Clone a coluna 1 e coloque na parte inferior

Clone a primeira coluna (contendo os Módulos do Blurb) e coloque a coluna duplicada na parte inferior.

Alterar estrutura da coluna traseira

Altere a estrutura da coluna para aquela que foi selecionada no início deste tutorial.

Alterar todo o conteúdo do módulo Blurb da coluna 3

Altere o título do Módulo Blurb de cada duplicata na coluna 3.

Alterar todos os IDs CSS do módulo Blurb da coluna 3

Junto com os IDs CSS.

• 5) Biblioteca de Layout: video-walkthrough-item-5
• 6) Transformações: video-walkthrough-item-6
• 7) Estados de pairar: video-walkthrough-item-7
• 8) Localizar e substituir: video-walkthrough-item-8

Adicionar Módulo de Texto à Coluna 2

Deixe a caixa de conteúdo vazia

É hora de começar a adicionar as diferentes visualizações de vídeo! Existem duas maneiras de abordá-lo; usando um Módulo de Vídeo ou um Módulo de Texto. O Módulo de Vídeo requer que os visitantes pressionem o play. O uso de um Módulo de Texto com fundo de vídeo, por outro lado, reproduz o vídeo automaticamente, mas sem som. Para este tutorial, usaremos um Módulo de texto, mas fique à vontade para usar um Módulo de vídeo. Certifique-se de que a caixa de conteúdo do Módulo de texto permanece vazia.

Vídeo de fundo

Vá para as configurações de fundo e carregue um vídeo de sua escolha.

• Pausar o vídeo enquanto não estiver na visualização: Sim

Dimensionamento

Vá para a guia de design e adicione '100%' à largura.

• Largura: 100%

Espaçamento

A seguir, vamos permitir que o plano de fundo do vídeo seja exibido adicionando alguns valores de preenchimento superior e inferior personalizados em diferentes tamanhos de tela. Nota: os valores que você adiciona precisam ser ajustados ao conjunto de dimensões do seu vídeo.

• Preenchimento superior: 15vw (desktop), 24vw (tablet), 26vw (telefone)
• Preenchimento inferior: 15vw (desktop), 24vw (tablet), 26vw (telefone)

Fronteira

Continue adicionando '10px' a cada um dos cantos.

Sombra da caixa

Junto com uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 30 px
• Força de propagação da sombra da caixa: -5px
• Cor da sombra: rgba (0,0,0,0.11)

ID CSS

Por último, mas não menos importante, adicione um ID CSS.

• ID CSS: video-walkthrough-1

Clonar Módulo de Texto 7 Vezes

Depois de terminar o módulo de texto, você pode cloná-lo sete vezes (uma para cada módulo do Blurb).

Alterar todos os fundos de vídeo do módulo de texto duplicado

Faça upload de um fundo de vídeo diferente para cada uma das duplicatas.

Alterar todos os IDs CSS do módulo de texto duplicado e adicionar classe CSS a todos os módulos de texto duplicados

Altere também os IDs CSS. Certifique-se de conectar cada Módulo de texto ao Módulo Blurb correto usando o mesmo número no final do ID CSS. Também estamos ocultando cada Módulo de Texto, além do Módulo de Texto original, usando uma classe CSS.

• Módulo de texto 1: video-walkthrough-1
• Módulo de texto 2: video-walkthrough-2
• Módulo de texto 3: video-walkthrough-3
• Módulo de texto 4: video-walkthrough-4
• Módulo de texto 5: video-walkthrough-5
• Módulo de texto 6: video-walkthrough-6
• Módulo de texto 7: video-walkthrough-7
• Módulo de texto 8: video-walkthrough-8
• Classe CSS: video-not-first

Adicione o Módulo de Código # 1 à Coluna 1

Depois de concluir a segunda linha, é hora de começar a adicionar o código. Para fazer a função de clique funcionar, usaremos alguns códigos CSS e JQuery. Colocaremos o código em dois módulos de código separados. Comece adicionando o primeiro Módulo de Código à coluna 1.

Inserir código CSS da página

Adicione as seguintes linhas de código CSS:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

Adicione o Módulo de Código # 2 à Coluna 3

Continue adicionando outro Módulo de Código à terceira coluna.

Inserir código JQuery da função de clique

Insira as seguintes linhas de código JQuery:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

Depois de passar por esta etapa, você pode salvar sua página e sair do Visual Builder!

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como recriar o vídeo passo a passo do Elegant Themes com Divi. Também fornecemos o download JSON gratuitamente! Sinta-se à vontade para usar este design para qualquer tipo de site que você criar. É uma ótima maneira de exibir vídeos e chamar a atenção dos visitantes. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.