Usar los iconos del módulo anuncio como separadores entre secciones en Divi
¿Para qué un botón divisor de sección?
Seguro que habéis visto en algunas web un icono o imagen entre dos secciones. Es un icono usualmente en un círculo de color completo o enmarcado por un círculo y se coloca entre dos secciones claramente distintas en una página. Esto es, un botón separador entre secciones.
Lo más probable es que el usuario haga clic en el icono, en cuyo caso la página se desplazará automáticamente hacia abajo para ocultar todas las secciones anteriores y hacer visible la siguiente sección en la parte superior de la página.
Como habrás adivinado, se suele utilizar para facilitar la navegación en páginas más largas o para fines meramente decorativos.
Ya vimos en otro tutorial otra forma de crear separadores de sección. Pulsa aquí si quieres recordarlo.
Puedes ver un ejemplo aquí abajo, un par de secciones donde el icono de un módulo anuncio actúa como separador. Haz clic en él y veras cómo se desplaza. Esto es lo que haremos en el tutorial de hoy.
Fíjate que esta sección está compuesta por dos filas. La fila superior está compuesta por una columna que contiene el módulo anuncio.
Sólo hemos usado este módulo de Divi para usar su icono. También puedes usar una imagen cualquiera y aplicar el mismo efecto.
A lo mejor te estás preguntando por qué he utilizado dos columnas en esta fila y la respuesta no puede ser más sencilla. Rellenar espacio.
Si pulsas en el botón te llevará a la sección donde esta el vídeo. Esto es porque en el campo URL del botón hemos puesto #video.
La estructura de nuestra propuesta
Puesto que vamos a crear un botón que actúe como elemento separador de secciones, necesitaramos al menos dos secciones. Abajo tienes la estructura de nuestra propuesta. Está numerada para que se vea con mayor claridad.
1.- Es la primera sección. Está compuesta por una columna y en ella un módulo deslizador/carrusel. Da igual el contenido de la sección, puedes usar un módulo llamada a la accion, un módulo de anchura completa o cualquiera que necesites.
2.- Es La Segunda sección necesaria para la práctica. Compuesta por dos filas En la parte superior de la sección está la fila que contiene el módulo anuncio.
3.- módulo anuncio, cuyo icono o imagen usaremos como separador.
Y una nueva fila donde pondremos mas contenido. El que consideres que necesitas. Yo he puesto en esta fila dos columnas de texto. Pero, por su puesto, tú puedes poner galerías, carruseles de posts, o lo que consideres oportuno. Así que vamos al grano.
Crear la Primera Sección
No tiene ningún misterio. Cuando creas una nueva página o entrada y pulsas el botón usar el contructor Divi, se crea automáticamente una sección estándar. Esta sección tiene una fila lista para insertar columnas y a continuación algún módulo.
Si quieres hacer el mismo ejemplo que propongo, crea un módulo deslizador y añade una imagen, algún título y algo de texto y guarda. Configúralo como quieras.
Configurar la Primera Sección
Ahora vamos a configurar la sección. Abre los ajustes de la sección y, dentro de la pestaña diseño, ve hasta la zona separación. Ahí, en relleno personalizado, inserta 0px en el campo superior y 0px en el campo base (inferior).
Configurar la Segunda Sección
Creamos la segunda sección y añadimos la primera fila, 1 columna, e insertamos un módulo anuncio. Guardamos y cerramos. Luego volveremos para configurar el módulo.
Abre los ajustes de la sección y configura las siguientes opciones.
Pestaña Contenido
Fondo: color #7ebec5, que es el mismo que usaremos como fondo del botón del módulo anuncio.
Pestaña Diseño
Vamos hasta la configuración de separación y en relleno personalizado ponemo 0px en los campos superior y base, como en la anterior sección.
Pestaña Avanzado
Si queremos que al pulsar alguno de los botones (en otra sección) naveguemos hasta esta sección, pondremos un nombre en Identificador CSS. En ese caso en el botón desde el que se acceda se pondrá en mismo nombre precedido del signo almoadilla (#ejemplo). Lo veremos más adelante.
Nuestro botón separador entre secciones
Es el momento de la configuración de nuestro módulo anuncio. De manera que accedemos a los ajustes y configuramos:
Pestaña Contenido
Texto: No ponemos nada, ni título ni contenido. Sólo nos interesa el icono.
Enlace: Si queremos desplazarnos a otra parte de la página (o a otra web) ponemos aquí la url. Si es a una sección, pondremos el nombre que pusimos en Identificador CSS de la sección precedido de #. Por ejemplo, si pusimos video, en la URL ponemos #video. En la opción siguiente, elegimos que se abra en la misma ventana la URL.
Imagen e icono: Activamos y seleccionamos un icono. No elijas uno circular, que vamos a darle contorno circula y lucirá poco.
De la pestaña contenido no necesitamos más. Activamos la siguiente pestaña dentro de la configuración del módulo anuncio.
Pestaña Diseño
Imagen e icono:
Color de icono: blanco
Activamos la casilla de icono circular.
Color del círculo, como el fondo de la sección: #7ebec5.
Mostrar borde del cículo, sí. Color, blanco.
Ubicación de la imagen o icono: Superior.
Marcamos también Usar tamaño de fuente de icono y ponemos 32 px.
Texto, bordes y sombra, no necesitamos ajustar nada.
Separación: margen personalizado >> Superior -41 px, Base: -50px
Animación >> Animación de la imagen o el icono >>Sin animación.
Guardar y salir
La última fila
Ya solo nos restaría crear la siguiente fila que en nuestra práctica contiene dos columnas con un módulo de texto cada una. Pon tú el contenido que creas conveniente y habremos acabado nuestro tutorial.
No te olvides de compartir si te ha gustado. ¡Gracias!
Puedes ver un poco más abajo el video tutorial si te parece más cómodo.
Hemos puesto aquí otro separador utilizando la misma técnica que en el de arriba. Pero, en esta ocasión, en lugar del icono del módulo anuncio, he optado por utilizar una imagen propia.
No tiene contorno como el icono de la sección del principio del tutorial. Hemos rellenado el fondo de la sección con el mismo color de circulo de nuestra imagen.
Como en otros ejercicios, te proporcionamos acceso al mismo tutorial, pero en versión vídeo, explicado también paso a paso en formato youtube. Lo tienes justo debajo de estas líneas. ¡Hasta el próximo tutorial DIVI!
