Tutorial Divi - Cómo sacar el 100% de la mejor plantilla WordPress

Éste es un post de invitado de Pedro Suárez. Pedro es autor de la web pedrosuarezweb.com y se dedica al diseño web, estando especializado en WordPress y Divi.

Una de las grandes claves en el éxito de WordPress ha sido ponérselo fácil a con el diseño de su web a personas "normales", personas que no son profesionales del diseño, con el concepto de plantillas o temas personalizables.

tutorial divi mejor plantilla wordpress

Imagen de Shutterstock - © Africa Studio

La idea de las plantillas pre-diseñadas por profesionales del diseño ha sido genial, porque te permite arrancar casi sin esfuerzo alguno desde el primer momento con un sitio web que visualmente va a causar una buena primera impresión al lector, no como los sitios web de antaño, que nada más llegar daban ganas de salir corriendo...

Entre todas ellas, Divi se ha erigido poco a poco como el lider por ser posiblemente la más personalizable, más versátil y más fácil de utilizar. Y también porque Elegant Themes (la empresa detrás de Divi), sigue la cursiosa política de regalar junto con Divi todos los demás temas y plugins de su catálogo, puedes verlos aquí.

En el repositorio de temas de WordPress puedes encontrar miles de plantillas gratuitas. Además, éstas, si bien en los primeros años de WordPress dejaban bastante que desear, en los últimos años ya puedes encontrar diseños muy profesionales.

No obstante, estas plantillas gratuitas suelen tener un problema común: muy escasas posibilidades de personalización.

Por eso, quedan razones de mucho peso para plantearte usar un tema profesional de pago en vez de uno gratuito, una plantilla que te permita personalizar cualquier cosa de tu web y que te permita hacerlo de una manera fácil.

En este post te explicaré primero brevemente estas razones y luego empezaremos con la primera parte de un tutorial completo para crear un blog desde cero con Divi que es la plantilla WordPress que recomiendan también Berto y Raquel en Ciudadano 2.0.

La razón de recomendar Divi es que, en este momento, es a mi juicio la mejor plantilla de WordPress de propósito general (válida para crear cualquier estilo de sitio) y orientada a usuarios “normales”, sin conocimientos técnicos, ni de diseño; tiene una infinita capacidad de personalización y se maneja de manera 100% visual.

No es extraño que, por todas estas razones, ha arrasado en los últimos tiempos conviertiéndose en la plantilla WordPress profesional más popular con diferencia.

¿Por qué usar una plantilla WordPress profesional como Divi?

La pregunta obvia es, ¿por qué usar entonces una plantilla profesional de pago como Divi?

1. Capacidad de personalización limitada en los temas gratuitos

Las capacidades de personalización suelen ser muy limitadas en los temas gratuitos. Normalmente, más allá de unos pocos colores básicos y cambiar el logotipo, poco más vas a poder personalizar. Incluso algo tan básico e importante como poder cambiar el tipo de letra para los menús, títulos y texto de los contenidos, etc., no lo puedes ajustar en casi ninguno.

2. Calidad

No recibir un retorno económico por un trabajo, limita el tiempo que le puedes dedicar y eso se nota en la calidad. Por eso, en muchos temas gratuitos, aunque bonitos, la calidad (nivel de errores e incompatibilidades con plugins, velocidad, etc.) deja que desear.

Aquí habría que exceptuar los temas “freemium”, que son versiones gratuitas “capadas” de la versión de pago y el nivel de calidad, por tanto, similar.

3. Actualizaciones y soporte

Muchos de los temas gratuitos son abandonados con el tiempo. Es lógico ya que, si no dan un retorno económico al autor, con el tiempo se hace cada vez más complicado que se motive para seguir trabajando en él.

Por otra parte, también es lógico; la dedicación que requiere un buen soporte, un autor la puede ofrecer gratis a miles de personas. Con las ganas, al principio, se logran milagros. Pero con el tiempo, si no hay ingresos, la motivación va a menos.

4. Documentación

Aquí nos encontramos el mismo problema derivado de la falta de ingresos. Un producto potente necesita documentación (escrita, en forma de videotutoriales, trucos y consejos, ejemplos de diseños, etc.). De nuevo, sin ingresos es mucho más difícil crearla y mantenerla.

5. Seguridad

Un trabajo de programación para WordPress como una plantilla, entraña siempre riesgos de seguridad, de dejar puertas abiertas a ataques maliciosos por malas prácticas en la programación o simples errores.

De nuevo, en un tema profesional con un buen equipo y una dedicación constante detrás, éste se va mejorando constantemente, y cuánto más popular es ese tema, más feedback tiene de la comunidad de este tipo de problemas, para que sean corregidos. Un tema gratuito, y más si no es demasiado popular, es más susceptible de contar con fallos de este tipo.

6. Relación prestaciones / precio

Los motivos anteriores ya me parecen razón suficiente para plantearse un tema profesional, pero la razón definitiva es que, además, un tema como Divi no es algo muy caro.

Como veremos luego, Divi lo puedes adquirir por $89 (menos de 80€ al cambio) y es simplemente poco dinero en relación con el valor que te aporta, todo lo que tiene que ofrecer y el hecho de que con Divi te quitas de problemas; cualquier modificación del diseño que quieras hacer con el tiempo, sabes que la podrás hacer con esta plantilla de WordPress.

