Cómo crear modelos de esquina flotante para contenido en la división

Crear modelos de esquina flotante es una manera simple y fácil de agregar un poco de estilo creativo a los módulos de división, que es posible que no haya pensado que sea posible sin un código personalizado. ¡Buenas noticias! Con Div, puede usar separadores y borrones para estilizar sus cuatro esquinas de su módulo utilizando el div. Y puede ser bastante divertido probar las diferentes posibilidades. En este tutorial, le mostraré cómo crear modelos de esquina flotantes para su contenido en el Div. Una vez que tenga los elementos en el lugar, ¡puede estilizar esas esquinas con innumerables formas, íconos y colores!
¡Vamos a empezar! Tire con el ojo aquí hay una breve mirada a los posibles proyectos de esquina flotante en este tutorial.

Descargue el diseño de forma gratuita con el diseño del diseño de borde flotante para poner su mano en la apariencia de los bordes flotantes, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar el archivo

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Ahora pasemos al tutorial, ¿no? Nociones básicas Lo único que necesita para este tutorial es Div. Construiremos estos ejemplos desde cero en la parte delantera de Divi Builder. Para comenzar, cree una nueva página y dé a la página un título. Haga clic para usar Divi Builder en la parte delantera y elija la opción “Construir desde cero”. ¡Ahora estás listo para irte! Creando la plantilla de apariencia para el diseño de la esquina flotante porque habrá innumerables posibilidades de diseño con este diseño, es lógico crear la apariencia básica (o temperatura) para funcionar.
Para esta plantilla, agregaremos cuatro divisores a cada esquina de un módulo de texto. Luego, una vez que la apariencia esté en su lugar, podrá explorar nuevas formas de personalizar estos separadores para modelos únicos. Primero, cree una nueva sección común con una fila con 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 Interferencia personalizada: 0 PX hacia arriba, 0 PX hacia abajo y luego agregue un módulo de texto en una fila y actualice lo siguiente: Tamaño del texto: 20 PX Altura de texto: 1 , 8EM Margen personalizado: -25 px arriba, 25 px de abajo, 25 px izquierda, 25 px trenza personalizada (escritorio): 10% más, 10% de abajo, 10% izquierda, 10% alineación personalizada derecha (teléfono): 20% arriba , 20% por el ancho del borde: 4 PX Color Edge: #EEEEEE

El margen personalizado y el revestimiento ayudarán a alinear nuestros módulos de separación que agregaremos pronto. Debido a que los separadores tendrán una altura y un ancho de 50 px, el margen superior e inferior -25 PX atraerá a estos separadores en el medio del texto para un hermoso diseño simétrico (ya verá). Agregando los dos primeros divisores de esquina flotante con el módulo de texto en la posición, podemos comenzar a agregar los dos primeros modelos de esquina flotante utilizando módulos divisores. Cree un nuevo modo divisor y tírelo a la parte superior del módulo de texto.

Luego actualice la configuración del divisor de la siguiente manera:

Divisor del espectáculo: no

Color de fondo: # 7CDA24 (o cualquier color que desee) Altura: 50 PX Ancho: 50 PX
La altura y el ancho de 50 PX nos brindan el cuadrado perfecto que podemos usar para nuestro borde flotante. Ahora, agregue un tono de caja al divisor para crear el efecto flotante de la siguiente manera: Box Sombra: Vea la Caja Sombra Posición vertical: 0px Potencia de la sombra de la caja: 0 PX Potencia de la sombra de la caja: 20 PX Color de sombra : # ffffff

Para garantizar que el módulo divisor permanezca por encima del módulo de texto (y no se esconde detrás de él), debemos agregar un fragmento CSS al elemento principal de la siguiente manera: CSS principal: Posición: Relativo y luego actualice el índice Z a 1.

Luego copie el módulo Divisor y actualice la configuración del divisor duplicada de la siguiente manera: Alineación del módulo: Matrimonio personalizado correcto: -50 PX de sus

Alinea el divisor a la derecha y lo empuja a la altura exacta del módulo divisor colocado sobre él. Esto crea la colocación exacta de la esquina que estamos buscando. Agregar los divisores de la esquina inferior para agregar los dos separadores de la esquina inferior, implementar el modo de visualización de la estructura alámbrica y copiar los separadores izquierdo y derecho que acaba de crear y pegarse debajo del módulo de texto (asegurándose de que el separador izquierdo permanezca apilado sobre el divisor derecho como se muestra. en la imagen a continuación).
¡Eso es todo! Verifiquemos el diseño final de nuestra apariencia básica.

