Agregar videos a su página en Divi es simple cuando usa el módulo Video. Este módulo le permite incrustar videos de cualquier fuente, pero también personalizar la imagen en miniatura y el botón de reproducción.
Cómo agregar un módulo de video a tu página
Antes de que pueda agregar un módulo de video a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.
Una vez que haya ingresado a Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero.
Busque el mod de video en la lista de mods y haga clic en él para agregarlo a su página. La lista de mods se puede buscar, lo que significa que también puede escribir la palabra "video" y luego hacer clic en Enter para buscar y agregar automáticamente el mod de video. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .
Ejemplo de caso de uso: agregar un video a su página de destino
Agregar un video a su página de destino es una excelente manera de promover sus productos y aumentar las conversiones. En este ejemplo, le mostraré cómo puede utilizar el módulo de vídeo para agregar un vídeo a su página de destino. Puse un círculo rojo donde debería ir el video.
Usando Visual Builder, agrego una nueva sección con una fila de ancho completo (1 columna). En la configuración de la fila, en la pestaña Diseño, selecciono la opción "Usar ancho personalizado". Para la opción Ancho personalizado que aparece, ingreso un ancho personalizado de 767px. Esto asegura que el módulo de video que voy a agregar en esta fila no exceda este ancho y sea demasiado grande en tamaños de pantalla más grandes.
Luego agrego el módulo de video a la fila. En la pestaña Contenido de la configuración del Módulo de video, ingreso la URL del video del video que quiero incrustar en mi página de destino. Estoy usando la URL de un video de YouTube para este ejemplo.
A continuación, agrego una URL de superposición de imagen para mi video haciendo clic en el botón "Generar video". Esto automáticamente extrae un fotograma del video para servir como una superposición con un nuevo ícono de video personalizado.
En la pestaña Diseño, cambio el color del icono de reproducción para que coincida con mi página de destino.
Ahora tengo un video para mi página de destino que se ve limpio y coincide con mi diseño.
Ahora que ha visto el mod de video en acción, sumérjase en todas sus configuraciones en las secciones a continuación. Proporcionamos una descripción detallada de lo que encontrará en cada pestaña de la configuración del módulo y una explicación de lo que hace cada uno.
Opciones de contenido
URL del video
El módulo Divi Video le permite agregar video usando dos métodos diferentes. Puede descargar su propio archivo de video desde su computadora haciendo clic en el botón "Descargar video" y seleccionando el archivo deseado, o puede ingresar cualquier URL de video de una fuente de video de terceros, como Youtube o Vimeo. Simplemente copie y pegue la URL de su navegador y péguela en el campo URL del video y Divi se encargará del resto.
URL de superposición de imágenes
Si desea configurar una imagen en miniatura de video personalizada, que se colocará en la interfaz de video estándar con un botón de reproducción personalizado para crear una apariencia más nítida y estilizada, puede optar por hacerlo mediante el campo Superposición de imágenes. Este control le permite cargar su propia imagen personalizada o permitir que Divi genere automáticamente una a partir de la URL de su video. La mayoría de los proveedores de video admiten esta opción, como Youtube y Vimeo. ¡Simplemente haga clic en el botón "Generar video" y deje que Divi se encargue del resto!
Etiqueta de administrador
De forma predeterminada, su módulo de video aparecerá con una etiqueta de 'Video' en el generador. Admin Tag le permite cambiar esta etiqueta para una fácil identificación.
Opciones de diseño
cambiar el color del icono
Si designa una superposición de imágenes para su pod de video, el video mostrado contiene un ícono de reproducción sobre el video. Puede designar el color de este icono aquí para que coincida con los colores de su página.
Opciones Avancées
Identificador de CSS y clases
Esto se puede usar para agregar una ID de CSS o una clase a su módulo. Estos se pueden usar en su hoja de estilo o en el cuadro CSS personalizado de Opciones de tema para aplicar un estilo personalizado al módulo. Los ID de CSS también se pueden orientar con enlaces de anclaje para vincular a ciertas áreas de su página.
CSS personalizado
Aquí puede agregar CSS personalizado a su módulo de video.
visibilidad
Si desea ocultar su módulo de video en algunos dispositivos, puede seleccionar los dispositivos en los que desea desactivar el módulo de video.
[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Otros tutoriales de Divi
- 5 sitios web para su uso restaurante temático Divi
- Cómo agregar texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas Divi
- Cómo personalizar las cuadrículas de un blog con Divi
- Cómo utilizar la función de editor Divi en WordPress
- Cómo crear un control deslizante Divi a pantalla completa
- Cómo cambiar el color de los menús entre páginas Divi
- Características que probablemente no conozcas sobre Divi
- Cómo usar Divi Builder en WordPress
- Cómo usar el módulo de desplazamiento de video Divi
- Cómo usar el módulo Divi Builder Flip
- Cómo agregar un módulo testimonial en Divi Builder
- Cómo usar el módulo de texto Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario Divi
- Cómo usar el módulo de Divi Social Media
- Cómo usar el módulo de tienda en el tema WordPress Divi
- Cómo usar el módulo de la barra lateral Divi
- Cómo usar el Módulo Divi Price Table
- Cómo usar el módulo de título de las publicaciones de Divi
- Cómo agregar un módulo de video de Divi
- Cómo usar el módulo de navegación del artículo
- Cómo usar el módulo de búsqueda Divi
- Cómo usar el módulo Divi wallet
- Cómo usar el módulo de persona en Divi Builder
- Cómo usar el módulo de billetera con filtro Divi
- Cómo usar el módulo deslizante de ancho completo
- Cómo usar el Módulo de imagen Divi Builder
- Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
- Cómo usar el módulo de la galería de imágenes
- Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
- Cómo utilizar el módulo de cartera de ancho completo de Divi
- Cómo usar el módulo de encabezado de ancho completo Divi
- Cómo usar el módulo Divi Counter
- Cómo usar el control deslizante de artículos en Divi Builder
- Cómo usar el módulo Divi Email Optin