Cómo instalar la plantalla Divi de Elegant Themes

Además de explicarte los pasos para instalar Divi en WordPress, te voy a contar también dónde puedes adquirirlo y cuáles son las configuraciones básicas imprescindibles.

Así que vamos al lío 😉

Dónde adquirir Divi

Divi, al ser un tema premium, no es accesible a través del repositorio gratuito de WordPress.

Para poder adquirirlo debes dirigirte a la web de Elegant Themes donde podrás realizar el pago correspondiente, dependiendo del plan que elijas.

En la actualidad existen dos planes:

  1. Yearly Access: por 89$ al año (pasado ese año tendrás que renovar si quieres acceder a las actualizaciones).
  2. Lifetime Access: por un pago único de 249$.
planes elegant themes
Planes de contratación de Elegant Themes.

Con la contratación de alguno de estos planes tendrás acceso a:

  • Todos los temas premium de Elegant Themes (casi 90).
  • Todos sus plugins premium: Divi Builder, Monarch y Bloom.
  • Actualizaciones y mejoras.
  • Soporte técnico.
  • Uso ilimitado (puedes instalar cualquiera de sus productos en tantas webs como consideres necesario).

Cómo instalar Divi en WordPress

Una vez has adquirido alguno de sus planes, lo siguiente es instalar Divi. Para ello, sigue los siguientes pasos que te he marcado:

  1. Accede a tu área de usuario de Elegant Themes.
  2. En la sección Downloads dirígete a Divi y presiona "Download" para descargar el tema en formato zip. Descomprime la carpeta.
  3. Accede a WordPress y ve a "Apariencia > Tema > Añadir un nuevo".
  4. Presiona en "Subir tema > Elegir archivo". Selecciona tu carpeta de Divi.
  5. Haz clic en "Instalar" y luego actívalo.

Nota: si durante el proceso de instalación tuvieras algún problema, seguramente esté relacionado con el límite de memoria. Aunque existen diversas formas de abordar este asunto, lo mejor que puedes hacer es solicitar un aumento de la misma a través de tu proveedor hosting favorito.

Pasemos al primer vídeo donde te muestro cómo instalar tanto tu tema Divi, como su constructor visual Divi Builder:

Configuraciones básicas imprescindibles en Divi

Tras instalar el tema, la configuración viene administrada por medio de tres niveles básicos:

  1. Opciones del tema: el nivel más básico de configuración donde puedes añadir tu logotipo, modificar el menú de navegación, mantener tu tema actualizado, etc...
  2. Personalizador de temas: para realizar ajustes mucho más específicos en el contenido de tu blog, tu cabecera, y otros elementos como el pie de página.
  3. Personalizador de módulos: si utilizas Divi Builder esta opción te permite establecer configuraciones que se aplicarán por defecto en cada uno de sus módulos.

De todas ellas, la más básica e imprescindible se corresponde con las Opciones del tema de la que hablaremos a continuación.

Las dos restantes las incluiremos en las distintas etapas del diseño de tu blog con Divi en los siguientes posts de esta serie.

Si necesitas un hosting para tu web o tienda online, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

Opciones del tema

Para comenzar a configurar tu blog con Divi, accede a WordPress y en el menú lateral pasa el ratón sobre el icono de Divi.

Te saldrá un menú desplegable con todos los menús de configuración y otras opciones más.

Haz clic en el menú "Opciones del tema" para acceder a él:

boton opciones tema
Acceso a las Opciones del tema.

Esta herramienta te permitirá comenzar a configurar tu blog con Divi mediante una serie de ajustes generales sobre determinadas opciones.

Como verás, todas ellas se encuentran agrupadas en las siguientes pestañas:

  • General.
  • Navegación.
  • Builder.
  • Layout.
  • Ads.
  • SEO.
  • Integration.
  • Updates.
opciones tema
Opciones del tema.

A pesar de existir documentación suficiente sobre las Opciones del tema, a continuación te muestro los ajustes más importantes que deberás realizar en tu blog con Divi:

1. General:
  • Sube tu logotipo y favicon para tu sitio web.
  • Activa / desactiva tu barra de navegación, para que se quede siempre fija y visible mientras navegan por tu blog.
  • Introduce la API de Google en caso de utilizar algún servicio de geolocalización a través de Google Maps.
  • Añade las URLs de tus redes sociales y activa cada una de ellas, para poder hacer uso de tus iconos sociales en la barra de navegación, pie de página y en otras partes de tu blog.
  • Activa el botón de "volver arriba", para facilitar la navegación de tus lectores.
2. Navegación

En esta pestaña controlarás todo lo relativo a la navegación, tanto de tus páginas como de las entradas de tu blog.

Podrás excluir determinados enlaces, fijar un número determinado de menús desplegables, así como activarlos o desactivarlos.

Mi recomendación es que omitas esta opción y configures tu navegación creando menús a través del sistema de navegación que te ofrece WordPress por defecto, ya que es mucho más sencillo e intuitivo de configurar.

No te preocupes, que Divi te ofrece un acceso directo a él a través de su herramienta el Personalizador de temas. Lo veremos más adelante 😉

