Una de las páginas de destino exclusivas que muchos brindan a sus suscriptores durante el período del lunes cibernético es la increíble página de destino de lanzamientos de software. Este diseño presenta excelentes ilustraciones y un uso único de los divisores de sección que sorprenderán a los lectores. visitantes.
Cómo obtener la página de inicio de lanzamiento de software exclusivo para Cyber Monday
Antes de lanzarse a este uso, debe familiarizarse con la página de inicio exclusiva de Cyber Monday que puede obtener si se convierte en un nuevo miembro de Elegant Themes, actualiza su cuenta existente o ya es miembro vitalicio. en nuestra casa. Si ya es miembro vitalicio, puede iniciar sesión en nuestra área de miembros y descargar todas nuestras páginas exclusivas aquí. Todos los demás usuarios deberán usar el botón a continuación para comprar o actualizar antes de poder completar el resto de nuestro tutorial.
¿Ya eres miembro vitalicio? Puede descargar el paquete ahora, ¡no es necesario participar en la oferta del Cyber Monday!
Cómo crear un video de demostración contextual en Divi
Una vez que haya descargado la página de inicio de la nueva versión del software de nuestra área de miembros, puede continuar leyendo lo siguiente.
En el caso de uso de este tutorial, le mostraremos cómo crear una demostración en video con solo hacer clic en un botón. El video que aparece al hacer clic se verá genial en computadoras de escritorio y pantallas pequeñas. Este es un gran enfoque si no desea incluir un video directamente en su página pero prefiere crear una interacción con visitantes.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final en diferentes tamaños de pantalla.
oficina
Móvil
Vamos a empezar!
Utilice el complemento gratuito Video PopUp
Instalar y activar el plugin.
Lo primero que debe hacer es descargar el plugin gratis Vídeo PopUp . Puede encontrar este complemento yendo a su sitio web WordPress > Complementos > Agregar nuevo > Buscar 'Video PopUp'. Una vez que encuentre este complemento, instálelo. Una vez que haya terminado, asegúrese de activar el complemento.
Configuraciones de complementos
Continúe yendo a la configuración general de este complemento y activando las dos opciones en la parte superior.
Agregar una nueva página usando la página de inicio de la versión del software
Agrega una nueva página y habilita el uso del Visual Builder
¡Es hora de empezar a poner las cosas en práctica! Agregue una nueva página, asigne un título a su página y active Visual Builder inmediatamente.
Descargue un diseño de versión de software de diseños guardados
Vaya a "Sus diseños guardados" y descargue la página de destino que cargó.
Agregue un módulo de texto debajo del módulo Blurb del botón de reproducción
Como puede ver, la página ya tiene un botón de reproducción que nos ayudará a lograr el resultado deseado. Pero para que esto funcione, necesitamos recrear el diseño en el módulo Blurb usando un módulo de texto. Agrega un nuevo módulo de texto justo debajo del módulo Blurb.
Agregar una imagen al área de contenido
Una vez que haya agregado el módulo de texto, continúe y agregue la imagen del botón de reproducción al área de contenido de su módulo de texto haciendo clic en " Agregar un medio Y seleccionando el botón de reproducción en su biblioteca de medios.
Agregar una copia al área de contenido
Continúe agregando una copia justo debajo de la imagen.
Configuraciones de texto
Para que el módulo coincida con el diseño, habilitaremos la orientación del texto central en la configuración de texto del módulo.
Configuración predeterminada del texto del enlace
Y también modificaremos los parámetros del texto del enlace en consecuencia:
- Fuente de enlace: Cabina
- Peso de la fuente del enlace: negrita
- Color del texto del enlace: rgba (162,176,193,0.7)
- Tamaño del texto del enlace: 17px
- Altura de la línea de enlace: 1.6em
Pase el mouse sobre la configuración de texto
Cambia el color del texto flotante.
- Color del texto del enlace: # a2b0c1
espaciamiento
Finalmente, también agregue un margen superior negativo al módulo de texto.
- Top Marign: -20vw
Añadir una lectura contextual al contenido del módulo de texto.
Cambiar al editor de texto
Para crear la ventana emergente al hacer clic, necesitaremos agregar un enlace personalizado al contenido del módulo de texto. Regrese al área de contenido del módulo de texto y seleccione el modo Editor de texto.
Agregar un enlace a todo el contenido
Vincule su área de contenido a la ventana emergente agregando un enlace a la imagen y la copia. Asegúrate de reemplazar la URL del enlace con la tuya.
<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a> |
Retire el módulo Blurb del botón de reproducción
Ahora que hemos creado un mod de texto que se ve exactamente igual que el mod de Blurb, podemos eliminar el mod de Blurb que existía antes y ¡listo! Puede aplicar este método a cualquier tipo de diseño que utilice, pero es realmente un gran valor agregado para la página de inicio de la versión del software.
Consideraciones finales
Como puede ver, agregar una ventana emergente en Divi usando el complemento Video Popup es bastante simple. Esto le permitirá presentar vídeos sobre tu blog sin necesidad de integrarlo automáticamente en el contenido.
