La guía definitiva para el personalizador de temas Divi

El Personalizador de temas Divi es una herramienta poderosa y conveniente para realizar personalizaciones en 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 motor de arranque para proyectos futuros.

La publicación de hoy está destinada a ayudarlo a comprender mejor cómo funciona el Personalizador de temas para que pueda usarlo para aumentar la productividad para 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 usar en su próximo proyecto.

Tenemos mucho que cubrir, así que comencemos por el principio.

Construido con WordPress en mente

El personalizador de temas se introdujo en WordPress 3.4. Esta conveniente función 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 solía tomar múltiples ventanas e innumerables actualizaciones, ahora se puede hacer rápidamente en una ventana del navegador.

A continuación, se muestra un ejemplo de las opciones del Personalizador de temas en el tema TwentySeventeen:

Como puede ver, muchas de las características 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, hay muchas más configuraciones que se han agregado 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 desde 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 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 Divi Theme Options.

opciones de diseño

La configuración de diseño le permite ajustar el marco de su tema determinando cuánto espacio hay entre las secciones y filas y cuál será el ancho máximo de su sección de contenido principal.

HABILITAR EL DISEÑO EN CAJA

Aquí puede cambiar su sitio a un diseño de caja que enmarca el contenido de su sitio y expone 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 tiene 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 es 1080px. Este es un buen ancho para la mayoría de las computadoras portátiles y de escritorio estándar.

ANCHO DE CANALETA DEL SITIO WEB

El ancho de la canaleta corresponde a la cantidad de espacio horizontal (margen) entre las columnas de cada fila.

Los valores opcionales para el ancho de la canaleta varían de 1 a 4.

1 representa un margen cero entre columnas.
2 representa un margen derecho del 3% entre columnas.
3 representa un margen derecho del 5,5% entre columnas.
4 representa un margen derecho del 8% entre columnas.

UTILICE EL ANCHO DE BARRA LATERAL PERSONALIZADO

Esto establece el ancho de la barra lateral predeterminado para su tema. Esto se aplica a todas las páginas de su tema que tienen una barra lateral y no están creadas 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 píxeles en la parte superior e inferior . Para la fila, el relleno predeterminado es de 30 píxeles en la parte superior e inferior . Sin embargo, al cambiar el relleno de sección o fila con el Personalizador, el valor de relleno se convierte en un porcentaje que corresponde al número en el dial de opciones del 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 px x 0.01 = 10.8 px

… 10,8 px 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 DEL 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 acento del tema actualizado debería haber llenado 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 viñeta de widget
• Pie de página Iconos sociales Colocar el cursor sobre el color
• Color predeterminado para iconos
• Menú de pie de página Color del enlace activo
• Color de fondo del menú secundario
• Deslizar hacia adentro y color de fondo del estilo de encabezado de pantalla completa
• Icono de menú de hamburguesa para el color del menú móvil
• Color del enlace activo del menú principal
• Color de 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 enlace del menú principal activo
• Menú de pie de página Color del enlace activo

Tipografía

Este es uno de los aspectos más importantes de su sitio web que los usuarios y desarrolladores tienden a descuidar. 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 de su tema. El tamaño predeterminado es 14px.

Sugerencia de diseño: parece que 14px es un poco demasiado pequeño para un tamaño de texto de cuerpo estándar. Realmente no deberías tener menos de 16 px para el tamaño de fuente de tu cuerpo de nivel básico. Aquellos de nosotros que tenemos cerca de 40 años o más se lo agradeceremos. Incluso la mayoría de los navegadores utilizan 16px como tamaño de fuente de nivel básico estándar.

ALTURA DE LA LÍNEA DEL CUERPO

La altura de línea de cada línea de texto individual.

