Crear diseños de página que interactúen no siempre es una tarea fácil. Además de centrarse en la experiencia del usuario, los principios de diseño y las tendencias de diseño, también debe crear algo que coincida con la marca de su empresa y cautive a sus visitantes a primera vista.
Si busca en nuestro blog, encontrará un montón de formas creativas de abordar su diseño web utilizando Divi y las versátiles opciones integradas de Divi. Hoy, estamos agregando otro enfoque creativo a esa lista. Le mostraremos cómo superponer de forma creativa los bordes de las filas para crear un diseño impresionante. Nos estamos asegurando de tener el mismo tipo de diseño en todos los tamaños de pantalla.
¡Hagámoslo!
Suscríbete a nuestro canal de Youtube
Crearemos un ejemplo desde cero, pero antes de sumergirnos en él, echemos un vistazo al resultado final en diferentes tamaños de pantalla.
Descargar fuente Mighttype gratis
Lo primero que debe hacer es descargar la fuente gratuita Mighttype con letras a mano de AF Studio. Vaya al siguiente enlace y habilite la descarga gratuita por correo electrónico.
Agregar nueva sección
Espaciado
Una vez que haya descargado la fuente gratuita mencionada en el paso anterior, puede continuar y crear una nueva página. Después de hacerlo, habilite Visual Builder, abra la primera sección de su nueva página y agregue algo de relleno personalizado:
- Relleno superior: 250px
- Relleno inferior: 250px
Agregar nueva fila
Estructura de la columna
Necesitaremos dos filas en total. Comenzaremos con el primero y lo clonaremos después una vez que esté hecho. Agrega una nueva fila a tu sección usando la siguiente estructura de columnas:
Fondo degradado de la columna 1
Sin agregar ningún módulo todavía, abra la configuración de su fila y agregue el siguiente fondo degradado de la columna 1:
- Color 1: #ffffff
- Color 2: rgba(0,255,233,0.25)
- Tipo de gradiente de columna: Radial
- Columna Radial Dirección: Izquierda
- Posición de inicio de columna: 59%
- Posición final de columna: 59%
- Columna Coloque el degradado sobre la imagen de fondo: Sí
Patrón de fondo de la columna 1
Continúe guardando el siguiente patrón en su computadora y cárguelo como su imagen de fondo de la columna 1:
Una vez que haya cargado el patrón, utilice la siguiente configuración de imagen de fondo:
- Tamaño de la imagen de fondo de la columna: tamaño real
- Repetición de la imagen de fondo de la columna: Espacio
Alineación de filas
Habilite también la alineación de filas a la derecha.
Dimensionamiento
También estamos usando algunas configuraciones de tamaño personalizadas para esta fila:
- Usar ancho personalizado: Sí
- Ancho personalizado: 950px
Espaciado
Estos son los valores de espaciado que necesita agregar a continuación:
- Margen inferior: 100px
- Margen derecho: -30px (tableta y teléfono)
- Relleno superior: 0px
- Relleno inferior: 0px
Borde
Por último, pero no menos importante, agregue un borde en la parte superior, izquierda e inferior de su fila:
- Ancho del borde: 14px
- Color del borde: #000000
- Estilo de borde izquierdo: Doble
Agregar módulo de texto de título
Agregar copia H2
¡Ahora podemos comenzar a agregar nuestros módulos! Agregue un módulo de texto de título y asegúrese de que su copia sea H2.
Color de fondo
Vamos a interrumpir el borde izquierdo de nuestra fila agregando un color de fondo blanco al Módulo de texto.
Subir fuente Mightype
A continuación, busque la fuente Mighttype en su computadora y cárguela en su biblioteca de fuentes haciendo clic en el botón de carga en su lista de fuentes.
Seleccione el archivo de fuente Mighttype, asigne un nombre a su fuente y súbalo a su biblioteca de fuentes.
Configuración de texto H2
Una vez que haya agregado la nueva fuente, continúe y realice otros cambios en la configuración de texto H2:
- Encabezado 2 Fuente: Mighttype
- Color del texto del encabezado: #000000
- Título 2 Tamaño del texto: 150 px (escritorio), 100 px (tableta), 60 px (teléfono)
Espaciado
Para cada uno de los módulos que desee superponer a los bordes de las filas, deberá agregar un margen negativo. Este margen negativo solo afectará al módulo en cuestión, no a la fila en la que se colocó. El margen negativo que deberá agregar depende de la cantidad de caracteres que se usen en su copia.
- Margen superior: 200px
- Margen inferior: 100px
- Margen Izquierdo: -35%
- Relleno superior: 50px
- Relleno inferior: 50px
Modo de mezcla
Y para asegurarse de que el color de fondo del Módulo de texto solo afecte el borde de la fila, y no el fondo de la columna 1, habilite el Modo de fusión ‘Multiplicar’ en la configuración de Filtros.
Agregar módulo de texto de descripción
Color de fondo
Justo debajo del título Módulo de texto, continúe y agregue una descripción Módulo de texto con un color de fondo blanco.
Configuración de texto
Ve a la configuración de texto y haz algunos cambios:
- Tamaño del texto: 22 px (escritorio), 18 px (tableta), 15 px (teléfono)
- Altura de la línea de texto: 1,8 em
- Orientación del texto: Centro
Dimensionamiento
Disminuya el tamaño de este módulo de texto a ‘96%’ a continuación.
Espaciado
Añade algo de espacio también:
- Margen inferior: 200px
- Margen Izquierdo: -50%
- Relleno superior: 20px
- Relleno inferior: 20px
Modo de mezcla
Y use el modo de fusión ‘Multiplicar’ aquí también.
Clonar Fila
¡Hemos terminado de modificar la primera fila! Vamos a crear el mismo resultado pero en el otro lado de la página. Para ahorrarnos algo de tiempo, clonaremos la fila que ya tenemos y haremos algunos cambios en el camino.
Cambiar configuración de fila
Fondo degradado de la columna 1
Lo primero que deberá cambiar es el fondo degradado de la columna 1:
- Color 2: rgba(255,187,0,0.33)
- Dirección radial de la columna: Derecha
Alineación de filas
Queremos que la fila aparezca en el otro lado, por eso elegiremos Alineación de fila izquierda.
Espaciado
También estamos ajustando la configuración de Espaciado:
- Margen izquierdo: -25 % (tableta y teléfono)
Borde
Elimine el borde izquierdo que se aplicó a su fila y aplíquelo al lado derecho en su lugar:
- Ancho del borde derecho: 14px
- Color del borde derecho: #000000
- Estilo de borde derecho: Doble
Cambiar la configuración del módulo de texto del título
Espaciado
Cambie la configuración de espaciado de su módulo de texto de título a continuación:
- Margen izquierdo: 52 % (computadora de escritorio y tableta), 58 % (teléfono)
- Margen derecho: -52 % (computadora de escritorio y tableta), 58 % (teléfono)
Cambiar la configuración del texto de descripción
Espaciado
Por último, pero no menos importante, la descripción del módulo de texto también necesita otros valores de espaciado:
- Margen Izquierdo: 50%
- Margen Derecho: -50%
Avance
Ahora que hemos seguido todos los diferentes pasos, echemos un vistazo final al resultado final en diferentes tamaños de pantalla.
Pensamientos finales
La superposición de bordes de fila con las opciones integradas de Divi puede brindarle a su sitio web la personalización que podría haber estado buscando. En esta publicación, le mostramos exactamente cómo hacerlo. Hemos recreado un hermoso ejemplo desde cero. ¡Este ejemplo se ve muy bien en todos los tamaños de pantalla y solo hemos usado las opciones integradas de Divi! Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!