Como abrir um vídeo em uma janela pop-up ou PopUp com Lightbox no Divi clicando em

Como abrir um vídeo em uma janela pop-up ou PopUp com Lightbox no Divi clicando em

março 30, 2023 0 Por Como Posso?
ícone divi com ondas

No entanto, alguns usuários (incluindo você) desejam que o link de redirecionamento seja aberto em uma nova guia para que o leitor não saia da página.

Através da plataforma WordPress isso também é possível, mesmo em diferentes tipos de templates como o Divi que revolucionou o design desses sites.

O que é Divi e para que funciona?

Como mencionado acima, Divi é um modelo WordPress que permite aos usuários projetar qualquer coisa que possam imaginar .

Seu método de trabalho é através de um construtor visual denominado Divi Builder que não requer layout e codificação HTML de raiz para criar o design, pois permite adicionar os elementos “arrastando e soltando” dentro da página. Divi também possui uma biblioteca de layouts predefinidos.

Não requer instalação, então você só precisa acessar o ” Menu ” do WordPress, procurar a seção ” Aparência ” e entrar em ” Temas ” para garantir que está lá.

ícone divisor com fundo rosa

Da mesma forma, seu construtor pode ser usado por meio da opção ” Postagens e páginas ” para selecionar o botão ” Usar Divi Builder ” abaixo do título da postagem.

 

Aprenda a abrir um vídeo ou PopUp em uma janela pop-up com Divi!

Embora Divi se caracterize por ser um construtor visual que permite projetar qualquer tipo de site com os elementos que o usuário pode imaginar, às vezes você precisa usar um plugin ou escrever códigos para criar funções específicas para sua página .

O exemplo a seguir é usado para abrir um vídeo do YouTube em uma janela pop-up (também chamada de PopUp ou Lightbox) com o toque de um botão .

Código JQuery que irá acionar a função pop-up

<script type = “text / javascript”>

(função ($) {

$ (document) .ready (function () {

// $ (‘#IDname a’) .addClass (‘popup-video’);

$ ((‘pop-up-video’). magnificPopup ({

disableOn: 100,

tipo: ‘inframe’,

mainClass: ‘mfp-fade’,

Retardo da remoção: 160,

preloader: false,

fixedContentPos: falses

});

});

}) (jQuery)

</script>

Para alterar a cor de fundo da janela que aparecerá assim que a pessoa pressionar o botão, o seguinte código é aplicado:

Saiba +  Como saber se meu site está otimizado para celulares Como otimizar sua página para celulares?

.mfp-bg {

Antecedentes: # 673ab7;

}

Caso queira definir outra cor, basta inserir o código que deseja alterar e salvar.

Vantagens de usar Divi no WordPress

Além de nos permitir abrir um vídeo ou PopUp em uma janela pop-up , este construtor também possui muitas virtudes que você pode desfrutar quando começar a reproduzi-lo em suas criações.

É um builder com um método de usabilidade muito simples, que se adapta a vários idiomas e estilos de design que podem ser integrados na comunidade WordPress.

logotipo wordpress branco

 

Por sua vez, integra o estilo de design responsivo , podendo assim integrar elementos que podem ser visualizados apenas em computadores ou dispositivos.

A edição de seu conteúdo é feita ao vivo, portanto você não precisará apertar o botão ” Visualizar ” para poder ver como fica a página a cada mudança.

Além disso, você não precisa saber a linguagem HTML e CSS para criar estilos e, se você tiver o conhecimento, permite personalizar o código de cada elemento.

Cada desenho que você fizer pode ser armazenado em uma ” Biblioteca ” para que esteja à sua disposição quando você quiser reutilizá-lo em qualquer outra página ou entrada.

Também possui várias ferramentas que tornarão sua página mais atrativa e fácil de usar para o leitor. Assim como a capacidade de incluir BreadScrumbs para melhorar o SEO , reduza a barra lateral para melhorar a leitura do leitor ou corrija o rodapé .

Finalmente, através de sua atualização constante, você poderá manter a segurança de seu site e de seu conteúdo dentro da plataforma.