Hace un tiempo ya hice una pequeña alusión al uso de Divi, cuando comentaba que creé mi primera página utilizando Divi Builder. En esta entrada voy a contaros qué es Divi, voy a mostraros cómo cómo funciona, con el rediseño de una página web con Divi Builder y os voy a hablar del uso de este constructor sin el tema Divi.

 

¿Qué es Divi y Divi Builder?

Por si andas algo perdida, te cuento.

Divi es un tema para wordpress, de la empresa Elegant Themes. Y es un tema muy muy flexible, que además lleva integrado su constructor Divi Builder.

Pero… si ya tenías tu página web diseñada con otro tema, no es problema. También puedes utilizar el constructor Divi Builder como un plugin.

Puedes leer más en la página de ElegantThemes, y te dejo mi enlace de afiliado por si te animas a comprarlo.

[Enlace de afiliado]

 

 

Rediseñar una página web con Divi Builder

Os dejo el vídeo de cómo realicé este rediseño.

 

Cómo he hecho el rediseño de la página web con Divi Builder

Preparación previa

Como he comentado (aunque esa parte no la he mostrado, porque es más técnica), sí que tuve que hacer cierta preparación previa.

Para poder tener el efecto “ancho completo” de las filas en las páginas diseñadas con Divi Builder, sin afectar al resto, creé una plantilla de página nueva dentro del tema, que diferencie los bloques de ancho completo de los que no.

Esto en algunos temas puede ser necesario, en otros igual no. Es cuestión de probarlo.

 

Imágenes para sliders o imágenes destacadas

Os he hablado en otras ocasiones de las imágenes destacadas. Pues en este caso, teníamos un slider (deslizador con imágenes que van cambiando y enlazadas a distintas partes de la web).

Así que decidí montar estas cabeceras con el constructor de Divi en vez de subir las imágenes completas. Esto permite editar los textos e imágenes directamente desde el constructor.

 

Rediseñar una página web con Divi Builder

Para el rediseño lo que hice fue:

  • Título: Se ha incluido con un bloque de título que sólo muestra el texto. He ajustado el tamaño para móvil más pequeño.
  • Imágenes de cabecera: Usar un deslizador (slider) añadiendo el fondo al bloque, y la imagen de fondo en el elemento del deslizador, y así no se necesita montar la imagen completa con un editor de imágenes.
  • Apartado clases (no está detallado en el vídeo): Es un bloque con texto y dos comentarios. Para el efecto del fondo he añadido una imagen, y una capa de color blanco semi.transparente. Las flores de separadores al final hemos optado por omitirlas.
  • Información de la autora: Utilizando un formato de dos columnas a 2/3 y 1/3.
    • Incluyo a la izquierda un bloque de texto con el título, una foto, la explicación y un botón “leer más” vinculado a la página “Sobre mí”.
    • A la derecha, de nuevo la foto.
    • ¿Por qué dos fotos? Para optimizar el diseño según se acceda en móvil o escritorio. En el apartado de Avanzado > Visibilidad, se selecciona para la de la columna izquierda para que se oculte en escritorio, y la de la derecha se ocultará en móvil y tablet.
  • Últimas entradas del blog: He añadido un título y un bloque de Blog, con estilo rejilla, 3 elementos.
  • Formulario de suscripción: Este lo tenía preparado de antemano, y dará para otra entrada. Además, en este proyecto hemos decidido usar para la gestión de e-mail marketing y boletines la herramienta Mailrelay, de la que os hablaré pronto también.
  • Contacto: Un bloque de ancho completo con el texto introductorio, y por último un bloque con dos columnas, con los datos de contacto y el formulario.
    • En el formulario de contacto además ahora en los formularios de Divi es posible incluir una casilla con un enlace a la política de privacidad, para cumplir con el RGPD.

 

Últimos detalles y resultado

Luego aún está claro que he pulido algunos detalles, y añadido por ejemplo algunos efectos, que se pueden añadir desde Diseño > Animación.

Puedes ver el resultado final en https://hablaconmigo.de.

Si tienes dudas de cómo he hecho algo, puedes preguntarme en los comentarios.

 

Pros y contra de usar Divi Builder en un tema propio

Inconvenientes de usar Divi Builder sin Divi Theme

Cierto es que me he encontrado algunos problemas

  • No respeta algunos de los estilos que ya tenías definidos, ya que los sobre-escribe con el código de estilo del constructor. Pero tiene más o menos arreglo modificando tus estilos o aplicándolos de nuevo en el editor de Divi Builder.
  • Problema de compatibilidad con algunos plugins. Por ejemplo el Header & Footer code en determinadas circunstancias. No ha sido problema, porque simplemente he quitado el plugin y pasado el código a los ficheros directamente.
  • En algunos casos, el constructor visual puede no funcionar por incompatibilidad con el tema o con los plugins. Esto se puede resolver utilizando el editor de Divi Builder, pero desde la parte de edición de la página.
  • Para entradas da algunos problemas adicionales, ya que hay que

 

Ventajas de usar el constructor Divi Builder en un tema que ya tenías

No todo iba a ser malo, sino no lo estaría usando. Y voy a seguir usándolo, porque la suma global sigue siendo muy positiva y me encantan los resultados.

  • Puedes mantener tu diseño que ya tenías con tu tema. No necesitas empezar todo desde cero.
  • Consigues maquetar todo mucho más rápido (una vez le pillas un poco el tranquillo, claro).
  • Te permite crear páginas muchísimo más vistosas.
  • No requiere de normal modificar código, sólo para cosas puntuales y sencillas.
  • Diría que es de lo más sencillo de usar que he visto (Tras haber visto el funcionamiento de otros constructores de WordPress).

 

Desarrollo de páginas web con Divi o Divi Builder

Bueno, como comento en el vídeo, yo ya trabajo con los temas de Elegantthemes y con el constructor, y puedo usarlos en todos mis proyectos.

Si te interesa una página web, o quieres rediseñar la tuya completa o parcialmente, podemos hablarlo.

Y si te animas a intentarlo tú misma, te dejo el enlace de afiliado de Eleganthtemes.

[Enlace de afiliado]