Divi 3.0: Documentación actualizada

34 comentarios

Divi 3.0

Por: Caribdis.Net

Publicada: 11 de septiembre de 2016

En: Divi

Después de 100 días de cuenta regresiva, Elegant Themes presentó en sociedad el pasado miércoles la versión 3 de su tema de cabecera: Divi.

La característica más prominente, como todo el mundo ya está enterado, es la introducción de un constructor visual que permite la edición de las páginas directamente desde la interfaz de usuario.

adding-content

Con la promesa de ofrecer una experiencia de edición más rápida, más sencilla y más divertida, esta nueva actualización de Divi vuelve a revolucionar el mercado de los temas de WordPress. Se pueden amar u odiar este tipo de herramientas, los tan mentados visual builders (en lo personal me encuentro en un punto intermedio), pero lo cierto es que Elegant Themes ha logrado extender su producto estrella de manera orgánica y coherente con su esencia, convirtiéndolo en uno de los constructores de páginas para WordPress en tiempo real más simples y atractivos a la vista.

No sirve de mucho hacer descripciones en este caso; tan solo hay que probarlo para que cada usuario saque sus propias conclusiones.

Y vale destacar que con la primera revisión, la 3.0.1 (ya van por la 3.0.2 en tres días… no sé si eso es bueno o malo), añadieron una opción básica para suprimir o editar los créditos del pie de página.

Como suelo hacer con cada lanzamiento mayor de Divi, publico una versión actualizada de la documentación y la traducción del tema. En esta página encontrarán los archivos de descarga.

Y como ya nos tiene acostumbrados Elegant Themes cada vez que sale un nuevo Divi, se sortean cinco membresías (hay tiempo hasta el próximo miércoles para participar). También ha extendido por tiempo limitado el descuento de 20% para la cuenta Desarrollador, que otorga acceso a todos los temas y plugins por un año.

¿Y ustedes ya probaron Divi 3.0? Si es así, ¿qué les ha parecido?

Caribdis.Net
Últimas entradas de Caribdis.Net (ver todo)

Se responden dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

