Crear deslizador (slider) en Divi con url en cada imagen sin botón
Por qué este tutorial
Hace unos días recibí un comentario de un usuario haciendo referencia a uno de nuestros tutoriales.
El tutorial en cuestión era el siguiente: El modulo galeria de divi. Cómo añadir links y mostrar texto on rollover.
En este tutorial se explicaba cómo añadir vínculos a cada imagen de una galería y a la vez mostraba un texto personalizado para cada una de estas imágenes de la galería Divi. Este usuario quería asociar links a su galería pero no funcionaba correctamente (ni incorrectamente). La causa de que no se ejecutase el efecto en su galería era porque el diseño de ésta estaba en modo deslizador y no rejilla.
Así que me preguntó si había alguna alternativa y me puse a buscarla.
Y aquí está el resultado:
Este es un anuncio Breve
Como ves, en la columna de la derecha tenemos un slider de imágenes (un módulo deslizador) que actúa como una galería y cada imagen abre una url distinta. En esta ocasión las url van a distintas secciónes de esta misma entrada.
Un módulo deslizador Divi
Como ves en la sección sobre estas líneas, tenemos dos módulos. A la izquierda un módulo tipo anuncio y a su derecha un módulo deslizador Divi que hará la misma función que la galería Divi. Se puede observar que este módulo deslizador Divi no tiene botón ni texto y toda el área de cada imagen está activa. Si pulsas en cada imagen navegarás hasta una zona diferente de esta misma página. Pero por supuesto que puedes poner tus propios links hacia las páginas que quieras.
Así que vamos al lío.
La Estructura de Nuestra Práctica
Lo primero que vamos a hacer, claro, es crear una nueva página o entrada y activar el constructor Divi. Esto nos proporciona una sección con una fila preparada para insertar una columna.
Como ya hemos mencionado, necesitamos una fila de dos columnas. Para esta práctica hemos elegido una estructura de dos columnas 2/3 + 1/3. Esto es, la primera columna ocupará dos tercios del espacio disponible y la segunda un tercio, que es donde ubicaremos nuestro módulo deslizador.
Una vez tenemos nuestro estructura creada, vamos a por el primer módulo y su configuración.
Primera Columna. Módulo Anuncio
En la primera columna vamos a poner un módulo tipo anuncio.
Así que lo creamos y, en la pestaña contenido, rellenamos los campos Título y contenido. Dependiendo del texto que introduzcas en Contenido, tendrás que ajustar los valores de separación que veremos más adelante.
Sin salir de la pestaña contenido, un poco más abajo, marcamos Usar icono y elegimos uno. Yo he optado por la cámara de fotos como ves en el ejemplo del tutorial .
Cambiamos ahora a la pestaña Diseño. A continuacón puedes observar los ajustes que necesitamos.
- Personaliza el color del icono si quieres.
- Cambia la ubicación de la imagen o icono a la izquierda.
- Activa Usar tamaño de fuente de icono.
- Pon el tamaño a 28 px.
- Baja un poquito, en esta misma pestaña y en separación > Relleno personalizado pon los valores superior, derecha e izquierda a un 10%.
Por último, puedes cambiar el color de fondo de toda la columna a algún color que resalte el contenido del módulo. Yo lo he puesto amarillo. Sólo tienes que ir a los ajustes de la fila y cambiar el color en la pestaña Contenido > Fondo.
Segunda Columna. Módulo deslizador
En la segunda columna añadimos el módulo deslizador (en Extra, este módulo se llama carrusel). Una vez en los ajustes del módulo deslizador, añadimos una diapositiva.
Cuando pulsemos en añadir diapositiva se abrirán los ajustes de esta nueva slide y configuramos lo siguiente:
- Como no queremos que haya ningún texto, dejamos el campo Título vacío.
- Ponemos lo que sea en el campo Texto del botón. Da igual lo que pongas porque lo haremos invisible con CSS. Pero tienes que poner algo para activar el link.
- En contenido, nada.
- Y en URL del botón pon la dirección que quieras usar.
- Baja un poco, sin dejar esta pestaña contenido y añade tu imagen de fondo para esta primera slide o diapositiva. Para ello activa el tercer botón en el área Fondo y pulsa en el signo + del área grande.
Ya tenemos la primera diapositiva configurada. Pulsa guardar y duplica la diapositiva tantas veces como diapositivas quieras. Ahora cambia en cada una de las diapositivas la url y la imagen de fondo. Intenta que tengan las mismas dimensiones.
Configuración General del Módulo
Ahora toca configurar un poquito el modulo deslizador en general. Estos ajustes afectarán a todas las diapositivas. Asegurate de que no estas dentro de la configuración de ninguna diapositiva. Debes ver tus diapositivas como en la imagen de arriba.
Abre la pestaña Diseño y en tamaño ajusta la anchura y alinea al centro, sobretodo para que en una tablet se vea bien. Aquí tienes una captura en modo constructor visual.
En separación, añade unos píxeles en relleno superior. En mi caso, para una imagen de 300px de anchura y altura le he puesto 180px. Esto mostrará toda la imagen en la fila.
Ya sólo nos queda insertar el CSS que ocultará el botón y dejará la imagen de fondo como zona activa para los enlaces.
De manera que en la pestaña Avanzado > CSS personalizado > botón de diapositiva pegamos el CSS que copiarás de aquí:
font-size: 0px; background-color: rgba(0, 0, 0, 0.0) !important; top: -1000px; right: -1000px; height: 5000px; width: 5000px; position: absolute;
Y ya lo tienes. También tienes el tutorial en formato vídeo. Y ya sabes, si te ha gustado, comparte. ¡Gracias!
Viendo es tutorial, me hago una pregunta. ¿seria posible hacer un deslizador con varias imágenes y cada imagen con una URL? . Por ejemplo como tiene Netfix
Hola! Mira este tutorial de elegant themes, tal vez se parece a lo que buscas.
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-clickable-carousel-of-divi-modules
Ya me cuentas, gracias por leernos!
Hola
Lo prometido es deuda y comento la experiencia con el tutorial de eleganttheme.
Después de segir el tutorial al pie de la letra no he sido capaz de obtener los mismos resultados.
Ley los comentarios de la gente y había gente que le pasaba lo mismo que a mi y el tuto no les funcionaba. Debido que prevalecía las preferencias de DIVI en los anchos de columna a los del CSS o eso decían.
Un saludo.
Vaya, no sabía. Si tengo tiempo lo probaré, a ver si se puede hacer algo pero tendrá que ser mas adelante. Si avanzo algo te cuento.
Saludos!
Michas Gracias por la ayuda.
Lo probaré y cuento que tal
Un saludo
Siempre me salvas la vida. ¡Mil gracias!
Me encanta que te sean útiles los tutoriales
Gracias, Tomás!