A estas alturas, todos nos hemos acostumbrado a los divisores de secciones 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 construya. 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 lo ayudará a crear su propio tipo de divisores de módulos.
¡Hagámoslo!
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 GRATIS Los Separadores de Módulos
Para poner sus manos en los divisores de módulos, primero deberá descargarlos 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 bondades de Divi y un paquete de 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Cambiar los colores de los divisores en Illustrator
Abrir archivo de Illustrator en la carpeta descargada
En la primera parte de este tutorial, vamos a preparar los divisores de módulos que necesitamos. En la carpeta de descargas, puede encontrar los separadores de módulos para una paleta de colores específica. Sin embargo, si desea usar otra paleta de colores, deberá crear los divisores de módulos que necesita utilizando el archivo de illustrator 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 de Illustrator, 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 de color
Ahora, dependiendo de la cantidad de módulos para los que desee crear un divisor, la cantidad de divisores de módulos que necesita puede diferir. Para recrear el ejemplo que te mostramos al principio de la publicación, por ejemplo, necesitaremos el divisor del módulo en cuatro colores diferentes. Comience con el primero cambiando el color del divisor a blanco.
- Color del divisor: #ffffff
Exportar módulo divisor 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 del servidor
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 agréguele 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 la 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 del canalón: 1
Agregar módulo de imagen a la columna 1
Subir Módulo Divisor Blanco
El primer módulo que necesitaremos, en la columna 1, es un módulo de imagen. Cargue el primer divisor de módulos que puede encontrar en la carpeta de descargas o elija el que ha modificado a su 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í
Agregue el módulo Blurb a la columna 2
Agregar contenido
El segundo módulo que necesitamos en la columna 1 es un módulo de 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 usó 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
- Colocación de imagen/icono: Arriba
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 50 px
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 negrita
- Estilo de fuente del título: Mayúsculas
Espaciado
Y cree algo de espacio para el módulo usando un relleno personalizado.
- Relleno superior: 50px
- Relleno inferior: 50px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Módulo de imagen clonada 3 veces y módulo Blurb dos veces
Una vez que haya terminado de modificar el primer módulo de imagen (que contiene el divisor de 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 de Blurb, como se muestra a continuación:
Cambiar los colores de fondo de los duplicados del módulo de Blurb
Luego, cambie los colores de fondo de los módulos de Blurb.
- Módulo de publicidad n.º 2: n.º 97adf4
- Módulo de Blurb #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 descarga).
Cambiar el color de fondo del módulo de la imagen del divisor del módulo (coincidir con el color de fondo del siguiente módulo de Blurb)
Después de cargar el nuevo divisor de módulos, 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 de Blurb que viene a continuación.
- Módulo divisor #2: #2759f6
Repita los pasos para los dos módulos divisores restantes
Repita los pasos anteriores para los dos divisores de módulos restantes en la columna y ¡listo!
- Módulo divisor #3 Color de fondo: #97adf4
- Módulo divisor #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, compartimos 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!