Explorando los nuevos modelos de esquina flotante con esta plantilla, podemos explorar algunos modelos diferentes que son posibles. Puede guardar toda la sección en la biblioteca de la Divica, 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 fondo de gradiente con un duplicado de nuestra plantilla, use la función de elección multise para seleccionar los cuatro módulos divisor. Luego haga clic en la configuración del icono de la rueda en uno de los separadores seleccionados para implementar la configuración modal del elemento. Puede usar el modo de clic para este paso.

En la configuración del elemento, actualice lo siguiente: Color de fondo zurdo: # 7CDA24 Color del fondo derecho degradado: # EDF000 Dirección de gradiente: 45 Gradea Use opciones de transformación para rotar el separador en forma de diamante. Rotar el eje de transformación Z: 45 grados


Aquí está el diseño final.

Los divisores inclinados también pueden usar la opción de inclinación de transformación para distorsionar los separadores para un diseño aún más único. Puede agregar un diseño de inclinación separado para cada divisor, o usar el múltiple selección para actualizar la inclinación de la transformación para los cuatro al mismo tiempo que -37 grados en el eje x e y.

Así es como se vería.

Modelos de fondo oscuro que 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 de un modo de color de texto # 002130 usando rotación o inclinación sin transformación.

Esquinas de borde redondeadas Para poner algunas esquinas redondeadas en el diseño, simplemente puede agregar esquinas redondeadas de la siguiente manera: esquinas redondeadas: 20 px

Las esquinas flotantes círculos para convertir esas esquinas cuadradas en círculos, puede agregar el siguiente fragmento CSS personalizado al elemento principal de cada divisor: Border-radio: 50%;

Debido a que los separadores tienen 50 px con 50 px, esto creará un diseño de círculo perfecto.

Como puede ver, hay muchas formas diferentes en que puede cambiar estos elementos para innumerables nuevos modelos de esquina. Ahora, exploremos el uso de iconos de propaganda para esquinas flotantes en lugar de módulos divisores. Crear esquinas flotantes con iconos de propaganda que agregan iconos de propaganda en cada esquina del módulo de texto pueden ofrecerle modelos aún más únicos. Puede usar la misma plantilla de apariencia que construí 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 sección implementada. Agregando las dos primeras esquinas del icono de la propaganda, ya que querremos usar solo el módulo de la propaganda para mostrar un solo icono, debemos asegurarnos y obtener el tamaño y el espacio 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 icono en lugar de una imagen y seleccione el icono del círculo de Facebook.

Luego actualice la siguiente configuración de la propaganda (estas configuraciones son muy similares a la configuración que hemos agregado al módulo divisor en el primer ejemplo): Wallpaper: #FFFFF Font Size Icono: 50 PX Ancho: 50 PX Margen personalizado: 0 PX desde abajo redondeado esquinas: 50% Box Sombra: Ver Captura de pantalla Sombra vertical Publicación: 0px Potencia de la sombra de la caja: 0 PX Potencia de la sombra de la caja: 20 PX Color de sombra: #ffffffffffffem elemento principal CSS: Posición: relativo;

Imagen de blurb CSS: Bottom de margen: 0px

IND ÍNDICE: 1

Luego, copie el módulo de la propaganda para crear otro justo debajo de la propaganda actual y actualice lo siguiente: Módulo de alineación: Margen personalizado derecho: -50 PX desde arriba Copie los dos módulos de la propaganda superior y péguelos debajo del módulo de texto (asegurándose de que la propaganda izquierda permanece apilado por encima de la propaganda derecha). Luego puede actualizar los iconos para cada propaganda en lo que desee. Aquí está el diseño final.

Explore varios modelos con esquinas flotantes del icono de la propaganda con esta configuración Puede explorar muchos modelos únicos. Puede cambiar los iconos, puede usar diferentes combinaciones de colores e incluso puede escalarlos o ruedas con opciones de transformación. Aquí hay un ejemplo de diseño que utiliza un color de fondo oscuro para el módulo de texto y diferentes colores del icono.

Funciona en aspectos con múltiples columnas siempre que mantenga los elementos juntos, puede agregar estos aspectos de la esquina flotante a varias columnas.
La conclusión de la creación de proyectos de esquina flotante para su contenido en el Divin realmente muestra el poder del Divi Builder. Con todas las opciones incorporadas disponibles, puede crear innumerables variantes de diseño a partir de una plantilla de apariencia básica. Espero que esto te inspire a divertirte explorando nuevos modelos. Espero tener noticias suyas en los comentarios. ¡Suerte!