Una vez creado éste, se visualizará perfectamente en la cabecera de tu blog con Divi.

3. Builder

Gracias a esta opción, todo el CSS generado a través del plugin Divi Builder quedará almacenado en un archivo estático mejorando de esta forma el rendimiento de tu blog considerablemente.

Deja todo como se encuentra por defecto:

  • Static File Generation: activa.
  • Output Styles Inline: desactivada.

Así conseguirás una mayor optimización de tu sitio web y, por tanto, una reducción del tiempo de carga, mejorando tu posicionamiento en los buscadores.

4. Layout

Con esta opción podrás activar o desactivar determinada información en forma de metadatos (autor, fecha, categorías y comentarios) tanto en tus páginas como en tus entradas, así como restringir el uso de comentarios.

Desde un punto de vista práctico, es mejor que te centres en la primera pestaña relativa al “Diseño de la entrada individual” y activar las casillas que consideres necesarias, ya que es la que más uso le darás.

En mi caso, tengo solo activada la información relativa al autor y al número de comentarios.

5. Ads

Si te interesa monetizar tu blog a partir de la publicidad con Google Adsense aquí podrás añadir un banner, su imagen correspondiente, la URL, así como el código correspondiente.

6. SEO

Divi te permite controlar aspectos relativos al SEO como, por ejemplo, agregar un título personalizado a tu blog, así como una descripción tanto para la home page como para tus entradas y muchas opciones más.

En este caso te recomiendo hacer uso del que es quizás el mejor plugin SEO que existen en la actualidad: Yoast SEO.

Un plugin muy potente, fácil de usar y sobre el que encontrarás muchísima información  para sacarle todo el partido.

7. Integration

Esta sección te servirá para implementar cualquier tipo de código en diferentes áreas de tu documento HTML como, por ejemplo, en las etiquetas <head> y <body>.

Especialmente interesante si sabes de programación y quieres modificar la estructura de varios elementos HTML a través de librerías como, por ejemplo, jQuery o necesitas añadir código de seguimiento de Google Analytics, Facebook Ads o alguna herramienta de email marketing como Active Campaign.

8. Updates

No te olvides de completar esta parte nada más instalar tu tema Divi en WordPress.

Introduce tanto tu nombre de usuario como la clave API que encontrarás en tu área de usuario de Elegant Themes para poder tener acceso directo a las actualizaciones.

Vamos con otro vídeo para comprender mejor cómo funciona las Opciones del tema:

Diseño básico y branding

Los seres humanos somos animales altamente sensibles a elementos como las imágenes puesto que gran parte de la información que transmitimos a nuestro cerebro se realiza de forma visual.

En el ámbito del diseño web ocurre exactamente lo mismo.

Por eso el branding, es decir, la construcción de una imagen o marca personal que mostrar a los demás, será vital en la viabilidad de tu proyecto, logrando así diferenciarte con éxito en un mercado tan competitivo como es el de internet.

Durante la creación de tu marca, el diseño de tu blog jugará obviamente un papel fundamental.

Lo bueno de utilizar un tema como Divi frente a la utilización de productos gratuitos es que te aportará todas las herramientas necesarias para que los aspectos técnicos involucrados en el proceso de creación no sean un obstáculo.

A continuación veremos cómo gracias a herramientas como el Personalizador de temas lograremos desarrollar elementos fundamentales en el diseño de tu blog como por ejemplo tu cabecera, colores, tipografía, para, una vez terminado esa etapa, poder centrarnos en el contenido con la ayuda de Divi Builder.

Esquema de colores, cabecera, logotipo y pie

Si accedes al Personalizador de temas verás como todo el contenido está organizado a través de las siguientes categorías o pestañas:

  • Ajustes generales.
  • Cabecera y navegación.
  • Pie.
  • Botones.
  • Blog.
  • Estilos para dispositivos móviles.
  • Combinación de colores.
  • Menús.
  • Widgets.
  • Portada estática.
  • CSS adicional.

Para comenzar a diseñar tu blog con Divi nos centraremos en las más relevantes: ajustes generales, cabecera y navegación y pie.

personalizador temas
Personalizador de temas.

Ajustes generales

En esta sección aplicaremos una serie de configuraciones generales en tu blog:

  • Identidad del sitio: aquí podrás añadir el título de tu blog y una descripción corta que resuma a la perfección lo que tu audiencia podrá encontrar en ella. Muy importante de cara a lograr un correcto posicionamiento desde el principio.
  • Ajustes de formato: establece principalmente la anchura del contenido de tu blog y la altura de las secciones y filas, elementos imprescindibles en el proceso de maquetación con Divi Builder.
  • Tipografía: selecciona el tipo de fuente tanto para el texto de cabecera (elementos ) como para el texto del cuerpo y aplícale los estilos y colores que estimes conveniente.
  • Fondo: aquí puedes seleccionar el color de fondo que tendrá tu blog e incluso pondrás una imagen en su lugar.

Cabecera y navegación

La cabecera es un elemento indispensable en tu blog, ya que te permitirá navegar rápidamente a través de las páginas que conforman tu sitio web.

