Si tienes una página web, un Blog debería ser uno de los pilares dentro de tu estrategia digital. Gracias al tema Divi y su módulo de Blog, el diseño de las páginas asociadas a éste se vuelve algo muy sencillo de implementar. Hoy veremos cómo transformar el módulo Blog de Divi en un hermoso carrusel de publicaciones. Mostraré un truco para hacerlo sin plugins, y para los que no les gusta utilizar código , también mencionaré cuál es el plugin premium que prefiero para ésta función y cómo conseguirlo a un precio casi de regalo.
El Módulo Blog de Divi
El módulo Blog del fantástico tema Divi nos permite mostrar loops de distintos tipos de publicaciones creadas en WordPress (no solo entradas), sino también páginas, e incluso custom post types (tipos de publicación personalizadas), lo cual la convierte en una poderosa herramienta.
Éste módulo de Blog Divi, nos da la opción de que el diseño en que se muestran las publicaciones sea similar al que viene en WordPress por defecto, (Es decir, todas las publicaciones en una sola columna, una de bajo de otra) o también la opción de poder presentar las publicaciones en cuadrículas, de varias columnas.
Además, como ya es costumbre con Divi, nos permite personalizar su presentación de una forma fácil e intuitiva.
¿Aún no tienes una licencia del tema Divi?
Como se puede ver, el tema Divi es tu mejor amigo al momento de crear una página web. Gracias, entre otras cosas, a su intuitivo constructor visual, que permite trabajar en diseños complejos con unos sencillos controles fáciles de manejar.
Si aún no cuentas con el tema Divi, o lo tienes pero sin licencia. Puedes adquirirlo desde su página oficial con un descuento especial desde aquí.
Por otro lado, si sólo necesitas que se te instale la licencia en 1 sólo sitio web, puedes utilizar el servicio de activación de licencias de Rapihosting (Nuestro proveedor de servicios de Hosting WordPress recomendado). Tendrás instalado en tu sitio el tema Divi, con una licencia lifetime, por un súper precio. Dale un vistazo a todas las licencias WordPress que manejan, desde aquí.
¿Qué plugin recomendamos para añadir un carrusel de publicaciones a Divi?
Hay varios plugins premium con los que se pueden crear carruseles de posts, entre ellos: Divi Machine (En caso quieras agregar términos de campos personalizados), Divi Plus, etc.
Todas son opciones viables, aunque, si tuviésemos que mencionar un plugin en particular a grosso modo, últimamente nos estamos inclinando más hacia Divi Flash. No sólo porque agrega un módulo carrusel de publicaciones de productos muy completo, sino porque los otros módulos que agrega (Más de 38 Módulos), nos parecen sumamente interesantes. (Entre ellos: Carrusel de Imágenes, Carrusel de Logos, Carrusel de Productos, etc)
En fin, si desean utilizar éste genial plugin en su web (o cualquiera de los otros), con una licencia oficial lifetime, a un muy buen precio, pueden utilizar el servicio de activación de licencias de Rapihosting (que ya habíamos mencionado anteriormente), desde aquí. Sumamente recomendado.
Pdta. El carrusel de abajo está hecho con el módulo Advanced Carrusel de Divi Flash. ¿Se ve genial cierto?
Divi Flash
Divi Machine
Divi Bodycommerce
Divi Plus
Tema Divi
¿Aún no tienes página web con Blog?:
Tanto si no tienes página web, y deseas que te creen una. Así como si tienes una sin blog y quieres que te diseñen las páginas relacionadas a tu sistema de Blog, puedes contactarme para hablar de tu proyecto desde la página de contacto:
Cómo crear un carrusel de publicaciones SIN Plugins
Para ésta hazaña utilizaremos una librería de javascript llamada Slick. Además de un código para sincronizarla con nuestra web y para adaptar nuestro módulo Blog a las especificaciones que necesita Slick.
Suena complicado, pero tranqui, se los he dejado todo masticado. Vamos por partes.
Paso 1: Desactivar Defer Jquery en performance de Divi
La librería de carruseles “Slick”, trabaja con Jquery. Así que, para que funcione correctamente, debemos DESACTIVAR la opción de “Defer Jquery and Jquery Migrate”. Para que permita que se ejecute.
Como se ve en la imagen de abajo, puedes encontrar esa opción en la pestaña “performance” de las opciones de Divi.
Paso 2: Configuremos el Módulo Blog de Divi
Primero vamos a añadir el Módulo Blog en la página en la que estemos diseñando. Luego, vamos a configurar desde la pestaña “contenido” lo que deseamos mostrar con el módulo.
En mi caso voy a utilizar “entradas”. Sin embargo, como ya lo mencioné anteriormente, con éste módulo puedes mostrar no sólo entradas sino también cualquier tipo de contenido, incluso custom post types.
También nos permite configurar cuántas publicaciones queremos que se visualicen, si queremos que sólo sean de categorías específicas o si queremos que se muestren los extractos o no.
En la sección de “Elementos” (También dentro de la pestaña contenido), van a elegir qué información quieren que aparezca en cada cuadrícula de publicación. Pueden personalizarlo según lo que necesiten. Pero lo que sí deben tener presente es desactivar la opción de “Mostrar paginación”.
La paginación es el botón que aparece debajo de las publicaciones para mostrar entradas más antiguas. En un carrusel ese botón no tiene uso, y sólo malogra nuestro diseño. Por eso debemos desactivarlo.
Dos últimas configuraciones muy importantes al módulo Blog Divi
– Desde la pestaña Diseño: Vamos a elegir el diseño de ancho completo, con la cual se muestra nuestras publicaciones en una sola columna. Éste es el diseño que mejor funciona con el carrusel.
– Desde la pestaña avanzado: y la parte de Clase CSS, vamos a agregar la clase: vic-blog-carrusel a todos los módulos Blog Divi que queramos convertir en carrusel.
Habiéndo realizado ésto, ya podemos pasar al siguiente paso.
Paso 3: ¡Hagamos magia!: Transformando el Módulo Blog Divi en Carrusel
Lo que harán ahora es añadir un módulo código, en el cual agregarán el snippet que aparece más abajo, listo para copiar y pegar. ¡Así de fácil!
Para que puedan visualizar el snippet completo de éste tutorial, solo dejen su correo en el formulario de abajo y hagan click al botón: “Ver códigos”.
Y automáticamente serán visibles…
Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones y sorteos de productos de mi Tienda de elementos y layouts para Divi. Además que tenemos una comunicación más directa para compartir y resolver dudas. 🙂
Gracias por solicitar suscribirte, pero aún falta un paso…
IMPORTANTE – ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver los códigos del tutorial debajo de éste mensaje
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
(function( $ ) {
$(document).ready(function(){
$('.vic-blog-carrusel .et_pb_ajax_pagination_container').slick({
/* Configuración del carrusel */
autoplay:true,
autoplaySpeed:3000,
speed:800,
infinite: true,
arrows: true,
dots: false,
slidesToShow: 3,
slidesToScroll: 1,
pauseOnHover: true,
responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
})( jQuery );
</script>
<style>
.vic-blog-carrusel .slick-slide {
margin: 0 25px;
}
.vic-blog-carrusel article {
margin-bottom:unset;
padding-bottom:unset !important;
}
.vic-blog-carrusel .slick-prev,
.vic-blog-carrusel .slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 30px;
height: 30px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: #979797;
}
.vic-blog-carrusel .slick-prev:hover,
.vic-blog-carrusel .slick-prev:focus,
.vic-blog-carrusel .slick-next:hover,
.vic-blog-carrusel .slick-next:focus
{
outline: none;
}
.vic-blog-carrusel .slick-prev:hover:before,
.vic-blog-carrusel .slick-prev:focus:before,
.vic-blog-carrusel .slick-next:hover:before,
.vic-blog-carrusel .slick-next:focus:before
{
opacity: 1;
}
.vic-blog-carrusel .slick-prev.slick-disabled:before,
.vic-blog-carrusel .slick-next.slick-disabled:before
{
opacity: .25;
}
.vic-blog-carrusel .slick-prev:before,
.vic-blog-carrusel .slick-next:before
{
font-family: 'etmodules';
font-size: 25px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.vic-blog-carrusel .slick-prev
{
left:0px;
z-index: 99;
}
[dir='rtl'] .vic-blog-carrusel .slick-prev
{
right: 16px;
left: auto;
}
.vic-blog-carrusel .slick-prev:before
{
content: '\34';
}
[dir='rtl'] .vic-blog-carrusel .slick-prev:before
{
content: '\35';
}
.vic-blog-carrusel .slick-next
{
right: 0px;
z-index: 99;
}
[dir='rtl'] .vic-blog-carrusel .slick-next
{
right: auto;
left: 16px;
}
.vic-blog-carrusel .slick-next:before
{
content: '\35';
}
[dir='rtl'] .vic-blog-carrusel .slick-next:before
{
content: '\34';
}
</style>
Viendo Resultados
Una vez que hayan pegado el código del snippet en el módulo código (valga la redundancia). Sólo deberán guardar lo cambios. Aún no se verá el carrusel mientras estén en modo editor visual, pero cuando salgan del editor, podrán ver cómo la magia ocurre.
Protegido: Selector de fecha y hora Avanzado en Divi
Protegido con contraseña
Introduce a continuación la contraseña para ver este artículo protegido:
Mejor plugin buscador de productos para Woocommerce
Uno de los elementos que tus clientes más agradecerán que esté presente en tu tienda online (sobretodo si ésta cuenta con una gran cantidad de items) es un buscador de productos. Hoy veremos una de mis opciones favoritas para cubrir tan importante función: El plugin...
Agregar selector de fecha en formulario de contacto Divi WordPress
Continuamos con la temática de los formularios de contacto en Divi… Recordemos que en el anterior artículo vimos cómo crear y configurar uno, además de un súper truco para saber desde qué URL se enviaba el mensaje. Puedes ver ese artículo desde aquí:El Módulo...
Cómo crear una animación de texto desplazándose tipo Banner (Text Marquee) con Divi
Hoy veremos un efecto de animación de desplazamiento de texto, que emula el de los banners publicitarios o el de las barras de texto que aparecen en la parte inferior de la pantalla de los noticieros.Este es un ejemplo de cómo quedará el efecto de animación text...
Cómo crear formularios de contacto en Divi y TRUCO para saber desde qué url se envía
Los formularios de contacto son sumamente importantes para las páginas web. Es un canal de comunicación con nuestros clientes y una forma de recabar información y datos de los mismos. Hay muchos complementos para Wordpress especializados en la creación de formularios....
Módulo Blog Divi: Mejorando la paginación por defecto
Si estás creando tu blog en Wordpress seguro te habrás dado cuenta lo poca intuitiva que es su paginación. ¿A qué me refiero? Pues, digamos que en una página sólo se pueden mostrar 10 entradas, pero tenemos 20 de ellas. Entonces Wordpress separa las 20 en dos páginas...
Cómo cambiar el tamaño de las imágenes de las entradas del módulo Blog Divi
A quién no le ha pasado. Crean las imágenes destacadas para los artículos de su blog con un tamaño aproximado, y cuando las ven aparecer en el módulo blog de Divi, se han recortado al tamaño que maneja Divi. Entonces, ¿Con qué proporciones debemos crear las imágenes?...
¿Cuánto cuesta una página web en Perú?
Hola a todos. Como bien saben crear una página web, el local de nuestro negocio en internet, como todo negocio requiere cierta inversión. La ventaja es que, comparado a un local físico, el costo de implementar una web es minúsculo. Hoy vamos a ver los componentes que...
Características de una página web ganadora
Características de una página web ganadora Recuerdo cuando inicié, se me hacía muy fácil el uso de Divi para construir diseños. Pero aún no manejaba (a totalidad) los demás aspectos que debe tener una web para que funcione de manera correcta. Profundicé en muchos...
Cómo optimizar imágenes para web – Mis mejores Herramientas
Que tal amigos, hoy vamos a tocar un tema sumamente importante: Cómo optimizar Imágenes para web. Esto es algo que muchísimas veces se deja de lado por no conocer su trascendencia. Incluso he visto muchos casos de colegas míos que se dedican al diseño de paginas web,...
Paso 4 OPCIONAL: Configurando el Carrusel
Con el simple hecho de agregar el código del paso 3, nuestro carrusel ya debería estar funcionando a la perfección. ¡Eso es genial verdad!
Aún así, para los que quieran personalizar más el funcionamiento del carrusel. Les enseñaré las principales opciones que se pueden modificar.
Por cierto, las opciones que vamos a modificar se encuentran en el código que les dejé. Simplemente buscan la sección que dice: /* Configuración del carrusel */, tal como puede verse en la imagen de abajo.
autoplay: true/false Activa o desactiva el avance automático.
autoplaySpeed:Tiempo en milisegundos de pausa entre movimiento y movimiento del autoplay. Determina su velocidad.
speed: Determina el tiempo en ms que demora en transicionar de un slide a otro.
infinite: true/false Activa o desactiva la generación de un loop infinito.
arrows: true/fasle Activa o desactiva la aparición de los controles de flechas.
dots: true/fasle Activa o desactiva la aparición de los controles de puntos inferiores.
slidesToShow: Defines el número de elementos del carrusel que se visualizarán a la vez.
slidesToScroll: Define el número de elementos que moverá cada vez que avanza.
pauseOnHover: true/fasle Activa o desactiva la función que hace que el carrusel se pause cuando se le pasa el mouse por encima
breakpoints: Nos sirve para cambiar de opciones dependiendo el tamaño de pantalla, para hacer nuestro carrusel responsive.
Yo he trabajado con los tamaños de 980px y 767px que son los tamaños que usa divi para tablet y móvil. He configurado un slidesToShow de 2 elementos para Tablets y de 1 elemento para Móvil.
Ventajas de Mostrar las publicaciones en un Carrusel
Como se dijo anteriormente, debemos mostrar contenido relacionado para que nuestros lectores sigan navegando en nuestra web.
Si mostramos artículos relacionados en nuestros posts, no podemos agregar 10, 15 o más, como en la página de blog. Porque ocupa un gran espacio. Y ni se diga de la vista en móviles, donde todo se muestra en una sola columna. Imagina a tu lector teniendo que bajar 15 cuadrículas de artículos para recién llegar al contenido que esté debajo.
Esto se soluciona fácilmente con el uso de carruseles. Ya que ocupa muy poco espacio, al no mostrar todos los elementos que contiene, a la vez. Así, no obligamos a todos los usuarios a pasar por cada cuadrícula de publicación al querer desplazarse. Y los que sí estén interesados, podrán utilizar los controles del carrusel para ver más.
Agregar un Carrusel de Entradas con Plugins Premium (Al mejor precio)
Si todo éste proceso “artesanal” de crear y personalizar los carruseles de entradas con códigos, javascript ,css, etc, se te hace complicado o engorroso, o si simplemente el carrusel que armamos te parece muy limitado, existen otras opciones.
Como mencionamos al inicio del posty, hay plugins premium que agregan el módulo de carrusel de entradas, además de otros nuevos módulos, a los que ya trae por defecto Divi.
Entre ellos, podemos mencionábamos a Divi Flash, un plugin que acabo de descubrir que ha sido una grata sorpesa por la cantidad de funciones que ofrece.
Gracias al servicio de instalación de licencias de Rapihosting (Nuestro servicio de Hosting WordPress de confianza), puedes conseguir una licencia para tu sitio de los plugins mencionados y más, a un muy buen precio. Puedes revisar su lista de plugins premium desde aquí.
Una vez tengan el plugin Divi Flash instalado, pueden agregar el carrusel de posts simplemente añadiendo el módulo: “Post Carousel”.
La primera opción que nos aparecerá será la de elegir los elementos. Debemos hacer click al símbolo de “+” para agregar alguno.
Lo fantástico de éste módulo, y lo que nos permite crear diseños más complejos, es que nos da la posibilidad de elegir entre una gran cantidad de elementos del post para que se muestren en cada item del carrusel. Por ejemplo: Categorías, Etiquetas, Texto personalizado, fecha de publicación, comentarios, etc, en el orden que más nos guste.
Yo por ejemplo voy a agregar la imagen principal, el título y la categoría del post. Y así de fácil, como pueden ver más abajo, hicimos aparecer un hermoso carrusel de posts.
Y lo mejor es que van a poder personalizar los parámetros del carrusel tales cómo: número de post a mostrar, autoplay, velocidad, etc, así como otros temas del diseño, como: color y tamaño de las flechas, estilos de cada uno de los elementos, etc, desde los mismos controles del módulo y sin tocar ni una línea de código.
Carrusel de publicaciones utilizando el módulo Post Carousel de Divi Flash:
Pensamientos Finales
El principal uso que personalmente le doy a éste carrusel es en la sección de “Artículos Relacionados” que agrego al final de cada entrada. Ésta sección es importante para que el usuario siga navegando a través de nuestra página o blog encontrando nuevo contenido.
Usando de manera creativa éste carrusel podemos conseguir diseños muy interesantes de páginas relacionadas al Blog.
Hemos visto que podemos crear un carrusel sin utilizar ningún plugin adicional, así como, por otro lado, aumentar las funcionalidades nativas de Divi utilizando plugins premium, para crear carruseles mucho más complejos pero al mismo tiempo más fáciles de implementar.
Cualquier duda adicional pueden dejarla en la caja de comentarios de más abajo.
Hola, estoy interesado en el post de crear un carrusel para blog en Divi con Splide, como dices en el video para obtener el código hay que suscribirse, y que una vez mandado el correo aparece el código pero no me ha aparecido dicho código para integrarlo en DIvi, me lo puedes proporcionar?
Muchas gracias de antemano.
Dani
Hola amigo, estaba haciendo un mantenimiento a la web, y los códigos que dependían de jQuery dejaron de funcionar por un rato (incluyendo el código que hace aparecer los snippets cuando te suscribes). Pero ya lo activé, vuelve a introducir tu correo y debería aparecer todo automáticamente. Cualquier duda, puedes escribirme a admin@victoraqui.com
Hola, he seguido tu “how to” sobre el carrusel de post y tengo una duda…
1) al introducir el snipet donde lo tienes que hacer… ? No veo nada parecido a la imagen de tienes puesta en la configuracion que me aparece del modulo blog
Si lo meto en la seccion “integración” de los ajustes de Divi… no funciona.
Ya la vi, gracias…