Divi sigue creciendo: arranca el 2016 con la versión 2.6

14 comentarios

Por: Caribdis.Net

Publicada: 26 de enero de 2016

Hace un par de semanas lo habían anunciado y ayer por fin salió a la luz la última actualización del tema estrella de Elegant Themes.

Módulos nuevos, módulos ampliados y mejorados, más opciones para diseño adaptable y la tan esperada remodelación del panel de opciones son el elenco principal de Divi 2.6.

Aunque ya por sí mismo el diseño de Divi se adapta muy bien a los distintos tamaños de los dispositivos por excelencia (celular, tablet y escritorio), ahora otorga un mayor control sobre los componentes de los módulos, tales como los títulos, los textos y los márgenes, ya que no se ve igual un título con una tipografía de 37px en una pantalla de 23” que en un celular de 5”…

Divi - Opciones para distintos dispositivos

Ahora podemos ajustar todos los tamaños para las tres resoluciones y también desactivar módulos de acuerdo con el dispositivo en donde se esté viendo la página.

Divi - Desactivar módulos en distintos dispositivos

Otro genial agregado de esta actualización son los nuevos estilos de cabecera: en “aparición” y en pantalla completa.

Divi 2.6 - Cabecera vertical, que aparece de un lado de la página

Divi 2.6 - Cabecera con menú en pantalla completa

Los módulos nuevos son cinco:

  • Botón – Si bien algunos módulos ya incluyen botones, como los carruseles, el llamado a la acción y el formulario de suscripción y de inicio de sesión, ahora es posible añadir únicamente botones.
  • Carrusel de entradas – Esta era una característica muy solicitada, ideal para los sitios que le dan especial importancia al blog o sección de novedades.
  • Comentarios – Este módulo nos da la libertad de añadir los comentarios en una ubicación diferente de la predeterminada (al final de la entrada).
  • Búsqueda – Ahora es posible añadir un campo de búsqueda en cualquier sector de la página, y ya no estará limitado a las áreas de widgets.
  • Navegación de entradas – Otra útil herramienta para las entradas del blog es este módulo que nos permite colocar enlaces a las entradas anteriores y siguientes en donde más nos guste.

Los módulos ampliados son cuatro:

  • El formulario de contacto – Probablemente el cambio más solicitado por los usuarios de Divi, ahora es posible añadir y ordenar a gusto nuevos campos personalizados, aunque limitados a entrada de texto, correo electrónico y área de texto. También permite configurar una URL para redirigir al usuario luego del envío exitoso y personalizar el mensaje correspondiente.
  • Superposiciones de fondo – Todos los módulos de carrusel ahora incluyen una opción para usar un color de fondo superpuesto. Esto es muy útil para mejorar la legibilidad.
  • Superposiciones en imágenes y en el módulo blog – Ahora las imágenes y los módulos del blog tienen la opción de superposición de un color de fondo y un icono personalizado.
  • Fondos de texto para los carruseles – También para mejorar la legibilidad, este ajuste permite colocar un color de fondo semitransparente detrás del contenido de texto de la diapositiva.

Divi 2.6 - El nuevo módulo Formulario de contacto

Y la palma de las características mejoradas se la lleva la pestaña CSS personalizado, que ahora nos permite tener el control sobre todos los elementos de los módulos y nos facilita la tarea de buscar los selectores.

Divi 2.6 - Más opciones de CSS personalizado

Por último, y no menos importante, con Divi 2.6 se ha renovado el ePanel… ¡ya era hora!

Divi 2.6 - El panel de opciones del tema, totalmente renovado

Con estos grandes cambios, obviamente voy a actualizar la documentación (tanto del tema Divi como del plugin Divi Builder). No tengo fecha estimada, pero espero sea antes de que finalice febrero.

Mientras tanto, sí pongo a disposición la actualización de los archivos de traducción para Divi 2.6, y para el plugin Divi Builder.

Para festejar este nuevo Divi, Elegant Themes sortea cinco membresías. Pasen por esta entrada del blog de ET (hay tiempo hasta el próximo lunes para participar). O bien aprovechen un descuento del 20% para la cuenta Desarrollador, que incluye acceso a todos los temas y plugins por un año.

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. 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.

