El módulo galería del tema Divi para WordPress

El módulo galería del tema Divi para WordPress. 5 diseños distintos y cómo crearlos.
Seguimos adaptando al castellano tutoriales sobre el tema para WordPress Divi publicados en el blog de elegantthemes. En esta ocasión es el turno del módulo galería Divi. Así que fusionaremos 5 artículos que explican 5 variaciones de uso de la galería en un solo post.
Por otro lado, recordarte que debes tener instalado el tema Divi en tu WordPress para seguir este tutorial.
Las galerías de fotos son una de las herramientas más importantes en diseño de páginas web hoy en día. Por ejemplo, si eres diseñador y quieres mostrar tu trabajo, un fotógrafo que desea exhibir sus fotos, o cualquier tipo de negocio con una tienda on-line, necesitarás implementar alguna galería de fotos en tu web. Con el módulo galería Divi podemos crear atractivas galerías que atraerán a nuestros visitantes.
Algunos de los ejemplos que vamos a ver, serán bastante sencillos y sólo requerirán algunos ajustes en la configuración del módulo galería Divi. Otros serán un poco más avanzados e insertaremos un poco de CSS y para lograr nuestro objetivo.
Preparación de las fotos
Antes de adentrarnos en los tutoriales, vamos a repasar algunos conceptos importantes sobre el uso de las imágenes. Estas pautas deberán ser algo cotidiano a la hora de diseñar nuestras webs.
1) Optimiza tus imágenes para la web.
Cuando creamos una galería de fotos, lo más importante es asegurarse de que las imágenes tengan el tamaño de archivo más pequeño posible antes de cargar. Esto es fundamental para la carga de la página y ayudará a que tu sitio web se muestre rápidamente. Cuando usas imágenes directamente desde una cámara a tu pc, a menudo son enormes. Y lo mismo ocurre con muchos diseños. Optimizar tus imágenes para la web es muy importante, sobre todo si tu galería contiene muchas imágenes.
Puedes usar Photoshop o cualquier editor de imagen. Hay un montón de programas para optimizar tus imágenes antes de subirlas a un sitio web. También hay herramientas online gratuitas como https://tinyjpg.com/ o https://compressor.io/compress que te ayudarán a cambiar el tamaño y optimizar tus imágenes.
En estos ejercicios que vamos a ver, hemos usado 12 fotos con unas medidas de 1024×768 (ancho/alto). Puedes usar el tamaño que mejor se adapte a tu proyecto. Sin embargo te recomendamos que su tamaño no sea superior al que realmente necesitas.
2) Etiqueta tus imágenes.
Suele ser una buena práctica etiquetar tus imágenes con nombres que identifiquen tu foto. Además de ayudarte a gestionar tus archivos correctamente te vendrá muy bien paras el SEO de tu página. Evidentemente, es más fácil encontrar una foto que se llama «León en la sabana africana» que «foto0001IMG.jpg», ¿No te parece?
3) Usa imágenes libres de derechos.
Es obvio, si no quieres usar imágenes de pago, asegúrate de que puedes usar una foto sin restricciones. Tienes un montón de sitios donde descargar imágenes o vectores en la web. Échale un ojo a este post: Los mejores sitios para descargar recursos vectoriales gratis. En este caso hemos descargado las imágenes de pixabay.
1. Crear una galería Divi de ancho completo
Para este diseño y los siguientes usaremos el módulo de Divi Gallería y haremos ajustes en estas 3 áreas: Ajustes generales, ajustes avanzados de diseño y CSS personalizado.
En primer lugar, creamos una sección estándar (se crea automáticamente al crear la página) con una sola fila e insertamos el módulo galeria. En la imagen de abajo puedes ver el aspecto de nuestra galería tipo rejilla por defecto, esto es, no hemos hecho aún ninguna modificación en los ajustes de fila.
Ajustes de fila
Pulsa el botón de ajustes de fila (imagen abajo, enmarcado en rojo). De esta forma se abrirán las opciones donde poder configurar los ajustes para la fila.
Desde aquí haremos que la galería se adapte a toda la pantalla, esto es, sin espacios entre fotos.
Marcamos entonces Hacer que esta fila tenga anchura completa. Así, conseguimos que las imágenes se adapten a toda la anchura de nuestra pantalla. Igualmente, marcamos El uso personalizado de canalón de ancho y ponemos su valor en 0. De esta forma, eliminamos el espacio entre las fotos de nuestra galería. Activamos también Conservar el relleno personalizado en dispositivos móviles. Así, en nuestros dispositivos móviles mantendremos el diseño.
Ajustes del módulo galería
Repasamos la configuración de Ajustes generales de nuestro módulo galería:
- Desde aquí añadimos las fotos que formarán parte de nuestra galería.
- En disposición, seleccionamos Rejilla.
- En este caso tenemos 12 fotos, y queremos que se vean todas a la vez, así que ponemos 12 en número de imágenes.
- No queremos que nos muestre título ni leyenda.
- Tampoco queremos mostrar paginación.
Para ajustes avanzados de diseño:
- Color de icono para ampliar: blanco.
- Color de capa superpuesta al pasar el ratón: negro, 50% transparente.
- Selector de icono al pasar el ratón: nosotros hemos elegido la lupa, pero prueba con alguno que te guste.
Con esto ya tendríamos nuestra galería terminada. Sin embargo vamos a customizar todavía un poco más nuestro ejemplo. Cuando pulsamos en una foto, cuando se muestra ampliada, aparece el nombre bajo la imagen, como puedes comprobar en la imagen inferior.
En ocasiones no es un problema, pero si preferimos ocultar ese texto, insertaremos este CSS en Divi > Opciones de tema y nos desplazamos hacia abajo del todo hasta donde pone CSS personalizado:
CSS Personalizado
.mfp-title { display: none; }
Y aquí puedes ver el resultado final de nuestra galería:
Y ahora, como siempre, puedes repasar los pasos del primer tutorial en el vídeo correspondiente. Activa la opció HD en configuración del vídeo para aprovechar su máxima resolución:
2. Galería Divi como mosaico con relleno personalizado
Para este segundo ejemplo vamos a modificar la galería que tenemos creada hasta el momento. Así que vamos a ajustar la separación entre las imágenes de dos formas distintas: con unas líneas CSS o desde la configuración avanzadas del módulo galería.
La configuración de la fila y los ajustes generales del módulo galería son los mismos que ya hemos cambiado para el ejercicio anterior.
Vamos a personalizar un poco nuestra galería en la configuración avanzada del módulo. Por tanto, abrimos los ajustes avanzados del módulo y cambiamos:
- Color de icono para ampliar: gris.
- Color de capa superpuesta al pasar el ratón: blanco, 75% transparente.
- Selector de icono al pasar el ratón: Vamos a cambiar ahora al icono de ampliar, como puedes ver en la imagen inferior.
Ajustar la separación entre las fotos
a) Añade un poco de CSS
Para incluir el código, pulsamos en la pestaña CSS personalizado y buscamos la sección Artículo de Galería. Todo lo que pongamos ahí afectará a cada imagen de nuestra galería.
CSS Personalizado >> Artículo de galería
padding: 3px;
Y así, con el código que ves sobre estas lineas, generamos el espacio entre las imágenes, para conseguir el aspecto de mosaico que queremos. Por supuesto, puedes cambiar los valores para aumentar o reducir el espacio.
Este es el aspecto con la modificación realizada.
b) Hacer lo mismo sin código CSS
Si no queremos usar código, podemos conseguir la misma apariencia desde el panel de configuración avanzada del módulo. Para esto, activamos la última opción, Usar borde, elegimos blanco como color y le damos un valor de 3 (o el que queramos).
Repasa las modificaciones realizadas en este segundo ejemplo en el vídeo:
3. Crear un borde personalizado para nuestras imágenes
En este tercer ejemplo, vamos a usar una «máscara de recorte» con CSS para crear un pequeño recorte en cada ángulo de nuestras imágenes de la galería. Si no estás muy familiarizado con CSS, no te preocupes, podrás copiar el código y te explicaré para qué sirve y cómo usarlo. Además, te facilitamos una web gratuita donde puedes crear bordes y copiar el código necesario para implantarlo en tus imágenes.
Partiendo del último ejercicio, sólo será necesario modificar en la configuración de fila > ajustes generales> Uso personalizado de canalón de ancho, e introducir un valor de 2, por ejemplo. Esto creará espacio entre las imágenes para que pueda generarse la forma.
Insertar el código CSS
Como ya hemos hecho en otras ocasiones, para incluir el código, pulsamos en la pestaña CSS personalizado y buscamos la sección Artículo de Galería.
CSS Personalizado >> Artículo de galería
-webkit-clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0); clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0);
De esta manera se genera el polígono que contendrá cada una de nuestras imágenes. Puedes experimentar con más formas en la web de Bennett Feely. Ahí podrás copiar el código necesario para hacer tus pruebas y pegarlo en tu web.
Y ya está, mira cómo debe quedar tu galería una vez hayas acabado de hacer el ejercicio.
* ¡OJO! estos bordes personalizados son compatibles con los navegadores Google Crhome, Safari y Opera, pero no con Firefox o internet explorer.
En el vídeotutorial puedes ver de nuevo los pasos y reforzar un poco más esta práctica.
4. Cambiar el número de columnas de nuestra galería Divi
Para este ejercicio utilizaremos los ajustes de ejercicio 1, esto es, una galería de ancho completa. Divi genera las galerías de forma automática con cuatro columnas. Pero puede ser muy útil aumentar o reducir las columnas en según qué casos. Por ejemplo, podríamos tener 15 fotos y querer mostrarlas en una galería sin paginación. De eso va este ejemplo.
Los únicos cambios que haremos en este ejemplo será añadir 3 imágenes a nuestra galería y añadir el código CSS. ¡Sólo eso! Mira cómo va a quedar:
Añadir el código CSS
Ya sabes, incluimos el código pulsando en la pestaña CSS personalizado y buscamos la sección Artículo de Galería.
CSS Personalizado >> Artículo de galería
margin: 0 !important; width: 20% !important; clear: none !important;
margin: esto centrará la imagen respecto al ancho establecido.
width: la anchura. Se divide el 100% del contenedor entre el porcentaje introducido, lo que genera las columnas resultantes. 100/20 =5 . Si quisiéramos 2 columnas el porcentaje sería 50%. Para 3 columnas, cambiamos margin a 33.33%. Para 6 columnas, será 16.66%, y así hasta el infinito y más allá…
clear: para que no haya espacio a la derecha o izquierda de la imagen. Como siempre, puedes hacer un repasito en el siguiente videotutorial.
5. Rollover sobre la imagen: de escala de grises a color
Y para rematar este megapost vamos a crear un efecto interesante. Convertiremos las imágenes a escala de grises y al pasar por cada una de ellas se verá la fotografía con su color. También, para este ejemplo, vamos a ocultar el icono que aparece al pasar el ratón por él. Todo esto con un poquito de CSS que, por supuesto, iremos explicando paso a paso.
Aunque podrás verlo mejor luego con el videotutorial, puedes hacerte una idea de este ejemplo viendo esta imagen.
Como otras veces, vamos a partir de una galería ya creada y personalizarla. En este caso será la del segundo ejercicio, por lo que mantenemos los parámetros de este ejercicio.
Ajustes del módulo galería
No vamos a necesitar ningún efecto adicional al pasar el cursor por una imagen, de manera que haremos totalmente transparente la capa superpuesta. Así, en Ajustes avanzados de diseño >> color de capa superpuesta al pasar el ratón, introducimos rgba(255,255,255,0). Esto es blanco con una opacidad de 0%, esto es, invisible.
CSS personalizado
Pulsamos la pestaña de CSS dentro de la configuración del módulo galería y en la zona artículo de galería añadimos:
CSS Personalizado >> Artículo de galería
padding
:
3px
Recuerda que este código añadía 3 píxeles de separación entre las imágenes.
Para conseguir el efecto de escala de grises insertamos, esta vez en la zona clase CSS de la misma pestaña CSS personalizado:
grayscale
Una vez que se agrega la clase, estamos diciendo al CSS que funcione en todo lo que se etiqueta con esa clase. Por lo tanto, ahora cada galería que tenga clase de «grayscale» creará el efecto gris/color.
Ahora, nos vamos a las opciones del tema Divi, en el escritorio de WordPress y nos desplazamos hasta la sección CSS personalizado (abajo del todo). Aquí es donde vamos a introducir el código CSS para el efecto.
.grayscale .et_pb_gallery_image { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .8; }
Esto aplica la escala de grises a las imágenes y pone la opacidad al 80%. De esta manera, cuando pasemos el cursor por la imagen, el efecto destacará más.
.grayscale .et_pb_gallery_image:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1; }
Este código controla el estado de la imagen cuando tenemos el cursor sobre ella. Por lo tanto, como puedes ver, la opacidad se establece en 1 (100%) y el porcentaje de escala de grises es 0%. O sea, el color de la imagen se mostrará cuando el ratón pase por encima.
.et_overlay:before { display: none; }
Y, por último, con esto eliminamos el icono al pasar el ratón por cada imagen.
Y aquí está el videotutorial, que esperamos os aclare dudas.
Si quieres ver más opciones de personalización del módulo galería de divi, visita este artículo donde te explicamos cómo añadir un vínculo a cada imagen y muestra un texto on hover.
Muy bueno. Me ha sido muy útil.
Gracias, Pedro
Nos alegra que te haya sido útil.
Seguiremos publicando tutoriales como este.
Saludos
Buen artículo. Me ha ayudado mucho.
Hola me gustaría saber si tienes algún articulo o me pudieras ayudar con lo siguiente, respecto a los Portafolios Filterables Grid:
1: Es posible, cambiar el orden de las galerías y que no sean en orden alfabético, ordenarlas a gusto propio, quizás por fecha de creación.
2: para el dispositivo tables: es posible agrandar las imágenes destacadas con el objetivo de que queden por defecto, 2 por linea en vez de 3,
3, quiero que las mis botones de fotografías de las galerías sean mas grande (la imagen que hace que se abra la imagen en grande, creo que se llama imagen destacada)
de ante mano muchas gracias
Hola, Ignacio
Respecto a la primera pregunta, puedes establecer el orden en aleatorio desde la configuración del módulo > actualizar Galeria o puedes arrastrar cada imagen a donde quieras que aparezca.
En cuanto a la segunda pregunta, si quieres que en una tablet aparezca solo dos columnas, puedes clonar el modulo galeria y cambiar las columnas como en el ejercicio 4 de este post.
En el modulo clonado introduce en los Ajustes de módulo > CSS Personalizado > Artículo de Galeria:
margin: 0 !important;
width: 50% !important;
clear: none !important;
Esto distribuye tus imágenes en solo 2 columnas. A continuación haz visible cada módulo segun te convenga, el de 3 columnas desactiva en Ajustes Generales Teléfono y tableta y en el de dos columnas desactiva Escritorio, así se verá uno u otro dependiendo del dispositivo.
Para la tercera pregunta no tengo idea, supongo que modificando la clase .et_pb_gallery_0.et_pb_gallery .et_overlay:before, si consigo averiguarlo te cuento.
Gracias y saludos
Para la tercera pregunta, supongo que te refieres al icono. Intenta cambiar el tamaño de fuente en Ajustes del modulo > CSS personalizado > Icono superpuesto
font-size: 72px; (o el tamaño que quieras).
Gracias por info!!
Quiero hacer lo mismo pero en el módulo portafolio en anchura completa y en modo rejilla. Aunque cambio los parámetros del css para que se aplique en este módulo no funciona:
.grayscale .et_pb_fullwidth_portfolio_0 {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: .8;
}
No se por qué puede ser
Que buen tutorial! Gracias!!!
Gracias, Sandra, por tu comentario! Intentaremos seguir en la misma linea.
Saludos
Antes de nada, gracias por este estupendo tutorial. Estoy intentando hacer que al pasar el ratón en lugar de verse un icono, se vea un texto, pero estoy muy perdida, ¿podrías indicarme cómo hacerlo?
Muchas gracias
Un saludo
Pilar
Hola, Pilar
Gracias por tu comentario. Puedes ver un tutorial (en inglés) de lo que pretendes aquí: https://divisoup.com/how-to-add-links-to-the-divi-gallery-module-and-show-captions-on-hover/
Intentaré hacer este mismo tutorial en castellano en breve, tal vez este mismo mes.
Saludos!
Hola, tengo 2 dudas.
Me gustaria que se mostrara la foto en su tamaño original y que no haga falta aumentar con la función lupa.
La segunda es que se muestre minimizada pero que la función lupa, esté solo disponible en una parte de la foto y no que se pueda pulsar en toda la foto.
Gracias.
Gracias por el tutorial, realmente bueno.
Tengo una galería montada con unos dibujos propios, estos tiene marco y me gustaría saber si es posible hacer que la imagen sea un poco más grande dentro del div que lo contiene para evitar ese marco y así que no se vea raro.
como una especie de padding negativo, aunque ya sabemos que esto no es posible.
Lo puedes ver en mi web, en la parte de galería.
Un saludo
Gracias, JuanMa, por tu comentario. He probado con los bordes, pero no soluciona el problema. Creo que te va a tocar hacer uso un poco de Photoshop, para ajustar el marco. De todas formas, si diera con alguna solución te informaría. Muy chula la página.
Saludos!
Hola,
Me gusta tu tutorial pero me gustaria poder poner un enlace diferente al de la imagen que se muestra.
Es decir, que cuando pulsen la imagen 1, se abra la página X y cuando pulsen sobre la imagen 2, se abra la página Z.
Gracias por tu atención.
Saludos
Gracias, Felix, por tus palabras.
Tienes un tutorial paso a paso que te permite crear enlaces personalizados en cada imagen: https://aulamedia.net/anadir-links-y-texto-modulo-galeria-divi/
Échale un vistazo y me cuentas
Saludos!
Gracias por tu rápida respuesta.
He seguido el tutorail y no me funciona. La página a la que deseo incorporar los enlaces personalizados es la siguiente: http://ciberpyme.barcelona/noudisplay/comunicar-3/
Se te ocurre alguna otra forma de hacerlo???
Gracias por tu atención.
Saludos
Hola, Félix
Efectivamente el tutorial solo funciona con la galería en modo rejilla, no en modo slider/deslizador.
De todas formas, si encuentro alguna solución te comentaría
Saludos
Hola, Felix
Intenta crearlo con un módulo deslizador en lugar de galería. Una vez generes el modulo, antes de crear diapositivas, pon este codigo CSS en la pestaña avanzado> CSS personalizado > boton de diapositiva:
Font-size: 0px;
background-color: rgba(0, 0, 0, 0.0) !important;
top: -1000px;
right: -1000px;
height: 5000px;
width: 5000px;
position: absolute;
Esto oculta el botón y hace toda la imagen activa para la url. Luego crea cada diapositiva, y dentro de ésta, pon un nombre a tu botón (el que sea, no se va a ver). Añade tu url en contenido > enlace. Pon tu imagen como fondo. Ahora, sal de los ajustes de la diapositiva, en la pestaña Diseño de los ajustes generales del módulo, pon la anchura de tus imágenes en Tamaño y ajusta el relleno personalizado para que tus imagenes se ajusten. Y ya deberías tenerlo. Prueba y me cuentas. En un par de días colgaré un tutorial sobre el tema que planteas.
Saludos!
Hola!
Soy incapaz de crear dos galerías diferentes en la misma página. Solo consigo que se me añadan más fotos a la anterior ya creada y quiero que no se mezclen. Cómo puedo hacerlo? Gracias.!
¡Hola, Maite!
Una vez tengas la primera galería,que tendrás en una columna, simplemente clona la sección, la fila o el módulo que la contiene y después sustituye las imágenes.Luego la puedes arrastrar a la parte de la pagina que quieras.
¡Saludos!
Hola,
muchas gracias por este tutorial, me ha sido de mucha utilidad.
Tengo una duda en relación con las galerias, pero en concreto cuando se usa la opción slider/deslizador.
La paginación se muestra con una línea de puntos grises, mostrando en blanco el punto de la imagen activa.
Hay manera de cambiar el color de esos puntos? Cuando el fondo de la página es blanco, y la imagen que se muestra tiene tonos grises, no se aprecian los puntos del deslizador.
Gracias por tu atención.
¡Hola, Enric!
Gracias por comentar.
Para cambiar el color del punto activo de una galería en modo deslizador prueba a poner este código CSS en los ajustes de la página donde tengas la galería >>CSS personalizado.
.et_pb_bg_layout_light .et-pb-controllers .et-pb-active-control{
background:#fc5a20!important;
}
El color que he puesto es un rojo suave. Cámbialo por el que tú quieras.
Ya me dices si te funciona.
Saludos!
Hola a todos. Necesito que en una galería DIVI se pueda hacer zoom con los dedos en dispositivos móviles. Independientemente de que este desactivada o activada la opción de accesibilidad en el navegador o android. No se si existe algun css que lo solucione o incluso que la galera de DIVI lo permita. He mirado en todas las opciones de DIVI y la verdad es que no veo nada que pueda habilitarlo Muchas gracias a todos y mi enhorabuena a los creadores del blog. Me he subscrito a los newslwtters ya que me ha encantado.
Hola de nuevo amigos. He encontrado un plugin que deja hacer zoom en toda la web aunque lo tengas deshabilitado en las opciones de Accesibilidad de Android o en el propio navegador. Os dejo aquí el enlace por si alguien lo necesita. https://wordpress.org/plugins/definitely-allow-mobile-zooming/
Hola, Eloi
Gracias por tus comentarios. Veo que has resuelto lo que buscabas. Fenomenal. Tomamos nota por si necesitamos echar mano de tu aporte.
Gracias de nuevo y Saludos!!
Buenos días:
Al crear la galería de imágenes, únicamente no puedo ver la última fila de fotos en el móvil, ¿por qué puede ser?
Hola, Rosana.
Es raro. Normalmente debería verse bien en todos los dispositivos. Entiendo que no has deshabilitado la vista de la galería en móviles y el número de imágenes que has puesto en la pestaña contenido coincide con las imágenes que usas en tu galería. Tal vez sea un problema que se resuelva con la actualización del tema. ¿Algo de css que impida ver todas las filas? Si no das con ello envíame la dirección de la galería para que pueda echarle un ojo.
Saludos!
hola, gracias por el post.
me a servido de ayuda el código para ocultar el titulo de la imagen , pero sigo teniendo un problema y es que al
buscar mi web en google , el nombre de esas fotos me sale en la descripcion de la pagina y no se como quitarlo.
aqui pego lo que me sale —
(Soy Jairon Chester, me apasiona narrar historias con mi cámara en España y el resto del mundo. 04062017-_DSC0449 · ANA Y ALBERTO(PREBODA)-76 · 04062017-_DSC0473 · edwin_y_amalia-14 · edwin_y_amalia-22 · 04062017-_DSC0219 · edwin_y_amalia-36 · ANA Y ALBERTO(PREBODA)-84 · edwin_y_amalia- … )
me podrias ayudar ? gracias de antemano
Espectacular la pagina ¡¡¡¡¡
Una preguntilla tengo 6 fotos y quiero poner 3 columnas y 2 filas. Como podría hacerlo.
Gracias
Gracias, Juan!
Tienes la respuesta en este mismo tutorial, punto 4.
Crea tu galería, añade tus 6 imágenes, y en los ajustes del módulo >> Pestaña Avanzado>> CSS personalizado >> Artículo de galeria añade este codigo CSS:
margin: 0 !important;
width: 33.33% !important;
clear: none !important;
Ya me cuentas
Saludos!
Sin duda el mejor tutorial que circula en la red sobre el asunto de las galerías de divi… bien explicado, estructurado y para los más perezosos hasta un video de explicación. Genial!
En el primer vídeo, al final del mismo hablas sobre cómo quitar el nombre del archivo usando el código .mfp-title y bien, perfecto, pero para quitar la etiqueta que aparece justo cuando colocas el puntero encima… qué código debería utilizar?
Mil gracias, sois unos crack.
Muchas gracias, Hector

