¡Hola DiviLover! Hoy iniciamos una serie de posts en los que vamos a repasar todas las opciones de tema Divi. Y como son muchas (general, navegación, constructor, diseño, anuncios, SEO, integración y actualizaciones), lo vamos a dividir en varios posts para no extenderlo demasiado.
Por lo tanto, en este primer post vamos a revisar cada una de las opciones generales de Divi.
Al tratarse de los ajustes generales del tema, son los que siempre recomiendo ajustar en primer lugar, es decir, cuando acabas de instalar la plantilla Divi, antes incluso de empezar con el diseño y maquetación de tu web.
Resumen
¿Cuáles son los ajustes generales de Divi?
Veamos cuáles son los ajustes generales de Divi y cómo configurarlos de manera óptima.
#1 Logotipo
El logotipo es uno de los primeros elementos que te recomiendo subir para que tu web empiece a tomar forma y puedas ajustar el resto de elementos referentes al branding (paleta de colores, tipografías, etc).
A la hora de subir el logo, puedes hacerlo en diferentes formatos de imagen, como son JPG, PNG o SVG. Recuerda subir siempre la imagen optimizada en tamaño y calidad.
Te dejo varios posts al respecto que te pueden interesar:
#2 Barra de navegación fija
Esta opción te permite habilitar la barra de navegación fija en tu web, es decir, convertir el menú principal en un elemento que no desaparece cuando el usuario hace scroll.
Aquí puedes activarlo o desactivarlo en función de tus necesidades y tipo de diseño.
Por defecto, la barra de navegación se mantiene en la parte superior de la pantalla en todo momento. Si no la necesitas, debes desmarcar esta opción.
#3 Activar galería Divi
Debes activar esta opción si quieres reemplazar el diseño que trae de WordPress por defecto en las galerías y sustituirla por el estilo de Divi.
Te muestro las diferencias entre ambas galerías:
#4 Paleta predeterminada de selección de colores
Esta es otra de las opciones de branding dentro de los ajustes generales de Divi, pues permite elegir la paleta de colores predeterminada de tu web, que luego podrás utilizar y personalizar en el resto de módulos y elementos: botones, títulos, enlaces, etc.
Permite seleccionar hasta 8 colores diferentes y recomiendo configurarlo al principio del todo.
Como ejemplo, esta es la paleta de colores de DiviFast:
#5 Tomar la primera imagen de la entrada
Ya sabes que, para generar imágenes en miniatura de tus artículos, debes subir una imagen en el apartado «imagen destacada» del editor de entradas de WordPress (en el panel lateral).
En el caso de que esto te resulte muy tedioso (webs de noticias, magazines, revistas, etc, con un gran volumen de trabajo) y quieras agilizar el proceso de publicación de entradas, puedes activar esta opción para que se genere la miniatura a partir de la primera imagen que incluyas en el post, de forma automática.
Recuerda que la imagen debe estar alojada en tu propio servidor, no puede ser un recurso externo.
#6 Modo estilo blog
Por defecto, Divi acorta las entradas en la página de inicio automáticamente para crear vistas previas de tus publicaciones.
Si prefieres mostrar sus entradas completas en páginas de índice como en un blog tradicional, debes activar esta funcionalidad.
#7 Diseño de la barra lateral
Aquí puedes elegir el diseño predeterminado de la barra lateral (sidebar), si mostrarlo en la parte izquierda o en la derecha de tu sitio.
#8 Diseño de la tienda y de las categorías en WooCommerce
Si tu sitio es un ecommerce, en este apartado puedes escoger el diseño de la página de tienda (donde se muestran todos los productos) y también de la página de categorías para WooCommerce.
Las opciones que tienes son tres:
- Barra lateral izquierda
- Barra lateral derecha
- Ancho completo
Tendrás que ajustarlo en función del diseño de tu tienda.
#9 Clave API de Google
El módulo mapa utiliza la API de Google Maps para mostrar ubicaciones específicas, lo cual requiere una clave API de Google válida para funcionar.
Antes de usar el módulo de mapas, debes asegurarte de haber añadido tu clave API aquí.
Si quieres más información sobre cómo crear una API de Google, te recomiendo leer este post de Elegant Themes, aunque te anticipo que desde hace un tiempo las APIs de Google no son gratuitas.
Consejo: si tienes que insertar un mapa, hazlo pegando su código iframe HTML en un módulo de código.
Esta es una forma rápida y sencilla de añadir mapas en tu web sin necesidad de pagar por obtener una API de Google.
#10 Poner el script de Google Maps en cola
Relacionada con el punto anterior, esta opción permite eliminar el script de la API de Google Maps de tus páginas maquetadas con Divi, lo cual puede mejorar la compatibilidad con otros plugins que también ponen este script en cola.
Debes tener en cuenta que los módulos que dependan de la API de Google Maps para funcionar (los módulos de mapa y mapa de ancho completo), estarán disponibles, pero no funcionarán mientras esta opción permanezca desactivada; a no ser que añadas de forma manual el script de la API de Google Maps.
#11 Usa las fuentes de Google
Esta función permite activar y desactivar las fuentes de Google (Googe Fonts) en tu web.
Mi consejo es que las actives para tener una mayor variedad a la hora de elegir las tipografías de tu web.
#12 Iconos de redes sociales y RSS
En este bloque de opciones puedes elegir qué redes sociales mostrar en el footer de tu web: Facebook, Twitter, Google+ (ya no existe) o Instagram. Tienes que habilitar o deshabilitar las redes que prefieras.
Además, también puedes mostrar el icono de RSS para que tus lectores se suscriban vía feed.
Una vez has elegido qué redes sociales vas a mostrar, debes añadir las URLs de tus perfiles en cada plataforma.
En el caso de la dirección RSS, te recomiendo enlazar con Feedly, que es la herramienta más extendida para suscripciones de noticias vía feed. Solo tienes que pegar este enlace, pero cambiando tu dominio.
http://feedly.com/i/subscription/feed/http://divifast.es/feed/
#13 Número de productos mostrados
El siguiente bloque de ajustes debes configurarlo si tu sitio es una tienda online. Aquí puedes elegir cuántos productos de WooCommerce quieres mostrar de forma predeterminada en diferentes páginas:
- Archivos
- Categorías
- Búsqueda
- Etiquetas
#14 Formato de fechas
Esta opción te permite elegir cómo se muestran las fechas en tu web. Por defecto viene configurado de esta forma: M j, Y. Es decir: mes – día – año.
Si quieres adaptar tus fechas a un formato en español, debes cambiarlo por j, M Y (día – mes – año).
#15 Utilizar extractos cuando se defina
Este ajuste permite el uso de extractos en entradas o página, que se mostrarán cuando los definas de forma manual.
El extracto o excerpt es el resumen que se genera de una entrada o una página.
Para que lo entiendas con un ejemplo, en el blog de DiviFast, los extractos serían los resumenes que aparecen en cada entrada, debajo de la imagen destacada y tl título:
#16 Códigos cortos receptivos
Puedes activar esta opción para crear códigos cortos (shortcodes) que respondan a diferentes tamaños de pantalla. Te recomiendo tenerla activada.
#17 Subgrupos de Google Fonts
Si activas esta opción, se habilitarán las Google Fonts para idiomas distintos al inglés, cosa que te recomiendo para que tengas variedad a la hora de escoger las tipografías de tu web.
#18 Botón de volver arriba
Aquí puedes activar y desactivar el botón de «volver arriba», el cual siempre te recomiendo tener activado por cuestiones de usabilidad, especialmente desde el móvil.
Si quieres personalizar el botón “volver arriba” de Divi, en este post te explico cómo hacerlo.
#19 Desplazamiento suave
Si activas esta opción, obtendrás un efecto de desplazamiento suave al navegar por tu web con la rueda del ratón. Sin duda, te recomiendo tenerlo activado.
#20 Desactivar traducciones
Esta función te permite activar y desactivar la traducción de las opciones del tema. Si la activas, Divi pasará a estar en inglés.
Por lo tanto, en función de tu nivel de inglés, puedes activar o no esta opción. En mi caso, siempre la tengo desactivada para las opciones de Divi estén en español.
#21 Habilitar imágenes receptivas
La opción de imágenes receptivas permite la creación de imágenes adicionales en el momento de la carga, en varios tamaños.
Dichas imágenes se usan luego para diferentes dispositivos y tamaños de pantalla con el uso del código «srcset», el cual proporciona la forma para que el navegador sepa qué archivo de imagen exactamente «extraer» dentro de la página en el menor tiempo de carga posible.
#22 Reducir y combinar archivos Javascript
Esta opción y la siguiente están relacionadas con la WPO y te recomiendo activarlas siempre. La primera permite combinar y minificar los archivos Javascript de Divi para acelerar la carga de tu web.
#23 Minimizar y combinar archivos CSS
La segunda permite minimizar y combinar todos los archivos CSS de tu web, cosa que también reduce los tiempos de carga.
Recuerda activar ambas funciones siempre.
#24 CSS personalizado
Por último, llegamos al bloque en el que podemos añadir CSS personalizado a Divi para así modificar el aspecto de elementos concretos.
El tema incluye infinidad de opciones de personalización, pero si necesitas ir un paso más allá y controlas de código, aquí es donde debes añadirlo.
Te dejo un post con 18 efectos CSS para personalizar tu web o blog con Divi.
Hasta aquí llega este repaso por cada uno de los ajustes generales de Divi, el que es el primero de varios post donde repasaremos todas las funcionalidades del tema.
Gracias
Hola, estoy diseñando con divi en worspress 5.8 y las imagenes que estan en jpg, no me las muestra, las de png tampoco. Solo las muestra en el navegador Internet Explorer y el Mozilla, en chrome y opera aveces las muestra y otras veces no las muestra. Ya he probado limpiando el historial y nada.