Cómo crear diseños de esquinas flotantes para contenido en Divi

Vistazo

Aquí hay un adelanto de los posibles diseños de esquinas flotantes de este tutorial.

Descargue el diseño de ejemplos de diseño de borde flotante GRATIS

Para poner sus manos en el diseño de diseños de borde flotante, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder .

Ahora vamos al tutorial, ¿de acuerdo?

Empezando

Lo único que necesitas para este tutorial es Divi. Construiremos estos ejemplos desde cero en la parte frontal de Divi Builder.

Para comenzar, crea una nueva página y dale un título a tu página. Haga clic para usar Divi Builder en el front-end 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 a 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: 640 px

Relleno personalizado: 0 px arriba, 0 px abajo

Luego agregue un módulo de texto a la fila y actualice lo siguiente:

Texto Tamaño del texto: 20 px

Altura de la línea de texto: 1,8 em

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 % a la izquierda, 10 % a la derecha Relleno

personalizado (teléfono): 20 % arriba, 20 % abajo

Ancho del borde: 4 px

Color del borde: #eeeeee

El margen personalizado y el relleno 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 arrastrará esos divisores hasta la mitad del módulo de texto para lograr un bonito diseño simétrico (ya verá).

Adición de los dos divisores de esquina flotantes superiores

Con el módulo de texto en su lugar, podemos comenzar a agregar los dos diseños de esquinas flotantes superiores usando 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 quieras)

Alto: 50px

Ancho: 50px

La altura y el ancho de 50 px 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:

Sombra de cuadro: ver captura de pantalla

Posición vertical de sombra de cuadro: 0px

Fuerza de desenfoque de sombra de cuadro: 0px

Fuerza de propagación de sombra de cuadro: 20px

Color de sombra: #ffffff

Para asegurarnos de que el módulo divisor permanezca sobre el 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:

Elemento principal CSS:

Luego actualice el índice Z a 1.

A continuación, duplique el módulo divisor y actualice la configuración del divisor duplicado de la siguiente manera:

Alineación del módulo: derecha

Margen personalizado: -50px superior

Esto alinea el divisor a la derecha y lo eleva a la altura exacta del módulo divisor que se encuentra sobre él. Esto crea la ubicación de esquina exacta que estamos buscando.

Agregar los divisores de esquina inferiores

Para agregar los dos divisores de la 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 (asegúrese de que el divisor izquierdo permanezca apilado sobre el divisor derecho como se muestra en la imagen abajo).

¡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 una plantilla en el futuro. Pero por ahora, dupliquemos la sección y exploremos un nuevo diseño.

Formas de diamantes 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. A continuación, haga clic en el icono de engranaje de configuración en uno de los divisores seleccionados para implementar el modal de configuración del elemento. Puede ser útil usar el modo de clic para este paso.

En la configuración del elemento, actualice lo siguiente:

Fondo degradado Color izquierdo: #7cda24

Fondo degradado Color derecho: #edf000

Dirección del degradado: 45 grados

Luego use las opciones de transformación para rotar el divisor en forma de diamante.

Transformar Rotar eje Z: 45 grados

Aquí está el diseño final.

Divisores sesgados

También puede usar la opción de sesgar de transformación para sesgar los divisores para obtener un diseño aún más exclusivo. Puede agregar un diseño de sesgo separado para cada divisor, o usar la 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 un diseño de esquina flotante único. Aquí hay un ejemplo del módulo de texto con un color de fondo de #002130 que usa la rotación o sesgo sin transformación.

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

Círculo de esquinas flotantes

Para convertir esas esquinas cuadradas en círculos, puede agregar el siguiente fragmento de CSS personalizado al elemento principal de cada divisor:

Dado que los divisores son de 50 px por 50 px, esto creará un diseño de círculo perfecto.

Como puede ver, hay muchas maneras diferentes de modificar estos elementos para obtener innumerables diseños de esquinas nuevos.

Ahora, exploremos el uso de íconos publicitarios para esquinas flotantes en lugar de módulos divisores.

Creación de esquinas flotantes con iconos de Blurb

Agregar íconos de Blurb a cada esquina del módulo de texto puede brindarle diseños aún más exclusivos. Puede usar la misma plantilla de diseño que construimos al comienzo del tutorial. La única diferencia será usar módulos publicitarios en lugar de módulos divisorios 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 debajo del módulo de texto.

Adición de las dos esquinas superiores del icono de publicidad

Dado que solo vamos a querer usar el módulo de publicidad para mostrar un solo ícono, debemos asegurarnos de obtener el tamaño y el espacio correctos.

Agregue un módulo de publicidad sobre el módulo de texto y elimine el título y el cuerpo del texto. 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 publicidad (esta configuración es muy similar a la configuración que agregamos al módulo divisor en el primer ejemplo):

Color de fondo: #ffffff

Icono Tamaño de fuente: 50 px

Ancho: 50 px

Margen personalizado: 0 px inferior

Esquinas redondeadas: 50 %

Sombra de cuadro: ver captura de pantalla

Posición vertical de sombra de cuadro: 0 px

Fuerza de desenfoque de sombra de cuadro: 0 px

Intensidad de propagación de sombra de cuadro: 20 px

Color de sombra: # ffffff

Elemento principal CSS:

Imagen de Blurb CSS:

Índice Z: 1

A continuación, duplique el módulo de publicidad para crear otro justo debajo de la publicidad actual y actualice lo siguiente:

Alineación del módulo: derecha

Margen personalizado: -50px arriba

A continuación, copie los dos módulos de publicidad superiores y péguelos debajo del módulo de texto (asegurándose de que la publicidad de la izquierda permanezca apilada sobre la publicidad de la derecha).

Luego puede actualizar los íconos para cada propaganda a lo que quiera.

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.

Aquí hay un ejemplo del diseño que usa un color de fondo oscuro para el módulo de texto y diferentes colores de íconos.

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 del constructor Divi. 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 escuchar de usted en los comentarios.

¡Salud!