10 Abr 2019
35 comentariosSi utilizas Divi para el diseño de tu página web, en este post te voy a hablar de una serie de opciones y funcionalidades "menos conocidas" que son realmente interesantes y que en algunos casos te van a solucionar más de un problema de forma muy sencilla.
Como ya sabes, Divi es una de las plantillas y constructores (maquetadores / editores visuales, como quieras llamarle) más utilizados en el universo WordPress.
Asimismo, es un tema muy completo, que incluye todo tipo de opciones y funcionalidades, que permite diseñar prácticamente cualquier sitio web y que, si sueles leer este blog, siempre utilizo y recomiendo.
Y aunque ya he hablado varias veces en este blog sobre Divi, nunca lo he enfocado desde el punto de sus opciones menos conocidas.
De esta forma, hoy te voy a hablar de una serie de funcionalidades de Divi que posiblemente no conozcas, te van a facilitar la vida si lo usas en tu web y te van a encantar.
Antes de empezar, aclarar que he dividido toda información en dos bloques: ajustes generales del tema y opciones del editor visual.
¡Allá vamos!
6 ajustes de Divi que puedes hacer directamente en la plantilla
Como te acabo de comentar, el primer epígrafe se lo quiero dedicar a las opciones menos conocidas que puedes configurar desde el editor de ajustes de Divi. Es decir, que puedes ajustar de forma genérica para toda la web.
Se hacen desde aquí:
#1 Minificar y combinar archivos CSS y Javascript
El primero que quiero mencionar es la posibilidad de minificar y combinar los archivos CSS y Javascript del tema con el objetivo de reducir velocidad de carga del sitio web.
Mi consejo es que los tengas activados (vienen así por defecto) y están ubicados al final de la página que incluye todas las opciones del tema.
#2 Activar y desactivar el editor "Divi Builder" en entradas, páginas, proyectos y productos
La segunda opción de la que te quiero hablar es la posibilidad de activar / desactivar el constructor de Divi en determinadas partes de tu web. Es decir, la plantilla te permite elegir donde quieres utilizar su editor para maquetar tus contenidos: entradas, páginas, proyectos y productos.
(La pestaña de productos solo aparece si tienes instalado WooCommerce).
Y me dirás "Max, yo quiero utilizar Divi Builder en toda mi web".
Déjame decirte que hay determinadas partes de un sitio en los que no te recomiendo utilizar Divi, como son las entradas y las fichas de productos (aunque todo depende del tipo de ecommerce).
Si quieres activar y desactivar Divi Builder, puedes hacerlo desde: Divi > Opciones de tema > Builder > Post type integration:
#3 Volver al editor clásico de WordPress con un solo clic
Ya sabes que, desde hace unos meses, WordPress se ha actualizado a la versión 5.0 e incluye su propio editor de contenidos: Gutenberg.
Lo primero que debes tener en cuenta es que Divi es totalmente compatible con Gutenberg, pero, si no terminas de acostumbrarte al nuevo editor de WordPress y quieres seguir utilizando el clásico, puedes hacerlo con un solo clic.
Para ello, debes ir a Divi > Opciones de tema > Builder > Advanced:
Aquí puedes activar / desactivar el editor clásico de WordPress (es la última opción: Enable Classic Editor).
Como puedes ver, yo ya me he pasado a Gutenberg. Ha venido para quedarse y mi recomendación es que te vayas acostumbrando a él 😉
#4 Configurar los meta datos en las entradas
Otra opción muy sencilla y que suele pasarse por alto son los metadatos que aparecen en las entradas, es decir, la información sobre el post que aparece debajo del título (fecha, categoría, autor y número de comentarios).
Por defecto aparecen habilitadas los cuatro datos, viéndose de esta forma:
Pero en las opciones del tema puedes seleccionar qué datos quieres mostrar en en tus entradas y cuáles no.
Esta opción está disponible en Divi > Opciones de tema > Layout > Diseño de entrada individual:
Por lo tanto, aquí puedes escoger qué datos quieres mostrar debajo del título de tus entradas.
Te dejo varios ejemplos:
#5 Añadir código al principio y al final de las entradas
Otra opción muy sencilla pero interesante de Divi es la posibilidad de añadir contenido personalizado al inicio y fin de tus posts.
Con esta funcionalidad puedes añadir, por ejemplo, un banner al final de tus artículos, un descuento arriba del todo o cualquier contenido a través de código HMTL.
Esta opción está disponible en Divi > Opciones de tema > Integration:
Como ves, solo tienes que insertar en su correspondiente espacio el código del contenido que quieras añadir al principio o al final de tus entradas.
#6 Centro de ayuda y soporte
Antes de terminar este primer apartado quiero mencionar el centro de soporte que ha incluido Divi en una de sus últimas actualizaciones.
Desde aquí puedes:
- Controlar aspectos como el estado del sitio web.
- Habilitar el acceso remoto para el equipo de asistencia de Elegant Themes tenga acceso temporal a tu web y pueda solucionar posibles problemas.
- Acceder a toda la documentación y ayuda de Divi.
- Activar y desactivar el modo seguro.
El centro de soporte está disponible en la siguiente ruta: Divi > Support center, y aquí te dejo un par de capturas para que veas cómo es por dentro:
10 funcionalidades del editor visual de Divi (Divi Builder)
Ahora que ya conoces algunas opciones generales del tema Divi que son menos conocidas, es el momento de hablar de las funcionalidades que incluye el editor visual y destacan de alguna forma, ya sea por actividad, gesto o diseño.
#7 Prueba multivariable | Test A/B | Divi leads
Empezamos fuerte.
Esta es una de las funcionalidades más interesantes de Divi, pues te permite hacer test A/B de tus botones, llamadas a la acción o cualquier parte de tu web.
Es decir, con las pruebas multivariables de Divi puedes probar qué tipo de contenido y diseño funcionan mejor de cara a los usuarios.
Para que lo entiendas mejor, te voy a mostrar un ejemplo:
Sección original Variación 1 Variación 2 Variación 3
Como puedes ver, Divi Leads te permite crear diferentes pruebas para medir qué tipo de diseño funciona mejor en tus cabeceras, llamadas a la acción, formularios de suscripción o botones.
Es decir, puedes crear varios diseños alternativas y analizar cuál consigue mejores resultados a nivel de tráfico, clics o leads.
#8 Copiar y pegar secciones / filas / módulos
Esta es una de las funcionalidades que más utilizo cuando diseño desde el editor visual (el 90% de las veces).
Además, me parece una de las mejores opciones que incluye el botón derecho de Divi.
Con ella, puedes copiar / pegar secciones, filas y módulos.
Como digo, solo tienes que clicar con el botón derecho del ratón en el elemento que quieras copiar.
Aquí puedes ver como hacerlo en los tres casos:
#9 Copiar y pegar estilos
Muy similar a la opción anterior, esta funcionalidad permite copiar y pegar los estilos de secciones, filas y módulos simplemente clicando en el botón derecho.
Por ejemplo, tienes cuatro servicios que has maquetado con el módulo anuncio. Solamente tienes que diseñar el primero y pegar el estilo en los otros tres:
#10 Historial de ediciones
El historial de ediciones en una opción de Divi realmente útil, pues te permite revisar los cambios que has hecho en un diseño, así como volver a tus pasos anteriores.
Para que lo entiendas, es como el "deshacer" de Office o el "paso atrás" de Photoshop. Sería como un historial que registra tus pasos y cambios.
Esta funcionalidad está situada en los controles inferiores del editor visual:
Cuando clicas sobre el icono del reloj, se abre una ventana con tu historial de ediciones. Muestra las tareas o cambios que has realizado, así como la hora y minuto en que lo has ejecutado.
Si pinchas sobre una de las tareas, puedes volver a ese paso concreto.
#11 Importar / exportar diseños
Esta es una de las opciones que como diseñador más le agradezco a los desarrolladores de Elegant Themes, pues ha hecho que reduzca considerablemente mis tiempos de ejecución.
Con esta funcionalidad puedes importar y exportar tus diseños tanto en tu propia web como en sitios de terceros.
Es decir, te puedes llevar tus diseños a otro sitio web diferente.
Para importar y exportar un diseño, simplemente tienes que pulsar en la opción portabilidad y elegir la acción que quieras realizar:
- Exportar el diseño actual: se te descargará un archivo .JSON en tu ordenador.
- Importar: si ya tienes algún diseño realizado con Divi, puedes importarlo (también en formato .JSON).
Además, también puedes importar y exportar las opciones del tema, así como los ajustes del personalizador.
#12 Edición rápida de estilos (pincelito)
El editor rápido de estilos es otra de las opciones maravillosas de Divi, especialmente si lo usas a menudo como es mi caso.
Se reconoce visualmente porque su icono es un pincel que aparece en el editor visual cuando pones el ratón sobre cualquier elemento.
Lo que permite esta funcionalidad es encontrar directamente los estilos de ese elemento, ya sea un icono, un título, texto o cualquier parte cuyo estilo se pueda modificar.
Un ejemplo:
#13 Visibilidad: escritorio, tableta y teléfono
La opción de visibilidad permite mostrar u ocultar cualquier sección, fila o módulo en el escritorio, tableta o móvil. Es decir, permite desactivar cualquiera de estos elementos en función del dispositivo desde el cual el usuario visualice tu web.
Particularmente no recomiendo abusar de esta opción, pero viene genial cuando quieres adaptar al móvil determinados diseños, como son, por ejemplo, cabeceras de gran tamaño.
En este caso, debes crear tu cabecera en la versión de escritorio, desactivarla en el móvil y diseñarla de nuevo, desactivándola en el escritorio.
#14 Transformar
Las transformaciones son una de las últimas incorporaciones de Divi a su editor visual.
Ahora es posible "transformar" cualquier sección, fila o módulo, algo que hasta hace poco solo era posible utilizando un programa de edición profesional de imágenes como Photoshop o Illustrator.
Con los controles de transformación puedes mover elementos, girarlos en varios ejes, superponerlos o escalarlos hacia arriba y hacia abajo de forma muy sencilla.
Algunos ejemplos:
#15 Enlazar cualquier sección, fila o módulo
Desde Divi Builder también puedes enlazar cualquier sección, fila o módulo, es decir, que cualquiera de los elementos de tu web estén enlazados a otras partes del sitio o de forma externa.
Aquí puedes ver desde dónde hacerlo en los tres casos:
enlazar sección enlazar fila enlazar módulo
#16 Atributos para las imágenes
La última funcionalidad de Divi Builder que quiero destacar son los atributos en el módulo imagen.
Estos te permiten definir dos valores fundamentales para SEO:
- Texto alternativo de la imagen: etiqueta ALT.
- Título de la imagen.
Para configurarlos, tienes que ir al apartado Avanzado dentro del módulo imagen:
Hasta aquí este repaso por las opciones y funcionalidades menos conocidas de Divi, pero que son de un enorme valor para quienes utilizamos su editor visual a diario.
Espero que te sean de gran utilidad y hayas podido descubrir alguna nueva 😉
Hola, quiero importar archivos .json con la herramienta de importar y exportar y me pone este comentario: This file should not imported in this context... como lo puedo solucionar?
Hola Javier,
Cuando te aparece ese error es porque está importando el diseño directamente en una página; tienes que subirlo a la biblioteca y luego usarlo como layout (al revés no funciona).
Saludos
Hola Max, sigo con frecuencia tus entradas ¡¡Muchas gracias!! Quería consultarte un problema que me ocurre desde un mes aproximadamente. Uso Divi 4.0.6 y mi versión de WordPress es la 5.2.1. Cuando escribo una entrada en mi blog, construida con Divi, mientras la mantengo en borrador la vista previa me muestra correctamente lo que yo voy diseñando. Pero cuando la publico se pierde el estilo de los títulos (fuente, color...) y tampoco muestra la imagen que acompaña al título principal. Por si te da una pista más clara y tienes ocasión puedes comparar estas dos entradas:
quenieve.es/como-hacer-bolas-de-nieve-de-jabon (Esta estaría correcta)
quenieve.es/adornos-navidad-bolas-de-nieve (Esta tiene el problema que te comento)
Me puedes dar alguna pista de a qué puede deberse? De antemano te lo agradezco infinito
Hola Carmen,
Sin ver la web por dentro y conocerla a nivel interno, tiene toda la pinta de que es algún tema relacionado con la caché o la base de datos. Te aconsejo borrar la caché y limpiar la base de datos de la web a diario.
Saludos
Hola de nuevo Max¡¡ Vuelvo a ser Carmen Cárdenas. Para complicar un poco más el tema, lo que te he contado en mi anterior comentario, ocurre a veces solamente. Quiero decir que puede ocurrir que entres en la entrada publicada y se vea correcta, o que se vea sin los estilos. De nuevo mil gracias.
Hola!
He encontrado esta entrada por casualidad, pero la verdad que me ha sorprendido todo lo que se pueda hacer con DIVI, seguiré atento el blog. He descubierto cosas nuevas, entre ellas duplicar un módulo y poner visibilidad PC-Móvil-Tablet, pero me surge una duda.
Si, por ejemplo, yo doblo el Slider principal que contiene las palabras clave del SEO y dejo 1 para PC y el otro lo modifico un poco (no el texto, si no el formato) para el móvil/tablet ¿Considera google que es contenido duplicado o similar y puede afectar negativamente al SEO?
¿Hay alguna forma de indicar que 1 de los dos módulos no se tenga en cuenta para el SEO?
Lo hago así con el fin de que se visualice bien en todos los dispositivos.
Un saludo! Gracias!
Hola Miguel,
Me alegra que te guste mi blog, muchas gracias 🙂
Al tema del SEO no sabría responderte. Seguro que un SEO profesional puede darte una respuesta más adecuada que la mía (yo soy diseñador web simplemente).
De todas formas, comentarte que en mi web tengo duplicados algunos H1 según el diseño en versión de escritorio / móvil, y no he tenido ningún problema con Google, ni Search Console me arroja ningún error.
Saludos
¡Fantástico Post!
Yo querría preguntarte algo acerca del la visibilidad de un modulo o fila. En una web con membresias (web de cursos que pagas 10 euros al mes y ves todo el contenido), si quisiera que en una página una fila o módulo NO se mostrará en caso que si estuviera logueado una persona con una membresía (usuario en wordpress), ¿sería posible? Si es así, cómo se haría? Muchas gracias MAX.
Hola David,
No, no se haría así. Para crear una web de este tipo necesitas un plugin de membresía, es decir, que oculte el contenido en función del nivel de suscripción que tenga el usuario.
Saludos
Excelente artículo Max!
En cada actualización DIVI nos sorprende con algo nuevo.
Un saludo
Hola Max.
Tengo una dudota. Ya tenía mi página construida y le quise hacer ajustes para tablet y móvil, pero no le di click en la opción de móvil y tablet. Entonces, los cambios que le hice se realizaron en la versión para compu me desacomodo todos los textos e imágenes; las quiero acomodar de una sección y se me desacomodan de otra como si se fueran recorriendo. Me quise meter al historial de edición y no me aparecen los del día anterior, que fue donde se originó el error. No se qué hacer, ya me desesperé.
Hola Fer,
El historial de cambios está disponible mientras editas una página. En el momento que sales, no se guardan más cambios. Es decir, no puedes ver los cambios de hace varios días.
En ese caso, tendrías que restablecer una copia de seguridad de la web.
Saludos
Hola Max, muy agradecido por toda la información prestada, una cosa que me trae loco en Divi y no se donde se ajusta...
En mi tienda como tengo cientos de articulos, pues tengo una paginación, cada 30 o 40 articulos ...perooo mi duda es como puedo eliminar en las paginas despues de la primera, el encabezado????
Para que no me salga en todas las paginas el encabezado y en la 2,3,4 o las siguientes paginas, SOLO salgan articulos y no se repita el encabezado en cada pagina...
No he encontrado la solucion por ningun sitio...
Muchisimas gracias por tu labor..
Hola Moi,
Creo que con las opciones de Divi no se puede hacer por defecto. Las páginas de paginación tienen el mismo estilo y diseño que el resto. Supongo que tendrías que tocar las funciones de la plantilla vía código, u ocultarlo con CSS, aunque no sé si resultaría.
Siento no ser de más ayuda.
Saludos
Hola amigo. Muy bueno tu post, muchas gracias. Me podrías ayudar en algo? Cuál es el código css para ponerle sombra al menú? Ya que solo tiene sombra el menú sticky. Saludos!
Hola Rober,
Te aconsejo crear el menú con el generador de temas y personalizarlo a tu gusto con las sombras que necesites. Así no tienes que tirar de código CSS.
Saludos
Hola antes entraba a paginas, seleccionaba la pagina donde quería subir el pdf y pegar lo que subí a la biblioteca pero ahora cuando entro me aparece solo para editar la página, no se como salir del editor para que me deje pegar el pdf
Si eliges un Layout o plantilla predeterminada en DIVI y luego la quieres cambiar por otra, ¿cómo se debe proceder? Me refiero a "eliminarla" y que te vuelvan a salir las opciones de otras plantillas o Layouts.
Es curioso pero sobre esto no hay nada o al menos no lo he encontrado buscando...
Muchas gracias.
Hola Andrew,
Si quieres cambiar el layout de Divi que hayas elegido, simplemente tienes que clicar en los 3 puntos centrales de abajo del editor y darle al + para importar un nuevo diseño.
En el caso de que quieras eliminar el diseño que has hecho para empezar desde cero, solo tienes que clicar en "vaciar diseño" (el icono de la papelera).
Saludos
Muchísimas gracias Max! Mira que he buscado con Google y no había forma de encontrar nada que hiciera referencia a ello.
Saludos!
Otra pregunta y disculpe la molestia. He instalado una tema de DIVI (una plantilla o Layout), esta, trae algunos colores por defecto (típicos marcos para las imágenes, alguna barra ornamental) que veo es imposible cambiarlo pues creo, forma parte de la plantilla. Imagino que hay que tocar CSS, ¿alguien me lo confirma? ¿dónde puedo acceder al CSS de la plantilla? Lo he estado intentando en todos los modos de edición que trae DIVI y no hay forma. Gracias.
¿Opciones de Divi que posiblemente no conozca? Pero si no ha dicho nada que no venga ya bien explicado en las opciones básicas de Divi, todo lo que expone está a la vista.
Hola Gavin,
He recopilado las preguntas que más suelo recibir por correo y redes sociales. Me alegro de que manejes bien Divi y no necesites este tipo de post, pero entiende que no todo el mundo está al mismo nivel 🙂
Gracias por pasarte.
Saludos
Pues me he ahorrado leer medio kilo de documentos...rapido y concreto...¿a que si?
¿Alguien sabe como configurar los pixels para los que muestra versión tablet o PC? La idea es forzar para que para tablets como el ipad no muestre versión PC si no versión tablet.
Hola Max. ¿Qué tal?
Quería preguntarte sobre un post nuevo en el que quiero poner varios textos (7) y varios botones (7). ¿Tengo que crear un post con maquetador de 14 módulos, texto, botón, texto, botón, etc, o hay alguna forma más facil de hacerlo?
Muchas gracias anticipadas
Saludos
Victor
Hola Víctor,
Mi consejo es no utilizar Divi para maquetar los posts, sino Gutenberg o en su defecto el editor clásico de WordPress. Divi solo lo recomiendo para páginas.
Lo que puedes hacer es montarlo con Gutenberg y, si necesitas alguno de los módulos de Divi, el editor de bloques se integra y los tienes disponibles sin necesidad de maquetar directamente el post con Divi.
Espero haberte ayudado.
Saludos
Hola Max,
Muchas gracias por tus sabios consejos! Tengo una duda: he creado un slide en una de las páginas y cuando estoy dentro de Divi se ve perfectamente, pero al salir las fotos se muestran en una animación intermitente muy molesta. He verificado que en la configuración de la sección, la fila y el módulo se especifique dentro de "Diseño" y "Avanzado" que es un slide con fade y con los intervalos de entrada y retraso entre las diferentes fotos... pero sigue sin funcionar 🙁
¿Tienes algún consejo?
Muchas gracias,
Sandra
Hola Max,
Me ha encantado el post, no sé si sigues atendiendo dudas de este tipo, pero me aventuro porque ya no sé a quién preguntar. Cuando trabajo con divi y pongo el menú de arriba, si luego uso plantillas el menú desaparece y no soy capaz de activarle.
¿Cómo podría ponerse arriba e inamovible independientemente de la plantilla que ponga?
¡Gracias!
Hola Clara,
Para dejar fijo el menú o cualquier sección, fila o módulo, debes ir a los ajustes avanzados > Scroll Efects > Sticky Position y activar la opción "stick to top".
Espero haber resuelto tu duda.
Saludos
Hola!
Si creo el blog de mi WordPress con Divi, ¿afecta las tipografías de letras y encabezados al resto de mi web?
O los formatos que yo escoja para H1, H2 ... no influyen en el resto de estética de la web?
Gracias
Hola, Mercedes.
Si creas una plantilla para las entradas de tu blog con el generador de temas de Divi, no afecta a resto de tu web. Es decir, puedes tener una tipografía en las entradas y otra en el resto de web.
Eso sí, ten en cuenta que es algo extraño. Lo habitual es tener la misma fuente para los títulos de toda la web.
Saludos
Muchas gracias Max!
Es extraño sí, el problema es que las entradas que salen por defecto con el tema que tiene WordPress tienen un diseño poco legible, mezcla los tamaños de las letras y tipografías, deja poco espacio interlineado, etc. un desastre vamos!
Ahora la pregunta que lanzo es la siguiente: tengo la web diseñada con Elementor ¿es compatible entonces que ahora instale divi y cree el blog con él? Es decir, ¿son compatibles entre sí?
De nada, Mercedes.
Mi consejo es que solo utilices un "builder" en la web. Si tienes Elementor, crea con él una plantilla para las entradas. Nunca recomiendo tener instalados varios ni mezclarlos.
Espero haber resuelto la duda.
Claro que sí!
Mil gracias Max 😉