14 Comentarios

  1. Damián

    Ana, Buenas tardes! Nuevamente me doy una vuelta por tu ayuda, ya que he instalado la actualización de DIVI 2.7. Por ahora venimos perfecto, justamente estoy armando una landing page y quiero consultarte si se puede modificar el texto del botón “Enviar” y luego darle estilo desde el builder? y lo segundo, donde puedo pegar el código de analitycs para que mida las conversiones cada vez que el Cliente haga un click en “Enviar”? Como siempre de ante mano muchas gracias por la ayuda que nos brindas!

    Responder
    • Caribdis Diseño Web

      Hola, Damián.

      El texto de los botones podés modificarlo con jQuery. Por ejemplo, para el botón Enviar del formulario de contacto:

      <script>
      jQuery( document ).ready(function() {
      jQuery('.et_pb_contact_submit.et_pb_button').text('Texto personalizado');
      });
      </script>
      

      Editás la parte de Texto personalizado, claro. Y este código podés pegarlo en Opciones del tema > Integración > Añadir código al <body>.

      En cuanto a lo segundo, te convendría crear una página de envío exitoso (con Activar redirección de URL) y colocar el código de seguimiento allí.

      Espero que te sirva.

      Saludos. 🙂

      Responder
      • Damián

        Genial! Muchas gracias por la ayuda! Quedó perfecto! Ahora voy por la pagina de salida para medir las conversiones! Muchas gracias como siempre! Saludos.

        Responder
  2. Jesús Torralba

    Hola Ana y felicidades por la web.
    He adquirido hace poco la Divi y tengo una duda, a ver si tú me puedes ayudar.

    En la parte del Blog creada, tengo configurado para que me apareciera una imagen pequeña, junto al post publicado, pero aunque lo tengo activado, no me aparece.

    Conseguí que saliera una imagen, pero sólo cuando le decía en la entrada que me añadiera la imagen destacada, pero me la sacaba con todo el ancho del comentario:
    http://marketingprodigioso.com/blog/

    Y me gustaría que saliera un estilo a este que te pongo a continuación ¿es posible?:
    http://onlinewealthpartner.com/blog/

    ¿Puede ser que necesite una imagen concreta con unas medidas concretas?
    Te agradecería que me dijeras si hay una solución, que supongo que si.

    Gracias por adelantado y un saludo cordial.
    Jesús

    Responder
    • Caribdis Diseño Web

      Hola, Jesús.

      Gracias por dejar tu comentario. Para lograr ese diseño con las imágenes destacadas, tendrías que agregar el siguiente código (en Opciones del tema > CSS Personalizado):

      @media all and (min-width:768px) {
        .et_pb_posts a img, .category .et_pb_post a img {
          width: 320px;
          float: left;
          padding-right: 30px;
          padding-bottom: 30px;
          clear: both;
      }
      }
      

      Espero que te sirva.

      Saludos. 🙂

      Responder
      • Jesús Torralba

        Fantástico Ana.
        Directo a la diana. Ha quedado fantástico.
        Me falta conocer más de CSS.

        Mil gracias por la ayuda y saludos cordiales.
        Jesús

        Responder
  3. Carlos Sanchez

    Hola soy un entusiasta entreprenuer, me agradaron tus comentarios acerca del uso de estos elegant theme, gracias por compartir, una vez comprada la cuenta de desarrollador, subo a mi sitio web el theme y para tenerlo en español subo tu traductor? gracias por responder

    Responder
    • Caribdis Diseño Web

      Hola, Carlos.

      Gracias por comentar. El tema ya viene con el idioma español incluido, pero yo había hecho mi propia traducción antes de que ET la incluyera en Divi. Podés usar la que trae por defecto, o si querés subir la mía tenés que acceder vía FTP a la carpeta de instalación de WP.

      En el ZIP con los archivos hay un documento de texto, Léeme.txt, donde se explican los pasos para subir los archivos .mo.

      Cualquier otra duda, quedo a tu disposición.

      Saludos. 🙂

      Responder
  4. Milton

    Hola!

    Todo y que estoy muy contento con la nueva actualización a 2.6 ya me estoy arrepintiendo de haber actualizado… He hecho lo que siempre digo que no tengo que hacer. Pero las ganas me han podido. Se ha cargado todo lo que conseguimos con vuestro fantástico tutorial para Contact Form 7. Tras actualizar ya no respeta los y se ve fatal. Ahora me tocará investigar como arreglarlo porque todos los formularios que tenía de CF7 están rotos. 🙁

    Felicidades por esta revisión de Divi 2.6.

    Saludos!

    Responder
    • Milton

      perdón, donde “Tras actualizar ya no respeta los (…) falta los DIV. Ya no respeta los div.

      Responder
    • Caribdis Diseño Web

      Hola, Milton.

      Gracias por comentar. Sí, me olvidé de aclarar que el tutorial para CF7 solo va a servir hasta la versión 2.5. En cuanto encuentre el tiempo y la tranquilidad, haré uno nuevo para Divi 2.6. Por el momento podrías probar lo siguiente:

      <div class="et_pb_contact">
      <div class="et_pb_contact_form">
      <p class="et_pb_contact_field et_pb_contact_field_half">[text* your-name placeholder "Nombre"]</p>
      <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[email* your-email placeholder "Correo electrónico"]</p>
      <p class="et_pb_contact_field et_pb_contact_field_half">[tel tel-1 placeholder "Teléfono"]</p>
      <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[select menu-862 "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]</p> <!-- Para menú desplegable -->
      <p class="et_pb_contact_field et_pb_contact_field_last">[textarea your-message class:et_pb_contact_message class:input placeholder "Mensaje"]</p>
      </div>
      </div>
      <div class="et_contact_bottom_container">
      <p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>
      </div>
      

      Los pares de campos que irían juntos, ahora van con las clases .et_pb_contact_field y .et_pb_contact_field_half el primero, y .et_pb_contact_field, .et_pb_contact_field_half y .et_pb_contact_field_last el segundo. Y el botón va dentro de la clase .et_contact_botton_container, más el siguiente estilo:

      .wpcf7-submit {
          margin-right: -20px;
      }
      .wpcf7-submit:hover {
          padding: 0.3em 1em;
      }
      

      Todavía no pude revisar el tema de los checkbox, pero prometo que lo haré.

      Saludos. Y ánimo, que todo tiene solución 🙂

      Responder
      • Milton

        Ahá, es genial, si! Entonces… no hace falta poner al final de cada .et_pb_contact_field el número? tipo .et_pb_contact_field_0 ??

        Responder
        • Caribdis Diseño Web

          No son necesarias esas clases, si no vas a aplicar estilos individualmente a cada campo (en CSS personalizado). Divi las crea para que reconozcan los ajustes de diseño avanzado (ahora distintos campos de un mismo formulario pueden tener distintos estilos).

          Responder
          • Milton

            Muchas gracias! Todo solucionado. 🙂

Enviar comentario

Pin It en Pinterest

Compartir esto

Compartir es agradecer

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