Consejo de diseño : la altura de la línea se mide con el valor de longitud "em". El valor predeterminado de Divi es 1.7em para el texto del cuerpo. Este valor de 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 en línea principal (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. Este parece ser un buen interlineado (espacio entre las líneas de la copia) para facilitar la lectura.

TAMAÑO DEL TEXTO DEL ENCABEZADO

Divi le permite establecer aquí el tamaño predeterminado del texto del encabezado h1. 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 explica 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 de la portada de un libro. Es lo primero que nota una persona. Y, contrariamente al lema 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 30px. 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 tamaños de letra más grandes. Me gusta configurar mis encabezados h1 en al menos 48px .

ESPACIO DE LETRA DEL ENCABEZADO

El espaciado entre letras ajusta el espacio horizontal entre letras. El valor del espaciado entre letras del encabezado afecta a todos los niveles del encabezado (h1, h2, h3, h4, h5, h6), las citas en bloque y los títulos de las diapositivas.

Consejo de diseño: es una buena técnica de diseño reducir el espacio entre letras para textos más grandes y aumentar el espacio entre letras para textos más pequeños . Cuando se trata de encabezados, el texto más grande con un mayor peso de fuente (negrita) puede verse mejor con un espaciado de letras reducido de -1px.

Sin embargo, si pone el mismo encabezado en mayúsculas, es posible que se vea mejor si aumenta el espacio entre letras a 1-2px.

ALTURA DE LA LÍNEA DEL ENCABEZADO

Al igual que para el valor de espaciado de 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 citas 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 en algún lugar entre 1em y 1.3em se ve bien, especialmente cuando el encabezado va a dos líneas o más.

ESTILO DE FUENTE DE ENCABEZADO

Utilice estas opciones para cambiar el estilo de fuente de sus encabezados.

ENCABEZADO Y FUENTE DEL CUERPO

La fuente predeterminada en Divi es Open Sans , ¡pero Divi Theme Customizer tiene casi cien fuentes para elegir! Aproveche estas fuentes integradas y pruebe cuáles funcionan mejor para su tema.

Consejo de diseño: para obtener inspiración para las combinaciones de fuentes, puede consultar fontpair.co, que ayuda a emparejar las fuentes de Google. Divi no admitirá todas estas fuentes listas para usar, pero puede hacer una búsqueda de 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 del 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 usando CSS adicional (ver el final de la publicación).

COLOR DEL TEXTO DEL CUERPO

Aquí puede cambiar el color de su cuerpo de texto. Blogs populares como el New York Times y Smashing Magazine usan # 333333 para el color del texto del cuerpo. En mi opinión, esto tiende a leerse mejor sobre un fondo blanco.

COLOR DEL TEXTO DEL ENCABEZADO

Aquí puede cambiar el color de sus encabezados. Si te quedas con un tono de negro, me volvería un poco más oscuro que el texto del cuerpo 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 solo se aplica al diseño del cuadro . El color de fondo predeterminado es el 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.

Encabezado y navegación

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 desea resaltar más contenido en la mitad superior sin la distracción de la barra de navegación.

Barra de menú principal

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.

Consejo de diseño: Realmente necesita saber cuáles serán los enlaces de su menú antes de comenzar a perfeccionar el menú con Divi Theme Customizer. 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 hacer esto haciendo clic en los iconos del dispositivo en la parte inferior del personalizador o simplemente ajustando el tamaño de su navegador. Si está interesado, puede averiguar cómo corregir su navegación receptiva aquí.

Hacer ancho completo

Esto extiende el menú a todo el ancho de la ventana del navegador.

Ocultar imagen de logotipo

Si lo desea, aquí puede ocultar completamente la imagen del logotipo de su menú.

Altura del menú

Aquí puede cambiar la altura del menú a lo que desee. Sin embargo, tenga cuidado de no hacer que la altura de su menú sea demasiado grande, ya que podría estar desperdiciando valiosos bienes raíces 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 del texto, espaciado entre letras, fuente, estilo de fuente, color del texto, color del 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 de manera uniforme. Esto crea un efecto bastante bueno. Por ejemplo, este es un estilo de encabezado centrado con un fondo transparente y un encabezado de ancho completo directamente debajo de él. 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 por qué heredar el estilo del menú principal. Aquí puede crear un diseño único para su menú desplegable. Incluso puede agregar una animación personalizada al mostrar el menú desplegable.

Barra de menú secundaria

Aquí puede personalizar su barra de menú secundaria usando 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, incluida una dirección de correo electrónico, enlaces a redes sociales y un menú secundario.

De forma predeterminada, el menú secundario permanecerá oculto a menos que ingrese a 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ú.

Configuración de navegación fija

Navegación fija se refiere al estado del menú "fijo" o atascado en 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 de visualización más grande para mostrar el contenido del sitio.

Consejo de diseño: también puede establecer el color de fondo fijo del menú principal en un color semitransparente para revelar parte del contenido que hay 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

De forma predeterminada, Divi muestra iconos para Facebook, Twitter, Google+ y RSS. Puede editar estos perfiles en las Opciones de tema de Divi.

Pie de página

De forma predeterminada, la sección de pie de página está oculta a menos que esté llena de 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 iconos sociales.

Diseño

Aquí puede elegir entre 5 diseños para la sección de pie de página.

También puede establecer un color de fondo de 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 panel de control de wordpress en Apariencia> Widgets . Allí puede ver cuatro áreas de pie de página donde puede agregar widgets. Todos los widgets que agregue a estas secciones se mostrarán en el área de su pie de página.

Sin embargo, también puede acceder a las áreas de widgets sin tener que salir del personalizador de temas (una de mis cosas favoritas).

Elementos de pie de página

Aquí puede elegir mostrar sus íconos sociales en la barra inferior al igual que en el menú secundario.

Menú de pie de página

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 su pie de página y los íconos 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 icono social.

Editar créditos de pie de página

También puede reemplazar los créditos de pie de página predeterminados con el html que desee dentro de este cuadro.

Botones

Esta sección controla cuáles desea que sean los estilos de botón predeterminados.

Estilo de botones

Aquí puede personalizar el estilo de sus botones para su tema. No voy a entrar en grandes 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 diseñar botones.

Color de texto

Si observa, de forma predeterminada, el color del botón lo hereda el Color de acento del tema establecido en Configuración general. Esto es solo para módulos que tienen su texto configurado como "oscuro". Y los botones son blancos cuando el texto del módulo está configurado como "claro". Pero, tan pronto como establezca un color de texto personalizado para sus botones, este color se establece para versiones de texto claras y oscuras dentro de un determinado módulo.

Sugerencia de diseño: deje que el color de acento 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.

Botones Estilo Hover

Aquí es donde puede personalizar el estilo del estado de desplazamiento de sus botones.

Es importante que los usuarios comprendan 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. Ser predeterminado Divi agrega un fondo claro y anima un ícono de flecha a la derecha. Pero puedes cambiarlo a lo que quieras.

Consejo de diseño: si cambia 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 espaciado entre letras o ajustar el radio del borde para darle a su botón un efecto único al pasar el mouse.

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. En ocasiones, los encabezados de las publicaciones de tu blog deberán verse diferentes a los encabezados del resto de tu sitio. Aquí es donde harías esos ajustes.

Si elige utilizar el módulo de encabezado de publicación, estas opciones no serán efectivas.

Estilos móviles

Amo esta sección. Aquí puede ajustar el aspecto de su sitio en dispositivos móviles y ver los resultados en tiempo real.

Estilos de tableta y teléfono

Puede seleccionar Tableta 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.

Consejo 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

Menú móvil

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! Important.

En mi opinión, es mejor dejar esta configuración por defecto.

Menús y widgets

Ya no tienes que editar ciegamente tus 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. ¡Amo la conveniencia!

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 puedes implementar una nueva página desde dentro del Personalizador de temas para que sirva como tu página principal o página de blog sin tener que salir del personalizador.

CSS adicional

La sección de CSS adicional ofrece una gran oportunidad para dar los toques finales a la configuración de su tema. Cualquier cambio de estilo que el Personalizador de temas Divi no pueda controlar, puede hacerlo aquí con CSS personalizado. Debido a que el Personalizador le permite ver los cambios de CSS en tiempo real, puede hacer los ajustes necesarios en su tema mucho más fácilmente que ir y venir en una hoja de estilo externa.

Ejemplos de CSS adicionales

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.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Ejemplo n. ° 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.7em, es posible que también desee establecer el mismo valor en el relleno inferior entre párrafos para mantener una cuadrícula de línea de base 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:

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 1.7em se ajustará en consecuencia.

Ejemplo n. ° 3: agregar atributo de subrayado a sus enlaces

Agregue el atributo de subrayado a los enlaces del cuerpo.

a {
    text-decoration: underline;
}

Exportación e importación de la configuración del personalizador de 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 de personalizador para usar en sus proyectos futuros.

Primero, sugiero que se tome 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 Divi Theme Customizer y luego exportar esas configuraciones para que tenga la ventaja en sus próximos proyectos. ¿Por qué seguir haciendo las mismas cosas una y otra vez cuando ya puede hacerlo? Además, esto le ayudará a asegurarse de que no se salte 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.

Déle un nombre al archivo de exportación y haga clic en el botón "Exportar configuración del personalizador de Divi"

Ahora puede usar este archivo .json en el futuro haciendo clic en el mismo icono de portabilidad en Divi Theme Customizer y seleccionando Importar en lugar de exportar. Luego, todo lo que necesita hacer es cargar el archivo .json y hacer clic en "Importar configuración del personalizador de Divi".

Y eso es.

¿Qué incluye la configuración del personalizador de Divi?

La configuración del personalizador incluye básicamente todo en las primeras 7 secciones.

1. Configuración general
2. Encabezado y navegación
3. Pie de página
4. Botones
5. Blog
6. Estilos móviles
7. 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:

1. Menús
2. Widgets
3. Portada estática
4. CSS adicional

Es importante tener en cuenta que el CSS adicional no se transfiere. Es posible que confíe en esa configuración para que le brinde un impulso de ahorro de tiempo en su próxima compilación. Si este es el caso, sugiero crear un tema hijo 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 de Divi

Para Divi Customizer (junto con Divi Options y Divi Builder), Divi ofrece recursos CSS estáticos que los navegadores pueden almacenar en caché para reducir 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 independiente. Cada vez que guarda la configuración del personalizador, el archivo CSS estático se actualiza. Esto también incluye cualquier CSS adicional que haya agregado.

Pensamientos finales

Divi Theme Customizer viene con algunas opciones bastante poderosas y el proceso de personalización es conveniente y agradable de trabajar. Y obtener una comprensión más profunda de lo que pueden hacer estas opciones definitivamente mejorará la forma en que construye sitios web con Divi. Si aún no lo ha hecho, tómese un tiempo para explorar cuál sería la configuración de referencia óptima para un proyecto, conéctelos al Personalizador y cree un archivo de exportación. Te sorprenderá el impulso (y la confianza) que esto te dará a la hora de iniciar un nuevo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!