Ir para o conteúdo principal

Como criar um vídeo de demonstração contextual em Divi

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Um páginas de destino exclusivas que muitos fornecem aos seus assinantes durante o período Cyber ​​Monday é as grandes versões de software da página de destino. Este esquema apresenta belas ilustrações e uma única utilização divisores de seção que envolve o visitante.

cyber monday.jpg

Como obter a página de destino do lançamento do software exclusivo para Cyber ​​Monday

Antes de embarcar neste uso, você deve se familiarizar com a landing page exclusiva da Cyber ​​Monday que você pode obter tornando-se um novo membro. temas elegantes, atualizando sua conta existente ou já sendo um membro vitalício conosco. Se você já é um membro vitalício, faça o login em nossa área de membros e baixe todas as nossas páginas exclusivas aqui. Todos os outros usuários precisarão usar o botão abaixo para comprar ou atualizar antes de seguirem o resto do nosso tutorial.

Já é um membro da vida? Você pode baixar o pacote agora, sem necessidade de participar da oferta da Cyber ​​Monday!

Como criar um vídeo de demonstração contextual em Divi

Depois de baixar a nova página de destino da versão do software da nossa área de membros, você pode continuar lendo o seguinte.

No caso de usar este Tutoriel, mostraremos como criar uma demonstração de vídeo clicando em um botão. O vídeo que aparece no clique ficará ótimo em telas de desktop e pequenas. Essa é uma excelente abordagem se você não quiser incluir um vídeo diretamente na sua página, mas preferir interagir com os visitantes.

exame

Antes de mergulhar no tutorial, vamos ver o resultado final em diferentes tamanhos de tela.

escritório

resultado final divi video popup.gif

Móvel

resultado divi.gif de vídeo móvel

Vamos começar!

Use o plug-in Video PopUp gratuito

Instale e ative o plugin

A primeira coisa a fazer é baixar o plug-in livre Vídeo PopUp . Você pode encontrar este plugin, indo para o seu WordPress website> Plugins> Adicionar novo> Procurar por 'Video PopUp'. Depois de ter encontrado este plugin, instale-o. Assim que estiver pronto, certifique-se de ativar o plugin.

video popup.jpg

Configurações de plug-in

Continue indo para as configurações gerais deste plugin e ativando as duas opções no topo.

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

configuração video popup.jpg

Adicione uma nova página usando a página de destino da versão do software

Adicione uma nova página e habilite o Visual Builder

É hora de começar a colocar as coisas em prática! Adicione uma nova página, dê um título à sua página e ative o Visual Builder imediatamente.

crie uma nova página divi.jpg

Faça o download de um layout de versão de software a partir de layouts salvos

Vá para "Seus layouts salvos" e faça o download da página de destino que você postou.

enviado o layout divi.jpg

Adicione um módulo de texto sob o módulo Blurb do botão play

Como você pode ver, a página já contém um botão de reprodução que nos ajudará a obter o resultado desejado. Mas para que isso funcione, precisamos recriar o design no módulo Blurb usando um módulo de texto. Adicione um novo módulo de texto logo abaixo do módulo Blurb.

adicione texto acima do módulo blurb.jpg

Adicione uma imagem à área de conteúdo

Depois de ter adicionado o módulo de texto, vá em frente e adicione a imagem do botão play para a área de conteúdo do módulo de texto clicando em " Adicione uma mídia E selecionando o botão play na sua biblioteca de mídia.

Adicione uma mídia para espalhar divi.jpg

escolha uma imagem divi.jpg

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Adicione uma cópia à área de conteúdo

Continue adicionando uma cópia logo abaixo da imagem.

módulo duplicado blurb.jpg

Configurações de texto

Para que o módulo corresponda à apresentação, habilitaremos a orientação do texto central nos parâmetros de texto do módulo.

ativar central orientation.jpg

Configurações de texto de link padrão

E também modificaremos os parâmetros do texto do link de acordo:

  • Fonte do Link: Cabine
  • Peso da fonte do link: negrito
  • Cor do texto da ligação: rgba (162,176,193,0.7)
  • Tamanho do texto do link: 17px
  • Altura da linha de ligação: 1.6em

menu de design link divi.jpg

Passe o mouse sobre as configurações de texto

Altere a cor do texto suspenso.

  • Cor do texto do link: # a2b0c1

mudar a cor do link divi.jpg

espaçamento

Por fim, adicione também uma margem superior negativa ao módulo de texto.

  • Margem superior: -20vw

definir uma margem superior divi.jpg

Adicione uma leitura contextual ao conteúdo do módulo de texto

Mudar para o editor de texto

Para criar a janela pop-up de clique, precisaremos adicionar um link personalizado ao conteúdo do módulo de texto. Volte para a área de conteúdo do módulo de texto e selecione o modo Editor de texto.

edite o módulo de texto no modo editor de texto divi.jpg

Adicione um link para todo o conteúdo

Vincule sua área de conteúdo à janela pop-up adicionando um link para a imagem e copie. Substitua o URL do link pelo seu.

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"> </a>

adicionar um link uma imagem com um vídeo divi.jpg

Remova o módulo Blurb do botão de reprodução

Agora que criamos um módulo de texto que se parece exatamente com o módulo Blurb, podemos remover o módulo Blurb anterior e pronto! Você pode aplicar esse método a qualquer tipo de layout usado, mas é realmente um ótimo valor para a página de destino do lançamento do software.

remova o módulo não utilizado divi.jpg

Últimos pensamentos

Como você pode ver, adicionar uma janela pop-up em Divi usando o plugin Video Popup é bem simples. Isso permitirá que você apresente vídeos em seu blog sem precisar integrá-lo automaticamente no conteúdo.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
5 ações
ação4
chilrear
Enregistrer1
Whatsapp