¡Hola nación Divi! Gracias por acompañarnos en la próxima entrega de nuestra iniciativa de diseño Divi semanal, donde cada semana regalamos nuevos obsequios para Divi . Hoy, compartimos un marco de guía de estilo de ajustes preestablecidos globales GRATUITO que puede usar para cualquier sitio web que esté planeando construir. Los ajustes preestablecidos globales de Divi lo ayudan a acelerar su proceso de diseño web en muy poco tiempo, ¡así que echemos un vistazo!
Consulte el
marco de la guía de estilo de ajustes preestablecidos globales a continuación
¡Consíguelo gratis hoy!
Descargar el marco de la guía de estilo de los ajustes preestablecidos globales
Para poner sus manos en el marco de la guía de estilo de ajustes preestablecidos globales gratuitos, 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.
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!
Configuración de una guía de estilo de ajustes preestablecidos globales para su próximo sitio web Divi
¿Qué es una guía de estilo de ajustes preestablecidos globales?
Una guía de estilo de ajustes preestablecidos globales es una descripción general de los elementos más importantes que diseñará para usar dentro de su sitio web Divi. Consta de tres partes:
1. Paleta de colores
2. Estilos de texto
3. Estilos de módulos
Aunque los ajustes preestablecidos globales van más allá de los módulos (las columnas, las filas y las secciones también pueden contener ajustes preestablecidos globales), nos estamos enfocando en algunos de los elementos más uniformes en su sitio web, que son las tres partes mencionadas anteriormente. La idea es diseñar todos los elementos en un solo lugar y tan pronto como esté satisfecho con el estilo de diseño que ha aplicado, puede convertir los diferentes estilos de texto y estilos de módulo en ajustes preestablecidos globales.
La paleta de colores es algo que podrá agregar a sus Opciones de tema Divi , pero más sobre eso más adelante en la publicación. Podrá mantener la guía de estilo en una ventana separada mientras diseña sus páginas y plantillas también. Esto lo ayudará a copiar y pasar la configuración del fondo degradado a medida que avanza, en lugar de tener que aplicar manualmente la configuración una por una.
Cuándo crear/usar una guía de estilo de ajustes preestablecidos globales
Preferiblemente, creará y comenzará a usar una guía de estilo de ajustes preestablecidos globales antes de crear sus páginas, plantillas, etc. El motivo es que podrá acceder inmediatamente a sus ajustes preestablecidos globales mientras crea sus diseños, en lugar de tener que ir Vuelva a su diseño, restablezca los estilos en línea a nivel de elemento y aplique un ajuste preestablecido global.
Comenzar su proceso de compilación de Divi después de haber creado una guía de estilo lo ayuda a evitar tener que realizar cambios manualmente en los módulos dentro de su configuración individual. Si está trabajando con ajustes preestablecidos globales desde el principio, podrá modificarlos en un solo lugar y ver cómo se desarrollan los cambios en todo su sitio web a la vez.
La guía de estilo de marco de ajustes preestablecidos global gratuita que compartimos en esta publicación lo ayudará a ingresar directamente a la fase de inspiración del diseño. En lugar de tener que crear una guía de estilo usted mismo, puede concentrarse en crear un estilo de diseño con armonía y equilibrio. Tan pronto como haya terminado de diseñar los elementos de la interfaz de usuario dentro de la guía de estilo, podrá convertirlos en ajustes preestablecidos globales y usarlos mientras crea sus páginas y plantillas.
Cómo usar la guía de estilo de ajustes preestablecidos globales
Descargue y cargue el diseño del marco a su biblioteca Divi
Comience descargando el diseño del marco de la guía de estilo de los ajustes preestablecidos globales gratuitos en esta publicación. Luego, una vez que hayas descomprimido la carpeta de descarga, navega a tu Biblioteca Divi dentro del backend de tu sitio web y haz clic en «Importar/Exportar» en la parte superior. Una vez allí, cambie a la pestaña «Importar» y cargue el diseño del marco de la guía de estilo que puede encontrar en su carpeta de descargas.
Crear una nueva página de borrador para el diseño y cargar el diseño del marco
Una vez que se haya cargado su diseño, puede abrirlo dentro de la propia biblioteca o crear un borrador de página separado para él. Para mantener la experiencia de la página, optaremos por la segunda opción. Agrega una nueva página y localiza el diseño dentro de «Tus diseños guardados».
Configurar paleta de colores
Una vez dentro del marco de la guía de estilo, podrá configurar la paleta de colores de su elección. La cantidad de colores que agrega depende completamente de usted. Para mostrar visualmente los colores dentro de nuestra guía de estilo, estamos usando la configuración de fondo de un módulo de texto. Abra ese módulo de texto, vaya a su configuración de fondo y modifique el color de fondo. Copie el código hexadecimal que está usando y colóquelo dentro del Módulo de texto debajo de él para que siempre tenga una versión escrita de cada código de color hexadecimal dentro de su guía de estilo de ajustes preestablecidos globales también.
Cree una paleta de colores personalizada con códigos de color dentro de su creador de temas Divi
Ir a Opciones de tema Divi
Los códigos hexadecimales en la guía de estilo se pueden usar para crear una paleta de colores personalizada a la que podrá acceder rápidamente mientras construye dentro de Divi. Recomendamos hacer esto antes de diseñar el texto y los módulos dentro del marco de su guía de estilo. Para agregar la paleta de colores, vaya a sus Opciones de tema Divi.
Personalizar la paleta de colores usando códigos hexadecimales en la guía de estilo
Agregue los códigos de color hexadecimales de su elección, que puede encontrar en la guía de estilo, a la paleta de colores predeterminada.
Agregar estilos de texto
A continuación, podrá diseñar los diferentes tipos de texto dentro del marco de su guía de estilo. La cantidad de alternativas que proporcione para cada tipo de texto depende totalmente de usted, el hecho de que haya una opción «primaria», «secundaria» y «terciaria» no significa que deba tener 3 variaciones para cada tipo de texto. Siéntase libre de eliminar o agregar más posibilidades.
Módulos de estilo
En la última parte del marco de la guía de estilo, hemos enumerado todos los módulos Divi más utilizados. Aquí puedes empezar a modificar los módulos según el estilo que tengas en mente. El hecho de que todos los módulos estén tan cerca unos de otros te ayudará a obtener una mejor visión general del estilo de diseño y su equilibrio. Para cada módulo popular, también proporcionamos una opción «primaria», «secundaria» y «terciaria». Pero, de nuevo, siéntete libre de determinar por ti mismo cuántas variaciones de cada módulo usas a lo largo del proceso de construcción de tu página y plantilla.
Convierta los módulos en preajustes globales (uno por uno y con el nombre elegido)
Una vez que se hayan completado todos los estilos de texto y los estilos de módulo, no olvide el aspecto receptivo de todo, es hora de convertir los módulos en ajustes preestablecidos globales. Para hacerlo, puede abrir cada módulo con estilo en un nivel individual y crear un nuevo ajuste preestablecido a partir de los estilos actuales en la parte superior del modal. También puede optar por hacer que su módulo principal sea el predeterminado. Una vez que haya creado el ajuste preestablecido global, asegúrese de que ese ajuste preestablecido específico esté seleccionado para el módulo, esto lo ayudará a importar y exportar ajustes preestablecidos globales utilizando el diseño de la guía de estilo.
Intente también encontrar una forma simplificada de nombrar sus módulos, de modo que pueda consultar fácilmente la guía de estilo en caso de que esté confundido. Un buen enfoque para nombrar tres variaciones de un estilo de módulo de Blurb podría ser:
- Botón principal
- Botón secundario
- Botón terciario
Y puede repetir este enfoque para cada estilo de texto o módulo que convierta en un ajuste preestablecido global.
Módulos anidados: convierta los elementos anidados en preajustes globales también
Para los módulos anidados, como el Módulo de seguimiento de redes sociales, deberá abrir el elemento dentro del módulo y guardar ese elemento como un nuevo ajuste preestablecido también.
Diseño de guía de estilo de exportación e importación (con ajustes preestablecidos) en un sitio web diferente
Tan pronto como haya convertido todos los módulos en ajustes preestablecidos globales y seleccionado esos ajustes preestablecidos dentro de la configuración del módulo, podrá exportar el diseño con todos los ajustes preestablecidos en él. Luego, tan pronto como cargue el diseño en otro sitio web, tendrá la posibilidad de importar los ajustes preestablecidos junto con el diseño, lo que a su vez lo ayuda a ahorrar tiempo. Guarde su diseño de guía de estilo completo, incluidos los ajustes preestablecidos, en su Biblioteca Divi. Luego, exporte el archivo.
Vaya al sitio web en el que desea cargar la nueva guía de estilo, navegue a la Biblioteca Divi y cargue el archivo JSON con ajustes preestablecidos para comenzar con el proceso de compilación de Divi.
Sugerencia: mantenga la guía de estilo en una pestaña separada para copiar/pegar estilos específicos (degradados/sombra de cuadro/borde/…)
Por último, pero no menos importante, es una gran idea mantener siempre la guía de estilo en una pestaña separada. ¡Usar la opción de copiar y pegar entre páginas integrada de Divi lo ayudará a transferir rápidamente estilos, como fondos degradados, de un elemento a otro!
¡Nuevas guías de estilo preestablecidas globales cada semana!
Esperamos que disfrute de este marco de guía de estilo de ajustes preestablecidos globales. Puede usar este marco para cualquier tipo de sitio web que construya. Esperamos escuchar sus opiniones en la sección de comentarios a continuación. ¡Asegúrate de volver la próxima semana para obtener más regalos!