Descargue y use 6 divisores de módulo GRATIS para Divi
Publicado: 2019-01-07A estas alturas, todos nos hemos acostumbrado a los divisores de sección que se incluyen en Divi. En tutoriales anteriores, también le mostramos cómo puede hacer que estos divisores de sección se apliquen a módulos y filas. Pero si desea utilizar divisores de módulos que solo estén conectados a módulos y no a otros elementos de diseño, esta publicación es para usted. Vamos a compartir 6 divisores de módulos GRATUITOS que puede usar para cualquier tipo de sitio web Divi que cree. Estos divisores de módulos se incluirán en un archivo ilustrador que podrá descargar más adelante en esta publicación. Este tutorial también le ayudará a crear su propio tipo de divisores de módulos.
¡Hagámoslo!
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los 6 divisores de módulos diferentes que podrá descargar y cómo se ven en diferentes tamaños de pantalla.
Escritorio
Teléfono
Descarga The Module Dividers GRATIS
Para poner sus manos sobre los divisores de módulos, primero deberá descargarlos 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 y viernes! 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!
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Cambiar los colores del divisor en Illustrator
Abrir archivo de Illustrator en la carpeta descargada
En la primera parte de este tutorial, prepararemos los divisores de módulos que necesitamos. En la carpeta de descarga, puede encontrar los divisores de módulos para una paleta de colores específica. Sin embargo, si desea utilizar otra paleta de colores, deberá crear los divisores de módulo que necesita utilizando el archivo ilustrador que puede encontrar en la carpeta de descarga.
Elija el estilo del divisor del módulo, desbloquee la capa y habilite la visibilidad
Una vez que abra el archivo ilustrador, continúe y seleccione el divisor de su elección en la pestaña de capas. Desbloquee la capa y habilite la opción de visibilidad para que pueda comenzar de inmediato.
Haga clic en Divisor de módulo y cambie el color
Ahora, dependiendo de la cantidad de módulos para los que desee crear un divisor, la cantidad de divisores de módulo que necesita puede diferir. Para recrear el ejemplo que le mostramos al principio de la publicación, por ejemplo, necesitaremos el divisor de módulo en cuatro colores diferentes. Comience con el primero cambiando el color del divisor a blanco.
- Color del divisor: #ffffff
Divisor de módulo de exportación PNG para web
Una vez que haya cambiado el color, puede continuar guardando el módulo de imagen como un archivo de imagen PNG para la web.
Repita los pasos para cada color necesario (x4)
Como se mencionó anteriormente, necesitará varios divisores de módulos. Repite los pasos anteriores para cada uno de los colores.
- Color 1: #ffffff
- Color 2: # 2759f6
- Color 3: # 97adf4
- Color 4: # b2ceff
Crear diseño Divi
Vista previa de backend
Una vez que haya guardado todos los divisores de módulos, ¡es hora de cambiar a Divi! El resultado final que estamos creando se verá así en el backend:
Agregar nueva sección
Agregue una nueva página o abra una existente y agregue una sección regular.
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de fila y realice algunos cambios en la configuración de tamaño.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
Agregar módulo de imagen a la columna 1
Subir divisor de módulo blanco
El primer módulo que necesitaremos, en la columna 1, es un módulo de imagen. Sube el primer divisor de módulo que puedes encontrar en la carpeta de descargas o elige el que hayas modificado a tu propia paleta de colores.
Color de fondo
Luego, agregue un color de fondo al módulo de imagen. Este color debe coincidir con el color de fondo de cualquier módulo que viene a continuación.
- Color de fondo: # 2759f6
Dimensionamiento
Luego, vaya a la configuración de tamaño y habilite la opción 'Forzar ancho completo'.
- Forzar ancho completo: Sí
Agregar módulo Blurb a la columna 2
Agregar contenido
El segundo módulo que necesitamos en la columna 1 es un módulo Blurb. Comience agregando algún contenido de su elección.
Seleccionar icono
Luego, seleccione un icono de su elección.
Color de fondo
Continúe agregando el mismo color de fondo que utilizó para el módulo de imagen del divisor del módulo.
- Color de fondo: # 2759f6
Configuración de iconos
A continuación, vaya a la configuración del icono y realice algunos cambios.
- Color del icono: #ffffff
- Ubicación de la imagen / icono: parte superior
- Usar tamaño de fuente del icono: Sí
- Tamaño de fuente del icono: 50px
Configuración de texto
Modifique también la configuración del texto.
- Orientación del texto: centro
- Color del texto: claro
Configuración del texto del título
Cambie también la apariencia del texto del título.
- Peso de la fuente del título: Ultra Bold
- Estilo de fuente del título: mayúsculas
Espaciado
Y cree algo de espacio para el módulo utilizando un relleno personalizado.
- Relleno superior: 50px
- Acolchado inferior: 50px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Clonar el módulo de imagen 3 veces y el módulo Blurb dos veces
Una vez que haya terminado de modificar el primer módulo de imagen (que contiene el divisor del módulo) y el módulo de Blurb, puede continuar y clonar el módulo de imagen tres veces y el módulo de Blurb dos veces. Esto dará el siguiente resultado en el backend:
Coloque los duplicados en el orden correcto
Cambie el orden de los duplicados para asegurarse de comenzar con un Módulo de imagen seguido de un Módulo Blurb, como se muestra a continuación:
Cambiar los colores de fondo de los duplicados del módulo Blurb
Luego, cambie los colores de fondo de los módulos de Blurb.
- Módulo Blurb # 2: # 97adf4
- Módulo de propaganda n. ° 3: # b2ceff
Cambiar el divisor del módulo en el módulo de imagen
Abra el primer módulo de imagen duplicado y cargue el segundo divisor de módulo que ha creado (o elija uno que pueda encontrar en la carpeta de descargas).
Cambiar el color de fondo del módulo de imagen del divisor del módulo (coincidir con el color de fondo del siguiente módulo Blurb)
Una vez que haya cargado el nuevo divisor de módulo, también deberá cambiar el color de fondo de ese módulo de imagen. Asegúrese de hacer coincidir este color con el color de fondo del módulo Blurb que viene a continuación.
- Divisor de módulo # 2: # 2759f6
Repita los pasos para los dos módulos divisores restantes
Repita los pasos anteriores para los dos divisores de módulo restantes en la columna y ¡listo!
- Divisor de módulo n. ° 3 Color de fondo: n. ° 97adf4
- Divisor del módulo # 4 Color de fondo: # b2ceff
Avance
Ahora que hemos seguido todos los pasos, ¡echemos un vistazo final a los 6 divisores de módulos diferentes que pudo descargar al comienzo de esta publicación!
Escritorio
Teléfono
Pensamientos finales
En esta publicación, hemos compartido 6 divisores de módulos gratuitos que puede usar para cualquier tipo de sitio web que esté creando. Estos divisores de módulos pueden ayudarlo a crear un diseño más divertido y crear módulos únicos y divertidos. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!