¡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.

Opciones de tema Divi: General

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.

¿Cuáles son los ajustes generales de Divi?

Veamos cuáles son los ajustes generales de Divi y cómo configurarlos de manera óptima.

Opciones generes del tema Divi: logotipo

#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.

Opciones generes del tema Divi: barra de navegación fija

#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:

Opciones generes del tema Divi: galería WordPress
Galería de WordPress (más estática)
Opciones generes del tema Divi: galería Divi
Galería de Divi (más dinámica)

#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:

Opciones generes del tema Divi: paleta de colores

#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).

Opciones generes del tema Divi: Tomar la primera imagen de la entrada

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í.

Opciones generes del tema Divi: Clave API de Google

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.

Opciones generes del tema Divi: insertar mapa Google iframe HTML

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.

Opciones generes del tema Divi: iconos de redes sociales y RSS

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
Opciones generes del tema Divi: número productos WooCommerce

#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:

Opciones generes del tema Divi: utilizar extractos

#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.