Cómo crear una página de lista de reproducción con el módulo de video deslizante de Div

Una página de lista de reproducción es una forma efectiva de presentar contenido similar de una manera fácil de acceder. Los módulos Divi Slider de video son una excelente manera de crear una página de lista de reproducción de video, como cursos y tutoriales. En este artículo, veremos cómo crear una página de lista de reproducción con el módulo de video deslizante, utilizando varias secciones y más módulos de soporte. Vamos a empezar. La vista previa de la página del patio de recreo primero, aquí hay un vistazo a lo que construiremos. Escritorio

Teléfono

Cree una página de lista de reproducción Nuestra página tendrá tres secciones con dos filas cada una. Cada sección tendrá 5 módulos. Una vez que hayamos creado la primera sección, la copiaremos dos veces y haremos cambios para crear la segunda y tercera sección.
Nuestra primera sección y filas utilizarán el estilo predeterminado. Utilizo las colas de estilo de los arreglos gratuitos de la imprenta, que está disponible en el Div. Para ser fácil de seguir, construiré la página con una vista de estructura alámbrica y la atascaré con la vista de escritorio. Row con el ancho completo primero, cree una nueva página, active Visual Builder y agregue un ancho completo.

2/3 1/3 fila debajo de esta fila Agregue una fila 2/3, 1/3.

Agregue el módulo de texto de título para el control deslizante de video en un ancho completo, agregue un módulo de texto.

Agregue un módulo de control deslizante de video y luego, agregue un módulo de video deslizante a la columna izquierda de la fila 2/3, 1/3.

Agregue una diapositiva de video Descripción Modo de texto de título Luego, agregue un módulo de texto en el módulo de video deslizante. Se utilizará para introducir la descripción.

Agregue un módulo de descripción para el control deslizante de video, agregue el módulo de texto que contendrá la descripción. Esto es parte del módulo de título de descripción. Persad a la persona al final, agregue un módulo de persona a la columna derecha de la fila 2/3, 1/3.

Stile la página de lista de reproducción de video que su página se verá ahora como la mía. Esta es la visualización de estructura alámbrica. Ahora es el momento de estilizar los módulos. Pasaremos para visualizar el escritorio. Debido a la forma en que construí la página, la mía no mostrará el contenido predeterminado.

Destaca el módulo de texto de Título del control deslizante de la lista de reproducción de la lista de reproducción Abra la configuración para el primer módulo de texto.

Cambie el nivel de texto al Título 2 y agregue el Pilar One: Div Fundamentals (o su título) al contenido de su cuerpo.

Nivel de texto: H2
Contenido del cuerpo: Pilar One: Fundamentals Div
Luego acceda a la pestaña de diseño. Seleccione el texto del título H2 y cambie la fuente a Oswald. Establezca el estilo en TT, la alineación en el centro y el color en #000645.

Nivel de título: H2
Fuente: Oswald
Estilo: TT
Alineación: centro
Color: #000645
Luego configure el tamaño de la fuente en 46px para escritorio, 32px para tableta y 20px para el teléfono. Cambie el espacio de letras a 1px y la altura de la línea a 1.4 em. Cierre la configuración del módulo.

Tamaño de fuente: escritorio 46px, tableta 32px, teléfono 20px
Espacio entre letras: 1px
Altura de la línea: 1.4 em
Destaca el módulo de control deslizante de video para la página de la lista de reproducción, luego agregaremos el contenido y elegiremos el módulo de video deslizante. Coloque el cursor sobre el modo y haga clic en el icono de la rueda para abrir su configuración.

Haga clic en Agregar un nuevo video.

Agregue el video y cierre el Sub -Modul.

Continúe el proceso hasta que haya agregado todos los videos para la primera sección. Utilizo la configuración predeterminada, pero también puede usar puntos en el control deslizante de pistas y activar superposiciones si no desea mostrar la imagen de definición de videos. Retire la página del modo de título de título de la lista de reproducción de video. Luego, abra la configuración para la configuración para el Módulo directo de texto en la diapositiva de video. Se utilizará como título de nuestra descripción.

Cambie el texto del cuerpo al Título 3 e ingrese el texto sobre esta serie en el área del contenido del cuerpo.

Nivel de texto: Título 3

Contenido: sobre esta serie
Luego acceda a la pestaña de diseño. Seleccione el texto del Título H3 y cambie la fuente a Oswald, el estilo al TT, la alineación de la izquierda y el color en #000645. Cierre la configuración del módulo.
Texto del título: H3

Fuente: Oswald
Estilo: TT
Alineación: izquierda
Color: #000645
Dusta la página de la lista de reproducción de video del control deslizante El módulo de texto Descripción luego, abra la configuración para el siguiente modo de texto. Contendrá la descripción de la serie de videos.
Ingrese la descripción de la serie en el área de contenido del cuerpo.

Contenido: Descripción del video

Luego acceda a la pestaña de diseño y desplácese hacia abajo para alinear el texto. Establezca la alineación de su izquierda. Dejaremos el resto de la configuración a los valores predeterminados. Cierre la configuración del módulo.
Alineación: izquierda

Modele el módulo de persona para la página de la lista de reproducción Finalmente, abra la configuración del módulo de la persona.
En la pestaña General, debajo del texto, ingrese el nombre de la persona en el campo Nombre y escriba el instructor en el campo de posición. Ingrese cualquiera de los enlaces de redes sociales deseados. Los dejo vacíos para este tutorial.

