Transformar el módulo de su blog en un carrusel deslizante / deslizante avanzado con Diva & amp;Resbaloso

Para muchos sitios web, los blogs se han convertido en una parte importante de su estrategia de SEO. Pero, además de crear contenido de alta calidad, también es importante simplificar el proceso de navegación posterior a sus visitantes. Puedo saltar de una publicación a otra y pasar más tiempo en su sitio. El contenido que pone allí. Dentro de Div, hay un módulo de blog que puede usar para mostrar dinámicamente las publicaciones de blog y estilizarlas. Si está buscando una forma de llevar a cabo la experiencia de búsqueda al siguiente nivel, le encantará esta publicación. Le mostraremos cómo transformar el módulo de blog Divin incorporado en un carrusel deslizante / deslizante avanzado con elementos incrustados y la biblioteca JS Slick Free Slick. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue gratuitamente el módulo de blog deslizante, deslizante y deslizante para poner su mano en el look de carrusel deslizante gratuito con el módulo de blog, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree una página de blog Agregue una nueva página Comience agregando una nueva página al sitio web al que trabaje. Dale el título de tu página, publique la página y cambie a Visual Builder.
Cargue el aspecto del blog de la empresa de diseño de interiores En este tutorial de uso de uso, utilizaremos el aspecto de la empresa de diseño de interiores, pero puede usar cualquier otro aspecto.


2. Cree los modelos de flecha anteriores y siguientes que utilizan módulos de propaganda Agregue una nueva fila en la parte superior de la estructura de la columna Una vez que estemos en la página del blog, podemos comenzar a construir el carrusel deslizante de brillo avanzado. La primera parte está dedicada al diseño de las flechas que necesitamos para permitir que los visitantes avancen y regresen entre publicaciones. Las flechas no serán la única opción que los visitantes puedan navegar a través del carrusel. Podrán tirar del carrusel en el escritorio y deslizarse en el móvil. Para diseñar las flechas, utilizaremos el módulo de propagla de la Divic Divic Built, pero puede usar cualquier otro módulo. Agregue una nueva fila en la parte superior de la sección de su blog utilizando la siguiente estructura de columnas: dimensionamiento sin agregar módulos, abra la configuración de la fila y permita que la fila alcance el lado izquierdo y derecho de la sección cambiando la configuración de tamaño de la siguiente manera:

Ancho: 100%

Ancho máximo: 100%
Agregue el modo de propaganda Agregue el título y luego agregue un módulo de propaganda e ingrese un título.
Seleccione el icono Seleccione un icono adicional.

Icono de configuración Vaya a la pestaña Design y modifique la configuración del icono de la siguiente manera:

Icono de color: # 000000

Icono del círculo: si
Color círculo: # F2F2F2
Colocación de la imagen / icono: arriba
Alineación de imágenes / iconos: Centro
Configuración de texto de título Entonces, cambie la configuración del texto del título.
Título de la fuente: multi

Fuente de peso del título: semi audaz
Alineación del texto del título: Centro
Color de texto del título: # 000000
Dimensión a continuación Cambiamos la configuración de tamaño del módulo en diferentes tamaños de pantalla.
Ancho: 10% (escritorio), 20% (tableta), 30% (teléfono)

Alineación del módulo: correcto
Clase CSS y también agregaremos una clase CSS. Esta clase CSS nos ayudará a activar la acción del carrusel en el posterior clic en el tutorial.
Clase CSS: botón de retroceso

El elemento CSS principal por último, pero no menos importante, también agregaremos una línea de código CSS al elemento principal del módulo para cambiar el cursor en un puntero.
Cursor: puntero;

Clone el giro y coloque en la parte inferior de la sección Después de haber completado la primera flecha, puede clonar todo el contenedor ordinario y colocar la fila duplicada al final de la sección del blog.
Cambie el título Abra el módulo de propaganda en la fila duplicada y cambie el título.


Cambie el icono con el icono.


Cambie la clase CSS y cambie la clase CSS.

Clase CSS: botón siguiente

