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.

Multiplica el Nº de gente que lee tu blog

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
¡Buenas! ¿Me dices tu nombre?

¡Un placer conocerte!

Apuntáte aquí y recibirás gratis una copia del eBook.

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 quieres crear tu blog o web, aprovecha estas ofertas ahora:

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.

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 ?


Comentarios

  1. 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?

    • 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

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

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

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

    • 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!

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

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

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

    • 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

  6. 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%

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

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

  8. Buen día.

    Si pago un año y al caducar ya no renuevo, ¿podría seguir usando el constructor Divi, o qué pasaría con lo ya publicado si quisiera editar?

    Saludos.

    • 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

  9. Hola
    Yo he usado Divi, pero la verdad es que en los tutoriales he aprendido cosas que no sabía que se pudieran hacer.
    Francamente un gran artículo, gran trabajo

  10. Enhorabuena por el tutorial, ¡me ha parecido genial!

  11. Buen tutorial. Seguimos a la espera de los siguientes.

Deja un comentario

Para ello, por favor, sigue estas pautas, por respeto a nuestra comunidad (y a nosotros):

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

*

 

Rellena el formulario y accede a nuestro training rápido de pro-blogging

Aprenderás paso a paso y desde cero cómo usar las mejores técnicas, trucos y secretos de los top bloggers para dar el salto al siguiente nivel

Y todo 100% gratis :)