Como podrás comprobar, Divi la divide en un menú principal, donde colocarás normalmente los enlaces más relevantes de tu blog y uno secundario, para añadir información y otros enlaces que consideres de especial interés.

Para configurar correctamente tu cabecera sigue estas recomendaciones:

  • Formato de cabecera: podrás establecer un estilo de cabecera dejando tu logotipo a la izquierda y el menú principal a la derecha, ambos centrados quedando el logotipo encima del menú, centrados en línea, etc... Mi recomendación es que, sea cual sea la modalidad que elijas, el menú sea lo más minimalista y accesible posible, para mejorar siempre la experiencia de usuario.
  • Barra de menú principal: céntrate en establecer la altura del menú y del logotipo y aplicar los estilos de las fuentes de cada uno de sus enlaces.
  • Barra de menú secundario: prácticamente igual que el caso anterior, solo que en éste el logotipo no está presente.
  • Ajuste de navegación fija: si seleccionaste la opción Barra de navegación fija en las Opciones de tema, tu menú siempre estará visible, con independencia de si subes o bajas a distintas zonas de tu web. En este apartado podrás configurar su apariencia a través de los estilos de que brinda esta opción.
  • Elementos de la cabecera: si activaste mostrar tus iconos sociales en las Opciones de tema podrás mostrarlos en tu barra de navegación secundaria, junto con un icono de búsqueda y una dirección de email.

Pie

El pie de página o footer es la zona inferior que está presente en prácticamente todo sitio web.

Está formado por una área de widgets, un menú inferior y una barra inferior.

Veamos con algo más de detalle cada una de sus partes:

  • Diseño: distribuye en número de columnas de tu área de widgets y designa un color de fondo general para tu pie de página.
  • Widgets: aplica todos los estilos del área de widgets referente a los textos, enlaces, etc…
  • Elementos del pie: aquí activarás tus iconos sociales para que se muestren en la barra inferior.
  • Menú inferior: si creaste un menú inferior en WordPress, éste se mostrará aquí. Podrás establecer su color de fondo y los estilos referentes al texto.
  • Barra inferior: el último elemento del pie donde podrás editar tus créditos y cambiar su apariencia a través del color de fondo, tipografía, etc..

Personalización del logotipo y menú

Para personalizar tu logotipo y el menú nos centraremos con mayor detalle en algunas de las pestañas vistas anteriormente en el Personalizador de temas, en concreto:

  • Cabecera y navegación: Formato de cabecera y la Barra de menú.
  • Menú: aplicable solo al menú de navegación.
estilo cabecera
Estilos de cabecera en el Personalizador de temas.

Formato de cabecera

En ella verás el menú desplegable Estilo de cabecera, que te permitirá personalizar la ubicación de tu logotipo:

  • Por defecto: tu logotipo estará situado a tu izquierda y el menú de navegación a la derecha.
  • Centrado: centrarás tanto el menú como el logotipo, quedando este último en la parte superior.
  • Logotipo centrado en línea: situación similar a la anterior pero en este caso el logotipo se ubicará en el centro, entre los enlaces del menú de navegación.
  • Deslizar: el logotipo se sitúa a la izquierda como el primer caso, mientras que el menú se oculta a través de un panel deslizable que se muestra al hacer clic sobre el icono de .
  • Pantalla completa: la ubicación del logotipo es la misma que en el caso anterior. Lo único que cambia es el modo en el que el menú de navegación se muestra, en este caso ocupando toda la pantalla.

Barra de menú principal

En la pestaña Barra de menú principal podrás ocultar la imagen del logotipo y establecer una altura máxima tanto para éste como para la de tu menú de navegación.

Además, como vimos anteriormente, podrás configurar los estilos de los textos de tu menú al poder cambiar el tipo de fuente, el color y tamaño de los textos, etc...

Menús

En la pestaña Menús podrás crear tantos menús como quieras, establecer un nombre y una ubicación (principal, secundario o inferior) y añadir tantos enlaces o ítems como consideres necesario.

Esta opción, como otras opciones de Divi, es nativa de WordPress por lo que podrás también ejecutarla a través del administrador, en concreto, mediante la ruta "Apariencia > Menú".

Lo bueno de esta funcionalidad es que para administrar tus menús no tendrás por qué abrir otra página o abandonar la que estás utilizando para acceder al administrador de WordPress, con la consiguiente pérdida de tiempo que esto te llevaría.

Vamos con otro vídeo a partir del cual te muestro paso a paso en qué consiste el Personalizador de temas y cómo hacer los cambios necesarios en la cabecera y navegación siguiendo un modelo parecido al de Ciudadano2.0:

Diseño responsive

El diseño responsive no es más que un conjunto de técnicas aplicadas en un sitio web para que cada una de sus páginas se adapten correctamente en los diferentes dispositivos móviles.

Como comprenderás, en un mundo en el cual el uso de tablets y smartphones está aumentando cada día más, hacer que tu blog sea responsive es un requisito indispensable.

estilo responsive
Ajustes responsive en el Personalizador de temas.

Divi, así como los diferentes elementos de Divi Builder, se adapta con mucha precisión a éstos, evitando tener que dedicarle mucho tiempo a este tipo de tareas.

De todas formas, encontrarás varias vías de ajustar aún más tu diseño responsive.

