Crear deslizador (slider) en Divi con url en cada imagen sin botón

por | 19 Dic, 2017 | Carrusel, css, Deslizador, Sliders

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.

módulo deslizador Divi

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.

insertar-columna-dos-tercios+un-tercio

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.

ajustes-modulo-anuncio

  • 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%.

ajustes-separacion-modulo-anuncio

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.

agregar-diapositiva-modulo-deslizador-divi

 

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.

ajustes-modulo-deslizador

  • 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.

ajustes-modulo-deslizador-fondo

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.

duplicar-diapositiva

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.

ajustes-deslizador-tablet

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.

css-modulo-deslizador

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!