Cómo crear un carrusel de módulos Divi en el que se puede hacer clic
Publicado: 2017-09-19La publicación de hoy fue enviada por Michelle Nunan de Divi Soup, hogar de “Divi Kitchen”, donde constantemente prepara nuevos y útiles tutoriales y cursos de Divi.
Los carruseles son una característica popular de los sitios web. Le permiten mostrar más contenido sin ocupar espacio adicional, y también agregan un elemento de interactividad a su sitio web que puede alentar a sus visitantes a interactuar más con su contenido.
Hay varios complementos excelentes que pueden ayudar a mostrar su contenido en un carrusel, pero en esta publicación le mostraré cómo crear un carrusel de módulos Divi en el que se puede hacer clic utilizando solo CSS y Javascript.
Este efecto se puede utilizar con casi cualquiera de los módulos Divi estándar o con una combinación de módulos. Voy a mostrarte cómo crear este carrusel usando el módulo de imagen, y luego con el módulo de blog, ya que el proceso para esto es ligeramente diferente. A partir de ahí, debe comprender cómo puede crear su propio carrusel con casi cualquiera de los módulos estándar.
Resultado
Esto es lo que debería terminar después de crear un carrusel con el módulo de blog.
Puede ver una demostración en vivo aquí que muestra el efecto utilizando varios módulos Divi Builder.
Entonces empecemos.
Agregar una nueva página
Comenzaremos creando un carrusel con el módulo de imagen. Agregue una nueva página o abra una página a la que desea agregar el carrusel.
Agregar una nueva sección
Agregue una nueva sección estándar a su página con una sola columna. Luego abra la configuración de la sección y en la pestaña Avanzado, agregue la clase ds-carousel-section en el campo Clase CSS.
Como vamos a cambiar la forma en que se muestran la sección y las filas, solo queremos que estos cambios se apliquen a nuestro carrusel, por lo tanto, agregamos una clase personalizada para evitar que nuestro código afecte a otros elementos de nuestro sitio.
Luego, guarde y salga de la sección.
Ahora abra la configuración de la fila y en la pestaña Avanzado, agregue la clase ds-carousel-row en el campo Clase CSS. Luego, guarde y salga de la fila.
A continuación, agregaremos un módulo de imagen a nuestra fila. Haga clic en Insertar módulo (s) y seleccione el módulo de imagen de la lista.
En la pestaña Contenido del módulo de imagen, haga clic en Cargar una imagen y seleccione la imagen que desee de la biblioteca de medios o cargue una nueva.
Si desea que sus imágenes se abran en una caja de luz, seleccione esta opción en la configuración.
Alternativamente, puede agregar una URL para abrir una nueva página cuando se hace clic en la imagen si lo desea.
Lo último que debemos hacer con el módulo es agregar una clase. Haga clic en la pestaña Avanzado y agregue la clase ds-carousel-module en el campo Clase CSS. Luego, guarde y salga del módulo.
Ese es uno de nuestros módulos hecho, pero vamos a necesitar más de una imagen para crear el carrusel. El código que proporcionaré más adelante en esta publicación mostrará 5 imágenes a la vez, por lo que necesitaremos al menos 6 imágenes para que nuestros botones de carrusel tengan algún efecto y deslicen nuestro contenido.
Usando la función de clonación de Divi, duplique el módulo de imagen tantas veces como desee que las imágenes se muestren en su carrusel.
Cuando haya terminado, su sección debería verse así, con sus módulos de imagen apilados en una sola fila.
Deberá abrir la configuración de cada módulo e intercambiar sus imágenes y la URL si la agregó.
Esa es la configuración del contenido completa, ahora vamos a crear la navegación.
Agregar una nueva sección
Agregue una nueva sección directamente debajo de su sección de imagen, esta vez con dos columnas.
Abra la configuración de la fila y en la pestaña Avanzado agregue la clase ds-arrow-row en el campo Clase CSS. Luego, guarde y salga de la fila.
Agregar la navegación
A continuación, agregue un módulo de texto a cada una de las dos columnas de esta fila.
Ahora necesitamos crear campos de entrada para que actúen como nuestros botones de navegación. Abra el módulo de texto en la columna de la izquierda y en el área de contenido, pegue el siguiente HTML:
<input id="ds-arrow-left" type="button" value="8">
Luego, guarde y salga del módulo.
A continuación, abra el módulo de texto en la columna de la derecha y pegue el siguiente HTML:
<input id="ds-arrow-right" type="button" value="9">
Luego, guarde y salga del módulo.
Damos a estos campos de entrada ID únicos de ds-arrow-left y ds-arrow-right para que podamos diseñarlos con CSS y apuntarlos con JavaScript para decirles qué queremos que hagan cuando se hace clic en ellos.
Los valores de 8 y 9 se refieren a las flechas dobles izquierda y derecha de la familia de fuentes ET Modules.
Eso es todo lo que necesitamos hacer en el constructor. Si revisa el extremo frontal de su página ahora, será solo una sola columna de imágenes y luego dos pequeños botones grises con 8 y 9 en ellos y no harán nada. Así que vayamos a la parte divertida, agregando nuestro código.
Agrega el CSS
Aconsejaría agregar el siguiente CSS a su tema secundario, pero si no está usando un tema secundario, está bien agregarlo a Divi> Opciones de tema> General> CSS personalizado y asegúrese de presionar Guardar.
/*Hide the section overflow*/
.ds-carousel-section {
width: 100%;
overflow: hidden;
}
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
color: #fff;
background: gray;
font-family: 'ETModules';
font-size: 30px;
padding: 5px 30px;
border-style: none;
border-radius: 0;
cursor: pointer;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*Position the left arrow*/
#ds-arrow-left {
float: right;
margin-right: 5px;
}
/*Position the right arrow*/
#ds-arrow-right {
float: left;
margin-left: 5px;
}
/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
-webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}
/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}
/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
float: left;
width: 100% !important;
margin-right: 0 !important;
}
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}Edite el CSS según sus necesidades
Es posible que deba editar algunas de las declaraciones de CSS según la cantidad de módulos que use en su carrusel.
¡Ahora un poco de matemáticas!
Esta declaración establece el ancho de la fila que contiene los módulos.
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}Para que nuestros módulos floten uno al lado del otro, con algunos sentados fuera del área visible, necesitamos aumentar el ancho de la fila.
Si está mostrando un total de 15 módulos con 5 por página, terminará con 3 páginas. Entonces, el ancho visible de la fila debe ser:
(15/5) x 100 = 300.
Por lo tanto, deberá cambiar los valores de 1000vw a un mínimo de 300vw. (No importa si inserta un número mayor, ya que JavaScript se encargará de no mostrar ninguna página vacía adicional). Entonces, su CSS ajustado se vería así:
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 300vw;
max-width: 300vw;
}Con las consultas de los medios es un poco diferente. Como el CSS está configurado para mostrar 3 imágenes por página en pantallas de 1024 px de ancho y menos, y 1 imagen por página en pantallas de 479 px de ancho o menos, necesitamos ajustar las matemáticas para reflejar eso:
(15/3) x 100 = 500 (para tabletas)
(15/1) x 100 = 1500 (para móviles)
Su CSS ajustado se vería así:
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 500vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1500vw !important;
}
}Si lo desea, puede modificar todos estos valores a un ancho mayor que el número total de módulos que está utilizando para simplificar. Entonces, en el ejemplo mencionado anteriormente, ese valor sería 1500vw o más.
Es posible que también desee cambiar la cantidad de módulos que se muestran por página. Esta declaración CSS es donde puede ajustar eso.
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
El valor de ancho de 20vw muestra 5 imágenes por página, y es solo un porcentaje de 100. Por lo tanto, 25vw mostraría 4 imágenes por página y 16.66vw mostraría 6 imágenes por página, y así sucesivamente.
Puede hacer lo mismo con las consultas de medios:
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}Recuerde que si cambia la cantidad de imágenes que se muestran por página, es posible que también deba ajustar el valor de ancho de fila que se discutió anteriormente.
Si vuelve a revisar su página ahora, todo debería tener un estilo agradable y verse como un carrusel, pero para que funcione, necesitamos agregar algo de JavaScript.
Agregar el JavaScript
Copie y pegue el siguiente código en Divi> Opciones de tema> Integraciones> Agregue código al <encabezado> de su blog y asegúrese de Guardar.
<script type="text/javascript">
(function ($) {
var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}
function mn_carousel_init() {
mn_set_visible();
var item = $('.ds-carousel-module');
$('#ds-arrow-right').click(function() {
mn_next_slide(item);
});
$('#ds-arrow-left').click(function() {
mn_previous_slide(item);
});
$(window).resize(function() {
mn_set_visible();
mn_first_slide(item);
});
}
$(document).ready(function() {
mn_carousel_init();
});
})(jQuery)
</script>Este código agrega funcionalidad a nuestros botones, moviendo la fila hacia la izquierda y hacia la derecha al hacer clic para mostrar los módulos.
Es posible que desee editar un par de áreas:
var mn_index = 0; //Starting index var mn_visible = 5; var mn_end_index = 0;
El mn_visible = 5; La variable se corresponde con el número de módulos que se muestran por página en el escritorio. Entonces, si cambió esto en el CSS como se mencionó anteriormente, también querrá cambiar este valor también.
Asimismo, esta función ajusta el número de imágenes que se muestran en tabletas y móviles. Entonces, si cambió esto en el CSS, ajuste los valores mn_visible aquí también.
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}Finalmente, tenemos la velocidad a la que se mueve el carrusel. Aquí se establece como 1000. Esta es la velocidad en milisegundos: 1000 milisegundos = 1 segundo.
Puede ajustar este valor para acelerar o ralentizar la animación.
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}¡Eso es todo! Ahora, si ve su página, debería tener un carrusel de módulos de imágenes en el que se puede hacer clic.
Como dije, puede usar este método con casi cualquiera de los módulos de creación de Divi estándar, pero es posible que deba ajustar la configuración con módulos diseñados para mostrar algún tipo de alimentación, como el módulo de blog.
A medida que el módulo del blog extrae publicaciones y las muestra en varias columnas (cuando se usa la función de cuadrícula), esto requeriría ajustar la configuración del módulo y un poquito de CSS adicional.
Carrusel usando el módulo de blog
Siga los mismos pasos para configurar su sección y fila.
En lugar de agregar un módulo de imagen, elija el módulo de blog y agregue la clase ds-carousel-module en la pestaña Avanzado de la configuración del módulo.
A continuación, en la pestaña Diseño, elija Cuadrícula en el menú desplegable de diseño.
Puede dejarlo como Ancho completo si lo desea, pero la opción Cuadrícula agrega automáticamente un estilo que se adapta mejor al diseño del carrusel.
Ahora necesitamos ajustar algunas configuraciones en la pestaña Contenido.
Para este primer módulo, necesitamos que el Número de publicaciones se establezca en 1 y el Número de compensación se establezca en 0.
La forma en que ajusta el resto de la configuración y el contenido que muestra depende completamente de usted. Luego, guarde y salga.
Como hicimos antes, use la funcionalidad de clonación de Divi para duplicar el módulo tantas veces como necesite.
Una vez que tenga la cantidad de módulos de blog que necesita, abra cada uno e incremente el número de compensación en 1 cada vez para que cada módulo de blog muestre la siguiente publicación en el feed.
Entonces su configuración se vería así:
1er = Número de compensación: 0
2do = Número de compensación: 1
3 ° = Número de compensación: 2
4to = Número de compensación: 3
Etc.
Un poco de CSS extra
Como el módulo del blog se muestra en columnas cuando se usa el formato de cuadrícula, debemos agregar esta consulta de medios adicional a nuestro CSS para anular la configuración de la columna de Divi en pantallas más pequeñas:
@media all and (max-width: 980px) {
/*Set post to fullwidth on smaller screens*/
.ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
width: 100% !important;
margin: 0 !important;
}
}Si decidió utilizar el módulo de blog en modo de ancho completo, no necesitará agregarlo.
Resultado
Ahora revisa tu página y mira tu nuevo y encantador Blog Carousel
Pensamientos finales
Hay muchas formas en las que puede utilizar este efecto de carrusel para mostrar más contenido sin aumentar la longitud de su página.
Puede mostrar un escaparate de los diseños de su sitio, testimonios de clientes, biografías de empleados, videos, podcasts o incluso productos de su tienda.
Me encantaría saber cómo usa este tutorial para crear un carrusel de módulos Divi en el que se puede hacer clic, así que deje un comentario en la sección a continuación.
Imagen destacada de aunaauna / Shutterstock.com