+41 78 955 3005

¿Te imaginas poder organizar imágenes de una forma dinámica para los visitantes?.

Cuando tienes el deseo de estilizar tu sitio web acorde a la forma visual que le has dado al mismo, piensas en la mejor forma de interactuar con los visitantes y que estos recuerden de buena forma el recorrido que significa entrar a tu página web. Es así cómo se desarrollan diferentes formas de aplicar divertidas técnicas a tus módulos de imágenes que es en lo que nos enfocaremos en esta ocasión. Como crear un menú deslizador de imagen en acordeón!

Tomando en cuenta el artículo creado por Divisoup, te enseñaremos como crear esta genial forma de presentar tus imágenes

¡Comencemos!

Paso 1

  • Para empezar crea una columna y agrega un modulo de codigo
barra de promocion Divi

Paso 2 : 

  • Dirigite a la pestaña Avanzado y en Clase CSS asigna lo siguiente:
  • ds-container
barra de promocion Divi

Paso 3 : 

Procede ahora dentro del módulo, a la pestaña de configuración general y pegue el siguiente código HTML en el área de contenido.

Nota: No trate de modificar el contenido del código. Lo único que puede modificar son los URL de enlace, Subtitulos, URL de imagen y texto alternativo.

HTML:

barra de promocion Divi

Paso 4: 

Lo siguiente es agregar el código CSS en tu hoja de estilo de tu tema hijo Divi . En caso de no tener un tema hijo Divi, pega el código en la sección de Opciones del Tema Divi en el ePanel de CSS personalizado.

barra de promocion Divi

Este es el resultado:

barra de promocion Divi

Extra… 

Este Css permite 6 imágenes /enlaces, pero si prefieres ajustar menos o mas imagenes, esta es la forma de hacerlo:

Calcula el ancho utilizando el Número de Imágenes, menos 1, multiplicado por el área visible que deseas mostrar, más el ancho de la imagen. Por ejemplo: (6-1)*100)+500=1000. Eso quiere decir que 5 imágenes ( ignora la primera dado que se muestra de forma predeterminada) tienen cada una un área visible de 100px de ancho y área clickeable con imagen activa siendo 500px de ancho

Y eso es todo!. Ahora podrás mantener tu sitio con un estilo dinámico y dejar a un lado el aburrido sistema de presentación de imágenes. Consulta nuestra sección de Documentación de Divi en español para encontrar más información acerca de Divi.

Tema hijo Divi y Plugins para mejorar el Diseño tu Pagina Divi

Suscríbete a nuestra Newsletter

Para recibir Actualizaciones, Promociones y Tutoriales

Felicitaciones! Te has suscrito a nuestra Newsletter correctamente.

Pin It on Pinterest

Share This