Contenidos
Ajustar el diseño y la tipografía del sitio
Para empezar a personalizar el diseño y la tipografía de su sitio, primero debe ingresar al Personalizador de tema, con un clic en el enlace Divi > Personalizador de tema del menú de WordPress. Esto abrirá el personalizador. Luego busque el panel Ajustes generales. Haga clic en el panel para abrir los ajustes correspondientes y comience a personalizarlos.
Dentro del panel Ajustes generales, verá cuatro secciones: Identidad del sitio (opción nativa de WordPress), Ajustes de diseño, Tipografía y Fondo.
Ajustes de diseño
En este panel podrá ajustar varias opciones de tamaño y espaciado para su sitio. Aquí puede aumentar o disminuir el espacio entre columnas, filas y secciones, y modificar el tamaño de la barra lateral. También puede activar el diseño con recuadro desde este panel.
- Activar diseño con recuadro – Aquí puede cambiar el diseño del sitio, mostrando un recuadro que enmarca el contenido y expone el fondo que podrá ser personalizado.
- Ancho del contenido del sitio – Aquí es donde se puede asignar el ancho máximo de la sección del contenido. Como el contenido está basado en un diseño adaptable, se ajustará a tamaños menores de pantalla pero no se expandirá más allá del ancho máximo que se configure aquí.
El ancho predeterminado es de 1080px. Esta es una buena medida para la mayoría de los equipos de escritorio y laptops. - Ancho de separación del sitio – El ancho de separación corresponde a la cantidad de espacio horizontal (margen) entre las columnas de cada fila. Los valores opcionales del ancho de separación van de 1 a 4. 1 representa un margen cero entre columnas. 2 representa un 3% de margen derecho entre columnas. 3 representa un 5.5% de margen derecho entre columnas. 4 representa un 8% de margen derecho entre columnas.
- Usar ancho personalizado de barra lateral – Esto asigna el ancho predeterminado de la barra lateral para el tema. Aplica para todas las páginas que tengan una barra lateral y no hayan sido creadas con el constructor.
- Altura de sección – Esta opción ajusta la cantidad de espacio vertical (relleno superior e inferior) de cada sección.
- Altura de fila – Esta opción ajusta la cantidad de espacio vertical (relleno superior e inferior) de cada fila.
- Color de acento del tema – Antes de que empiece a cambiar los colores de los demás elementos, debería cambiar esto primero. Una vez que lo cambie, guarde y publique los ajustes y recargue la página. Ahora el color de acento del tema se habrá propagado automáticamente en otros elementos.
Tipografía
En el panel Tipografía podrá ajustar la apariencia predeterminada del texto en todo el sitio. Puede seleccionar el tamaño de las fuentes del texto y de los títulos, que se verán reflejados por igual en todas las áreas del sitio. También puede seleccionar los colores, así como la altura de línea, el espacio entre letras y los estilos de fuente. Por último, también podrá elegir entre docenas de fuentes para aplicar a cada opción.
- Tamaño de textos – Esto cambia el texto predeterminado del tema. El tamaño predeterminado es de 14px.
- Altura de línea de textos – La altura de cada línea individual de texto.
- Tamaño de texto del título – Divi le permite asignar un tamaño de texto para los encabezados aquí. Esto afecta elementos como los títulos del módulo Encabezado de ancho completo.
- Espacio entre letras del encabezado – El espacio entre letras ajusta la distancia horizontal entre caracteres. Este valor afecta a todos los niveles de encabezados (h1, h2, h3, h4, h5, h6), los bloques de citas y los títulos de las diapositivas.
- Altura de línea del encabezado – Al igual que el valor de espacio entre letras, la altura de línea afecta a todos los niveles de encabezados (h1, h2, h3, h4, h5, h6), los bloques de citas y los títulos de las diapositivas. Por el tamaño mayor de fuente, el valor predeterminado es 1em.
- Estilo de fuente del encabezado – Use estas opciones para cambiar el estilo de fuente de los títulos.
- Fuente de títulos – La fuente predeterminada de Divi es Open Sans, pero el personalizador de tema contiene casi cien fuentes de las cuales puede elegir. Aproveche estas fuentes incluidas y pruebe cuáles funcionan mejor con su diseño.
- Fuente de textos – La fuente predeterminada de Divi es Open Sans, pero el personalizador de tema contiene casi cien fuentes de las cuales puede elegir. Aproveche estas fuentes incluidas y pruebe cuáles funcionan mejor con su diseño.
- Color de enlace de textos – El color de enlace de textos es heredado del color de acento del tema. Pero puede cambiarlo aquí.
- Color de textos – Aquí puede cambiar el color de los textos del tema.
- Color de texto del título – Aquí puede cambiar el color de los títulos del tema.
Fondo
El panel Fondo le permite seleccionar el color de fondo del tema, así como también subir una imagen personalizada para usar como fondo, y ajustar la posición en la página. Las imágenes y colores de fondo dan muy buenos resultados cuando se usa el diseño con recuadro mencionado en la sección anterior.
Hola, antes que nada gracias por el artículo. Me interesaría saber por qué cuando intento modificar «Altura de línea de textos», el constructor no me hace caso, Qué estaré haciendo mal? Gracias desde ya.
Hola, José.
Gracias por tu comentario.
Si estás dentro de una página creada con el constructor y no ves cambios, es probable que los módulos ya tengan asignado un valor de altura de línea (estos siempre prevalecen por sobre los ajustes del personalizador).
Para probar que funciona, abrí el personalizador desde una entrada del blog o página donde no hayas usado el constructor (sino el editor estándar).
Saludos.
Hola! Quería saber si existe la posibilidad de configurar algún parámetro del texto para que en la versión móvil no corte las palabras cuando se trabajan tipografías en tamaños grandes. En vez de eso que por ejemplo coloque la palabra entera en la siguiente fila.
Un saludo.
Hola, Patricia.
Gracias por tu comentario.
A partir de la versión 2.6 los tamaños de los textos para los distintos dispositivos se pueden controlar desde los ajustes de diseño de cada módulo.
Si te referís a las fuentes predeterminadas, tendrías que usar media queries en la hoja de estilos o CSS personalizado. Ejemplos:
/* reglas CSS para tablet */ @media (max-width: 767px) { h1 { font-size: 20px; } } /* reglas CSS para teléfonos móviles */ @media (max-width: 479px) { h1 { font-size: 16px; } }Saludos.
Como agrego una fuente extra
Hola, Claudia.
Podés subir una fuente arrastrando el archivo a la ventana del constructor visual y estará disponible como fuente personalizada en los módulos.
Si necesitás agregarla en el personalizador, podés usar un plugin (como este, por ejemplo).
Saludos.
Hola, me ha venido un nuevo cliente con una web ya realizada para que se la rediseñe y me he encontrado con un problema.
Quiero cambiar la tipografía y el tamaño de letra en algunos párrafos y no me deja. Los cambios los hago en el mismo bloque de texto en el apartado de diseño, pero no produce ningún cambio. ¿Alguien me ayuda?
Hola, Roberto.
En primer lugar, fijate que el texto no tenga estilos directamente aplicados en el código (esto se ve desde la pestaña Texto del editor).
Si no es el caso, puede deberse a un tema de caché, o a algún conflicto con otro plugin.
Saludos.
Hola! Necesito definir la tipografía para la barra del menú principal y, si bien puedo elegir la Open Sans en el personalizador de tema Divi, no me da la posibilidad de elegir las diferentes variables, light, normal, bold, etc. Como puedo hacer? Muchas gracias
Hola, Walter.
En este caso tendrías que usar CSS (en el recuadro CSS adicional). El código sería:
#main-header, #et-top-navigation { font-weight: 300; }Usá el valor de peso de fuente que necesites (puede ser normal, bold o un valor numérico).
Saludos.
Buenos días, a lo mejor no es exactamente en esta sección, tengo un problema con la nube de etiquetas del widget del blog, y es que cada una sale de un tamaño y en mayusculas y minúsculas y no se como puedo unificarlo, si pudiera ayudarme…
Muchas gracias!
Hola, Rebeca.
Gracias por tu comentario.
Los estilos de la nube de etiquetas son adrede; esos distintos tamaños sirven para denotar la «densidad» de las entradas dentro de esa etiqueta: a mayor cantidad de entradas, mayor el tamaño de la tipografía.
En el caso de que quieras mostrarlas en una lista, tendrías que usar CSS personalizado. El código sería el siguiente:
.wp-block-tag-cloud a { font-size: 14px !important; display: block; }Y las mayúsculas/minúsculas se manejan con la propiedad
text-transform. Puede seruppercasepara todo mayúsculas olowercasepara todo minúsculas.Saludos.