Así da gusto, jeje.
Prueba a poner este script bien en divi >opciones de tema > integración > añadir código al head de tu blog, o en un módulo tipo código donde tengas la galería.
Luego asignale la clase ocultar-tootip a tu modulo de galeria (Ajustes del modulo > pestaña avanzado > Clase CSS: ocultar-tooltip)
Ya me dices qué tal
Saludos
Hola, estoy de acuerdo con Héctor, estos tutoriales que tienes sobre Divi, estan geniales, yo tengo la misma situación, me sale el titulo de la foto en un recuadro amarillo y no me gusta que salga, ya ingrese los códigos que has dejado y seguí las instrucciones que dejaste al pie de la letra y no me funciona, sigue saliendo al poner el ratón encima de la foto que esta en una galería divi. Podras ayudarme? o tienes algun curso que vendas sobre esta situación? Quedo en espera de tu amable respuesta.
Gracias, Alfredo
EN mi caso no he advertido errores. De todas formas, intentaré crear en breve un tutorial actualizado usando otro método.
Saludos
Buen dia! Me gustaria saber si tens algun codigo para que las fotos en la galeria tenga la opcion de «Descargar»
Hola, Juan
Tienes aquí un tutorial para añadir links a las imagenes de la galería. Luego el link sería a un elemento de tu biblioteca (zip).
Saludos
Hola buenas, ¿que código necesito para dejar el titulo siempre visible?
Hola David
No necesitas ningún código. Abre los ajustes de la galería y en la primera pestaña (contenido) asegúrate de tener activado Mostrar título y leyenda en la seccion de elementos
Saludos
Hola,
Como siempre, tus artículos son una maravilla.
Mira, estoy diseñando una web de venta de libros, me encantaría poder usar la galería con un DESLIZADOR horizontal.
Me explico: Por ejemplo: tener 15 portadas de libros para mostrar y ponerlas en ese deslizador, de modo que en pantalla se vean unas 5 o 6 y que con la VELOCIDAD DE ANIMACIÓN se enseñen las demás (otras 5 o 6), es decir, como un slider común, solo que en la galería y enseñando cierta cantidad en pantalla.
Sé que es un lío, pero tu un crack y de pronto sepas de algo.
Saludos,
Tomás.
Gracias, Tomás, por tus palabras. No he necesitado nunca un slider de esas características pero tienes un tutorial en la dirección que te adjunto. Yo estoy muy liado y no he podido probarlo. Básicamente debes crear primero un pluging para crear shortcodes de módulos de divi y luego con un plugin gratuito combinarlos. Le he echado un vistazo y no parece complicado. Puedes verlo,aquí: https://divinotes.com/slide-anything-free-wordpress-plugin/
Hazlo primero en local o en una instalación de prueba por precaución.
Por otro lado, si es una tienda, hay varios plugins de woocommerce que hacen eso que buscas. Si saco unas horas, crearé un tutorial sobre el tema.
Saludos
Gracias amigo,
Estuve viendo el enlace y justo es el plugin que he estado usando desde ayer… digamos que no es la maravilla y tiene una interfaz de la época de los dinosaurios, pero al menos cumple su función y crea un slider bien definido. Ahorita estoy tratando de resolver algunos problemas de diseño, pero creo que va bien.
Y si, he pensado en WooCommerce, pero no estoy seguro de que el diseño por defecto me convenga, además de que al final solo sería una plataforma de afiliados y no necesitaría vender nada directamente.
En fin, muchas gracias por tomarte el tiempo de responderme.
Y claro que sí, sería genial ver ese post.
¡Abrazos!
Gracias, por el tutorial, la verdad es que me ha venido muy bien, y he podido insertar varias galerias en la misma página, y cambiando el numero de miniaturas: 4, 6, 8.
Gracias, lo que no se activa es lo de que no se muestre el nombre
.mfp-title {
display: none;
}
bueno tendré que investigarlo, pero repito, buen tutorial. Viene muy bien
Hola, Dani, lo acabo de comprobar y funciona ok. Pon el código en la zona de CSS de los ajustes de la página (icono de ruedecita de engranaje en constructor visual). Te en cuenta que es el título que aparece cuando se abre la imagen en lightbox. Saludos
Hola! Me gustaría saber como puedo cambiar el color de capa superpuesta al pasar el ratón con css, ya que no estoy usando una galería sino solamente una imagen, muchas gracias!
No sabria decirte. Puedes intentar usar las nuevas opciones de hoover en la configuracion del módulo, por ejemplo los filtros de imagen, bordes, etc.
HOLA. muchas gracias por el tutorial es maravilloso, además escribo para consultarte lo siguiente, ¿Es posible configurar la galería en escala de grises en tonos sepia? Un saludo
Hola, buenas tardes, no tengo las opciones que aparecen en el tutorial, por ejemplo en los ajustes de fila no tengo la posibilidad de hacer que la fila tenga ancho completo ni activar el uso personalizado del canalón de ancho… Será por la versión de Divi que estoy usando? Desde ya muchas gracias!!!
Un tutorial estupendo. ¡Muchas gracias!
El problema con el que me encuentro es que no consigo encontrar la opción de «Conservar el relleno personalizado en dispositivos móviles». ¿Puede ser que la hayan eliminado?
Tengo 4 fotos en lo ancho siguiendo tus indicaciones y perfecto, pero pasando a Tablet, me sale una en la parte de abajo :S
Cualquier consejo será de ayuda!
Hola, enhorabuena por este blog de gran utilidad.
Me fue muy bien el tutorial. Para cuestión de gustos, lo hice al revés, puse las fotos a color y al pasar el cursor por ecima que se vean en blanco y negro, pero va a gustos. Así:
https://www.geografiaconlospies.com/memes/
Me pareció genial.
Mi pregunta es: ¿Es posible aplicar el mismo efecto también para la página principal? ¿Cómo?
http://www.geografiaconlospies.com
Muchas gracias.