34 Comentarios

  1. David Moraza Brito

    Sabeis lo que hice con un monton de problemas con extra y divi. Me fui de elegant Themes. Con todo mi dolor porque estaba muy ilusionado.
    Ahora estoy con una plantilla de MH Themes, del neolitico. Pero funciona y me dedico a escribir y no a meter codigo.
    Ojala funcionasen bien las de divi porque me gustan.

    Responder
    • Caribdis Diseño Web

      Hola, David.

      Te respondí casi todo aquí. Divi y Extra funcionan muy bien, pero entiendo que no todas las webs tienen las mismas necesidades. Últimamente han estado haciendo muchas mejoras y agregando nuevas características. Uno de los próximos planes es el de ampliar las opciones para la navegación (y así no quedarse atrás frente a los competidores que ya las tienen, como Beaver o Elementor).

      Lamento que no hayas tenido una buena experiencia con los productos de Elegant Themes, aunque como te mencioné en la otra respuesta, siempre es ideal comenzar una instalación limpia cuando se trabaja con este tipo de plantillas.

      Saludos.

      Responder
  2. Ivan

    Hola, una consulta. Estoy usando Divi para diseñar la web de un cliente. Mi duda es qué es lo uqe pasa si mi membresía en Divi caduca y no la renuevo dentro de un año. Los sitios de mis clientes se caen?? Gracias!

    Responder
    • Caribdis Diseño Web

      Hola, Ivan.

      Una vez que vence la suscripción, todos los archivos de temas y plugins que hayas descargado (y los sitios que hayas creado) te pertenecen. Ninguno dejará de funcionar, pero ya no podrás acceder a actualizaciones futuras, ni a la biblioteca de sitios prediseñados. Hay que tener en cuenta que si actualizás WP y los plugins puede producirse alguna incompatibilidad (que se corregiría con las nuevas versiones de Divi). Es muy poco probable, ya que Divi usa muy buenas prácticas en el código, pero que puede suceder, puede suceder.

      Saludos.

      Responder
  3. Monica

    Hola, me ha encantado tu post! Yo tengo un problema que no puedo resolver acerca de Divi. A raíz de instalar unos plugins en WordPress, Divi falló saliendo un mensaje de error: “Límite de tiempo de Divi Builder”. He intado de todo, cargar otro tema, desinstalar todos los plugings… Y no hay manera! No puedo tocar nada de mi web, está inservible y no responde 🙁
    Gracias!

    Responder
    • Caribdis Diseño Web

      Hola, Mónica.

      Si no podés acceder al administrador de WP, intentá borrar todas las carpetas de plugins del servidor que se encuentran dentro de /wp-content/plugins/, y reemplazar los archivos del tema vía FTP por los de la última versión.

      Saludos.

      Responder
      • Monica de la Torre

        Gracias por tu respuesta! Eliminé todos los plugins, volví a cargar Divi desde FTP y parecía que todo iba bien, no salía la ventana de error. A continuación, instalé un único plugin y al ir a editar una página…ERROR otra vez! Hay un conflicto entre plugins y Divi así que me doy por vencida.
        Un saludo

        Responder
        • Caribdis Diseño Web

          Hola, Mónica.

          No creo que sea Divi el problema. Corroborá que tu servidor tenga los requisitos mínimos para correr WP y que estés usando las versiones actualizadas de WP y del tema. Si todo está correcto, pero es un plugin específico el que te deja el sitio inaccesible, el culpable es el plugin (borrá la carpeta del servidor).

          Saludos.

          Responder
  4. saberfrases

    Hola Ana.

    Hoy vengo a tus post de nuevo con ayuda sobre Divi y la implementacion de “funciones”

    Por un lado me gustaria saber como se hace lo que tienes en tu proyecto https://caribdis.net/project/detectores-de-metales/ que las imagenes de los detectores al pasar el cursos se hacen un poco mas grandes. Seguro que es alguna funcion facil del tema 😀 😀

    La segunda es que igual que las imagenes en esa misma web, al desplazarse por la pagina “aparecen” desde la izquierda de la pagina, o desde abajo. Eso en imagenes lo se hacer. Ahora la pregunta es como se puede hacer ese efecto con una frase.
    Dean Romero de http://blogger3cero.com/ en los post de su blog comienza el texto de sus entradas con el mismo efecto de aparecer desde el lateral con texto.
    La opcion Cutre es hacer una imagen que contenga el texto y ponerlo como imagen. Pero si luego la web se remodela, eso es “imagen” y quedaria mal ya que esa frase “movible” quedaria descuadrada.
    Seguro que hay alguna forma con CCS o con usos de Divi para lograrlo.

    Lo tercero es que en una de las dos webs que yo sepa no he tocado nada pero ahora tengo el DIVI parte en castellano (menu lateral derecho donde Escritorio, entradas, medios etc ) y luego el DIVI al trabajar los menus etcs en ingles. No veo Titulo si no TITLE etc. No encuentro donde se puede cambiar ¿?¿?

    Muchas gracias como siempre!!

    Responder
    • Caribdis Diseño Web

      Hola, saberfrases.

      Las animaciones son de la biblioteca de JS WOW y están agregadas en el tema hijo. Pero para no complicarte podés usar un plugin como este, o el mismo Shortcodes Ultimate que es el que usa la web que mencionaste.

      Si no querés usar un plugin, está la opción de usar las animaciones de Divi (que son un poco más limitadas), agregando las clases et-animated y et_pb_animation_left (o et_pb_animation_right, et_pb_animation_top, et_pb_animation_bottom) al elemento que quieras animar, ya sea un módulo, un párrafo o un span dentro del contenido.

      En cuanto al tercer punto, fijate que en Theme Options > General la opción Disable Translations esté grisada (es decir en Disable). Y que el idioma de WP sea Español en Ajustes > Generales.

      Saludos.

      Responder
      • saberfrases

        Gracias Ana.
        La animaciones tengo instalado el ET Shortcodes pero no me aclaro con estos chismes 😀

        Miro el que me has dicho de Shortcodes ultimate o si no el otro.

        Que si mascado no me aclaro, ya meter codigos CCS ufff me pilla aun lejano 😀

        El idioma ya lo tengo de nuevo (no estaba disable, asi que algo toque 😀 )

        Gracias mil una vez mas

        Responder
  5. serjunco

    Ana, una pregunta tecnica. sobre las paginas de Cotegorias y Etiquetas en Divi.

    Veo que se pueden ediitar como si fuese wordpress pero no como si fuese “Divi” (osea se puede poner texto y añadir algun objeto, pero no se pueden tratar a lo Divi con los modulos, etcs propios de Divi?
    Es que los necesito usar como unas paginas “buenas” y pierden opciones solo como wordpress.

    ¿Alguna solucion?

    Muchas gracias de nuevo

    Responder
    • Caribdis Diseño Web

      Hola, Sergio.

      Aquí te respondo en serio. Lamentablemente no hay solución. Para eso estaría Extra, que tiene el constructor de categorías. Sin embargo, también tiene sus limitaciones ya que usa sus propios módulos y no son los mismos que incluye el constructor.

      Saludos.

      Responder
  6. Javier

    Hola! Muchas gracias por todo este material. Es de primera!
    No sabrás cómo ocultar el menú de dispositivos móviles. Me estoy volviendo loco…
    He conseguido que sólo se vea el logo en la cabecera de pantalla grande, pero en cuanto la reduzco (tablet o celular), me sale el icono del menú desplegable, aunque no tiene ningún item…

    Responder
    • Caribdis Diseño Web

      Hola, Javier.

      Probá con el siguiente código:

      #et_mobile_nav_menu {
          position: relative;
          top: -999px;
      }
      

      Saludos.

      Responder
  7. Elena

    Hola! ¿Me podrías decir cómo puedo cambiar el color de “Leer mas..” y “entradas más recientes” del módulo del blog que está por defecto en azul y lo quiero poner en negrita resaltado? Con respecto al color, me gustaría que todos los enlaces que añada en los contenidos sean de un color diferente al azul que ponen por defecto, ¿eso donde podría cambiarlo? Tambien me gustaría añadir como icono social el de Instagram, ¿no se puede añadir a este theme o cómo podría añadirlo?
    Muchísimas gracias como siempre por tu ayuda!!

    Responder
  8. Adolfina Nava

    Hola, solicito su ayuda para personalizar el pie de pagina en DIVI, lo había hecho antes entrando a (footer.php) y cambiando la información que trae por default el tema cada vez que había una actualización, pero ahora eso no es posible, Así mismo me gustaría poder solucionar de manera definitiva éste punto. De antemano gracias. Saludos

    Responder
    • Caribdis Diseño Web

      Hola, Adolfina.

      No describiste exactamente por qué no te es posible editar el pie de página (de todas maneras, los archivos del tema no deben modificarse; para eso se debe crear un tema hijo). Fijate que la revisión 3.0.1 incluye la opción para editar los créditos desde el Personalizador de tema. O bien podés usar este tema hijo ya creado, que incluye algunas opciones más en el Personalizador.

      Saludos.

      Responder
  9. Julio

    Hola, Estoy probando el DIVI en su version 3.0 y tuve un inconveniente con el modulo “control deslizante de anchura completa”. Estaba trabajando bien con una imagen que habia subido la cual tenia una altura de 600px, pero de repente (no se si moví algo) esa imagen se cortó a 321px de alto y no veo manera de ampliarla y que me muestre toda la imagen. Hay alguna opcion que pude haber movido? Borré el modulo y cree otro pero cualquier imagen me la corta a los 321px.

    A parte de eso, me parece muy buena herramienta

    Gracias por su ayuda.

    Responder
    • Caribdis Diseño Web

      Hola, Julio.

      No me queda claro si es la imagen de fondo o de la diapositiva, pero la verdad no sabría decirte sin verlo.

      Saludos.

      Responder
  10. Elena

    Me gusta mucho el nuevo Divi, es aún más intuitivo pero podían haberle incluído más elementos.. lo que aún no consigo hacer es un formulario pero con varios campos, algunos de ellos con desplegable, otros para elegir opciones, etc.. creo que con el formulario de Divi no se puede hacer tan completo (solo nombre, email y mensaje) ¿Sabes algun plugin gratuito que haga formularios de este tipo y que lo pueda insertar en una página hecha en Divi?
    Gracias y enhorabuena por tu gran labor!! 🙂

    Responder
    • Caribdis Diseño Web

      Hola, Elena.

      Gracias por dejar tu opinión sobre Divi 3. 🙂

      En cuanto a tu consulta, hay un tutorial donde se explica paso a paso cómo integrar Contact Form 7 a Divi.

      Espero que te sirva.

      Saludos.

      Responder
      • Elena

        Muchas gracias! El tutorial es muy completo!! Tenía algunas dudas que no logro resolver, a ver si me pudieras decir si se puede hacer:
        – Quería quitar el icono del teléfono de la cabecera para dejar solo el email y los iconos sociales.
        – ¿Hay alguna forma de editar el diseño de una página de categoría? No encuentro cómo hacerlo y me gustaría que el diseño fuese tipo rejilla como el módulo del blog. A parte de ponerlo en ancho de pantalla y no con la barra lateral que tampoco logro quitar.
        – En las miniaturas de rejilla del blog que he puesto en la pagina principal, he visto que da la opción de que cuando pasa el ratón por encima de la imágen se puede poner una capa de color y un icono, lo que quería saber es si se podría añadir texto en esa capa de color.
        – Y por último, cómo se puede centrar sólo el título y no todo el contenido en le módulo de Anuncio.

        Si me pudieses ayudar con esto te lo agradecería muchisimo!!
        Un saludo y de nuevo gracias!
        Elena

        Responder
        • Caribdis Diseño Web

          Hola, Elena.

          La primera duda te la respondí aquí.

          Para lo segundo, se puede usar CSS, pero tené en cuenta que no quedará igual al módulo blog, ya que la categoría es otro tipo de página. El código es el siguiente:

          .category div#sidebar, .et_right_sidebar #main-content .container:before {
              display: none;
          }
          .category div#left-area {
              width: 100% !important;
              padding: 0 !important;
          }
          .category #left-area article {
              width: 30.3333%;
              float:  left;
              border: 1px solid silver;
              margin-right: 3%;
          }
          .category #left-area article:nth-child(3n) {
              margin-right: 0;
          }
          .category #left-area article {
              padding: 20px;
          }
          .category #left-area article > a {
              display: block;
              position: relative;
              margin: -20px;
          }
          @media (max-width: 767px) {
              .category #left-area article {
                  width: 47.3333%;
                  margin-right: 3%;
              }
              .category #left-area article:nth-child(3n) {
                  margin-right: 3%;
              }
              .category #left-area article:nth-child(2n) {
                  margin-right: 0;
              }    
          }
          @media (max-width: 550px) {
              .category #left-area article {
                  width: 100%;
                  margin-right: 0;
                  float:  none;
              }
              .category #left-area article:nth-child(3n) {
                  margin-right: 0;
              }
              .category #left-area article:nth-child(2n) {
                  margin-right: 0;
              }    
          }
          

          Para las miniaturas, no es posible sin un nivel muy grande de edición. Depende de qué texto quieras agregar, tal vez el plugin Article Cards te sirva.

          Y por último, para centrar el título del Anuncio breve, tendrías que pegar el código text-align: center; en el campo Título del anuncio breve de la pestaña CSS personalizado.

          Saludos.

          Responder
          • Elena

            Millones de gracias!! Lo probaré todo!! 🙂

          • Elena

            Estoy intentando meter el código CSS para el diseño de las páginas de categorías pero en Navegación>Categorías no hay apartado para CSS ¿Donde tengo que agregar ese código? ¿Sólo una vez en la plantilla o en cada página de categoría?

            Para la capa de la imagen de anuncio que quiero poner texto que aparezca al pasar el ratón no es mucho, solo el nombre de la receta de la imágen..probaré si no deja directamente Divi con el plugin que me recomiendas 🙂

            Gracias de nuevo! 🙂

          • Elena

            Jaja, ya sé lo que me pasaba con el icono del telefóno, tenía un espacio en blanco y por eso me aparecía el icono sin haber puesto el número, por fin!

            Lo de centrar el texto del título del anuncio genial! A la primera! jeje..

            El plugin no me hace esa función de efecto hover para que aparezca texto encima de las imagenes de rejilla del blog, pero espero que en una próxima actualización de Divi lo incluyan ya que ahora mismo solo el efecto es de capa de color e icono, y me parece muy útil lo de la capa de texto para al pasar por encima de la miniatura del post que aparezca el título del post ¿verdad?

            Asi que a falta de lo que te comentaba de donde poner el css para el diseño de las páginas de categoría, lo que no encuentro manera es cómo hacer más grande el carrousel de imágenes de portada, por ejemplo para esta página www.becasvoluntariado.org, no hay manera de hacer que el alto del slider de las imagenes sea el doble y ocupe más. ¿Es que ese es el límite? Porque con las imágenes de cabecera sí que deja hacerlas a página completa…

            Perdona por tanta pregunta, es que primero lo intento resolver yo pero cuando ya es imposible…no puedo seguir, jeje..

            Gracias Ana!!! 🙂

          • Caribdis Diseño Web

            Hola, Elena.

            Está muy bien; gran parte del aprendizaje es prueba y error.

            Para el carrusel asignale relleno superior e inferior desde los ajustes de diseño avanzado del módulo (puede que quieras usar valores distintos para los dispositivos móviles).

            Y el código para el diseño en grilla tenés que pegarlo en Opciones del tema > CSS personalizado.

            Saludos.

  11. Milton

    Yo encuentro la versión 3.0 un gran avance, excepto por dos cosas. La primera es la que tu comentas, la adición de código que haga más pesada la web y requiera más recursos del hosting. El otro inconveniente es que si haces web para clientes, como es en la mayoría de casos, el cliente puede desvalorar el trabajo del desarrollador o algo peor; tocar donde no debería.

    Responder
  12. serjunco

    Buenas Ana.
    Personalmente poco lo he podido probar. Trastear un poco con la interface.

    Las dos revisiones entiendo que son arreglas de bugs que van saliendo con ahora todos los usuarios reportando errores.

    Mas tendran que salir (a mi por ejemplo alguna pagina me carga con errores el constructor visual todavia tras la 3.02) y si me pasa a mi, le pasará a mas usuarios.

    Eso si, lo poco que he probado para editar los que no tenemos ni idea de plantillas, wordpress, y sobre todo diseño y CCS, el ver los cambios en tiempo real sin tener que modificar, guardar, actualizar y ver, volver a modificar etc es un autentico avance!!
    ¿Tu por que te encuentas en un punto intermedio?¿Que pros y contras le ves? Me interesa como siempre muchisimo tu opinion de experta 😉

    Responder
    • Elena Cuadrado

      Vaya! Por donde te encuentro Sergi! Y yo que iba a recomendarte esta fabulosa web! Ya veo que no hace falta, jejeje…
      Yo espero poder, con el constructor visual que es la gran novedad de la actualización de Divi, poner en orden mi web de una vez por todas, espero poder hacerlo sola esta vez, ya que como bien sabes, a pesar de que Divi es intuitivo y “fácil” yo soy una negada total , a ver si con esto cojo velocidad de crucero. Si yo lo consigo…¡lo consigue cualquiera! ???. Tengo unas ganas de no depender de nadie y de dejar de pedir favores a los que más saben…
      No quiero terminar este comentario sin darte las gracias, Ana por el excelente trabajo que haces y el gran valor que aportas.
      Recibe un cordial saludo desde Madrid.

      Responder
      • Caribdis Diseño Web

        Hola, Elena.

        Gracias por tu comentario 🙂

        Saludos.

        Responder
      • serjunco

        Buenas. Os respondo a las dos en el mismo post.

        Ana, por mi parte te sigo considerando experta. En mi tierra hay un dicho que dice: “en el pais de los ciegos, el tuerto es rey”. 😀 😀

        Elena: Sobre el pelearnos con el diseño y CCS y demas que me vas a contar. Medio dia navegando por la red para solucionar una chorrada para muchos, un mundo para nosotros.
        El editor visial de Divi 3 la verdad es que ayuda un montona los novatos en este tema, lo que quizas que comenta Ana y Miltonde la velocidad de carga, meter mas recursos etc se pueda ver influenciado mas adelante (ojo que yo salgo ganando si o si, al menos en horas de sueño y menos peleas con el editor 😀 😀 )

        Saludos y gracias a las dos

        Responder
    • Caribdis Diseño Web

      Hola, Serjunco.

      Qué bueno que el nuevo Divi te resulte un avance. Pero antes de continuar, dejame corregirte en algo: no soy experta en nada. Ya quisiera serlo, jaja.

      Mi opinión es la de los que somos medio puristas y nos gusta hacer todo a mano. Admito que los constructores de páginas son cómodos e intuitivos, pero a nivel código fuente son un poco espantosos, llenan el sitio de clases en línea, de shortcodes que luego no sirven para nada si se decide cambiar de framework, y cargan recursos que en la mayoría de los casos no se usan ni en un 50%.

      El punto más a favor que les veo es la rapidez para armar el sitio. Y Divi tiene una interfaz súper práctica y muy estética, que creo lo destaca de los demás.

      Lo de las revisiones era más bien una pregunta retórica; siempre es bueno que vayan mejorando o corrigiendo los pequeños o grandes errores que salen a la luz con el uso, ¿no?

      Responder

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!