Cómo crear diseños de esquinas flotantes para contenido en Divi
Publicado: 2019-04-11Crear diseños de esquinas flotantes es una manera simple y fácil de agregar un poco de estilo creativo a los módulos Divi que quizás no hubiera pensado que fuera posible sin un código personalizado. ¡Buenas noticias! Con Divi, puede usar divisores y difuminaciones para diseñar las cuatro esquinas de su módulo usando las opciones integradas de Divi. Y puede ser muy divertido probar las diferentes posibilidades.
En este tutorial, le mostraré cómo crear diseños de esquinas flotantes para su contenido en Divi. Una vez que tenga los elementos en su lugar, puede diseñar esas esquinas con innumerables formas, íconos y colores.
¡Empecemos!
Vistazo
Aquí hay un adelanto de los posibles diseños de esquinas flotantes de este tutorial.
Descargue GRATIS el diseño de ejemplos de diseño de borde flotante
Para poner sus manos en el diseño de los diseños de borde flotante, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.
Ahora vayamos al tutorial, ¿de acuerdo?
Empezando
Lo único que necesita para este tutorial es Divi. Construiremos estos ejemplos desde cero en la parte frontal de Divi Builder.
Para comenzar, cree una nueva página y asigne un título a su página. Haga clic para usar Divi Builder en la interfaz y elija la opción "Construir desde cero".
¡Ahora estás listo para ir!
Creación de la plantilla de diseño de diseño de esquina flotante
Dado que habrá innumerables posibilidades de diseño con este diseño, tiene sentido crear el diseño básico (o plantilla) para trabajar.
Para esta plantilla, agregaremos cuatro divisores en cada esquina de un módulo de texto. Luego, una vez que el diseño esté en su lugar, podrá explorar nuevas formas de personalizar esos divisores para diseños únicos.
Primero, cree una nueva sección regular con una fila de una columna.
Antes de agregar el módulo de texto, actualice la configuración de la fila de la siguiente manera:
Ancho personalizado: 640px
Relleno personalizado: 0px arriba, 0px abajo
Luego agregue un módulo de texto a la fila y actualice lo siguiente:
Tamaño del texto del texto: 20px
Altura de la línea de texto: 1.8em
Margen personalizado: -25 px arriba, -25 px abajo, 25 px a la izquierda, 25 px a la derecha
Relleno personalizado (escritorio): 10% arriba, 10% abajo, 10% izquierda, 10% derecha
Relleno personalizado (teléfono): 20% superior, 20% inferior
Ancho del borde: 4px
Color del borde: #eeeeee
El margen y el relleno personalizados ayudarán a alinear nuestros módulos divisores que agregaremos en breve. Dado que los divisores tendrán una altura y un ancho de 50 px, el margen superior e inferior de -25 px colocará esos divisores hasta la mitad del módulo de texto para obtener un diseño simétrico agradable (verás).
Adición de los dos divisores de esquinas flotantes superiores
Con el módulo de texto en su lugar, podemos comenzar a agregar los dos diseños de esquinas flotantes superiores utilizando módulos divisores.
Cree un nuevo módulo divisor y arrástrelo a la parte superior del módulo de texto.
Luego, actualice la configuración del divisor de la siguiente manera:
Mostrar divisor: NO
Color de fondo: # 7cda24 (o el color que desee)
Alto: 50px
Ancho: 50px
La altura y el ancho de 50px nos dan el cuadrado perfecto que podemos usar para nuestro borde flotante.
Ahora, agregue una sombra de cuadro al divisor para crear el efecto flotante de la siguiente manera:
Box Shadow: ver captura de pantalla
Posición vertical de la sombra del cuadro: 0px
Fuerza de desenfoque de sombra de caja: 0px
Fuerza de propagación de la sombra de caja: 20px
Color de sombra: #ffffff
Para asegurarnos de que el módulo divisor permanezca encima del módulo de texto (y no se oculte detrás de él), debemos agregar un fragmento de CSS al elemento principal de la siguiente manera:
CSS del elemento principal:
position: relative
Luego actualice el índice Z a 1.
A continuación, duplique el módulo divisor y actualice la configuración del divisor duplicada de la siguiente manera:
Alineación del módulo: derecha
Margen personalizado: -50 px en la parte superior
Esto alinea el divisor a la derecha y lo eleva a la altura exacta del módulo divisor que se encuentra encima de él. Esto crea la ubicación exacta de la esquina que estamos buscando.
Agregar los divisores de esquina inferiores
Para agregar los dos divisores de esquina inferior, implemente el modo de vista de estructura alámbrica y copie los divisores izquierdo y derecho que acaba de crear y péguelos debajo del módulo de texto (asegurándose de que el divisor izquierdo permanezca apilado en la parte superior del divisor derecho como se muestra en la imagen debajo).
¡Eso es todo! Veamos el diseño final de nuestro diseño básico.
Explorando nuevos diseños de esquinas flotantes
Con esta plantilla en su lugar, podemos explorar algunos diseños diferentes que son posibles. Puede guardar esta sección completa en la biblioteca Divi para que pueda mantenerla como plantilla en el futuro. Pero por ahora, dupliquemos la sección y exploremos un nuevo diseño.
Formas de diamante con fondos degradados
Con un duplicado de nuestra plantilla en su lugar, use la función de selección múltiple para seleccionar los cuatro módulos divisores. Luego haga clic en el icono de engranaje de configuración en uno de los divisores seleccionados para implementar el modo de configuración del elemento. Puede ser útil utilizar el modo de clic para este paso.
En la configuración del elemento, actualice lo siguiente:
Color de fondo degradado a la izquierda: # 7cda24
Color de fondo degradado a la derecha: # edf000
Dirección del gradiente: 45 grados
Luego use las opciones de transformación para rotar el divisor en forma de diamante.
Transformar Girar eje Z: 45 grados
Aquí está el diseño final.
Divisores sesgados
También puede usar la opción Transformar sesgo para sesgar los divisores y obtener un diseño aún más exclusivo. Puede agregar un diseño de sesgo separado para cada divisor o usar selección múltiple para actualizar el sesgo de transformación para los cuatro al mismo tiempo en -37 grados en los ejes X e Y.
Así es como se vería.
Diseños de fondo oscuro
Incluso puede experimentar agregando un color de fondo oscuro al módulo de texto para obtener un diseño de esquina flotante único. Aquí hay un ejemplo del módulo de texto con un color de fondo de # 002130 usando el sin una transformación, rotar o sesgar.
Esquinas de borde redondeado
Para poner algunas esquinas redondeadas en el diseño, simplemente puede agregar esquinas redondeadas a la fila de la siguiente manera:
Esquinas redondeadas: 20px
Esquinas flotantes circulares
Para convertir esas esquinas cuadradas en círculos, puede agregar el siguiente fragmento de CSS personalizado al elemento principal de cada divisor:
border-radius: 50%;
Dado que los divisores son de 50 px por 50 px, esto creará un diseño de círculo perfecto.
Como puede ver, hay un montón de formas diferentes en las que puede modificar estos elementos para obtener innumerables diseños de esquinas nuevos.
Ahora, exploremos el uso de iconos de propaganda para esquinas flotantes en lugar de módulos divisores.
Creación de esquinas flotantes con iconos de propaganda
Agregar íconos de Blurb a cada esquina del módulo de texto puede brindarle diseños aún más únicos. Puede usar la misma plantilla de diseño que creamos al comienzo del tutorial. La única diferencia será el uso de módulos de propaganda en lugar de módulos divisores para las cuatro esquinas.
Continúe y obtenga un duplicado de la plantilla de diseño de sección implementada.
Luego elimine los módulos divisores arriba y abajo del módulo de texto.
Agregar las dos esquinas superiores del icono de propaganda
Dado que solo vamos a querer usar el módulo de propaganda para mostrar un solo ícono, debemos asegurarnos de que el tamaño y el espaciado sean correctos.
Agregue un módulo de propaganda sobre el módulo de texto y elimine el título y el texto del cuerpo. Luego haga clic para usar un ícono en lugar de una imagen y seleccione el ícono circular de Facebook.
Luego actualice la siguiente configuración de propaganda (esta configuración es muy similar a la configuración que agregamos al módulo divisor en el primer ejemplo):
Color de fondo: #ffffff
Tamaño de fuente del icono: 50px
Ancho: 50px
Margen personalizado: 0px inferior
Esquinas redondeadas: 50%
Box Shadow: ver captura de pantalla
Posición vertical de la sombra del cuadro: 0px
Fuerza de desenfoque de sombra de caja: 0px
Fuerza de propagación de la sombra de caja: 20px
Color de sombra: #ffffff
CSS del elemento principal:
position: relative;
CSS de la imagen de Blurb:
margin-bottom: 0px
Índice Z: 1
A continuación, duplique el módulo de propaganda para crear otro justo debajo de la propaganda actual y actualice lo siguiente:
Alineación del módulo: derecha
Margen personalizado: -50 px en la parte superior
Luego copie los dos módulos de propaganda superiores y péguelos debajo del módulo de texto (asegurándose de que la propaganda de la izquierda permanezca apilada sobre la propaganda de la derecha).
Luego, puede actualizar los íconos de cada propaganda a lo que desee.
Aquí está el diseño final.
Explore más diseños con las esquinas flotantes de Blurb Icon
Con esta configuración, puede explorar muchos diseños únicos. Puede cambiar los íconos, usar diferentes combinaciones de colores e incluso escalarlos o rotarlos con opciones de transformación.
A continuación se muestra un ejemplo del diseño que utiliza un color de fondo oscuro para el módulo de texto y diferentes colores de iconos.
Funciona en diseños de columnas múltiples
Siempre que mantenga los elementos juntos, puede agregar estos diseños de esquinas flotantes en varias columnas.
Terminando
La creación de diseños de esquinas flotantes para su contenido en Divi realmente muestra el poder de Divi Builder. Con todas las opciones integradas disponibles, puede crear innumerables variaciones de diseño a partir de una plantilla de diseño básica. Espero que esto te inspire a divertirte explorando nuevos diseños propios.
Espero tener noticias tuyas en los comentarios.
¡Salud!