Tutorial Divi: Imagen flotante entre secciones

Las secciones del tema Divi permiten muchas personalizaciones pero por defecto una imagen está en una sección o en la siguiente, no hay manera de hacer que una imagen, por ejemplo el logo de tu empresa, flote entre medias de dos secciones. Pero se puede hacer de manera bastante sencilla.

Añadiendo una imagen flotante entre secciones de Divi

Vamos a ello, solo tienes que seguir los siguientes pasos:

1. Añade una nueva sección de ancho completo

Simplemente pulsa en el enlace para crear una sección estándar y eliges la fila de ancho completo.

1-nueva-seccion-estandar-divi

2. Abre los ajustes de la sección y añade la siguiente clase CSS

En el menú de ajustes de la sección ve a la pestaña de CSS Personalizado y en el apartado Clase CSS escribe lo siguiente:

2-clase-css-seccion-divi

Guarda los cambios de estos ajustes.

3. Pon el relleno personalizado a 0 en la sección y en la fila

Antes de seguir, tanto en los ajustes de la sección como de la fila pon a cero (0) el relleno personalizado superior y base.

3-relleno-personalizado-divi

Como siempre guarda los cambios.

4. Añade un módulo de texto

4-nuevo-modulo-texto-divi

5. Añade tu imagen en el módulo de texto

Al elegir el módulo de texto se abre al instante. Cambia la Orientación del texto a Centro y añade en el editor la imagen que quieras que flote, mejor si es de fondo transparente claro.

5-insertar-logo-en-modulo-texto-divi

6. Añade la clase CSS al módulo de texto

Sin salir del módulo de texto ve a la pestaña de CSS Personalizado y añade la siguiente clase CSS:

6-clase-css-modulo-texto-divi

Ahora guarda los cambios.

7. Haz una copia de toda la sección

Para poder usarla en otras partes clona la sección recién creada.

7-clonar-seccion-divi

8. Añade la clase CSS al módulo de texto clonado

Abre los ajustes del módulo de texto de la sección que acabas de clonar y en la pestaña de CSS Personalizado añade la siguiente clase CSS.

8-clase-css-logo-secciones

La idea de esta nueva clase CSS en el módulo clonado es que luego haremos que sea un poco más pequeña que la principal, por eso se la cambiamos.

9. Mueve las secciones a su ubicación

Ahora moveremos las secciones creadas a las ubicaciones entre las que queramos que floten. La idea es que la primera sección creada (la original) esté bajo la cabecera,  y la clonada entre el resto de secciones. También puedes hacer tantas copias como quieras de esta segunda sección y colocarlas entre cada dos secciones.

9-mover-secciones-divi

Nota importante: El fondo de las nuevas secciones debe ser el mismo que el de las secciones anterior y siguiente a donde las coloques para que el efecto sea perfecto.

10. La magia del CSS

Ya solo nos queda crear las clases CSS que anteriormente hemos nombrado, para ello ve a la administración de WordPress y en Divi -> Opciones del tema -> CSS Personalizado, añade lo siguiente:

10-css-personalizado-divi

¡Ya está!

Guarda todos los cambios, actualiza tu página y comprueba que los logos recién creados flotan entre las secciones. El primero algo más grande que el resto.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (13 votos, promedio: 11,77 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.

Autor del libro WordPress – La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

LOS BURÓCRATAS DE LA UE ME EXIGEN QUE TE DIGA QUE SI VISITAS AYUDA WORDPRESS PUEDES RECIBIR ALGUNA COOKIE. AQUÍ NO HAY COOKIES DE PUBLICIDAD, COMO LAS QUE SI TE DEJAN GOOGLE, AMAZÓN Y MONTÓN DE SITIOS, SIN AVISAR, PERO EL QUE TE TENGO QUE AVISAR SOY YO. LAS COOKIES QUE TE DEJA AYUDA WORDPRESS SON PARA FACILITARTE LA NAVEGACIÓN, COMPARTIR Y COMENTAR. SI NO QUIERES RECIBIR COOKIES PUEDES NAVEGAR EN MODO PRIVADO, ABANDONAR ESTE SITIO Y PERDERTE EL CONTENIDO GRATIS QUE COMPARTO CADA DÍA SOBRE WORDPRESS O IRTE A UNA ISLA DESIERTA PARA VIVIR AISLADO DEL MUNDO, ESO SÍ, SIN COOKIES. O SINO, SIMPLEMENTE CIERRA ESTA VENTANA COÑAZO Y SIGUE DISFRUTANDO DEL BLOG. SI TIENES CURIOSIDAD SOBRE ESTO DE LAS COOKIES TE DEJO UN ENLACE >> MÁS INFORMACIÓN

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar