Ir para o conteúdo principal

Tutorial Divi: Como adicionar um módulo de vídeo para 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]

Adicione vídeos à sua página em Divi é simples ao usar o módulo Vídeo. Este módulo permite integrar vídeos de qualquer fonte, mas também personalizar a imagem em miniatura e o botão de reprodução.

Como adicionar um módulo de vídeo à sua página

Antes de poder adicionar um módulo de vídeo à sua página, primeiro você deve pular para o Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.

módulo de vídeo divi.png

Localize o módulo de vídeo na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra "video" e clicar em enter para pesquisar e adicionar automaticamente o módulo de vídeo! Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Exemplo de caso de uso: adicionando um vídeo à sua página de destino

Adicionar um vídeo à sua página de destino é uma ótima maneira de promover seus produtos e aumentar as conversões. Neste exemplo, mostrarei como você pode usar o módulo de vídeo para adicionar um vídeo à sua página de destino. Eu coloquei um círculo vermelho onde o vídeo deveria ir.

criando um video no divi exemple.jpg

Usando o Visual Builder, eu adiciono uma nova seção com uma linha fullwidth (coluna 1). Nas configurações de linha, na guia Design, seleciono a opção "Usar largura personalizada". Para a opção Largura personalizada que aparece, insiro uma largura personalizada de 767px. Isso significa que o módulo de vídeo que vou adicionar nesta linha não excede essa largura e se torna muito grande em tamanhos de tela maiores.

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]

use uma largura personalizada divi.png

Em seguida, adiciono o módulo de vídeo à linha. Na guia Conteúdo da configuração do Módulo de vídeo, insiro o URL do vídeo que quero incorporar na minha página de destino. Eu uso o URL de um vídeo do YouTube para este exemplo.

adicione um video em divi.png

Em seguida, adiciono um URL de sobreposição de imagem ao meu vídeo clicando no botão "Gerar vídeo". Isso puxa automaticamente uma imagem do vídeo para sobrepor com um novo ícone de vídeo personalizado.

adicione uma sobreposição divi video.jpg

Na guia Design, altero a cor do ícone de reprodução para corresponder à minha página de destino.

editar o ícone do jogador divi video.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]

Agora eu tenho um vídeo para minha landing page que parece limpo e combina com meu design.

design final com o conteúdo video.jpg

Agora que você viu o módulo de vídeo em ação, mergulhe em todas as suas configurações nas seções abaixo. Fornecemos uma visão geral detalhada do que você encontrará em cada guia dos parâmetros do módulo e uma explicação do que cada um está fazendo.

Opções de conteúdo

módulo de parâmetros divi.png

URL do vídeo

O módulo Divi Video permite adicionar vídeo usando dois métodos diferentes. Você pode fazer o download do seu próprio arquivo de vídeo do seu computador clicando no botão "Fazer o download do vídeo" e selecionando o arquivo desejado ou pode inserir qualquer URL de vídeo de uma fonte de vídeo de terceiros, como o YouTube ou Vimeo. Basta copiar e colar o URL do seu navegador e colá-lo no campo de URL do vídeo e Divi vai cuidar do resto!

URL de sobreposição de imagem

Se você quiser definir uma miniatura de vídeo personalizado, que será colocada na interface de vídeo padrão com um botão de reprodução personalizado para criar uma aparência mais limpa e estilizada, você poderá optar por fazer isso usando o campo Sobreposição de imagem. Este campo permite que você envie sua própria imagem personalizada ou permita que o Divi gere automaticamente uma a partir do URL do seu vídeo. A maioria dos provedores de vídeo oferece suporte a essa opção, como o Youtube e o Vimeo. Basta clicar no botão "Gerar Vídeo" e deixar que o Divi cuide do resto!

Rótulo de administração

Por padrão, seu módulo de vídeo será exibido com uma tag "Vídeo" no construtor. A guia Admin permite que você altere essa tag para fácil identificação.

Opções de design

mudar a cor do ícone

design de seção divi.png design

Se você designar uma sobreposição de imagem para o seu módulo de vídeo, o vídeo exibido conterá um ícone de reprodução no vídeo. Você pode designar a cor deste ícone aqui para combinar com as cores da sua página.

Opções avançadas

módulo de vídeo advanced section.png

Identificador CSS e classes

Isso pode ser usado para adicionar um ID ou classe CSS ao seu módulo. Eles podem ser usados ​​em sua folha de estilo ou na caixa Opções de tema CSS personalizado para aplicar um estilo personalizado ao módulo. Credenciais CSS também podem ser direcionadas com links âncora para vincular a determinadas áreas da sua página.

CSS personalizado

Aqui você pode adicionar CSS personalizado ao seu módulo de vídeo.

visibilidade

Se você quiser ocultar seu módulo de vídeo em alguns dispositivos, poderá selecionar os dispositivos nos quais deseja desativar o módulo de vídeo.

Outros tutoriais Divi

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
16 ações
ação8
chilrear3
Enregistrer5
Whatsapp