Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso , le mostraremos cómo usar secciones vacías en Divi para crear elementos de diseño únicos. Vamos a utilizar estas secciones vacías en la página de inicio del paquete de diseño de joyero . Sin embargo, puede agregar estas secciones vacías en cualquier paquete de diseño o sitio web que esté creando con Visual Builder de Divi.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo a los elementos de diseño que crearemos:
Acercarse
- Estamos usando secciones vacías para crear elementos de diseño únicos sin tener que cambiar la configuración de otras secciones
- Le estamos dando a nuestros divisores de sección el mismo color que el color de fondo de la sección anterior y siguiente, que en este caso es blanco.
- Estamos reutilizando un color de nuestra paleta de colores como color de fondo de nuestra nueva sección.
- Estamos combinando diferentes separadores de sección para la parte superior e inferior para crear diferentes diseños.
- Sin módulos, una sección no se mostrará correctamente en el escritorio y no se mostrará en absoluto en la tableta y el teléfono.
- Por eso, en lugar de dejarlo vacío, creamos la ilusión de una sección vacía.
- Agregar un módulo de texto con un carácter invisible hará el truco
- Nuestras nuevas secciones serán independientes, lo que significa que también podemos jugar con el margen sin afectar la sección anterior o la siguiente.
- Puede aplicar este diseño a cualquier página o paquete de diseño en el que esté trabajando
- Los cuatro ejemplos que recrearemos en este tutorial son geniales para el paquete de diseño de joyero.
- Sin embargo, puede usar otros separadores de sección y experimentar con otros paquetes de diseño.
Pasos generales
Agregar nueva sección estándar
Antes de manejar cada uno de los ejemplos individualmente, repasaremos primero los pasos generales. Esto significa que antes de comenzar un ejemplo, deberá seguir estos pasos. Los pasos generales son los mismos para cada uno de los ejemplos. Comience agregando una nueva sección estándar a una de sus páginas usando el paquete de diseño de joyero de Divi . Para los ejemplos, hemos utilizado la página de destino.
Agregar color de fondo a la sección
Luego, agregue ‘#f2e3de’ como color de fondo de esta sección.
Agregar fila de una columna
Agregue una fila con una columna al lado.
Agregar módulo de texto con carácter invisible
Y termine agregando un módulo de texto con un carácter invisible. Como se mencionó en el enfoque de esta publicación, no podemos dejar una sección completamente vacía. Si lo hace, la sección desaparecerá en la tableta y el teléfono. Es por eso que vamos a engañar a la sección para que piense que hay contenido usando un carácter invisible. Puede agregar un carácter invisible manteniendo presionado el botón ALT y escribiendo 0160 con su teclado numérico. O simplemente puede clonar el siguiente carácter entre comillas: ‘ ‘.
Crear Sección #1
Agregar margen izquierdo y derecho a la sección
Ahora comencemos a crear el primer ejemplo agregando el siguiente margen personalizado a la sección:
- Margen superior: 200 px (escritorio), 100 px (tableta), 50 px (teléfono)
- Margen inferior: 200 px (escritorio), 100 (tableta), 50 px (teléfono)
Agregar esquinas redondeadas
Abra la configuración del borde a continuación y agregue ‘100px’ en la esquina superior izquierda y superior derecha.
Agregar divisor inferior
Por último, agregue el siguiente divisor inferior a su sección:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Blanco
- Altura del divisor: 180 px (escritorio), 150 px (tableta), 120 px (teléfono)
- Repetición horizontal: 8x (escritorio), 5x (tableta), 4x (teléfono)
Crear Sección #2
Eliminar relleno de fila
¿Quieres crear el segundo ejemplo? Comience eliminando todo el relleno de fila agregando ‘0px’ al relleno superior e inferior.
Agregar divisor superior
Continúe agregando un divisor superior a su sección:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Blanco
Agregar divisor inferior
Use el mismo divisor para la parte inferior también:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Blanco
Sección de clonación
Puedes clonar esta sección tantas veces como quieras. Para lograr el mismo resultado que se muestra en el ejemplo, clone la sección una vez y ¡ahí lo tiene!
Crear Sección #3
Agregar divisor superior
El tercer ejemplo utiliza el siguiente divisor superior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Blanco
- Altura del divisor: 40 px (escritorio), 30 px (tableta), 20 px (teléfono)
Agregar divisor inferior
Una vez que haya agregado al divisor superior, cambie al divisor inferior y aplique la siguiente configuración:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Blanco
- Altura del divisor: 140px
- Repetición horizontal del divisor: 6x (escritorio), 5x (tableta), 4x (teléfono)
Crear Sección #4
Agregar divisor superior
Para el último ejemplo de la fila, elija el siguiente divisor superior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Blanco
Agregar divisor inferior
Junto con el siguiente divisor inferior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Blanco
Agregar relleno adicional a la fila
Si desea aumentar la altura de su diseño, también puede agregar ’40px’ al relleno superior e inferior de su fila.
Extra: imagen de fondo + superposición de degradado
Agregar fondo degradado a la sección
Puede hacer que cada una de las secciones vacías sea única agregando una imagen de fondo y una superposición de degradado a su sección también. El fondo degradado y la imagen de fondo llenarán tu diseño y le darán un efecto aún más avanzado. Comience agregando un fondo degradado a su sección:
- Primer color: #f2e3de
- Segundo Color: rgba(255,255,255,0)
- Tipo de gradiente: lineal
- Dirección del gradiente: 130 grados
- Posición inicial: 25%
Agregar imagen de fondo a la sección
Luego, agrega una imagen de fondo (puedes encontrar la que hemos usado en tu biblioteca de medios después de cargar el paquete de diseño de joyero de Divi) junto con las siguientes configuraciones:
- Posición de la imagen de fondo: centro superior
- Mezcla de imagen de fondo: superposición
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado:
Pensamientos finales
En esta publicación de blog de caso de uso, le mostramos cómo usar secciones vacías para crear elementos de diseño únicos. Hemos agregado estos elementos de diseño a la página de inicio del paquete de diseño de joyero . Sin embargo, puede agregar estas secciones vacías a cualquier paquete de diseño y diseño que desee. Si tiene alguna pregunta, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!