¡Bienvenido a la segunda parte de la publicación de blog sobre la aplicación indirecta de divisores de sección a filas y módulos! En la primera parte de esta publicación, aplicamos divisores de sección a las filas y creamos un diseño único e impresionante paso a paso. En la segunda parte de esta publicación, haremos lo mismo pero para los módulos.
Para este enfoque, crearemos dos versiones: una para escritorio y otra para tableta y teléfono. Aunque la versión para tableta y teléfono no es realmente necesaria, le ayudará a agregar un separador de sección a cada uno de los módulos individualmente en tamaños de pantalla más pequeños.
¡Hagámoslo!
Acercarse
- Estamos usando más o menos el mismo enfoque que usamos en la parte 1 de esta publicación.
- El divisor y el fondo de la sección tienen el mismo color.
- De esa manera, el divisor y el fondo de la sección se combinarán hasta que el divisor entre en contacto con otro color de fondo.
- En este caso, estamos aplicando los divisores de sección a los módulos de Blurb
- A diferencia de las filas, esto requerirá colocar el divisor encima del contenido de la sección.
- Para asegurarnos de que no se superponga con el contenido de nuestro módulo, agregaremos relleno superior adicional al módulo (en equilibrio con la altura del divisor)
- Puede optar por usar solo la versión de escritorio, pero si también desea aplicar el divisor de sección a cada módulo, tendrá que crear una versión separada para tableta y teléfono.
- La versión para tableta y teléfono colocará cada módulo en una nueva sección y tendrá un separador de sección dedicado a ese módulo en cuestión.
Recrear versión de escritorio
Agregar nueva sección
Color de fondo
Comenzaremos a crear la versión de escritorio primero. Esta versión contiene una sola sección. Después de agregar una sección normal, use ‘#abd7f2’ como color de fondo.
Divisor superior
Vaya a la pestaña Diseño a continuación y agregue el siguiente divisor (que contiene el mismo color que su sección):
- Estilo de divisor: Buscar en la lista
- Color del divisor: #abd7f2
- Altura del divisor: 182px
- Disposición de los divisores: en la parte superior del contenido de la sección
Visibilidad
Dado que crearemos una versión separada para tableta y teléfono, necesitaremos deshabilitar toda esta sección en el teléfono y la tableta en la subcategoría Visibilidad de la configuración de la sección.
Agregar nueva fila
Estructura de la columna
Una vez que haya terminado con la configuración de su sección, agregue una fila con la siguiente estructura de columna:
Agregue el módulo Blurb a la columna 1
Elegir icono
Agregaremos un módulo de Blurb a la primera columna de esta fila. Después de modificar la configuración de este módulo de Blurb, lo reutilizaremos para las columnas restantes. Agregue su contenido, abra la subcategoría Imagen e icono y seleccione el icono de su elección.
Color de fondo
Luego, agregue ‘#a95abc’ como color de fondo de su módulo de Blurb.
Configuración de iconos
Pase a la pestaña Diseño y cambie la apariencia de su icono:
- Color del icono: #ffffff
- Ubicación del icono: superior
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 52 px
Configuración del texto del título
A continuación, cambie la configuración del texto del título:
- Peso de la fuente del título: ultra negrita
- Alineación del texto del título: Centro
- Color del texto del título: #ffffff
- Tamaño del texto del título: 27px
Configuración del texto del cuerpo
También haremos algunas modificaciones al cuerpo del texto de nuestro Módulo Blurb:
- Alineación del cuerpo del texto: Centro
- Color del cuerpo del texto: #ffffff
Espaciado
Como puede notar en la pantalla de impresión a continuación, necesitaremos bastante relleno superior para este módulo de Blurb. Esto evitará que el divisor se superponga con el contenido que contiene su módulo de Blurb:
- Relleno superior: 150px
- Relleno derecho: 20px
- Relleno inferior: 50px
- Relleno izquierdo: 20px
Borde
Aplicaremos algunas esquinas redondeadas de ’20px’ en la parte inferior izquierda e inferior derecha a continuación.
Sombra de la caja
Para crear algo de profundidad, también puede habilitar la primera opción de sombra de cuadro dentro de su configuración.
Clonar el módulo Blurb y colocarlo en la columna 2
Cambiar color de fondo
Terminamos de modificar el Módulo de Blurb en la columna 1. Ahora podemos clonar este módulo, colocarlo en la segunda columna y cambiar su color de fondo a ‘#3c85c1’.
Clonar el módulo Blurb y colocarlo en la columna 3
Cambiar color de fondo
Clone el Módulo de Blurb una vez más, colóquelo en la columna 3 y use ‘#7277f9’ como color de fondo.
Recrear versión de tableta y teléfono
Agregar nueva sección
Color de fondo
La versión para tableta y teléfono requiere un enfoque más delicado. El divisor de sección sigue siendo parte de la sección, aunque no aparece al principio de la sección. En tamaños de pantalla más pequeños, los módulos de Blurb se mostrarán verticalmente en lugar de horizontalmente. Es por eso que agregaremos una sección separada para cada uno de los Módulos de Blurb. Agregue una nueva sección regular y, nuevamente, use ‘#abd7f2’ como color de fondo.
Divisor superior
Estamos usando el mismo divisor superior que usamos para la versión de escritorio:
- Estilo de divisor: Buscar en la lista
- Color del divisor: #abd7f2
- Altura del divisor: 182px
- Disposición de los divisores: en la parte superior del contenido de la sección
Espaciado
Agregaremos algo de relleno personalizado a esta sección a continuación:
- Relleno superior: 20px
- Relleno inferior: 0px
Visibilidad
Esta sección es parte de la versión para tabletas y dispositivos móviles, por lo que, naturalmente, desactivaremos esta sección en el escritorio dentro de la subcategoría Visibilidad.
Agregar nueva fila
Estructura de la columna
En lugar de usar una fila con dos columnas, usaremos una columna.
Clonar la columna 1 módulo Blurb de la versión de escritorio y colocar en la columna
Cambiar talla
Ya tenemos el módulo Blurb de escritorio que podemos clonar y colocar en esta columna. Lo único que tendremos que modificar es el Sizing:
- Ancho: 63 % (tableta), 99 % (teléfono)
- Alineación del módulo: Centro
Clonar toda la sección dos veces
Cambiar el color de fondo de los módulos de Blurb
Ahora, clona esta sección dos veces. Cambie el color de fondo de su segundo Módulo de Blurb a ‘#3c85c1’.
Del mismo modo, cambie el color de fondo de su tercer Módulo de Blurb a ‘#7277f9’.
Estilo divisor #2
Estilo de divisor superior
Puede aplicar diferentes estilos de divisores a este o cualquier otro diseño. Busque el siguiente estilo de divisor en la lista:
Estilo divisor #3
Estilo de divisor superior
También puede ir con el siguiente estilo de divisor:
Estilo divisor #4
Estilo de divisor superior
O el último estilo de divisor que requiere una mayor repetición horizontal de divisor de ’17x’.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final a los diferentes divisores de sección que hemos aplicado a los módulos de Blurb en este tutorial:
Pensamiento final
¡Eso es todo por esta publicación de dos partes! En la primera parte, le mostramos cómo agregar indirectamente divisores de sección a las filas. Acompañamos esa publicación con un diseño impresionante que hemos recreado paso a paso. En esta segunda parte, hemos cambiado el escenario y, en su lugar, hemos aplicado divisores de sección a los módulos. Para tener el mismo efecto en la tableta y el teléfono que en el escritorio, hemos creado dos versiones. Si tiene alguna pregunta, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!