Lo podrás configurar a través de las siguientes herramientas:

  1. Personalizador de temas > Estilos para dispositivos móviles: aquí podrás configurar estilos generales como el tamaño de los textos y la altura de las secciones y filas de tu contenido, tanto para tablets como para smartphones.
  2. Divi Builder: el plugin te permite personalizar estilos responsive como el margen, relleno, tamaño, espaciado, altura de los textos, etc... en prácticamente cualquier componente, ya sean filas, secciones o módulos.

Para comprobar la apariencia de tu blog en los dispositivos móviles podrás utilizar los modos de visualización que te aportan tanto el Personalizador de Temas como el constructor Divi Builder.

Estilos de blog

Una de las ventajas de Divi frente a otros productos gratuitos es la capacidad de poder personalizar cada uno de los elementos de éste a través del tema junto con Divi Builder.

No importará en absoluto la temática que tienes pensado mostrar a tu audiencia, ni el peso que jugarán los diversos elementos de tu blog.

Divi es un producto multi propósito, por lo que te permitirá crear prácticamente cualquier tipo de blog que tengas en mente.

A continuación te muestro una serie de diseños de blogs reales editados a través de Divi y Divi Builder:

Blog tradicional

Blog tipo magazine

  • Mporumontreal: proyecto basado en un festival de música que se celebra todos los años en Montreal
  • Monterey Bay Fun: web sobre la bahía de Monterrey y todas las actividades relacionadas con la zona.

Blog visual

Personalización vía CSS

Si eres de los que te gusta ir más allá y tienes conocimientos en lenguajes de estilos CSS, las oportunidades de personalizar tu blog serán mucho mayores.

Divi te ofrece muchas posibilidades para que implementes tu código en multitud de elementos de tu blog.

Te muestro a continuación cómo hacerlo:

CSS adicional / CSS personalizado

Gracias a la opción CSS personalizado que encontrarás en la pestaña general de las Opciones del tema junto con la de CSS adicional, en el Personalizador de temas podrás añadir todo el código que necesites.

Tan fácil como escribirlo, guardar tus cambios, publicarlos y listo.

Elementos de Divi Builder

Además de todo esto, todos y cada unos de los elementos que podrás crear con Divi Builder, es decir, sus secciones, filas, columnas y módulos están preparados para que los puedas personalizar con CSS.

Por un lado, podrás establecer clases e identificadores CSS para que después puedas aplicarles tus estilos en el CSS adicional / CSS personalizado del que te hablé justo arriba.

Por otro, cada uno de estos componentes tiene disponibles unas serie de campos correspondientes a diversas partes de la estructura de cada elemento para que allí insertes tus reglas CSS y los apliques a ellos de forma específica:

personalizacion css
Personalización vía CSS con Divi Builder.

Antes de terminar, me gustaría agradecer de corazón la oportunidad que Berto y Raquel me han dado de publicar un post en su casa, algo con lo que siempre soñé y que hoy se ha convertido por fin en una realidad 🙂

Espero que este artículo te haya aportado valor y que, tras su lectura, puedas exprimir al máximo el potencial de esta magnífica herramienta. Pero... ¡esto no ha hecho más que empezar! Si de verdad quieres saber cómo sacarle el máximo partido, no te pierdas mi siguiente post, en el que te explicaré cón detalle cómo puedes crear un blog con Divi.

¿Te gustaría leer más sobre esta temática? Busca aquí:

Acerca del autor: Pedro Suárez

Soy diseñador web. especializado en WordPress y Divi. Trabajo ayudando a aquellas personas que quieren mejorar sus vidas gracias al potencial de internet y las nuevas tecnologías implementando la web que realmente necesitan.

Descarga ahora mi guía gratuita para comenzar a diseñar tu web con WordPress sin complicaciones.