Nombre: El nombre de la persona


Publicación: Instructor
Desplácese hacia abajo hasta la zona de contenido y agregue la descripción del instructor. En la imagen, seleccione una imagen de su biblioteca de medios. Contenido: Descripción
Imagen: La imagen de la persona

Título Texto Vaya a la pestaña Diseño y ejecute el texto del título. Elija el nivel de encabezado H4. Establezca la fuente en Oswald, el peso en el toque semi, el estilo en TT y el color en 000645. Establezca el tamaño en 20px, espaciado a 1 px y la altura de línea a 1.5em.
H4
Oswald

Semi atrevido
gesto de desaprobación
#000645
20px
Espaciado de 1px
Altura de línea 1.5 em
Posicione el texto Finalmente, desplácese hacia abajo hasta el texto de posición. Elija Oswald para la fuente y establezca peso en semi audac. Establezca el estilo en TT, coloree a #8F9CA4, tamaño a 15px, espaciando las líneas a 1 px y la altura de la línea a 1.5EM. Cierre la configuración del módulo.
Fuente: Oswald
Peso: semi en negrita

Estilo: TT
Color: #8F9CA4
Tamaño: 15px
Espacio: 1px
Altura de línea: 2em
Duplique la sección de la página del patio de recreo ahora que la sección está diseñada y elegante como queramos, coloque el cursor sobre su configuración y haga 2 duplicados.
Afinar la página del patio de recreo de la segunda sección para la segunda sección, cambiaremos el color de fondo para que sea diferente de los demás. También cambiaremos el contenido de los módulos. La sección Configuración luego abra la configuración para la segunda sección.
Desplácese hacia abajo hacia el fondo y configure el color en #F9F7F4. Cierre la configuración.

Color de fondo: #F9F7F4

El segundo módulo de texto del título de video deslizante abre el título para la segunda sección y cambia para reflejar el segundo conjunto de videos. Llamo a esta sección Pilar dos: módulos Divi. Cierre la configuración.

Contenido: Pilar Dos: Módulos de Divules
El segundo módulo de control deslizante de video abre la configuración para el módulo de video deslizante en la segunda sección. Reemplace los videos con los de la segunda sección. Cierre la configuración. Semodo: elija Videos

El segundo video Cursor Descripción Módulo de texto de título Este título seguirá siendo el mismo, por lo que no necesitará hacer cambios.
Segundo Video Slider Descripción Modo de texto Luego abra el módulo de texto con una segunda descripción de video y cree la descripción para el segundo conjunto de videos.

Contenido del cuerpo: descripción de video
Módulo de persona II Si otro instructor enseña el segundo conjunto de videos, abra el módulo de segunda persona y reemplace el nombre. Además, cambie o agregue la URL de las redes sociales si las usa.

Nombre: El nombre del instructor

Luego desplácese hacia abajo hasta el contenido y la imagen del cuerpo y reemplace la descripción y la imagen de la persona.
Contenido del cuerpo: Descripción de la persona

Imagen: La imagen de la persona
Determinar la tercera sección para la tercera sección, cambiaremos el contenido de los módulos. Esta sección utilizará la configuración predeterminada para que podamos pasar al primer título.

El tercer módulo de texto del título de video deslizante abre el módulo de texto de título y cambia el título para que coincida con este conjunto de videos. Cierre la configuración del módulo.
Contenido del cuerpo: Pilar tres: Div Diseños
Tercer módulo de control deslizante de video Abra el tercer módulo de video deslizante y reemplace los videos con los de este conjunto. Cambie las etiquetas Amin si lo desea y cierre la configuración del módulo.

Agregar nuevo video: Reemplace cada video

El tercer módulo de texto de video Descripción Abra el módulo de texto para la descripción de video de la tercera sección. Cree una descripción para este conjunto de videos. Cierre la configuración del módulo de texto. Contención del cuerpo: descripción del video
El módulo de tercera persona finalmente abre el módulo de persona para esta sección y reemplaza el nombre si es diferente del primer conjunto de videos. Si es la misma persona con el segundo conjunto, simplemente copie ese módulo, péguelo a esta columna y elimine este módulo. Cambie o agregue enlaces de red social si los usa.

Nombre: El nombre del instructor
Desplácese hacia abajo hasta el contenido del cuerpo y el área de imagen y reemplácelos para que coincidan con la información de esta persona. Cierre el módulo, guarde la página y salga de Visual Builder.

Contenido del cuerpo: Descripción de la persona
Imagen: La imagen de la persona

Los resultados de la página de la lista de reproducción aquí es cómo se ve nuestra página Playl y Phone Playlist. Escritorio
Teléfono

Pensamientos finales Esta es nuestra forma de crear una página de lista de reproducción con el módulo de video deslizante. Es un proceso simple, y la creación de duplicados una vez que haya diseñado la primera sección hace que sea mucho más fácil crear la segunda y tercera sección. Solo tenemos que cambiar el contenido y hemos terminado. El módulo de video Slider de Div es una excelente opción para cualquier página de lista de reproducción de video. Queremos escuchar de ti. ¿Has creado una página de lista de reproducción con el módulo de video deslizante? Cuéntanos sobre tu experiencia en comentarios.