El personalizador de tema Divi es una herramienta poderosa y conveniente para personalizar el tema Divi. Al igual que Visual Builder, Divi Theme Customizer permite personalizaciones visuales de front-end y cambios de diseño que eliminan el juego de adivinanzas del proceso de personalización. Si se usa de manera eficiente, esta herramienta puede ser un gran ahorro de tiempo y un impulso para proyectos futuros.
La publicación de hoy tiene como objetivo ayudarlo a comprender mejor cómo funciona el Personalizador de temas para que pueda usarlo para aumentar la productividad en proyectos futuros. Cubro casi todas las opciones disponibles en el Personalizador de temas con énfasis en aquellas opciones que son específicas de Divi. En cierto modo, esta publicación sirve como una pieza de documentación que ofrece algunas explicaciones detalladas y consejos de diseño a lo largo del camino. También le mostraré cómo exportar la configuración del Personalizador para usarla en su próximo proyecto.
Tenemos mucho que cubrir, así que empecemos por el principio.
El personalizador de temas se introdujo en WordPress 3.4. Esta característica conveniente permite a los usuarios de WordPress obtener una vista previa de los cambios que realizan en sus temas en tiempo real y luego guardar esos cambios con un solo clic. Lo que antes requería múltiples ventanas e innumerables actualizaciones, ahora se puede hacer rápidamente en una ventana del navegador.
Este es un ejemplo de las opciones del personalizador de temas en el tema TwentySeventeen:
Como puede ver, muchas de las funciones de WordPress que solían residir en diferentes páginas en el backend de WordPress (identidad del sitio, menús, widgets, etc.) ahora se pueden acceder en este personalizador de front-end, todo en un solo lugar.
Por otro lado, el personalizador de temas Divi se creó como una versión mejorada de este personalizador de temas con todo tipo de opciones específicas de Divi. Para los usuarios, esto facilita mucho el proceso de personalización de Divi. Y el hecho de que pueda ver las personalizaciones mientras edita (simultáneamente) hace que esta sea una herramienta de diseño conveniente.
El personalizador de temas Divi todavía tiene muchas de las opciones estándar del personalizador de WordPress, pero también tiene muchas más.
Como puede ver, se han agregado muchas más configuraciones al Personalizador de temas Divi. Ahora comencemos a explorarlos con más profundidad.
Configuración general
Cuando comience a personalizar su tema, creo que es mejor comenzar en la parte superior con Configuración general y avanzar hacia abajo.
Identidad del sitio
Esta sección no es exclusiva de Divi. Este es un lugar conveniente para cambiar el título del sitio y el eslogan de su sitio. También puede ingresar un ícono de sitio que se usa para navegadores y aplicaciones, diferente del ícono de favicon que puede agregar en Opciones de tema Divi .
opciones de diseño
La configuración de diseño le permite ajustar el marco de su tema determinando cuánto espacio hay entre secciones y filas y cuál será el ancho máximo de su sección de contenido principal.
HABILITAR DISEÑO EN CAJA
Aquí puede cambiar su sitio a un diseño de cuadro que enmarque el contenido de su sitio y exponga un fondo que se puede personalizar.
ANCHO DEL CONTENIDO DEL SITIO WEB
Aquí es donde puede establecer el ancho máximo de su sección de contenido. Dado que su contenido está en un diseño receptivo, se ajustará a tamaños más pequeños pero no se expandirá más allá del ancho máximo establecido aquí.
El valor predeterminado se establece en 1080px. Este es un buen ancho para la mayoría de las computadoras portátiles y de escritorio estándar.
ANCHO DEL CANALÓN DEL SITIO WEB
El ancho de medianil corresponde a la cantidad de espacio horizontal (margen) entre las columnas de cada fila.
Los valores opcionales para el ancho del canalón varían de 1 a 4.
1 representa margen cero entre columnas.
2 representa un margen derecho del 3% entre columnas.
3 representa un margen derecho de 5,5% entre columnas.
4 representa un margen derecho del 8% entre columnas.
USAR ANCHO DE BARRA LATERAL PERSONALIZADO
Esto establece el ancho predeterminado de la barra lateral para su tema. Esto se aplica a todas las páginas de su tema que tienen una barra lateral y no están construidas con Divi Builder .
SECCIÓN Y ALTURA DE FILA
Estas opciones ajustan la cantidad de espacio vertical (relleno superior e inferior) para cada sección y fila.
De forma predeterminada, el relleno de la sección es de 50 px en la parte superior e inferior . Para la Fila, el relleno predeterminado es de 30 px en la parte superior e inferior . Sin embargo, al cambiar el relleno de la sección o fila con el Personalizador, el valor del relleno se convierte en un porcentaje que corresponde al número en el dial de opción en el personalizador de temas.
Por ejemplo, «0» representa el 0 % del relleno superior e inferior, «1» representa el 1 % del relleno superior e inferior, «2» representa el 2 %, etc. El porcentaje de relleno se basa en el ancho del contenedor (la sección o fila). Entonces, si el ancho real de la sección es 1080px y ha establecido la altura de la sección en 1, esto significa que tendrá…
1080 píxeles x 0,01 = 10,8 píxeles
… 10.8px de relleno en la parte superior e inferior.
Las opciones van de 0 a 10, por lo que puede tener hasta un 10 % de relleno.
COLOR DE ACENTO DEL TEMA
Antes de comenzar a cambiar los colores de sus otros elementos, debe cambiar esto primero . Una vez que lo cambie, guarde y publique su configuración y actualice su página. Ahora el color de énfasis del tema actualizado debería haber rellenado otros elementos automáticamente.
La actualización del color de acento del tema también actualizará lo siguiente:
- Color del enlace del cuerpo
- Color del encabezado del widget
- Color de la viñeta del widget
- Iconos sociales de pie de página Color de desplazamiento
- Color predeterminado para los iconos
- Color del enlace activo del menú de pie de página
- Color de fondo del menú secundario
- Color de fondo de estilo de encabezado deslizante y de pantalla completa
- Icono de menú de hamburguesas para el color del menú móvil
- Color del enlace activo del menú principal
- Color de la línea del menú desplegable
- Color de fondo del menú secundario
- Color de fondo del menú desplegable secundario
- Color de fondo del menú secundario
- Color del vínculo del menú principal activo
- Color del enlace activo del menú de pie de página
Tipografía
Este es uno de los aspectos más importantes de su sitio web que tiende a ser descuidado por los usuarios y desarrolladores. No cometa el error de pasar por alto estas opciones. Obtener estos detalles correctamente puede marcar una gran diferencia. Tomarse el tiempo para configurar su tipografía predeterminada para su tema también puede ahorrarle tiempo a largo plazo porque no tendrá que hacer personalizaciones a nivel de módulo.
TAMAÑO DEL TEXTO DEL CUERPO
Esto cambia el texto del cuerpo predeterminado para su tema. El tamaño predeterminado es 14px.
Sugerencia de diseño: parece que 14 px es demasiado pequeño para un tamaño de texto de cuerpo estándar. Realmente no debería ir a menos de 16px para el tamaño de fuente de su cuerpo de nivel base . Los que estamos cerca de los 40 años o más te lo agradeceremos. Incluso la mayoría de los navegadores usan 16px como su tamaño de fuente de nivel base estándar.
ALTURA DE LA LÍNEA DEL CUERPO
La altura de línea de cada línea individual de texto.
Sugerencia de diseño : la altura de la línea se mide en el valor de longitud «em». El valor predeterminado de Divi es 1,7 em para el cuerpo del texto. Este valor em es mejor que un valor de píxel (px) porque se basa en el tamaño de fuente actual del elemento y, por lo tanto, se escala con el valor principal en línea (o en nuestro caso, el tamaño de fuente actual). El valor “1.7em” básicamente representa 1.7 veces el tamaño de fuente actual. Entonces, si su tamaño de fuente actual es de 16 px, la altura de la línea será de 27,2 px. Esto le da 5,6 píxeles de espacio adicional en la parte superior y 5,6 píxeles en la parte inferior. Esto parece ser un buen interlineado (espacio entre líneas de copia) para mejorar la legibilidad.
TAMAÑO DEL TEXTO DEL ENCABEZADO
Divi te permite establecer aquí el tamaño de texto del encabezado h1 predeterminado. Esto afecta elementos de Divi como los títulos del módulo de encabezado de ancho completo. Si desea ajustar el tamaño de los otros niveles de encabezado (h2, h3, etc.), sugiero agregarlos en CSS adicional (esto se trata más adelante en la publicación).
Sugerencia de diseño: en la mayoría de los casos, solo tendrá un encabezado por página, así que haga que cuente. Piense en ello como el título en la portada de un libro. Es lo primero que nota una persona. Y, contrariamente al eslogan popular, la gente todavía juzga los libros por sus portadas, especialmente en este caso.
El valor predeterminado para el tamaño del texto del encabezado es 30 px. Este es un buen tamaño seguro para empezar. Especialmente porque algunos titulares requerirán una copia más larga. Sin embargo, tiendo a gravitar hacia un tamaño de encabezado más grande para acomodar el tamaño creciente de las pantallas de los monitores. Además, la mayoría de los clientes necesitan sitios web con títulos simples y breves como «Acerca de nosotros» y «Contáctenos», que se ven mejor con fuentes de mayor tamaño. Me gusta configurar mis encabezados h1 en al menos 48px .
ESPACIADO ENTRE LETRAS EN EL ENcabezado
El espacio entre letras ajusta el espacio horizontal entre letras. El valor de Espaciado entre letras de encabezado afecta a todos los niveles de encabezado (h1, h2, h3, h4, h5, h6), comillas en bloque y títulos de diapositivas.
Sugerencia de diseño: Es una buena técnica de diseño disminuir el espacio entre letras para texto más grande y aumentar el espacio entre letras para texto más pequeño . Cuando se trata de encabezados, el texto más grande con un mayor peso de fuente (negrita) puede verse mejor con un espacio entre letras reducido de -1px.
Sin embargo, si pone ese mismo encabezado en mayúsculas, es posible que se vea mejor aumentando el espacio entre letras a 1-2px.
ALTURA DE LÍNEA DE CABECERA
Al igual que el valor de espaciado entre letras, el valor de la altura de la línea del encabezado afecta a todos los niveles del encabezado (h1, h2, h3, h4, h5, h6), las comillas en bloque y los títulos de las diapositivas. Debido al tamaño de fuente más grande, 1em es la configuración predeterminada. Creo que una altura de línea entre 1em y 1,3em se ve bien, especialmente cuando el encabezado tiene dos líneas o más.
ESTILO DE FUENTE DE CABECERA
Utilice estas opciones para cambiar el estilo de fuente de sus encabezados.
FUENTE DE ENCABEZADO Y CUERPO
La fuente predeterminada en Divi es Open Sans , ¡pero el personalizador de temas Divi tiene casi cien fuentes para elegir! Aproveche estas fuentes integradas y pruebe cuáles funcionan mejor para su tema.
Sugerencia de diseño: para obtener inspiración para combinar fuentes, puede consultar fontpair.co , que ayuda a combinar las fuentes de Google. Divi no admitirá todas estas fuentes de fábrica, pero puede buscar las que admite Divi para ver combinaciones que funcionan bien juntas.
COLOR DEL ENLACE DEL CUERPO
El color del enlace del cuerpo lo hereda el color de acento de su tema. Pero siempre puedes cambiarlo aquí.
Sugerencia de diseño: si lo desea, puede agregar un atributo de subrayado para todos los enlaces de su cuerpo utilizando CSS adicional (consulte el final de la publicación).
COLOR DEL TEXTO DEL CUERPO
Aquí puede cambiar el color del texto de su cuerpo. Blogs populares como el New York Times y Smashing Magazine usan #333333 para el color del cuerpo del texto. Esto tiende a leerse mejor en un fondo blanco en mi opinión.
COLOR DEL TEXTO DEL ENCABEZADO
Aquí puedes cambiar el color de tus encabezados. Si se queda con un tono de negro, sería un poco más oscuro que el cuerpo del texto para que se destaque un poco. Algo como #121212 funcionaría.
Fondo
Esta opción establece el fondo de su tema. Para el tema Divi, esta opción realmente solo se aplica al diseño de la caja . El color de fondo predeterminado es blanco (#ffffff) a menos que lo cambie aquí. También puede agregar una imagen de fondo si lo desea.
Eso es todo para la configuración de diseño. Una vez que tenga el diseño en su lugar, puede comenzar a buscar elementos más específicos.
El encabezado y el menú de navegación es probablemente el elemento más importante de su tema. Esta sección tiene muchas opciones para crear casi cualquier tipo de encabezado que desee.
Formato de encabezado
Estilo de encabezado
Los cuatro estilos de encabezado pueden darle a su sitio web un aspecto completamente nuevo con solo un clic. Estos estilos incluyen centrado, logotipo en línea centrado, deslizable y pantalla completa.
También puede agregar navegación vertical a su sitio, lo que puede ser una característica única. Y puede optar por ocultar la navegación hasta que se desplace. Esto sería útil para un sitio de una sola página que quiera resaltar más contenido en la mitad superior de la página sin la distracción de la barra de navegación.
Su barra de menú principal es el menú principal dentro del encabezado de su sitio web. Puede personalizar completamente la apariencia de su menú principal.
Sugerencia de diseño: realmente necesita saber cuáles serán los enlaces de su menú antes de comenzar a perfeccionar el menú con el personalizador de temas Divi. No olvide que va a diseñar un menú receptivo, así que tómese el tiempo para asegurarse de que el menú se vea bien en todos los tamaños de pantalla. Puede hacerlo haciendo clic en los iconos de los dispositivos en la parte inferior del personalizador o simplemente ajustando el tamaño de su navegador. Si está interesado, puede averiguar cómo arreglar su navegación receptiva aquí .
Hacer ancho completo
Esto extiende el menú al ancho completo de la ventana del navegador.
Ocultar imagen del logotipo
Si lo desea, aquí puede ocultar completamente la imagen del logotipo de su menú.
Altura del menú
Aquí puedes cambiar la altura del menú a lo que quieras. Sin embargo, tenga cuidado de no hacer que la altura de su menú sea demasiado grande, ya que podría estar desperdiciando bienes raíces valiosos en un menú en lugar del contenido de su página de inicio.
Altura máxima del logotipo
Aquí puede aumentar o disminuir el porcentaje de ancho máximo de su logotipo para hacerlo más grande o más pequeño.
Tamaño de texto, espaciado entre letras, fuente, estilo de fuente, color de texto, color de enlace activo
Estas opciones le permiten personalizar los enlaces del menú de la forma que desee.
Color de fondo
Esto le permite cambiar el color de fondo de su menú principal.
Sugerencia de diseño: si usa los colores semitransparentes (o completamente transparentes) para su encabezado, Divi automáticamente superpondrá el encabezado sobre la sección debajo sin problemas. Esto crea un efecto muy bueno. Por ejemplo, este es un estilo de encabezado centrado con un fondo transparente y un encabezado de ancho completo directamente debajo. Observe cómo Divi ajusta automáticamente la imagen de fondo para que encaje bien detrás del encabezado:
Configuración del menú desplegable
Su menú desplegable no tiene que heredar el estilo del menú principal. Aquí puedes crear un diseño único para tu menú desplegable. Incluso puede agregar una animación personalizada al mostrar el menú desplegable.
Aquí puede personalizar su barra de menú secundaria utilizando las opciones proporcionadas.
Cuando está habilitada, la barra de menú secundaria se encuentra sobre la barra de menú principal en la parte superior de su navegador. Puede contener elementos adicionales, como una dirección de correo electrónico, enlaces de redes sociales y un menú secundario.
De forma predeterminada, el menú secundario permanecerá oculto a menos que ingrese un menú secundario o agregue elementos en la sección Elementos del encabezado. Es posible que deba guardar y actualizar el personalizador de temas para ver el menú.
Navegación fija se refiere al estado del menú que está «fijo» o pegado a la parte superior de la ventana del navegador cuando el usuario se desplaza hacia abajo en la página. De forma predeterminada, la navegación fija se reduce en altura para proporcionar una ventana gráfica más grande para mostrar el contenido del sitio.
Sugerencia de diseño: también puede configurar el Color de fondo del menú primario fijo en un color semitransparente para revelar parte del contenido que se esconde detrás. Esto lo hace aún menos intrusivo pero aún accesible.
Elementos de encabezado
Los elementos de encabezado son elementos adicionales que puede agregar a su encabezado. Estos elementos incluyen íconos sociales, un ícono de búsqueda, un número de teléfono y un correo electrónico. Aparte del icono de búsqueda, todos estos elementos se mostrarán en el menú secundario.
Iconos sociales
Por defecto, Divi muestra íconos para Facebook, Twitter, Google+ y RSS. Puede editar estos perfiles en las Opciones de tema de Divi.
De forma predeterminada, la sección de pie de página está oculta a menos que se complete con contenido. Además, el pie de página no debe confundirse con la barra inferior que se muestra en la parte inferior del sitio de forma predeterminada e incluye los créditos del pie de página y los íconos sociales.
Disposición
Aquí puede elegir entre 5 diseños para su sección de pie de página.
También puede establecer un color de fondo para el pie de página que se establece en #222222 de forma predeterminada.
Sugerencia de diseño: esta sección se mostrará en todas las páginas de su sitio (a menos que elija una plantilla de página en blanco). Por lo tanto, tiene sentido hacer que el color sea más neutral para que coincida con todas las páginas de su sitio.
Widgets
Si agregó widgets a sus secciones de pie de página, puede diseñar cómo se ven esos widgets aquí.
Los widgets no son exclusivos de Divi. Estos están integrados en wordpress y se pueden encontrar en el tablero de wordpress en Apariencia > Widgets . Allí puede ver cuatro áreas de pie de página donde puede agregar widgets. Cualquier widget que agregue a estas secciones se mostrará en su área de pie de página.
Sin embargo, también puede acceder a las áreas de widgets sin tener que abandonar el personalizador de temas (una de mis cosas favoritas al respecto).
Aquí puede elegir mostrar sus íconos sociales en su barra inferior al igual que en el menú secundario.
Si tiene un menú de pie de página, puede diseñarlo aquí.
Barra inferior
La barra inferior se encuentra en la parte inferior de su sitio web y muestra los créditos de pie de página y los iconos sociales de forma predeterminada. Aquí puede personalizar el estilo de estos elementos, incluido el cambio del tamaño y el color de la fuente del ícono social.
Editar créditos de pie de página
También puede reemplazar los créditos de pie de página predeterminados con cualquier html que desee dentro de este cuadro.
Esta sección controla cuáles desea que sean los estilos de botones predeterminados.
Aquí puede personalizar el estilo de sus botones para su tema. No voy a entrar en muchos detalles sobre cada opción aquí. Puede consultar nuestra documentación sobre el módulo de botones para obtener más información sobre cómo aplicar estilo a los botones.
Color de texto
Si observa, de forma predeterminada, el color del botón se hereda con el Color de énfasis del tema establecido en Configuración general. Esto es solo para módulos que tienen su texto establecido en «oscuro». Y los botones son blancos cuando el texto del módulo se establece en «claro». Pero, tan pronto como establezca un color de texto personalizado para sus botones, este color se establece para las versiones de texto oscuro y claro dentro de un determinado módulo.
Sugerencia de diseño: Deje que su Color de énfasis del tema establezca el color del texto de sus botones para que pueda mantener la capacidad de agregar versiones oscuras y claras de su botón en sus Módulos.
Aquí es donde puede personalizar el estilo del estado de desplazamiento de sus botones.
Es importante que los usuarios entiendan que lo que están a punto de hacer clic es en realidad un botón. Agregar un efecto de desplazamiento solidifica esto en sus mentes y los alienta a interactuar. Be default Divi agrega un fondo claro y anima un icono de flecha a la derecha. Pero, puedes cambiarlo a lo que quieras.
Sugerencia de diseño: cambiar el fondo a un color más oscuro o más claro no es tan importante como asegurarse de que el botón cambie de alguna manera. También puede aumentar el espacio entre letras o ajustar el radio del borde para darle a su botón un efecto único al pasar el mouse por encima.
Blog
Correo
Esta sección cambia el estilo del contenido del encabezado de la publicación dentro de una sola publicación. Esto no cambia el aspecto de los extractos de su blog en su página de blog o módulo de blog. A veces, los encabezados de las publicaciones de su blog deberán verse diferentes de los encabezados en el resto de su sitio. Aquí es donde haría esos ajustes.
Si elige utilizar el Módulo de encabezado de publicación, estas opciones no serán efectivas.
Estilos móviles
Me encanta esta sección. Aquí puede ajustar el aspecto de su sitio en dispositivos móviles y ver los resultados en tiempo real.
Estilos de tabletas y teléfonos
Puede seleccionar Tablet o Teléfono y la ventana a la derecha del Personalizador se ajustará automáticamente para mostrarle cómo se ve la página en el dispositivo. Luego, al igual que hicimos en Configuración general en Diseño, puede ajustar la altura de la sección, la altura de la fila, el tamaño del texto del cuerpo y el tamaño del texto del encabezado.
Sugerencia de diseño n.º 1: una personalización que me gusta hacer para los diseños de teléfonos es establecer la altura de la fila en «0». Esto crea un mejor flujo de contenido cuando se desplaza en un teléfono, ya que elimina ese espacio entre filas.
Consejo de diseño n.° 2: encuentre una escala de fuente que funcione para su sitio. Aquí hay uno bueno que me gusta seguir para mis encabezados:
Escritorio: 48px
Tableta: 40px
Teléfono: 32px
No pase por alto esto o puede perderse la creación de un encabezado completamente único para su menú móvil. Puede ocultar el logotipo solo en dispositivos móviles y cambiar el fondo y los colores del texto.
Esquemas de color
Estos pueden ser convenientes para una solución rápida. Pero no recomendaría usar los esquemas de color si planea cambiar algunos de estos colores más adelante en el personalizador de temas. Una vez configurados, estos colores no se pueden anular en el Personalizador porque el CSS generado contiene la regla !importante.
En mi opinión, lo mejor es dejar este conjunto por defecto.
Ya no tiene que editar a ciegas sus menús o widgets en el tablero de wordpress. Ahora puede agregar y personalizar estos elementos y verlos cobrar vida en su página en tiempo real. ¡Me encanta la comodidad!
Portada estática
De forma predeterminada, WordPress muestra su última publicación en su página principal (página de inicio). Puede cambiar esto para que sea cualquier página estática que desee en esta sección. Y también puede designar su página de publicaciones (o página de blog).
No sabía esto hasta que escribí esta publicación, pero en realidad puede implementar una nueva página desde el personalizador de temas para que sirva como su página principal o página de blog sin tener que salir del personalizador.
CSS adicional
La sección CSS adicional ofrece una gran oportunidad para dar los toques finales a la configuración de su tema. Independientemente de los cambios de estilo que Divi Theme Customizer no pueda controlar, puede hacerlo aquí con algunos CSS personalizados. Debido a que el Personalizador le permite ver los cambios de CSS en tiempo real, puede hacer los ajustes necesarios a su tema mucho más fácilmente que ir y venir en una hoja de estilo externa.
Ejemplos adicionales de CSS
Ejemplo n.º 1: ajustar el tamaño de todos los encabezados
Un buen ejemplo de CSS adicional sería el estilo de las etiquetas de encabezado restantes. Divi le permite personalizar la configuración de la fuente de su encabezado, pero eso es solo para sus encabezados h1. Puede usar el cuadro CSS adicional para ingresar el resto de las personalizaciones de las etiquetas de encabezado (h2, h3, h4, etc.). Me gusta usar la siguiente escala: 16, 18, 21, 24, 36, 48.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
h2 { font-size: 36px;}h3 { font-size: 24px;}h4 { font-size: 21px;}h5 { font-size: 18px;}h6 { font-size: 16px;} |
Ejemplo #2: Haga coincidir el relleno del párrafo inferior con la altura de la línea del cuerpo
Si establece la altura de la línea del texto del cuerpo en 1,7 em, es posible que también desee establecer el mismo valor en el relleno inferior entre párrafos para mantener una cuadrícula de referencia y un ritmo vertical consistentes . En otras palabras, la distancia entre párrafos es igual a la altura de la línea. Para hacer esto, simplemente agregaría lo siguiente:
|
01
|
p { padding-bottom: 1.7em} |
Debido a que el valor de longitud em se basa en el tamaño de fuente principal, si cambió el tamaño de fuente base a otro en el personalizador de temas, el valor de 1,7 em se ajustará en consecuencia.
Ejemplo n.º 3: agregue un atributo de subrayado a sus enlaces
Agregue el atributo de subrayado a los enlaces del cuerpo.
|
01
02
03
|
a { text-decoration: underline;} |
Exportación e importación de la configuración del personalizador Divi para su próximo proyecto
Los personalizadores de temas Divi tienen una opción de portabilidad que permite a los usuarios exportar o importar la configuración del personalizador. Esto presenta una gran oportunidad para que los desarrolladores creen una especie de plantilla de configuración personalizada para usar en sus proyectos futuros.
Primero, sugiero tomarse el tiempo para averiguar qué personalizaciones tiende a hacer al crear un sitio web. Una vez que identifique esas configuraciones, puede ingresar esas personalizaciones en el Personalizador de temas Divi y luego exportar esas configuraciones para que tenga ventaja en sus próximos proyectos. ¿Por qué seguir haciendo las mismas cosas una y otra vez cuando ya puedes tenerlas hechas? Además, esto le ayudará a asegurarse de no omitir ninguna personalización importante.
Para exportar su configuración, haga clic en el icono de portabilidad en la parte superior del personalizador de temas Divi.
Asigne un nombre al archivo de exportación y haga clic en el botón «Exportar configuración del personalizador Divi»
Ahora puede usar este archivo .json en el futuro haciendo clic en el mismo ícono de portabilidad en el Personalizador de temas Divi y seleccionando Importar en lugar de exportar. Luego, todo lo que necesita hacer es cargar el archivo .json y hacer clic en «Importar la configuración del personalizador Divi».
Y eso es.
¿Qué incluye la configuración del personalizador Divi?
La configuración del personalizador incluye básicamente todo en las primeras 7 secciones.
- Configuración general
- Encabezado y navegación
- Pie de página
- Botones
- Blog
- Estilos móviles
- Esquemas de color
Las últimas 4 secciones son específicas de WordPress y no se transferirán a otras instalaciones de Divi. Estas secciones incluyen:
- Menús
- Widgets
- Portada estática
- CSS adicional
Es importante tener en cuenta que el CSS adicional no se transfiere. Es posible que confíe en esa configuración para obtener un impulso de ahorro de tiempo en su próxima compilación. Si este es el caso, sugiero crear un tema secundario con ese CSS para que pueda agregarlo con su Configuración del personalizador en su próximo proyecto.
Cómo se almacenan los estilos del personalizador Divi
Para el Personalizador de Divi (junto con las Opciones de Divi y el Constructor de Divi), Divi sirve recursos de CSS estáticos que los navegadores pueden almacenar en caché para disminuir el tiempo de carga de la página. Esto significa que los estilos no se imprimen en la página sino que se almacenan en un archivo CSS estático separado. Cada vez que guarda la configuración del personalizador, el archivo CSS estático se actualiza. Esto incluye cualquier CSS adicional que haya agregado también.
Pensamientos finales
El personalizador de temas Divi viene con algunas opciones bastante poderosas y el proceso de personalización es conveniente y agradable para trabajar. Y obtener una comprensión más profunda de lo que estas opciones pueden hacer definitivamente mejorará la forma en que crea sitios web con Divi. Si aún no lo ha hecho, tómese un tiempo para explorar cuáles serían sus configuraciones de referencia óptimas para un proyecto, conéctelas al Personalizador y cree un archivo de exportación. Te sorprenderá el impulso (y la confianza) que esto te dará al iniciar un nuevo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!