3. Prepare el módulo de blog Abra el módulo de blog que contiene la fila de tamaño una vez que las flechas están en su lugar, es hora de comenzar a cambiar el módulo de blog, comenzando en el que se coloca. Abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:
Ancho: 100%

Ancho máximo: 100%
Visibilidad Entonces, coloque la fila de giro. Esto le asegurará que el carrusel no hace ninguna barra de desfile horizontal en nuestra página.
Desbordamiento horizontal: oculto

Desbordamiento verticalmente: oculto
Cambiar el módulo de blog oculta la paginación Una vez que la configuración de la fila esté en su lugar, abra la configuración del módulo de blog. Asegúrese de que la paginación esté deshabilitada en la configuración de elementos.
Mostrar paginación: no

Apariencia Entonces, pase a la pestaña de diseño y cambie la apariencia a un ancho completo.
Apariencia: ancho completo

Cubra, agregamos una superposición.
Superposición de imagen recomendada: activado

El color del icono superpuesto: #FFFFFFFFCuculor Fondo de fondo Superposición: RGBA (1,0,66,0.33)
La clase CSS entonces, agregaremos una clase CSS a nuestro blog, lo que nos ayudará a activar el carrusel más adelante en el tutorial.
Clase CSS: Blog-Module
Post Meta CSS y generaremos un espacio entre Meta Post y extraeremos un margen inferior al elemento Post CSS en la pestaña Avanzada. Margen de fondo: 50px;

4. Agregue la funcionalidad JS Slick Agregue un módulo de código en el módulo de blog una vez que todas las configuraciones de DIV estén en su lugar, ¡es hora de agregar la funcionalidad JS Slick! Agregue un módulo de código justo en el módulo de blog (o en cualquier lugar de otra página).
Agregue las etiquetas de script JS Slick JS y luego agregue la biblioteca JS Slick a las etiquetas de script (como puede ver en la pantalla de impresión a continuación). Puede agregarlos al jefe de su sitio web y en la configuración del tema de la Divic. Src = “https://cdnjs.cloudflare.com/ajax/lbs/slick-carousel/1.6.0/slick.js

Agregue un código CSS para diapositivas, cambiaremos ligeramente cada publicación de blog a nivel individual usando un código CSS. Asegúrese de colocar el código entre las etiquetas de estilo, como se muestra en la pantalla de impresión a continuación. .Slick-Slide {

Flotador izquierdo;

Margen: 2VW;

}
Agregue el código JQuey y por último, pero no menos importante, agregaremos un código JQuey para permitir que el carrusel deslizante avanzado deslizante tome su forma. En el siguiente código, agregamos los botones que hemos diseñado para la funcionalidad del carrusel. Asegúrese de colocar el código en las etiquetas de script como puede ver en la pantalla de impresión a continuación.
JQuery (function ($) {
Var backButton = $ (‘. Back-Button’);

Var nextButton = $ (‘. Next-Button’);
Lime PostContainer = $ (‘. Blog-Module .et_pb_ajax_pagination_container’); postcontainer.addclass (‘slider’);
PostContainer.AddClass (‘Blog-Carousel’);
$ (‘. Blog-Carousel’). Slick ({
Infinito: verdadero,
Slidesstoshow: 3,
SlidésScroll: 1,
Centermodo: Verdadero,
Padre central: ‘10%’,
Deslizamiento: verdadero,
Prevarrow: Backbutton,
Nextarrow: NextButton,
Responsivo: [{
Breakpoint: 1079, Configuración: {
Slidesstoshow: 1
}
}] });
});
5. Guarde la página y salga de Visual Builder para ver el resultado en Visual Builder, no verá el resultado. Por lo tanto, tan pronto como haya terminado, guarde su página, sal de Visual Builder y vea el resultado en su sitio web.
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, te mostré cómo llevar el diseño del módulo de blog al siguiente nivel. Específicamente, le mostré cómo convertir el módulo de blog integrado en un carrusel deslizante deslizante usando la biblioteca gratuita JS. ¡Proporcionamos el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.