44 comentarios en «Tutorial Divi - Cómo sacar el 100% de la mejor plantilla WordPress»

  1. Hola, cambie el theme de Bento a Divi, solia publicar entradas que se visualizaban en el proyecto correspondiente, es decir posts de una categoria en proyecto de la misma categoría, ahora me es dificultoso hacer que cada entrada se abra en el proyecto con diseño propio. La verdad no recuerdo si usaba algun plugin para esto, hace tanto que no meto mano a la letra chica de las configuraciones que me perdi. Cualquier ayuda se agradece...

    Responder
  2. Hola Pedro, antes de nada enhorabuena por tu blog, es genial.
    Me he comprado y descargado divi y divi builder tal y como haces en tu curso. El problema es que luego a la hora de descargar layouts (al crear nueva página) no me deja. Me pide la API, la pongo y no me deja avanzar. Hay que pagar otra vez? yo pagué mis 89 $ de elegant themes y con eso entiendo que me incluye a parte del thema divi y el divi builder las plantillas no?

    Un saludo!

    Responder
    • Hola Mario,

      ¡Genial! Me alegro mucho.

      En principio con instalar Divi es suficiente. No tienes que instalar Divi Builder porque ya viene integrado con él 😉

      Si tienes licencia no deberías tener problemas para descargar los diseños que te ofrece Divi. Entra en tu cuenta de Elegant Themes y asegúrate que el nombre de usuario y contraseña que estás poniendo es el correcto.

      Cuando lo sepas ve a tu web y en Divi selecciona las Opciones del Tema. Allí verás la pestaña Updates . Introduce el nombre de usuario y la contraseña. Cuando lo hagas dale a Guardar. Es importante 😉

      Espero que te sirva

      Abrazos

      Responder
      • ¡Muy buenas tardes!

        Yo tengo el mismo problema que Mario, pero mi usuario y clave API están correctas y guardadas. Aun así no puedo descargar el diseño que quiero, se queda descargando al 1% y vamooos que lo deje un buen rato y nada. ¿Qué crees que acontece?

        Saludos!

        Responder
  3. Buenas tardes.

    Estoy algo confusa. Me descargué de un enlace de vuestra web un zip de Divi, que por lo visto es gratuito. En otro apartado de vuestra web veo que Divi es de pago.

    Al tratar de subirlo a WordPress leo que en el .com no se puede, que tiene que ser en el .org, que también es de pago.

    En definitiva, o estoy muy despistada y he leído todo mal, o no sé qué más pensar. ¿Alguna aclaración?

    Responder
    • Hola Esperanza,

      ¿Dónde te descargaste ese enlace?

      Divi es de pago y necesitas licencia para poder actualizarlo entre otras cosas. Sólo funciona con WordPress.org, es decir, instalándote WordPress en tu web.

      WordPress no es de pago, es un software gratuito y se instala fácilmente en prácticamente todos los hosting.

      Espero haberte ayudado,

      Abrazos

      Responder
  4. Felicidades por tu blog, he leído muchos blogs sobre divi por lo que puedo decir que ha sido maravillosa tu explicación, no se si me pudieras ayudar con un problema que tengo ya me dirás:
    - Tengo varias páginas con módulos de textos con diferentes contenidos, como pudiera cambiar el estilo del texto en esas paginas, no puedo hacerlo con los modulos globales ya que el contenido no es el mismo, que me pudieras aconsejar.
    Gracias por la Atención!!!

    Responder
    • ¡Buenas Enrique!

      Encantado de conocerte. Me alegro mucho que te haya gustado el artículo 😉

      Si tienes varios módulos de texto y quieres cambiar la apariencia de ellos lo mejor es hacerlo a través de los ajustes de cada módulo en cuestión, de forma específica en lugar de con módulos con categoría global.

      Espero haberte ayudado.

      Saludos

      Responder
  5. Hola Pedro, muy bueno tu tutorial, gracias por los consejos. Tengo una consulta, uso WordPress, Divi (No tengo el Divi Builder) y uso el Mailchimp para captar suscriptores.
    He creado mi formulario en DIVi y luego conecto el API de Mailchimp como quiero que al inscribirse las personas sea directo y No solicite ni envíe un email de confirmación a las personas (el mailchimp), está deshabilitado el Opt-in Doble, pero aun así envía email de confirmación. A la espera de tus comentarios

    Responder
    • Hola James,

      Muchas gracias por tu tiempo al leer el artículo.

      Aclararte que si creas un formulario de suscripción con Divi si estás utilizando Divi Builder ya que éste viene integrado en Divi.

      Yo prefiero usar para crear este tipo de formularios el plugin premium Thrive Leads ya que es mucho más potente.

      Con respecto a los emails de confirmación, etc... deberías activar el doble opt-in en Mailchimp para que reciban el email de confirmación y luego uno de alta. Todo eso lo debes gestionar desde Mailchimp.

      Un abrazo

      Responder
  6. He adquirido el tema para aplicarlo a varios blog , al principio un poco liado con el constructor , pero poco a poco se aprende.
    Lo empezare a aplicar en un blog que tiene poco tráfico después , cuando lo tenga más controlado iré modificando el resto.
    Gracias por vuestros consejos.

    Responder
    • ¡Hola Fran!

      Encantado de conocerte.

      Me alegro mucho que hayas empezado a usarlo.

      Al principio puede confundirte algo pero es absolutamente normal y entra dentro del proceso de aprendizaje.

      Verás como muy pronto te harás con la herramienta. Cuanto más tiempo inviertas mejores resultados obtendrás.

      Un abrazo

      Responder
  7. Hola Pedro,
    He realizado una web mediante Divi y aunque indican que es responsive con otros dispositivos, mi web en móviles y tablets no se ve correctamente.

    Podrías indicarme cómo solucionarlo o dónde puedo encontrar una guía introductoria?

    Muchas gracias de antemano,
    Saludos

    Responder
    • Hola, Lourdes.

      Encantado.

      Divi es responsive en el sentido de que al disminuir el ancho de pantalla organiza los elementos uno debajo del otro, ya que lo que perdemos en anchura lo ganamos en alto.

      No obstante, parámetros como el tamaño de textos, altura de línea, tamaño de imágenes, etc... lo tienes que configurar tú manualmente, tanto en tablets como en smartphones.

      En los vídeos que tengo en los 3 artículos que tengo en este blog vemos algo sobre ello, como por ejemplo aquí: https://www.youtube.com/watch?v=5BmExWJtxog

      Espero que te sirva.

      Abrazos.

      Responder
  8. Buenas tardes:

    Estoy empezando a utilizar Divi, pero me surge un problema. Al introducir un módulo de texto no sé cómo separar los párrafos. Lo hago en el editor, pero no se refleja en la web.

    Gracias.

    Responder
    • Hola Alberto,

      ¿Qué tal?

      Si quieres separar párrafos dentro de un módulo de texto puedes utilizar la "altura de línea". Otra opción sería incluir un módulo de texto por párrafo y usar el "margen".

      Le das un valor a cualquiera de esos parámetros hasta ajustarlo donde necesitas

      Espero haberte ayudado.

      Abrazos

      Responder
  9. Hola Pedro.
    Ante todo muy buen trabajo.
    Soy nuevo en esto y estoy empezando a diseñar mi pagina Web.
    Un amigo me recomendo usar Artisteer 4.0. Como es muy intuitiva y su diseño parecido al formato Word de Windows, me hice rapido con ello. El problema es ahora para pasar a WordPress. Artisteer exporta como plantilla el diseño a WordPress y a partir de ahi ya no se por donde seguir. Las exportaciones nunca son perferctas, por ejemplo no es responsive y hay tambien algunos errores, que no se como corregir.
    Ahora he encontrado Divi y parece que puedo empezar a ver la luz para terminar mi pagina. He leido que Divi se puede descargar como Theme y como plugins, mi duda ahora es:
    ¿Puedo descargar Divi como plugin para mi Tema de WordPress creado con Artisteer y no perder mi diseño?.
    ¿Hay alguna manera de respetar ese diseño si no si pudiese con este Plugin?
    Gracias de antemano.
    Es pero que puedas sacarme de dudas.

    Responder
    • Buenas Carlos,

      Si me lo permite Pedro, voy a tratar de responderte a tus preguntas.

      El Divi "theme" trae incluido el Divi "plugin" que es el llamado Divi Builder, el cual es un editor visual WYSIWYG, es decir, que te permite modificar sobre el propio contenido y ver cómo queda en tiempo real.

      Tú puedes instalar y usar el Divi "plugin" o Divi Builder con otros temas de WordPress para editarlos de forma visual, no obstante, al cargar el editor visual de Divi tendrás que empezar a realizar modificaciones de nuevo desde cero, es decir, no será compatible con lo que tengas hecho en otras plataformas u con otros plugin, plantillas, etc, como por ejemplo no se respetaría lo que tengas hecho con Artisteer.

      La experiencia que hemos tenido con otros editores visuales nos dice que suele ocurrir el mismo problema, el diseño no suele ser respetado. No obstante, el universo WordPress es tan extenso que quizás Pedro o alguien te pueda recomendar alguno que quizás sí te respete el diseño actual que tienes.

      Espero haberte sido de ayuda.

      Saludos.

      Responder
      • Hola compañeros,

        Encantado de veros por aquí.

        Me "temo" que Carmelo lo ha explicado excelentemente bien así que poco más que decir (¡Gracias Carmelo ;)!)

        Lo que si puedo asegurarte es que diseñar con Divi es rápido, estable y fácil de utilizar.

        Además el diseño responsive lo tienes asegurado. Sólo tendrás que modificar cositas en cada página como los tamaños de fuentes y diversos elementos.

        Si empiezas a practicar con él lo verás todo más claro.

        Si tienes otra duda por aquí estamos.

        ¡Un saludo!

        Responder
        • Gracias a los dos por vuestras respuestas. Artisteer esta bien, es facil deiseñar una pagina, pero luego al pasarlo a wordpress, no queda otra que modificar detalles, tipografia, y espacios que no quedan exactos, vamos que tienes que aprender a usar wordpress si o si.

  10. Hola Pedro!
    Muy buen tuto y muchas gracias por compartirlo.
    Mi duda es si compro Divi3 solamente por un año y al de pongamos 3 años necesitara actualizarlo, cual sería el costo? el de una sola actualización o una anualidad por cada uno de los tres años en los que no he actualizado?

    Responder
    • Hola Fede,

      Me alegro que te haya gustado 😉

      Te respondo:

      Imagina que pagas la licencia anual. Pasado ese año si no renuevas no podrás recibir las actualizaciones ni acceder al soporte técnico. Todo lo demás, es decir, plugins y temas seguirán estando activos en tu web y funcionando con normalidad.

      Si pasan 3 años sin renovar y decides hacerlo tendrás de nuevo que elegir entre la licencia anual o la de por vida. No se te cobrará de forma proporcional a esos años sin renovar.

      Espero haberte ayudado

      Responder
  11. Hola.

    El tutorial es fantástico, porque descubres cosas que no sabías que se podían hacer.

    ¿Para cuándo un tutorial sobre los diferentes creadores de páginas, una comparación entre DIVI, Visual Composer y Monstroid? Sería muy interesante conocer la opinión de un experto.

    Gracias.

    Responder
    • Hola, Pascual.

      Bienvenido y gracias por tu aporte.

      Pues apuntado queda, ya que es algo que la gente suele demandar bastante. La verdad es que, aparte de Divi más lo que has mencionado, existen otros que están pegando muy fuerte, como por ejemplo: Thrive Architect, Elementor y Beaver Builder.

      Un fuerte abrazo.

      Responder
  12. Gracias por esta revisión detallada. Divi es mi tema favorito de WordPress. Ya he creado unas decenas de páginas web con Divi. Y los plugins Bloom y Monarch cuales obtienes con Divi están perfectos también.

    Responder
    • Buenas Andrej,

      Encantado de tenerte por aquí y muchas gracias por tu comentario.

      Me alegro saber que estás usando este gran producto para tus proyectos así como los demás que Elegant Themes ofrecen y que se complementan muy bien con Divi. ?

      Te espero entonces pronto en el siguiente artículo que se publicará muy pronto.

      ¡Un abrazo!

      Responder
  13. Hola! Tengo un inconveniente con DIVI, los videos de fondo que coloco en las secciones no, o módulos de la home no se ven en dispositivos móviles. ¿Cómo se puede solucionar?

    Gracias!

    Responder
    • Hola, Belén.

      ¿Qué tal?

      Sí, tienes razón. La ejecución de vídeos de este tipo está deshabilitado por defecto para evitar problemas de compatibilidad y mejorar los tiempos de carga. Si no me equivoco, es algo que implica al navegador que muestra el código de tu página y no a tu tema Divi.

      En mi opinión debe ser así, ya que mostrar un vídeo de fondo en dispositivos móviles consumirá bastantes recursos aumentando los tiempos de carga, por lo que afectará a la experiencia de usuario.

      Lo que debes hacer es añadir una imagen de fondo en esa sección también para que en dispositivos móviles se muestre en lugar del vídeo y así no se quede en blanco.

      Con respecto a los vídeos en los módulos, supongo que habrás usado el módulo de vídeo o embebido código en un módulo de texto. En teoría no debería darte problemas. Comprueba de todas formas que ese módulo no está oculto en tablets ni smartphones. Lo puedes ver en la pestaña "Avanzado" del módulo, concretamente en la subpestaña "Visibilidad".

      Un abrazo.

      Responder
  14. Hola.

    Utilizo DIVI desde hace varios años y, aunque en general estoy muy contenta por la libertad creativa que te ofrece, no todo es color de rosa. A veces no se lleva bien con el plugin de Yoast, ¡ojo! y a veces ralentiza el funcionamiento de la web. Por lo demás, un 10.

    Responder
    • Hola, Carmen.

      ¿Qué tal? ¡Gracias por tu feedback!

      Como comentas Divi, al igual que otros muchos productos, tiene sus ventajas e inconvenientes. Al final todo se trata de ver qué producto se ajusta más a tus necesidades.

      Sobre su compatibilidad con Yoast SEO: ¿qué problemas has tenido? Te lo digo por curiosidad, ya que hasta ahora no he tenido ningún problema; o quizás se me haya pasado por alto.

      Sobre el rendimiento de la web: de esto se ha hablado mucho y en la mayoría de las veces terminamos culpando al tema que tenemos instalado. Cierto que Divi no es Génesis, su tamaño es mayor pero se lo pone todo mucho más fácil a usuarios con conocimientos limitados en diseño. Afortunadamente, la velocidad de carga no depende de un tema nada más. Como sabrás, es importante elegir un buen hosting, la optimización de imágenes, uso de plugin caché y un largo etc...

      Lo importante es no superar esos 3 segundos de tiempo de carga y con Divi, al igual que con otros temas premium, se puede conseguir si hacemos las cosas correctamente.

      Un saludo

      Responder
  15. Trabajo con elegant themes desde hace un tiempo en mi agencia y los resultados son excepcionales. Tropecientas mil formas de uso. Lo único que podría limitar el uso de DIVI es tu propia creatividad.

    Recomendado 100%

    Responder
  16. Buenas tardes,

    Ya había visto este tema de Elegant Themes y lo tenía como algo pendiente, ya que parecía muy interesante, con este artículo me he decidido a trabajar con él, ya veremos qué tal va.

    Gracias por el artículo.

    Un saludo.

    Responder
    • Hola, Carmelo.

      Muy buena noticia 😉

      Pues nada, mucho ánimo y ya nos contarás tus resultados por aquí. Solo tienes que formarte bien y practicar y practicar.

      Lo bueno es que con Divi obtendrás muy buenos resultados desde el principio 😉

      Seguimos en contacto.

      Saludos.

      Responder
    • Hola Roberto,

      Si al cabo del año no renuevas Divi seguirán funcionando. Esto se aplica no sólo a Divi sino también a cualquier producto de Elegant Themes. Te lo comento porque con cualquiera de sus licencias tendrás acceso a todos sus productos, sin limitaciones de descarga ni de uso en ninguna web.

      Lo único que no podrás tener acceso es a las actualizaciones, es decir, tanto aquellas mejoras en el código destinadas a resolver posibles problemas como a todas las nuevas funcionalidades que vayan sacando para mejorar el producto.

      Es básicamente lo mismo que ocurre con la mayoría de plugins y temas premium para WordPress.

      Si piensas que vas a darle bastante uso al producto, ya sea porque eres diseñador web, vas a diseñarte tu propia web y hacer cambios frecuentemente, etc ... mi recomendación es que adquieras la versión Lifetime Access. Al principio sale más caro pero realmente merece la pena.

      De todas manera sigue informándote y ya nos dirás ...

      Un saludo

      Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).