Como abrir um vídeo em uma janela pop-up ou PopUp com Lightbox no Divi clicando em
março 30, 2023No 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á.
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:
.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.
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.