Que diriez-vous d 'pósterer tu blog ¿Divi en forma de carrusel donde puedes desplazarte fácilmente por los artículos?
Para muchos sitios web, los blogs se han convertido en una parte importante de su estrategia de marketing. SEO.
Pero además de crear contenido de alta calidad, también es importante simplificar el proceso de búsqueda de publicaciones para sus visitantes. De esta manera, pueden saltar de un artículo a otro y pasar más tiempo en su sitio web leyendo el contenido que publica allí.
En Divi, hay un módulo de blog que puede usar para mostrar dinámicamente sus artículos y personalizarlos también. Si está buscando una manera de llevar la experiencia de búsqueda de publicaciones al siguiente nivel, le encantará este artículo.
Le mostraremos cómo transformar el módulo Blog integrado de Divi en un carrusel usando los elementos integrados de Divi y un biblioteca js gratis .
Vamos.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado.
Crea una página de blog con Divi Theme Builder
Comience agregando una nueva página al sitio web en el que está trabajando.
Asigne un título a su página, publíquela y haga clic en 'Utilice Divi Builder'.
Descargue la página de blog de diseño prediseñado de 'Interior Design Company'
En este tutorial, usaremos la página de blog del diseño 'Empresa de diseño de interiores', pero puede usar cualquier otro diseño que desee.
Cree plantillas de flechas 'Anterior' y 'Siguiente' utilizando el módulo Resumen de Divi
Una vez dentro de la página del blog, podemos empezar a crear el carrusel.
La primera parte está dedicada a crear las flechas que necesitamos para permitir que los visitantes naveguen entre los artículos.
Lea también: Cómo crear un encabezado global fijo en DIVI
Para diseñar las flechas, usaremos el módulo Resumen de Divi, pero puede usar cualquier otro módulo de su elección.
Añade una nueva línea en la parte superior de la sección. tu blog utilizando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo todavía, abra la configuración de línea y deje que la línea toque los lados izquierdo y derecho de la sección cambiando la configuración de tamaño de la siguiente manera:
- Ancho máximo: 100%
- Ancho máximo: 100%
Agregar un módulo de resumen
Agregue un módulo Resumen e inserte un título.
Luego seleccione un icono.
- Usar iconos: SI
Configuración de iconos
Cambie a la pestaña Estilo y modifique la configuración del icono de la siguiente manera:
- Color del icono: #000000
- Colocación de imagen/icono: vértice
- Alineación de imagen/icono: Centro
Configuración del texto del título
A continuación, cambie la configuración del texto del título.
- Fuente del título: Mulish
- Título de luz suave: semi negrita
- Alineación del texto: centro
- Color del texto del título: #000000
apresto
Luego cambiamos la configuración de tamaño del módulo en diferentes tamaños de pantalla.
- Ancho máximo: 10 % (escritorio), 20 % (tableta), 30 % (teléfono)
- Alineación del texto: derecha
Agreguemos también una clase CSS. Esta clase de CSS nos ayudará a activar la acción del carrusel al hacer clic.
- Clase CSS: botón Atrás
Finalmente, también agregaremos una línea de código CSS al elemento principal del módulo para convertir el cursor en un puntero.
cursor: pointer;
Clona la línea y colócala en la parte inferior de la sección.
Una vez que haya completado la primera flecha, puede clonar todo el contenedor de filas y colocar la fila duplicada al final de la sección del blog.
Abra el módulo Resumen en la fila duplicada y edite el título.
Usar iconos: SI.
También modifique la clase CSS.
- Clase CSS: botón siguiente
Preparar el módulo Blog
apresto
Con las flechas en su lugar, es hora de comenzar a ajustar el módulo Blog, comenzando con la fila en la que se encuentra. Abra la configuración de línea y cambie la configuración de tamaño en consecuencia:
- Ancho máximo: 100%
- Ancho máximo: 100%
Luego establezca los desbordamientos de línea en 'ocultos'. Esto ayudará a garantizar que el carrusel no haga que aparezca una barra de desplazamiento horizontal en nuestra página.
- Desbordamiento horizontal: Oculto
- Desbordamiento vertical: Oculto
Ocultar paginación
Una vez que la configuración de la línea esté en su lugar, abra la configuración del módulo Blog. Asegúrese de que la paginación esté deshabilitada en la configuración del elemento.
- Mostrar paginación: No
A continuación, cambie a la pestaña Estilo y cambie el diseño a 'Pantalla completa'.
- Modelo: pantalla completa
También agregaremos una superposición.
- Se muestra la imagen superpuesta: ACTIVO
- Color del icono superpuesto: #ffffff
- Color de fondo superpuesto: rgba (1,0,66,0.33)
A continuación, agregaremos una clase CSS a nuestro blog, que nos ayudará a habilitar el carrusel más adelante en el tutorial.
- Clase CSS: módulo de blog
Y generaremos algo de espacio entre el metadato de la publicación y el extracto agregando un margen inferior al elemento CSS de metadatos de la publicación en la pestaña avanzada.
Descubre también: Cómo crear un menú deslizante y push en DIVI
margin-bottom: 50px;
Agregue la funcionalidad Slick JS
Una vez que todas las configuraciones de Divi estén en su lugar, ¡es hora de agregar la funcionalidad slick js! Agregue un módulo de código justo debajo del módulo de blog (o en cualquier otro lugar de la página).
Luego agregue la biblioteca slick js en etiquetas de script (como se puede ver en la pantalla de impresión a continuación). También puede agregarlos al encabezado de su sitio web en la configuración de la Tema divi.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Modificaremos ligeramente cada publicación de blog en un nivel individual usando el código CSS.
Lea también: Cómo crear la página del blog con el módulo Blog en DIVI
Asegúrese de colocar el código entre etiquetas de estilo como se muestra en la captura de pantalla a continuación.
.slick-slide {
float: left;
margin: 2vw;
}
Y finalmente, agregaremos algo de código JQuery para permitir que el carrusel tome forma. En el siguiente código, también agregamos los botones que diseñamos para la funcionalidad del carrusel.
Asegúrese de colocar el código en etiquetas de script como puede ver abajo.
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
Guarde la página y salga de Divi's Visual Builder para mostrar el resultado
En Visual Builder no verás el resultado.
Entonces, tan pronto como haya terminado, guarde su página, salga de Visual Builder y vea el resultado en su sitio web.
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Listo ! Eso es todo por este artículo. Le mostramos cómo llevar el diseño de su módulo Blog al siguiente nivel. Específicamente, le mostramos cómo convertir el módulo Blog integrado de Divi en un carrusel usando una biblioteca js gratuita.
Si quieres saber más sobre Divi, no dudes en visitar nuestro catálogo de Divi tutoriales. También puedes consultar Cómo crear la página del Blog con el módulo Divi Blog
Ver tambien nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
