DIVI – Tutorial de la Mejor Plantilla WordPress de Elegant Themes

(33 votes, average: 4.73 out of 5)
elegant themes

Escrito por Susana Barriga

Elegant Themes DIVI – La actualización más esperada

Demos la bienvenida a la mayor actualización de la mejor plantilla para WordPress de Elegant Themes y del mundo: ¡ Divi !

Oportunidad única de ahorro en themes WordPress y Divi Builder en Blackfriday:

¡Descubre la Comunidad Divi en Español – Descuento en Elegant Themes y Cursos Gratis!

Super Oferta en las Mejores Plantillas y Plugins WordPress – ¡¡El mayor descuento de la historia en Elegant Themes!!

Si ya estás suscrito a Elegant Themes, ahora puedes renovar por mucho menos dinero y para siempre:

¡¡Renueva tu suscripción por la mejor oferta vista en Elegant Themes y para siempre!!

Tras la apoteósica actualización 2.4 de Divi pudimos ver grandes cambios en el tema:

Y para muestra un botón… no, un vídeo: el de la presentación que realizaron los fundadores de esta prestigiosa plantilla y que me di el lujo de traducir:

Y, como se que te preocupa, te lo digo de entrada… la actualización no elimina todas las modificaciones que hiciste al tema… (a no ser que hayas tocado los archivos php, en cuyo caso te conviene siempre trabajar sobre un “child theme”)

Importante: Si tienes dudas del tipo ¿qué pasará al actualizar, y si lo pierdo todo??, te aconsejo que ANTES de hacerlo realices una copia de seguridad de tu actual diseño, ya que si te encuentras con algún problema (que deberías informar en el foro de Elegant Themes) siempre podrás volver a instalar la versión Divi 2.3 y recuperar el diseño que tenías previamente hasta que ese problema se solucione. Esto suele ocurrir siempre que un tema tiene un cambio tan fundamental como el presente y seguramente saldrán varias actualizaciones posteriores para corregir esos fallos.

En esta mega actualización, en la que el equipo de Elegant Themes ha trabajado durante un año, encontrarás mas de 1000 nuevos parámetros de configuración para los módulos, controles para personalizar tu tema y una fluidez y flexibilidad que no dejan de asombrarme y como diseñadora gráfica no puedo dejar de sentirme agradecida.

¡Descubre la Comunidad Divi en Español – Descuento en Elegant Themes y Cursos Gratis!

Si antes Divi me parecía una genial herramienta de diseño para crear páginas web y blogs únicos, ahora me siento en la gloria y paso a contarte por qué…

Pero, ¿qué es lo primero que ha cambiado?

Entras en Appearance y ups! dónde esta “Divi Theme Options”?? Ahora lo tenemos de manera independiente, con su propio ícono y opciones tales como “Theme Options”, “Theme Customizer”, “Module Customizer” y “Divi Library”

Divi 2.4 Mejor plantilla WordPress

Por si acaso, la actualización no cambia el color del Dashboard… eso lo hice yo solita 😉

Cuando clicas “Theme Options” aparece la ventana del ePanel que ya conocemos. Al clicar “Theme Customizer” aparece la ventana que antes y también ahora, se puede abrir clicando en Appearance > Customize y cuando clicas “Module Customizer” se despliega la ventana que permite modificar las características por módulo…

Y por último, la “Divi Library” abre el detalle de “Layouts” o diseños que hemos guardado en cada página o actualmente en cada post que nos haya gustado y hayamos guardado con la opción “Save Layout”.

Se pueden abrir desde esta ventana y editar a gusto… cosa que antes no podíamos hacer.

La siguiente imagen amplía en detalle el contenido de cada botón y su posibilidad de customizar o personalizar cada aspecto del diseño:

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

Ahora veamos más detalles sobre las bondades de esta actualización:

Personalización del Logotipo y el Menú

Finalmente podemos controlar el tamaño del logo de nuestra web o blog sin usar códigos añadidos de CSS ni sufrir en el intento!

Como es obvio diferentes logotipos requieren diferentes alturas de cabecera para una legibilidad óptima. Esta nueva opción te permite ajustar la altura de la cabecera para que puedas sacarle el máximo partido a tu logotipo.

Además de poder modificar su tamaño podremos optar por colocarlo al medio de la cabecera y en medio del menú

En cuanto a la Cabecera o Header, con la navegación fija activada tendrás un control total sobre la apariencia de lo que el usuario percibe antes de iniciar el desplazamiento hacia abajo. Estos estilos se pueden ajustar de forma independiente de los estilos principales de su navegación, que migrarán automáticamente a medida que el usuario descienda en la información.

Siguiendo con la personalización de la navegación, tenemos en nuestro poder la opción de “Hide Navigation Until User Scrolls” u ocultar la navegación hasta que los usuarios comiencen a descender hacia abajo en la página.

Cuando se habilita esta opción, tienes en tu mano la posibilidad de dar pleno protagonismo a la primera sección en tu página, como “Fullwidth Slider” o un módulo “Call To Action”.

Continuando con la personalización de la navegación, otra característica que podemos emplear es la de transparentar o semitransparentar .

El Theme Customizer  ahora soporta transparencia alfa, lo que significa que podrás transformar el fondo de las barras de navegación en semi-transparente.

Para ello Divi calcula automáticamente la altura de la barra de navegación y añade el relleno adecuado para el primer elemento en tu página, de esta manera superpone el contenido de la página sin obstruir el texto.

Incluso puedes personalizar el color de fondo de navegación y transparentarlo en el porcentaje que veas conveniente.

¡Descubre la Comunidad Divi en Español – Descuento en Elegant Themes y Cursos Gratis!

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

Personalización de la Navegación

Ahora también puedes modificar el ancho de tu página web a cualquier medida de tu elección, esto abre la posibilidad de estar a la vanguardia en lo que se refiere al futuro de las pantallas de súper alta resolución.

Por otro lado también tenemos la posibilidad de ajustar el ancho del sidebar o barra lateral utilizando una plantilla de página con sidebar, las páginas de archivos, páginas de categorías, y todos los otros tipos de posts.

Ahora el diseño es tan versátil y fluido que con solo un clic es posible definir el espacio entre columnas para que sea más amplio, más estrecho o incluso menor al basado en el tipo de contenido de la columna.

Junto con los controles horizontales de espaciado entre columnas, ahora también es posible darle a tu contenido más espacio para “respirar” ya que se puede definir el espaciado vertical de filas y secciones.

Nunca fue tan fácil diseñar.

Antes de Divi 2.4, las filas no podían personalizarse y luego se reforzaron con un nuevo conjunto de opciones transformándose así en el elemento más versátil del Divi Builder.

Las filas tienen sus columnas ajustadas al instante, y los módulos dentro de ellas se adaptan como un guante a su entorno.

Y finalmente han quedado atrás los días en los que teníamos que crear una nueva fila para luego arrastrarla sobre la totalidad de los módulos y sólo para cambiar la estructura de la columna!

Además ahora es posible cambiar la estructura de las columnas con un solo click, sin tener que partir de cero… se puede pedir mas?

¡Descubre la Comunidad Divi en Español – Descuento en Elegant Themes y Cursos Gratis!

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

Otro elemento que pedía a gritos poder modificarse a gusto son los botones, a partir de Divi 2.4 tienes un control total sobre todos los botones en tu sitio web. Puedes establecer estilos de bases globales, o incluso ajustar el estilo de los botones para los módulos individuales.

Ahora también tienes un control total sobre la fuente, el tamaño de la letra, el color del texto, color de fondo, estilos de trazo, la selección de icono, así como un conjunto único de controles para los estilos de botón activable.

Personalización de las Tipografías

Otro elemento que se puede definir es el de las fuentes de Navegación, los tamaños de texto y estilos de texto ya que, desde el panel “Divi Theme Customizer”, se pueden elegir las fuentes primarias y secundarias de navegación, tamaños de fuente y colores de texto.

Con Divi 2.4 se introducen nuevos controles para las tipografía que se puede utilizar para ajustar cada parte de tu sitio web, incluyendo las cabeceras, cuerpo de texto, títulos de pie de página, el texto de pie de página, enlaces de navegación e incluso el estilo del texto de los módulos individuales. Tiene controles para cosas tales como tamaño, color, espaciado entre letras, interlineado, el grosor del texto, las mayúsculas y cursiva… y todavía queda mas!

Personalización de los Módulos

divi 2.4 actualización

Como sabes los módulos son la base del diseño del “Divi Builder” y en esta nueva entrega nos sorprenden con 6 nuevas características: Fullwidth Image Module, Fullwidth Code Module y Fullscreen Header Module, Fullwidth Post Title Module, Regular Code Module y Regular Post Title Module.

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

Veamos una a una sus características:

1. Fullwidth Image Module o “Módulo de Imagen de tamaño completo en pantalla”

Una  imagen vale mas que mil palabras:

Esta característica  permite añadir imágenes a tu sitio que abarcan todo el ancho del navegador,  sin cortarlas y conservando su proporción o relación de aspecto.

He aquí un ejemplo del uso de esta característica:

Demo en línea

2. / 3. Módulo “Code” Fullwidth y Regular

Este Módulo básicamente ofrece una pizarra en blanco para agregar código a tu sitio web. En su modo “Regular” puedes añadir código en cualquier columna y si utilizas el módulo de “Código de Ancho Completo” no estarás restringido al tamaño de la columna o el ancho de las filas.

4. Módulo “Fullscreen Header”

Con éste módulo vas a alucinar y no veas cómo! puedes añadir imágenes, logotipos,  botones con llamadas a la acción y mucho más!

Nos dan la posibilidad de crear diferentes combinaciones de orientación, contenido y ubicación de la imagen, a partir de más de 20 diseños diferentes, que son todos completamente “responsive” o adaptables a pantallas de otros dispositivos como tablets o móviles. Esta característica también nos permite optar por desactivar el modo de pantalla completa y la cabecera coge por defecto la altura natural de su contenido.

He aquí esas 20 posibilidades de diseño… mejor imposible!:

Para ilustrar mejor cómo puede quedar la característica de Fullwidth Header mirá este demo online:

tema wordpress

Demo en línea

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

5. / 6. Módulo “Post Title” (Módulos Regular y Fullwidth)

Si el trabajo de diseño nos apasionaba usando el page builder, ahora esa pasión se desborda, ya que con éste módulo podemos extender las ventajas del page builder a los posts!

plantilla para wordpress divi

divi 2.4 plantilla para wordpress

Post Demo Online

No solo las páginas serán nuestro lienzo blanco, ahora también podremos personalizar cada post de acuerdo a su contenido…

Para ello nos brindan 9 diseños diferentes para combinar la ubicación del texto, la “featured image” o imagen representativa del post, y la orientación del texto:

Pero aquí no acaba todo… tenemos más!

Ahora también puedes personalizar el Pie de Página o Footer y le puedes dar un estilo personalizado a los Widgets ya que cuentas con 8 diseños de columna a elegir para tu área de pie de página, así como un control total sobre la cabecera de los widget de pie de página y el estilo de texto del cuerpo.

plantilla divi2.4

Descubre Ahora Divi

Divi 2.6

Divi 2.6 tiene como fundamental actualización la mejora de Divi Builder además de un cambio visual en la interface del ePanel, nuevos módulos, la mejora de los módulos existentes y nuevos controles de edición de respuesta.

¡Descubre la Comunidad Divi en Español – Descuento en Elegant Themes y Cursos Gratis!

Veamos en detalle estos cambios.

La mejora de los módulos del Divi Builder

Para transformar nuestro Divi Builder en más versátil y dotarle de más posibilidades de diseño no sólo han añadido nuevos módulos si no que también han mejorado considerablemente algunos de los módulos más populares del constructor, les paso a explicar 5 de esos módulos nuevos:

1. Módulo Botón

Como seguramente ya lo sabes, Varios de los módulos del Divi Builder ya vienen con botones integrados. Sliders, llamadas a Acciones y Opciones de correo electrónico. Sin embargo, no nos daban la opción de añadir un botón independiente para un diseño de Divi. Este módulo nuevo resuelve este problema separando el botón Divi en su propio módulo. Cuando se combina con la configuración de diseño avanzado del módulo, se pueden crear un sinnúmero de estilos de botones! a que es una pasada??

divi 2.6 botón

2. Módulo de Control deslizante Publicar

Este módulo funciona igual que el módulo de slider estándar del Divi Builder, excepto que en lugar de construir tus propias diapositivas, el contenido del slider está compuesto por las publicaciones destacadas de tu blog!. Si! no estas viendo alucinaciones jejeje Este es un gran complemento y es una manera genial de presentar tus mensajes favoritos, ya sea en una sección de ancho estándar o a pantalla completa.

divi slider

3. Módulo Comentarios

Este es un módulo que me parece genial!. Cuando hablamos de comentarios siempre tenemos presente que son una parte estándar de cada tema, y por lo general aparecen en la parte inferior y por debajo de la totalidad del contenido de nuestros posts. Pues eso a dejado de ser una regla per se… ya que lo han convertido en un módulo independiente del Divi Builder. Esto significa que ahora tienes el control total sobre la ubicación de tus comentarios y puedes colocarlos en cualquier parte dentro del contenido de tus publicaciones. Este módulo también le da la posibilidad de personalizar la apariencia de tus comentarios a través de la configuración de diseño avanzado del Divi Builder y de las opciones de css personalizado.

comentarios divi

4. Módulo de búsqueda

Hasta ahora, la única manera de añadir un formulario de búsqueda a tu sitio web era usando el widget estándar de búsqueda de WordPress. Sin embargo, esto se limitaba a emplearlo en la zona de la barra lateral destinada a widgets y al pie de página. Este módulo también incluye nuevos controles sobre los resultados de búsqueda y diseño.

tutorial divi

5. Módulo de Navegación

La posibilidad de “saltar” de un post a otro con los links de “post anterior” y “post siguiente” al pie de tus posts es una funcionalidad que, hasta ahora, estaba cubierta por plugins adicionales que teníamos que instalar en nuestro blog… con este módulo eso a terminado…

Este módulo se puede colocar en cualquier lugar dentro de tus publicaciones. El módulo también viene con algunas opciones, como la posibilidad de limitar publicar enlaces a los posts dentro de la misma categoría que la publicación que se está viendo actualmente. Esta opción sencilla mejora en gran medida la relevancia de los enlaces y aumenta la probabilidad de que los visitantes encuentren atractivo tu contenido.

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

Varias mejoras insuperables:

Una mejora que pedíamos a gritos: el formulario de Contacto

Este módulo ha sido objeto de la actualización más grande, con una revisión completa de su funcionalidad principal. Y estos son los aspectos mejorados:

• Campos personalizados – El módulo de contacto ahora es compatible con los campos de entrada personalizados, lo que lo convierte en un elemento completamente funcional. Ya puedes añadir todos esos campos que hacían falta, como teléfono u otros que no estaban contemplados.

• Honey-pot y Detección de Spam – A veces un código de imagen no es suficiente y puede ser frustrante para los usuarios. Es por esto que han añadido este método completamente invisible, eficaz y discreto para detectar los robots de spam.

• Mensaje personalizado y orden de contenido – Ahora puedes personalizar el contenido del mensaje que genera tu formulario de contacto, incluyendo la capacidad de ajustar el orden de las entradas de campo.

• Redireccionar URL – También es posible asignar una URL de redireccionamiento personalizado. Esto volverá a dirigir al usuario después de un envío exitoso del formulario a la URL que estimes conveniente.

• Mensaje Éxito personalizada – También tienen ahora la posibilidad de ajustar este mensaje que se muestra después de un envío exitoso del formulario.

divi tutorial

Controles de edición Responsive

Quizás la característica más emocionante en Divi 2.6 son los nuevos controles responsive de edición del Divi Builder, que te permiten asignar diferentes valores de tamaño y espaciado para cada punto de interrupción.

divi tutorial

Ajuste de tamaños para dispositivos individuales

Divi ya se ve muy bien en todos los dispositivos gracias a su diseño ajustable y a su fluida rejilla de diseño, pero a veces, cuando se modifica la configuración de diseño avanzado de un módulo, puede ser difícil asegurarse de que todo se verá perfecto en todos los dispositivos. Ahí es donde entran en juego los nuevos controles de edición sensibles de Divi Builder, ya que te dan un mayor control sobre el tamaño, el espacio y la visibilidad de los módulos en cada punto de interrupción sensible.
Cada vez que modifiques un módulo, fila o secciones de tamaño y espaciado, aparecerá un nuevo icono que al clicarlo activará nuevos controles de edición de respuesta del Divi Builder para asignar valores únicos por cada elemento.

Deshabilitar manualmente elementos individuales según en que Dispositivos serán reproducidos

Además de ser capaz de ajustar el tamaño y espaciado, también puede desactivar módulos enteros en dispositivos particulares. Todos los módulos, las filas y las secciones vienen ahora con un nuevo ajuste de “Desactivar” que te permite desactivar el elemento en teléfonos inteligentes, tabletas y / o computadoras de escritorio.
A menudo y en busca de una mejor experiencia para tu usuario, querrás reconfigurar la versión móvil de su sitio web para que la pequeña pantalla no está llena con un exceso de información. Puedes incluso duplicar módulos, creando dos versiones diferentes que se activarán en función del tamaño de la pantalla de tus visitantes.

divi

Cambios en la cabecera:

Estilos nueva cabecera de Divi

Divi ahora viene con 2 nuevos estilos de encabezado que se pueden seleccionar a través del Personalizador de temas. Las cabeceras Slide-In y pantalla completa son los dos grandes adiciones a los controles de cabecera ya existentes en Divi.

Slide en Cabecera

Cuando la nueva cabecera deslizable se activa, sus vínculos primarios y secundarios se consolidan y ocultan dentro de un menú de hamburguesa clásica. Al hacer clic, los elementos de menú se deslizan desde el lado derecho de la pantalla. Este nuevo estilo/aplicación se está volviendo más y más popular en la era móvil ya que permite visualizar el total de la pantalla y al clicar el despliegue dinámico muestra todo el contenido del menú. Cuando combines esta característica con fondos transparentes de cabecera y colores atractivos, podrás fácilmente dar a la cabecera de tu Divi un nuevo aspecto totalmente moderno.

plantilla wordpress divi

Cabecera de pantalla completa

El menú de pantalla completa también esconde sus vínculos primarios y secundarios de navegación hasta que se hace clic en el icono del menú de hamburguesa. Su cabecera se presenta a continuación, en un estilo de pantalla completa. Puedes personalizar fácilmente el color, la opacidad y el tamaño del menú y los enlaces a través del Personalizador de temas. Estos dos nuevos estilos de cabecera, cuando se combinan empleando los controles del personalizador del tema, abren un nuevo mundo de posibles diseños y estilos de cabecera.

divi

Otras mejoras de Divi:

Presentación de superposiciones de fondo

Todos los módulos deslizantes ahora vienen con una opción de superposición de fondo o background. Cuando está activado, un color de fondo semi-transparente se coloca sobre la imagen de fondo de la diapositiva anterior, pero por debajo del contenido del texto de diapositivas. Esto se puede utilizar para reducir el contraste y añadir color a la imagen de fondo de la diapositiva y, al mismo tiempo, mejorar la legibilidad del texto de la diapositiva.

divi plantilla

Superposiciones de imágenes para una imagen y blog Módulos

Tanto la imagen como el módulo de blog ahora vienen con una opción de superposición de imágenes. Cuando está activado, un icono y fondo de color personalizables se colocan sobre la imagen al pasar el cursor sobre la imagen.

Fondos de texto para Sliders

Cuando está activado, un color de fondo semi-transparente se coloca detrás del contenido de texto de la diapositiva. Esto ayuda a asegurar que el texto siempre será fácil de leer, no importa el tipo de foto que se utiliza en el fondo de la diapositiva.

divi tuto

Mejores Opciones de edición de CSS

Ahora cada elemento es factible de ser customizado con su propio código css. Han tenido el buen gusto de añadir docenas de nuevas opciones de estilo CSS, por lo que cada parte, de cada módulo es completamente editable. También han realizado ajustes que consiguen que los módulos sean más fáciles de utilizar, añadiendo el selector CSS para cada campo de texto, por lo que te quedará bastante claro el punto exacto en el que se está agregando tu CSS.

divi css

El ePanel ahora tiene un nuevo look!

Y el cambio es radical el diseño es más contemporáneo y organiza y facilita el acceso a todas las opciones de manera más intuitiva.

divi epanel

Una mejora importante en la compatibilidad con Plugins (Incluyendo BuddyPress)

Algunos de los cambios estructurales que se han abordado en la estructura de la “plantilla de página” de Divi, se han realizado especialmente para mejorar la compatibilidad con varios plugins.

Los problemas de compatibilidad del plugin (en particular las cuestiones relacionadas BuddyPress) que anteriormente se generaban ahora están totalmente solucionados y ahora se puede afirmar que Divi garantiza la compatibilidad con los plugins de WordPress más populares.

Para terminar no esta demás decir que en Elegant Themes siempre están innovando para mejorar Divi y darnos la mejor de las experiencias como usuarios apasionados que somos… o al menos yo si que lo soy!!

¡Descubre la Comunidad Divi en Español – Descuento en Elegant Themes y Cursos Gratis!

Lo que veremos en Divi 2.7! si… aquí les dejo un aperitivo de lo que se avecina:

– Divi 2.7 se centrará principales en 3 áreas: “Split Testing” es una herramienta que te permitirá obtener fácilmente información valiosa de tus visitantes, probar la eficacia de diferentes variaciones de contenido y, finalmente, crear páginas de mayor rendimiento y mejor enganche.

– Otro área es la referente a la “portabilidad” , es decir el sistema de exportación e importación, para que sea sencillo crear, compartir y transferir configuraciones y diseños del Divi Builder.

– Y finalmente nos regalarán un conjunto de nuevas configuración u opciones de página en el Divi builder.

Estos tres nuevos conjuntos de características tienen una cosa en común: coger las capacidades existentes de Divi y hacerlas aún más potentes… solo tendremos que esperar un poquito para tenerlas entre manos y jugar con ellas!

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

¡¡¡Divi 3.0 – La actualización que hará historia!!!

Por fin llega Divi 3.0, una actualización cargada de novedades y que hace de Divi la mejor plantilla WordPress de la historia con diferencia!

Entre las novedades que se encuentran en esta nueva versión, podemos destacar su nuevo editor visual Divi Builder. A partir de ahora ya no tendrás que alternar entre la parte administrativa o de creación (back-end) y la parte de visualización de resultados (front-end).

El nuevo editor permite visualizar en vivo y en directo todos los cambios que vas haciendo en tu web. Es decir, que vas a poder crear tu sitio de una manera mucho más rápida y fácil y los resultados van a ser sorprendentes. Olvídate de ir a la “vista previa” para visualizar los resultados de tu creación – porque los vas a ver ahí mismo mientras creas el sitio.

Podéis ver un adelanto en este vídeo:

Felicidades a los que ya sois miembros de Elegant Themes y a los que no lo sois…¿¿A qué esperáis??

Divi y WordPress 5.0 (Actualización Gutenberg Diciembre 2018)

WordPress 5.0 es la última actualización de este popular CMS y viene con cambios muy importantes, introduciendo toda una nueva experiencia en la edición de posts.

Aprovechando este gran cambio de WordPress, Elegant Themes por su parte también ha hecho importantes cambios en la experiencia del Divi Builder. A partir de ahora podrás disfrutar de la edición visual desde el mismo editor de posts WP. Es decir desde el Back-end, sin necesidad de ir al Front-end.

Por si no lo sabes, Elegant Themes dispone del constructor web Divi Builder que opera desde el Back-end mediante el sistema de arrastre de bloques “drag and drop” y también dispone del Constructor Visual, una manera más intuitiva y rápida de trabajar, que funciona desde el Front-end de la web pudiendo ver el resultado de lo que haces en tiempo real.

El nuevo editor de WordPress 5.0 no solo reemplaza TynyMCE sino también toda la página de edición de posts. Para muchos, este cambio puede ser un poco intimidante a primera vista, pero la buena noticia es que no es necesario que te lances a usarlo si no estás preparado. El Editor Clásico junto con el Clásico Divi Builder están todavía disponibles. Sigue leyendo y sabrás cómo usarlos.

La última versión de Divi es 100% compatible con WordPress 5.0

actualización divi wordpress

La última versión de Divi, Extra, Bloom, Monarch y del Divi Builder son totalmente compatibles con la actualización WordPress 5.0. Es importante que actualices Divi a la versión 3.18+ antes de actualizar WordPress a la versión 5.0. Esta versión no crea problemas de compatibilidad con el nuevo editor de posts Gutenberg y te permitirá alternar el Divi Builder y adentrarte en el Visual Builder.

Esta actualización presentaba problemas con el nuevo sistema meta box, usado para mostrar los settings de las páginas de Divi y las opciones de formato de post. Además, ha sido necesario ampliar el soporte de formato de posts para adecuarse a los nuevos tipos de contenido de la actualización Gutenberg (como vídeos y bloques de audio).

Puedes actualizar tu tema y tus plugins usando el sistema estándar de actualización de WordPress. También necesitarás meter tu nombre de usuario y la API Key en tus opciones de tema y paneles de opciones de plugin. Si no recibes una notificación de actualización o tienes problemas al hacerlo, siempre puedes bajarte las últimas versiones de producto desde tu área de miembro y subirlas manualmente.

Usando el Divi Builder en WordPress 5.0

Usar el Divi Builder con WordPress 5.0 es un poco diferente que con las anteriores versiones. Notarás que el diseño general del editor de posts ha cambiado y que aparece una nueva caja a la hora de crear nuevas páginas que te permitirá elegir entre el Divi Builder y el editor de posts estándar. Podrás alternar entre uno y otro en cualquier momento.

divi builder wordpress

WordPress 5.0 quita el Editor Clásico, junto con el Clásico Divi Builder

divi wordpress theme

WordPress 5.0 reemplaza el Editor Clásico con una experiencia totalmente distinta de edición de posts. Junto con este cambio del Editor Clásico viene el cambio de todas las aplicaciones conectadas como por ejemplo el Clásico Divi Builder.

Después de actualizar a WordPress 5.0 verás que el Editor Clásico y el Clásico Divi Builder no aparecen. Pero no hay que preocuparse, todavía puedes usarlos instalando el Plugin de Editor Clásico. Esto deshabilitará la nueva experiencia de edición y te permitirá el acceso al Clásico Divi Builder si lo deseas.

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

Siempre puedes usar el Clásico Divi Builder instalando el Plugin de Editor Clásico

wordpress divi theme

Si no estás preparado para usar el Visual Builder o si no estás preparado para usar el nuevo editor de posts WordPress 5.0, no hay problema. Simplemente puedes instalar el Plugin Editor Clásico y así tu web WordPress y el Divi Builder funcionarán como antes de la actualización a WP 5.0.

Puedes tomarte el tiempo que necesites para familiarizarte con el nuevo sistema. Elegant Themes seguirá soportando ambas versiones, tanto el Editor Clásico como el Nuevo Editor Gutenberg

Una vez instalado puedes ir a Settings > Writing y asegurarte de que el Editor Clásico está puesto como el editor por defecto.

plantilla divi

Puedes deshabilitar el Nuevo Editor en las Opciones de Tema de Divi

Puedes también deshabilitar el nievo editor de posts WordPress y habilitar el Editor Clásico dentro de las opciones de tema de Divi. Si estás usando WordPress 5.0 o superior, aparecerá una nueva opción en Divi > Theme Options > Builder > Advanced.

wordpress plantilla divi

Viene un Soporte Mejor para WordPress 5.0

Por ahora en Elegant Themes se han enfocado en resolver cualquier error y asegurar la compatibilidad básica con WordPress 5.0 para Divi y otros productos estrella de la compañía, pero la historia no acaba ahí. La compañía planea 3 etapas de soporte adicionales para las próximas semanas y el modo en que Divi se integra e interactua con Gutemberg será más avanzado y fluido en el futuro cercano.

La Nueva Experiencia del Divi Builder

Como ya hemos mencionado, junto con la actualización tan novedosa de WordPress 5.0 ha llegado la nueva experiencia del Divi Builder a la hora de crear tus posts. Ahora podrás hacerlo de forma visual desde el mismo back-end.

Pero no solo eso, sino que además:

  • Se ha mejorado la interfaz
  • Se han añadido nuevas funcionalidades propias del Divi Visual Builder
  • Se ha mejorado la tecnología del Constructor Visual (nuevo sistema de caché para carga más rápida, más precisión visual, copia y pega entre páginas, etc.).

En resumen, ahora tienes todo el poder del Constructor Visual de Divi disponible a la hora de administrar tus posts dentro del panel de administración de WP.

Y si todavía no te sientes con ganas de hacer el cambio, puedes estar tranquilo porque siempre puedes hacerlo todo como antes, pero te estarás perdiendo una opción muy interesante.

Cómo instalar Divi (o cualquier otra plantilla de Elegant Themes)

En este vídeo de poco más de 1 minuto puedes ver lo sencillo que es instalar Divi en tu WordPress.

En resumen…Divi se ha consagrado como el mejor tema WordPress del momento y con diferencia!

Te ha gustado el post? tienes dudas?…. no dejes vacío el recuadrito de abajo y pregunta sin pensarlo dos veces. Y si además te animas a ayudarme… siempre puedes compartir mi blog en tus redes sociales 😉

Nuevo Centro Soporte Exclusivo para Divi – ¡Incluye Modo Seguro, Estado del Sistema y Acceso Remoto!


A partir de ahora, además del excelente soporte general ofrecido por Elegant Themes, la compañía líder del mercado ha puesto en marcha un soporte exclusivo para su plantilla estrella – Divi. Gracias a esto, se conseguirá una mejora en la interacción con el usuario de Divi y una mayor rapidez de respuesta.

Elegant Themes tiene ya más de medio millón de usuarios y eso supone tener miles de preguntas cada día en su servicio soporte. A este respecto, cualquier mejora por pequeña que sea puede suponer una avance importante en la relación con el cliente.

El lanzamiento de este nuevo Centro de Soporte Divi no supone en absoluto la anulación del tradicional soporte por chat de Elegant Themes, sino que supone la creación de un área dentro de Divi, que permite a los usuarios contactar con el soporte de manera más directa, a la vez que da al equipo soporte nuevas herramientas para solventar los problemas de un modo más rápido y eficaz.

Centro Soporte Divi

El Centro Soporte de Divi da, tanto al usuario como al equipo soporte, las herramientas necesarias para arreglar los problemas de manera más rápida y eficiente y sin que tu web se vea perjudicada en ningún momento.

1. Estado del Sistema (System Status)

Dentro de este Centro de Soporte Divi, lo primero que verás es la sección de Estado del Sistema. Esto te da una visión general rápida de las estadísticas de tu servidor y sobre la configuración, y te permitirá conocer si hay algo que pueda causar problemas de compatibilidad con Divi.

Si todas las luces se muestran en verde todo está correcto. Si algún apartado está en rojo probablemente haya que revisarlo. Si algo está en color amarillo deberías considerar hacer ajustes para mejorar el sistema.

Configurar tu hosting correctamente resolverá muchos de tus problemas al usar Divi.

2. Acceso Remoto (Remote Access)

divi themeMediante el acceso remoto podrás permitir al equipo soporte de Elegant Themes acceder a tu panel de WordPress y solucionar los problemas que haya. Con tan solo 1 click podrás habilitar esta opción en tu panel y todo sin necesidad de compartir contraseñas. Todo funciona cómodamente en el background.

Por defecto, el equipo soporte tendrá acceso limitado a tu sitio web, mediante un permiso soporte WordPress personalizado. También podrás permitir el acceso total a la administración si es necesario.

El acceso remoto se desconecta automáticamente después de 4 días o puedes hacerlo manualmente cuando ya no sea necesario. Este Control Remoto solo puede ser habilitado por el usuario y no por Elegant Themes o por nadie más. Tu controlas en todo momento el acceso a tu sitio.

Esto es un increíble avance en cuanto al servicio soporte, ya que evita complicados chats con el soporte de Elegant Themes y permite la resolución de problemas de manera más rápida y eficaz por expertos en Divi directamente actuando en tu sitio.

3. Modo Seguro (Safe Mode)

plantilla divi elegant themesOtra característica de este Centro de Soporte Divi es el Modo Seguro. La mayoría de problemas que la gente experimenta usando Divi están relacionados con las compatibilidades, lo cual es bastante lógico considerando que WordPress es un ecosistema de código abierto. Puede que sea un problema con tu child theme, un plugin de terceros o código personalizado.

Tradicionalmente, el único modo de averiguar qué es lo que estaba causando el problema era deshabilitar tu child theme, todos tus plugins y tu código personalizado, todo a la vez. No obstante, esto llevaba tiempo y suponía una molestia para tus visitantes. A menudo los usuarios no quieren dar este paso y es difícil resolver así cualquier problema. Gracias al Modo Seguro este problema está resuelto.

Al habilitar el modo seguro, todos tus plugins de terceros, tu child theme y todos los scripts personalizados en tu web quedan temporalmente deshabilitados (pero solo para ti y no para tu audiencia). Y basta un click para hacerlo. Lo puedes hacer tú solo o bien el servicio soporte de Elegant Themes puede revisarlo todo por ti.

Mediante este Modo Seguro es posible explorar tu web y el Divi Builder y descubrir si todavía existe el problema. En caso de que ya no haya problema, eso indica que el inconveniente lo ha generado alguna incompatibilidad con un plugin de terceros, etc. El siguiente paso es por tanto descubrir lo que genera exactamente el problema y arreglarlo.

Al activar este Modo Seguro, todos tus plugins de terceros, child theme y código personalizado que puedas tener en tu web quedan temporalmente inactivos, ¡pero solo para ti! Es decir, que tú (o el servicio soporte de Elegant Themes) puedes habilitar con 1 click el modo seguro y esto no causa ningún perjuicio a tus visitantes.

Este Modo Seguro combinado con el Acceso Remoto es algo increíble. Con solo dos clicks puedes permitir al equipo soporte de Elegant Themes acceder a tu área de administración y resolver los problemas sin afectar a tu sitio web ni estropear la experiencia de usuario de tus visitantes.

4. Documentación y Vídeos de Ayuda

theme divi wordpressEl Centro Soporte para Divi también incluye una sección de documentación con algunos vídeos que te ayudarán a empezar con Divi, además de enlaces a algunos artículos explicativos interesantes. Esto es especialmente interesante para los principiantes. Podrás ver muchas preguntas que suelen hacerse al servicio soporte y acceder a la solución con 1 click.

5. Reparación de Errores (Debug Log)

divi soportePor último está la sección de Reparación de Errores, que te da fácil acceso a todos los errores y advertencias que hayan estado ocurriendo en tu web. Con este sistema es fácil (para ti y para el equipo soporte) averiguar cuáles son las causas de los problemas.

Ya no será necesario un chat, a veces complicado, con el equipo soporte, donde te piden datos e información que muchas veces desconoces o no sabes buscar. Sin duda este sistema es otro ahorro importante de tiempo y esfuerzo, tanto para ti como para el soporte de Elegant Themes.

En Resumen…

Combinando todas estas funciones, la experiencia de soporte con Divi de Elegant Themes te resultará muy gratificante. Te evitarás ese tiempo frustrante en que el soporte necesita que le des información sobre el servidor, plugins externos instalados y otros asuntos que quizás desconozcas.

Tanto tú como el servicio soporte podréis tener más información de lo que va mal y corregirlo más fácilmente sin que tu web se vea afectada por ello.

Y si deseas que sean ellos los que resuelvan el problema accediendo a tu administración, gracias al Acceso Remoto puedes conseguirlo con 1 solo click. Sin duda lo más fácil y cómodo para ti.

En resumen esto se traduce en rapidez y efectividad a la hora de solucionar los problemas. Deja que los expertos hagan el trabajo duro.

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

Nuevos Controles Divi de Transformación de Elementos

¡Montones de Nuevas Posibilidades de Diseño!

Ahora puedes realizar asombrosos diseños a mano alzada usando una colección de nuevas opciones de diseño que hasta ahora solo estaban disponibles en programas de diseño gráfico como Photoshop.

En efecto, ahora existe una nueva función en Divi que permite el diseño a mano alzada dentro del Divi Builder, dándote el poder de transformar elementos en la página, de maneras que típicamente solo podrían hacerse desde programas de diseño como Photoshop y Sketch.

Podrás mover los elementos libremente, redimensionarlos, girarlos en 3 ejes diferentes y sesgar y ajustar el origen de la transformación con facilidad.

Todo esto se realiza mediante una nueva interfaz super clara que hace que cada transformación sea fácil de hacer y entender.

Esta nueva y asombrosa interfaz visual hace que transformar los elementos de diseño sea muy fácil.

Esta interfaz es totalmente intuitiva. El resultado es un set de opciones muy fáciles de usar pero muy potentes.

Una Interfaz de Usuario Sorprendente

Con los nuevos controles de transformación podrás ajustar fácilmente la apariencia de cualquier módulo, fila o sección, usando una combinación de nuevos settings.

Esta interfaz ha sido construida para permitir controlar visualmente tu diseño. En vez de una larga lista de indistintos sliders, Divi te ofrece controles visuales que describen cada transformación de un modo visual.

Esto se refleja en la página donde verás los elementos transformarse delante de tus ojos. Es realmente divertido de usar, pero sobre todo es realmente efectivo a la hora de desencadenar montones de nuevas posibilidades de diseño.

1. Escala (Scale)

Usando el control de Escala, podrás ajustar rápidamente el tamaño de cualquier cosa. Podrás escalar módulos enteros (aumentar y disminuir) con un simple movimiento de ratón. Cuando ajustas el tamaño de un elemento, todo el elemento y todos los sub-elementos, se ajustan de inmediato. Por defecto, el escalado de los elementos mantiene la misma proporción original, pero también puedes ajustar la altura y la anchura a tu gusto de manera independiente.

2. Posición

Puedes ajustar la posición de un elemento usando el control Translate. Podrás mover los elementos por la página en cualquier dirección sin preocuparte por lo que les rodea.

Cuando mueves un elementos, éste se mueve independientemente de los elementos que lo rodean.

3. Rotación

Puedes girar elementos usando los controles de Rotación, que permiten girar el elemento en 3 ejes diferentes en 3 dimensiones. Puedes combinar diferentes rotaciones para crear algunos efectos geniales y ahorrar mucho tiempo de diseño.

Por ejemplo, en lugar de abrir una imagen en Photoshop y usar un template para crear efectos de imágenes en 3D, puedes simplemente abrir la imagen plana en Divi y transformarla en el Divi Builder. Y si alguna vez tienes que reemplazar la imagen, no tendrás que editarla de nuevo en Photoshop.

4. Sesgar (Skew)

Puedes sesgar elementos para crear efectos de profundidad muy convincentes. Parecido a lo que pasa con el control de Escalar, puedes sesgar los elementos con una proporción definida o bien puedes ajustar cada lado de manera independiente.

Al combinar los controles de Sesgar y Rotar podrás conseguir sorprendentes efectos 3D que añadirán profundidad y complejidad a tu página.

5. Origen de la Transformación

Finalmente puedes ajustar el origen de la transformación, que afectará a todas las transformaciones hechas a cualquier elemento enseguida. Esta opción te permite cambiar la posición de los elementos transformados. Las transformaciones en dos dimensiones pueden ajustarse en el eje X e Y.

6. Asombrosos Efectos Flotantes

Estas transformaciones son también animables, permitiéndote crear efectos flotantes increíbles que antes era imposible hacer. En combinación con todas las geniales características de diseño que Divi ya tiene, las posibilidades son increíbles.

7. Libertad de Diseño

Cuando transformas un elemento, esto no afecta a los elementos a su alrededor. Puedes apilar elementos uno encima de otro y crear un bello collage con diferentes módulos. Esto te permite liberar fácilmente elementos de sus columnas o filas, permitiendo efectos de superposición de módulos, que pueden añadir un sentido de diversión a cualquier diseño.

Si buscas un hosting web de excelente calidad, no te pierdas las ofertas de SiteGround, un proveedor Premium recomendado por WordPress y que te costará muy poco dinero.

Preguntas Frecuentes:

¿Qué es Divi?

Divi es una plantilla para WordPress multi-propósito, desarrollada por la prestigiosa empresa proveedora de Temas Elegant Themes, y qué ha alcanzado gran popularidad en los últimos años gracias a su facilidad de uso, su flexibilidad, versatilidad y a su extraordinario constructor web integrado: El Divi Builder.

¿Cuál es el Precio de Divi?

Si quieres adquirir Divi deberás contratar alguno de los dos planes de contratación que ofrece Elegant Themes. Dichos planes son de membresía y te dan acceso a todas las plantillas de Elegant Themes y a sus plugins.

El plan anual o “Yearly Access” cuesta 89$ y te permite un uso ilimitado de todas las plantillas y plugins en cualquier número de webs.

El segundo plan es el llamado “Lifetime Access”, cuesta 249$ y se trata de un plan de pago único con el que podrás ser miembro de Elegant Themes para siempre y disfrutar de todo lo que la compañía ofrece.

¿Cómo Comprar Divi?

Puedes comprar Divi en la página de Elegant Themes. Allí deberás elegir qué plan prefieres. En ocasiones Elegant Themes ofrece descuentos interesantes en su planes. No puedes comprar Divi como plantilla individual sino que tienes que hacerte miembro de Elegant Themes.

¿Puedo Conseguir Divi en Español?

Sí. Tan solo tienes que tener instalado el CMS WordPress en español y al instalar el theme te aparecerá todo en español automáticamente.

¿Qué es el Divi Builder?

El Divi Builder es el constructor web que integra la plantilla Divi y también Extra. Puede además usarse para otras plantillas (tanto de Elegant Themes como de terceros) instalándolo como plugin externo. Puedes conseguir este plugin page builder haciéndote miembro de Elegant Themes.

¿Es Divi un Theme solo para WordPress?

Sí. Tanto Divi como todos los temas de Elegant Themes solo sirven para WordPress.

¿Puedo Conseguir Divi Gratis?

Divi forma parte del paquete de plantillas Premium de Elegant Themes y no puede conseguirse gratis. Desconfía de los que te lo ofrezcan gratis a no ser que sea alguien con membresía y seas cliente suyo. Si lo deseas, tienes a tu disposición el tema Serene de Elegant Themes que sí que es totalmente gratuito.

¡Descubre la Comunidad Divi en Español – Descuento en Elegant Themes y Cursos Gratis!

———————————————————————————————————

Disclosure: Algunos enlaces de este artículo son de afiliado y pueden generar una pequeña comisión. Este hecho no influye para nada en las recomendaciones hechas ni por supuesto en el precio a pagar. Recomiendo lo que yo misma uso para mi y para mis clientes.

Puede que también te interese…

5+ Mejores Temas WordPress para Drones y Fotografía Aérea

5+ Mejores Temas WordPress para Drones y Fotografía Aérea

¿Quieres impulsar tu negocio de fotografía? La grabación con drones está de moda y no hay una manera mejor de promocionar tus servicios de fotografía aérea que con una web. Para ello aquí te presentamos una lista con las mejores plantillas WordPress para que tus...

read more
29+ Mejores Plantillas WordPress para Fotografía

29+ Mejores Plantillas WordPress para Fotografía

Hay muchos themes Wordpress en el mercado que han sido diseñados con los fotógrafos en mente y en este post vas a tener una lista de los mejores. Hoy en día hay millones de personas que se dedican a la fotografía, ya sea de manera profesional o como hobby. La...

read more

451 Comments

  1. Fuen

    Hola Susana, Tengo una web con Divi 2.4.6 y quiero actualizar a wordpress 5.3. Me puede dar algún problema de incompatibilidad? Gracias.

    Reply
    • Susana Barriga

      Hola Fuen!
      Con la actualización de Divi a 3.0 integraron la usabilidad del famoso Gutenberg que tiene WordPress como base en su actualización más “gorda”… no estoy segura pero creo que podrías tener algún problemilla con WordPress por lo que te aconsejaría hacer una copia de seguridad de tu sitio antes de instalar WordPress y ver si tu plantilla se ve afectada o no al actualizar… Mucha Suerte!!

      Reply
  2. daniel

    Buenas Susana, soy un novato que he hecho una web de una academia online, wordpress + Divi. Ahora quiero poner un aula virtual o campus virtual que me sirva para subir archivos(privados para alumnos que paguen la mensualidad solo) y tener tuturias. A ser posible que sea responsive. Me recomiendas algun plugin o plataforma. que tal ves moodle? Muchas gracias

    Reply
    • Susana Barriga

      Hola Daniel!
      Moodle es una buena opción si quieres usar tu propio servidor para subir los archivos, otras plataformas que puedes revisar para ver si se ajustan a tus necesidades son ATutor, Chamilo, Clarolin y Sakai entre otras… Mucha Suerte!!

      Reply
  3. Pepe

    Hola Susana:

    Desde hace un tiempo leo tus blogs y como siempre tu talento en DIVI es indiscutible por lo que quisiera realizarte una consulta:
    – Sí tengo varias páginas con el modulo de texto con contenido diferente y quisiera cambiarle el estilo a todos esos contenidos como podría hacerlo, no puedo hacerlo con los modulos globales ya que como tengo contenido diferente es imposible, me pudieras aconsejar??
    Gracias por la atención.

    Reply
    • Susana Barriga

      Hola Pepe!
      Muchas gracias por tus palabras! me animan mucho a seguir adelante en varios proyectos sobre Divi en los que estoy trabajando y en nada sacaré “al aire”…
      Sobre tu consulta, lo que puedes hacer es crear un estilo en una página, con todo el contenido, la estructura de módulos, las columnas, imágenes y textos además de los módulos del tipo footer o call to action que puedes hacer en formato global (verdecitos). Una vez que tienes el diseño terminado y estas conforme con el resultado lo guardas en tu biblioteca como “base para páginas”.
      Al crear nuevas páginas solo tienes que descargar ese tu diseño desde la biblioteca y reemplazar las imágenes y textos… ya que la estructura estará lista… Mucha Suerte!!

      Reply
  4. Mary

    Hola, tengo varias dudas con Divi woocommerce.

    ¿Es posible poner el carrito encima de la foto en la pag de tienda, sin entrar en la ficha?

    ¿Y poner fotos en las vistas (capas) de las fotos de producto en vez de color liso, para que al pasar el ratón se vean otras vistas del producto?

    ¿Cómo poner el carrito arriba a la derecha desplegable al pasar el ratón?
    Muchas gracias

    Reply
    • Susana Barriga

      Hola Mary!
      Si me pasas tu URL y veo lo que tienes te puedo sugerir cómo hacer esas modificaciones, vale?

      Reply
  5. Telma

    Hola Susana
    Sensacional tu post sobre Divi e igualmente que tu blog, asi da gusto con profesionales como tu.
    Estoy intentando hacer una web con WordPress, Woocommerce y Divi,dedicada a la impresión de fotografia en lienzos, papel, etc.
    Estoy buscando una plantilla que permita al cliente poder enviar sus imágenes y que le aparezca en un recuadro para que pueda seleccionar los materiales en los que imprimir, medidas, etc. y tambien he visto que Fotolia (es.fotolia.com/Services/API/Reset/Documentation# ) dispone de una API para que el cliente sin salir de la tienda pueda seleccionar imágenes que quiere imprimir. Seria de mucha ayuda si me pudieras decir donde puedo encontrar algún tema que fuera para ofrecer estos servicios bajo demanda, ejemplo como: photobox.es/fotos-online-digital/formato-grande/lienzos/Formato#21391 y de paso si también se puede generar con wordpress, perdona que no se como llamarlas (las casillas o cajetines) que hay en este enlace con medidas y precios.
    Agradezco tu atención y te deseo muchos éxitos, un saludo.

    Reply
    • Susana Barriga

      Hola Telma!
      Muchas gracias!
      Podría afirmar que con Divi puedes plantearte montar toda la estructura y me parece que la interfaz que necesitas para que suban fotos, elijan soportes y medidas esta ligada a Woocommerce. Una que puede que te interese es “Fancy Product Designer”. Dime si esta te va bien, vale? Mucha Suerte!!

      Reply
      • Telma

        Te doy las gracias por contestarme y darme información, mirare el tema que me dices y te informare, un saludo y gracias.

        Reply
        • Susana Barriga

          Hola Telma!
          A ti las gracias por visitar mi blog y por confiar en mi para aconsejarte 🙂

          Reply
          • René Mijangos

            Hola Susana. Estoy viendo la necesidad de este plugin Fancy, pero no entiendo la diferencia entre su licencia estándar y extendida y me confunde que dice: “usada por ti o un cliente en un solo producto final que no se cobra y en la extendida que se puede cobrar”. Agradezco mucho y ojala me puedas arrojar algo de luz al tema.

          • Susana Barriga

            Hola René,
            Lo ideal sería que te pongas directamente en contacto con el servicio de soporte del plugin ya que ellos podrán explicarte en detalle dichas diferencias…
            Mucha suerte!!

  6. Emma

    Buenas,
    Ya he instalado Divi en mi WooCommerce y quería personalizar cómo salen los productos. Quiero que en cada producto pueda poner el descuento que tiene y que aparezca en las imágenes del producto. Es esto posible?
    Si puedes indicarme algún tutorial o post donde hable sobre esto… También necesito configurar todo lo referido a los costes de envío y distintos precios de productos según la talla, tamaño, etc. Muchas gracias

    Reply
    • Susana Barriga

      Hola Emma!
      Me alegra haberte ayudado con esto! si entras a youtube y colocas “cómo configurar WooCommerce” en la ventana de búsquedas, te salen muchísimos vídeos que lo explican ampliamente. Por otro lado si entras en la web de WooCommerce también encontrarás tutoriales y explicaciones muy detalladas de cómo sacarle provecho a este plugin…Mucha suerte!

      Reply
  7. Emma

    Buenos días,
    He visto que la plantilla de elegant themes en especial divi es super completa en cuanto a las opciones de personalización del diseño.
    Queremos desarrollar una web corporativa que está puede cumplir nuestros requisitos con creces. Pero luego tenemos un subdominio de tienda que tenemos unos requisitos concretos: que los productos se puedan clasificar por tallas o colores, que podamos seleccionar o indicar el proveedor para calcular al final de la compra los costes de envío, indicar el peso, calcular y añadir para mostrar los descuentos de los productos, etc. Mi duda es si con este tema se puede hacer o hay otros mejores para esto que te expongo. Por supuesto luego todas las compras tienen que ir enlazadas a una base de datos tanto de clientes como sacar informes de manera sencilla sobre las ventas.
    Muchas gracias y espero que puedas ayudarme

    Reply
    • Susana Barriga

      Hola Emma!

      Claro que puedes realizar todo el trabajo con Divi, ya que te permite integrar el mejor plugin para crear tiendas: woocommerce con todos los requisitos que mencionas.
      Y no olvides que puedes tener un 10% de descuento clicando este link si te compras Divi… Mucha Suerte!

      Reply
  8. Carlos

    Hola Susana, muchas gracias por el artículo.

    En nuestro caso nos han encargado hacer algo como esta web: bonicklandscaping.com.

    La particularidad de esta web es que no tiene scroll vertical (tamaño fijo) y que el menú está en el pié de página y despliega hacia arriba. ¿Sabes si Divi contempla estas opciones?

    Gracias

    Reply
    • Susana Barriga

      Hola Carlos!
      Con Divi es posible indudablemente… solo tienes que “esconder” el menú superior y diseñar las páginas colocando en la base un menú con características globales.
      Por otro lado tendrías que eliminar el footer y en las características de diseño del menú decirle que despliegue hacia arriba… Espero haberte ayudado! Mucha Suerte!!

      Reply
  9. Rosana

    Buenos días:

    Me ha surgido un problema con la plantilla DIVI, he creado una galería de fotos con el “Portafolios de anchura completa” pero cuando las visualizo en mi móvil la última fila de imágenes aparece cortada y no sé porqué?……

    Reply
    • Susana Barriga

      Hola Rosana!

      Me puedes pasar tu URL para que lo vea en mi móvil y te pueda ayudar? Mucha Suerte!!

      Reply
      • Rosana

        Hola de nuevo Susana:

        Aquí lo tienes nineoclock.es

        ¡He probado de todo y mirado un montón de tutoriales pero no consigo que se vea bien en el móvil!

        ¡¡¡¡Muchísimas gracias por tu ayuda!!!!

        Reply
        • Susana Barriga

          Hola Rosana!
          La galería de proyectos al tener 15 imágenes (número impar) y reducirse a la pantalla del móvil lo que hace es adaptarse al tamaño y pone dos imágenes por fila… al final queda sobrando una imagen… la solución sería que el número de imágenes de tu galería sea par (14 o 16)… así no tendrías esta descompensación… te pongo de ejemplo la galería en mi página de empresa: https://www.imagos.com.es/… Mucha Suerte!!

          Reply
  10. Jesús Ureña

    Hola Susana,
    Cómo va esa vida. Imagino y deseo que bien.
    Necesito tu ayuda con una sección que quiero cambiar y que he visto algo que me gusta en una plantilla gratuita y que contiene 4 imágenes con 4 modulos cta .la imagen en su interior lleva un texto de view more que aparece al posicionarse en la descripcion o cualquier elemento de la misma .
    El caso es que ese texto view more que he sustituido por Leer más enlaza con otra página en teoría, pero no consigo saber dónde colocar la url para que enlace. A ver si me puedes echar una mano .Tengo todo el css de la sección y página pero no encuentro el lugar para poner esas urls que enlacen el texto view more con otra página.

    Te dejo el enlace de la página free que contiene la sección que me gusta

    demo.divi-den.com/divi-layout-for-a-photographer

    Mil gracias de antemano por tu siempre gran amabilidad y ayuda

    Reply
    • Susana Barriga

      Hola Jesús!
      Muchas Gracias por tus palabras y por la visita!
      Me di una vuelta por tu web y vi que ya habías resuelto el problema, verdad? me alegra mucho!! si necesitas algo más con mucho gusto te ayudo 🙂

      Reply
      • Jesús

        Hola Susana .
        Si al final era un problema de css del módulo de la sección de la plantilla que los de soporte de esa plantilla solucionaron.
        Muchas gracias igualmente por tu siempre interés y disponibilidad y un abrazo.

        Reply
        • Susana Barriga

          A ti las gracias Jesús por el mensaje y la visita!

          Reply
    • Rosana

      Hola Susana buenos días:

      ¡Muchas gracias antes de nada por contestarme tan rápido!

      Tal y como me has comentado he quitado el último proyecto para dejarlo par con un total de 14 imágenes, pero si me voy a visualizarlo en mi móvil la última fila de imágenes no se ve nada, es curioso porque en el resto de dispositivos se ve perfectamente, es solo en el móvil.

      ¿Sabes cuál es el problema?

      ¡Muchas gracias de antemano!

      Reply
      • Susana Barriga

        Hola Rosana!

        Es realmente extraño, has probado el foro de Elegant Themes? si tienes algún problema con el inglés con muchísimo gusto te ayudo 🙂

        Reply
  11. Fernando

    Buenas tardes,

    Llevo intentando ver si es posible eliminar la fecha que aparece cuando creas un Proyecto. Me aparece la fecha cuando deslizas el puntero por encima, y me gustaría que no apareciera nada. ¿Es posible? Si es así, ¿cómo se hace?

    Gracias

    Reply
    • Susana Barriga

      Hola Fernando!
      Me podrías dar un link en el que aparezca esto? así te paso un css personalizado. Estaré a la espera!

      Reply
    • Rosana

      Gracias Susana!!

      Lo miraré en un foro tal y como me dices!

      Un saludo
      y mil gracias!!

      Reply
      • Susana Barriga

        En el foro de Elegant Themes, vale? ya que a los técnicos les puedes generar un código de acceso para que revisen directamente tu blog y te ayuden “desde dentro”… si necesitas ayuda con el inglés o algo más con muchísimo gusto te ayudo 🙂

        Reply
  12. dryant

    Hola Susana. Antes que nada felicitarte por la guía que es increíble, pero sobre todo felicitarte por dedicación que pones a responde todos los comentarios. Es algo que, creo, que debería hacer todo dueño de un sitio web, pero lamentablemente no es así.
    Yo también respondo siempre a todos los comentarios en mi web y a los emails que me mandan siempre que no sean spam claro. Así que solo me queda decirte enhorabuena.
    Por otro lado querría hacerte una consulta con algo que no encuentro por ningún lado y es con el “modulo posts”. Dicho modulo aparece en la documentación del tema hijo “Extra” y por lo visto es el modulo con el que está hecho este ejemplo del propio tema Extra en https://www.elegantthemes.com/preview/Extra/category/posts sin embargo no me aparece en mi sección de módulos por ningun lado.
    Sabrias decirme como añadir ese modulo?
    Un saludo y gracias!

    Reply
    • Susana Barriga

      Hola Dryant!
      Muchas gracias! yo respeto muchísimo el tiempo que la gente emplea cuando lee mis post y visita mi blog… he estado en el otro lado, necesitando una ayuda o aclaración a alguna duda o desconocimiento y por eso me tomo el tiempo que haga falta para responder…
      Sobre tu consulta, es rarísimo que no encuentres este módulo o no lo tengas dentro de los módulos habituales ya que es un módulo bastante básico… tienes el Divi Builder (plugin) además de Extra instalado? Por otro lado, una forma de verificar que el módulo esta por defecto, es creando una nueva página y desde biblioteca cargar una página pre – hecha de blog y así verificas que el módulo esta presente… y si esto te ayuda, porfi nos avisas!! Mucha Suerte!!

      Reply
  13. Daniel

    Hola Susana, es un gusto y un placer saludarte.
    Muy interesantes e impresionantes tus post, pero quiero saber si puedes darnos algun consejo a los que empezamos en este mundo de las webs y sobretodo a los que necesitamos una pero no contamos con la plata para hacerlo por lo menos para comenzar, recomiendas algun sitio gratis, es confiable hacerlo o se debe esperar a tener la plata para tener uno de pago?

    Reply
    • Susana Barriga

      Hola Daniel!
      Para mi todo el gusto de contar con tu visita 🙂
      Varios son los factores que te ayudan a decidirte por dar el primer paso y te lo puedes plantear en etapas, por ejemplo comenzar con un blog en WordPress.com como hice yo con mi blog personal (www.susanabarriga.com.es) hace ya muchos años. Eso te permite familiarizarte con la plataforma y ganar confianza en su uso. Aunque las desventajas son que por ejemplo si ya tienes reunido el dinero para dar el salto al siguiente paso, que es tener tu propio hosting, dominio y plantilla, tienes que pagar para que te redirijan tu blog a tu nuevo hosting y dominio y además, si solo consigues importar tus post y páginas pierdes el tiempo de “antiguedad” o PageRank que has trabajado en tu blog gratuito.
      Lo positivo de tener un inicio en un blog y hosting gratuitos es que te permite trabajar tu contenido y darle cuerpo a tu proyecto. Aunque por experiencia creo que esa es la única ventaja mientras reúnes tu presupuesto… Te deseo mucha suerte!!

      Reply
  14. Alejandro

    Hola Susana.

    Tengo el problema de que no consigo controlar el tamaño de las imagenes destacadas en los post. Da igual el tamaño de la imagen al ir al post me aparece muy muy grande y pixelada.

    ¿Como puedo controlar el tamaño de presentación de las imagenes destacadas?

    Gracias.

    Reply
    • Susana Barriga

      Hola Alejandro!
      Lo que yo suelo hacer es usar una sola medida de ancho, una imagen de 960 pixeles de ancho por 568 pixeles de alto con la posibilidad de modificar el alto según el blog o web… la calidad es de 72 dpi y si te fijas en los archivos PSD que puedes descargar junto con Divi desde la web de Elegant Themes estas imágenes van de 320 px (pantalla de móviles) a 1280px (pantallas panorámicas). Yo uso el que se considera tamaño promedio… Mucha suerte!!

      Reply
  15. Enrique

    Hola Susana, excelente post y enhorabuena por tu blog.

    Soy novato y no sé si es normal que en las entradas individuales del blog, cuando voy al Divi Builder o Visual Builder para editar alguna, no veo por ningún lado el Módulo Comentarios. Por tanto no consigo configurar su diseño. Y mi problema es que las líneas no están justificadas y no hay separación entre el botón [Responder] y el texto. A diferencia del tuyo en este blog, en el mío (en pruebas-localhost) se pisan.

    Un saludo y gracias

    Reply
    • Susana Barriga

      Hola Enrique,
      Lo que comentas no es normal… tienes la última actualización? Por si acaso hice una prueba en mi blog y el módulo va bien en ambos builders. En la ventana de Diseño pone todas las formas de separar líneas de texto y personalizar el formato de títulos, párrafo, etc… Prueba reinstalando la última actualización y borrando caché… Mucha Suerte!!

      Reply
  16. Jesús Martínez

    Hola
    Tengo una web en español con DIVI y ahora la querría también en inglés. multiidioma.
    Qué debería hacer? Qué pasos seguir?
    – plugin?
    -nueva intalación en un subdirectorio /en?

    Ma da miedo perder al de lo hechho, que la nueva instalación interfiera en la anterior, o tener que empezar muy de cero para la parte en inglés.

    Reply
    • Susana Barriga

      Hola Jesús!
      Lo ideal es crear tu web (www.tusitio.com) en el idioma base (español) y luego instalar un nuevo wordpress en una subcarpeta de la página base con el duplicado de la web en el otro idioma (www.tusitio.com/eng). Al ser ambas páginas independientes los formularios no se cruzan y el cambio de idioma no perjudica la conexión con la base de datos y no pierdes nada de nada. Solo colocas unos botones adicionales con las banderitas de los idiomas y esos botones abren la web de la subcarpeta.
      En cuanto a los plugins, existen varios como por ejemplo el Easy Translator, el “Bing Translator” o el “Google Language Translator” Pero no olvides que la traducción al completo depende del plugin y no siempre es exacta o perfecta…
      Saludos y mucha suerte!

      Reply
  17. Jaime

    Hola Susana. Necesito tu ayuda.

    El Slider no se me ve en móviles, solo en tablets y en pc. He desactivado la pestaña disable para phone, pero aún así me sale en blanco. ¿A qué se puede deber?

    Reply
    • Susana Barriga

      Hola Jaime!
      Has actualizado a la última versión de Divi? si activas el visual builder en la página en la que tienes el problema podrás verificar, en directo, el cambio de todos tus elementos según el dispositivo que elijas… si sigues con el problema puedes intentar borrar primero el caché, luego desinstar los plugins y activar uno a uno para ver si tienes conflictos de compatibilidad y finalmente reinstalar la última versión de Divi que es muy estable y no da ningún problema… Mucha Suerte!!

      Reply
  18. laida

    Hola susana!
    gracias por este post: -)
    tengo un problema con el módulo de entradas del blog.
    en la web que estoy montando lo tenía configurado con la opción de rejilla, y hasta ahora se veía sin problema, pero ahora de repente, las entradas se muestran con ancho completo.
    he revisado que esta opción no esté marcada y así, está la de rejilla, pero se vem con ancho completo.
    ¿cómo puedo solucionarlo?
    gracias!

    Reply
    • Susana Barriga

      Hola Laida!
      Has actualizado a la última versión de Divi? también podrías desactivar tus plugins y ver si eso causa algún conflicto. Ah! y no olvides el tema del vaciado de caché tanto de tu web como el de tu explorador… Mucha Suerte!!

      Reply
  19. Jesús

    Hola Susana.
    Qué tal va esa vida? Espero que todo te vaya bien .Yo bien y aunque de vacaciones siempre hay algo. A ver si me ayudas.He puesto la cabecera por defecto lo cual prefiero y el logo se queda en la izda pero luego no consigo cuadrar los valores para los dispositivos móviles y no sé ve ni el logo ni el menú. He intentado aplicar unos margin pero no doy con el exacto. Agradecería tu ayuda .Mil gracias por tu siempre gran trabajo y ayuda. Buen finde. Un cordial saludo.

    Reply
    • Susana Barriga

      Hola Jesús! tanto tiempo 🙂
      Aquí contenta ya que tuve un entrenamiento en el foro de ayuda de Elegant themes y ahora puedo decir que ayudo con todas las de la ley! jejeje he visto tu web y esta preciosa! la miré en móvil y creo que con estos cambios puede quedar como tu quieres:
      .et_header_style_left #logo, .et_header_style_split #logo {max-width: 54%; margin-top: 25px;}
      @media only screen and (max-width: 980px)(index):296
      #main-header, #main-header .nav li ul, .et-search-form, #main-header .et_mobile_menu {padding-top: 50px;}
      .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {padding-bottom: 45px;}

      Ya me dirás si te queda bien… como siempre Mucha Suerte!!

      Reply
      • Jesus

        Hola Susana,
        Me alegro mucho de saber que te van las cosas bien y de tu paso por elegant themes del que tengo una cuenta por el tema de Divi y he leído cantidad de tutoriales los últimos meses.
        He copiado tu código y en los iPad o tableta pequeña va bien pero en los móviles como se queda todavía alto tanto logo como menú .No sé si he copiado bien tu código, creo que sí pero como no puedo copiar directamente desde tu página ya que no me deja igual he introducido algún código mal.Podrias por favor mirarlo a ver si tú lo ves bien y si es así mandármelo por whatsapp o mail? Mi más sinceras gracias y enhorabuena por que todo te vaya bien ya que tu profesionalidad es indiscutible y tu trabajo también.Un cordial saludo. Por cierto si te equivocas en la captcha tienes que volver a escribir la pregunta de nuevo.Te lo digo por si tienes que cambiar algo.Graciasssssss

        Reply
        • Susana Barriga

          Hola Jesús!

          Muchas gracias! Todo lo que sirva para aprender y mejorar es bienvenido verdad? 😉
          De los códigos que te pasé puedes ir ajustándolos usando el Visual Builder, así aprovechas la opción de ver el diseño en las diferentes pantallas de dispositivos para ajustar los altos que mencionas… si te va bien con esto me avisas vale? si no nuevamente te ayudo con mucho gusto… Mucha Suerte!!

          Reply
          • Jesus

            Hola Susana,
            Ya lo tengo más o menos logrado Gracias a tus consejos aunque no del todo porque es dificil lograr el punto exacto ya que por ejemplo en una tablet en vertical están un poco bajo menu y logo y en pantalla más pequeña de móvil habría que subirlo.Pero bueno creo que puede valer. Deberia poner valores diferentes por pantallas pero hay muchas.Como siempre gracias por poder contar con tu ayuda.Que pases un buen finde.Un cordial saludo

          • Susana Barriga

            Me alegra mucho Jesús! espero que consigas el acabado que deseas! Mucha Suerte!!

    • v.romerod23

      Hola Susana,

      Me gustaría saber como puedo poner el interlineado en mi plantilla Divi.

      Te agradecería mucho si me ayudaras.

      Saludos.

      Reply
      • Susana Barriga

        Hola!
        Depende si quieres cambiar el interlineado de lo que se identifica como cuerpo de texto de toda tu web o si solo quieres cambiar el interlineado de un módulo en concreto. En todo caso la propiedad que se modifica es “line-height”… Si me dices cuál es el que quieres cambiar te paso el dato de cómo hacerlo… Mucha Suerte!!

        Reply
  20. Adolfo

    Hola Susana, Gracias por el trabajo magnífico que realiza tu blog. Si me permites una pregunta.
    Estoy trasteando con DIVI y coincido contigo es la mejor plantilla que he visto.
    Mi pregunta es sobre el post slider, me aparece con un tamaño excesivamente grande y cuando lo reduzco con el CSS solo se reduce el fondo general pero la entrada no se mueve y por tanto queda oculta o semioculta según la anchura que le asigne en la pestaña de avanzado, imagen principal. puedo centrar el post en el slider
    Gracias

    Reply
    • Susana Barriga

      Hola Adolfo!
      Gracias a ti por la visita! Te animas a pasarme tu URL para que vea el problema y te ayude mejor? gracias!!

      Reply
      • Adolfo Alcaraz

        Hola Susana:
        lequip.es
        No hagas mucho caso de la página, ya te comenté que es un dominio que uso para hacer pruebas.
        Como veras (he puesto colores destacados para comparar) he reducido el panel mediante pa propiedad css de elemento destacado (height:300px;) Sin realizar ese cambio la entrada aparecia centrada, al hacer el cambio de tamaño la entrada practicmente ni se ve

        Reply
        • Susana Barriga

          Hola Adolfo!
          Gracias por compartir tu URL, la he revisado y creo que el problema es el css… así que si quieres personalizar tu deslizaor de posts te paso este truco y espero que me digas si te funciona y lo usas!
          1. Quita el css que aplicaste
          2. cosas que debes ajustar en tu deslizador de posts:
          a) Ponle este nombre o ID: mideslizador01 Para hacerlo abres los settings de tu módulo y lo pones en la pestaña “Advanced”
          b) En esa misma pestaña coloca los siguientes css como te detallo a continuación:
          Before
          position:absolute;
          top:57px;
          right:-6px;
          content:””;
          border:4px solid transparent;
          border-top-color:#2C477F;
          border-left-color:#2C477F;

          Main Element
          border-radius: 13px;
          border:1px solid #dedede;

          After
          position:absolute;
          top:15px;
          right:-7px;
          display:block;
          content:”Últimas publicaciones”;
          color:#F9F4F7;
          background-color:#C6BE6F;
          padding:4px 15px;
          border-radius:2px;
          z-index:2!important;

          Slide Description
          min-height:460px;
          width: 55%;
          min-width: 300px;
          float:left;
          padding: 85px 45px 50px 35px!important;
          text-align:left

          Slide Button
          padding:70!important;
          margin-top:10;

          Slide Controllers
          margin-bottom:-85px;

          Slide Arrows
          color:#ffffff!important;
          background-color:rgba(0,0,0,.2);
          font-weight:bold;
          border-radius:2px;
          -ms-transform: scale(1.2, 2.5); /* IE 9 */
          -webkit-transform: scale(1.2, 2.5); /* Safari */
          transform: scale(1.2, 2.5);

          c) En la ventana de Custom CSS de Divi> Theme options… pegas este css

          #mideslizador01.et_pb_post_slider_0 .et_pb_slide {background-size: 70%; background-position: top right; padding-left: 0; overflow: visible!important;}
          #mideslizador01.et_pb_post_slider_0 .et-pb-controllers a {height: 8px; width: 8px; order-radius: 50%}
          #mideslizador01.et_pb_slider_with_overlay .et_pb_slide_overlay_container {width: 30%; min-width: 300px;}
          #mideslizador01.et_pb_slide_content .post-meta {height: 0px; overflow: hidden}
          #mideslizador01.et_pb_slide_content .post-meta .published {position: absolute; top: 32px; left: 35px; color: #898f9c; font-size: 16px}
          #mideslizador01.et-pb-arrow-prev {display: none}
          #mideslizador01.et_pb_slider {overflow: visible!important}
          .et-pb-active-slide .et_pb_slide_description {animation-name: fadeIn;}
          .et_pb_slide.et-pb-active-slide {transition: opacity 2.5s!important}
          @media all and (max-width: 1252px) {#mideslizador01.et_pb_post_slider_0 .et_pb_slide {background-size: 90%}}
          @media all and (max-width: 980px) {#mideslizador01.et_pb_post_slider_0 .et_pb_slide {background-size: 100%; background-position: top center;}}

          y para terminar miras cómo queda y con el fabuloso visual builder vas modificando los parámetros para que quede a tu gusto… Mucha suerte!!

          Reply
          • Adolfo

            Gracias Susana, ahora estoy un poco liado pero asimilo tu codigo y lo pruebo y ya te digo
            Hasta ahora

          • Susana Barriga

            De nada Adolfo! comenta si te va bien, vale? Mucha Suerte!!

  21. Jordi

    Hola SUsana,
    Felicidades por el artículo. De LUJO!!!!
    Sabes si en el call to action de la DIVI se puede poner como nofollow? si la respuesta es “si”, sabes cómo se hace? 🙂
    Saludos y gracias

    Reply
    • Susana Barriga

      Hola Jordi!
      Muchas gracias por el cumplido!
      Te cuento que por ahora no hay ninguna casilla específica en los módulos donde activar que los enlaces sean “nofolllow” en los módulos de Divi. Pero lo que si puedes hacer es usar un plugin de SEO, como Yoast SEO, que brinda las opciones de nofollow y noindex como opciones de casilla de verificación al crear / editar una publicación o página . La mayoría de los otros plugins de SEO ofrecen lo mismo.
      Por otro lado queda la opción habitual de colocar los links manualmente en la pestaña de texto que acompaña a casi todos los módulos y ahí añadir el código de “nofollow”…
      Espero haberte dado una mano! Mucha suerte!!

      Reply
    • Adolfo

      Hola Susana,
      Ya lo he probado (poco pero si) y todo funciona estupendamente, ahora me queda ajustar variantes (color, tamaño, etc), gracias por tu estimable ayuda.
      Dejame que te haga una pregunta al respecto, si en el post slider deseo que también aparezca la imagen pero si ocupar todo el tamaño el ajuste lo haria con porcentaje o directamente con px y donde, resulta que cuando indico que quiero que aparezca la imagen destacada, ocupa todo el cuadro.
      Gracias de antemano

      Reply
      • Susana Barriga

        Que bien Adolfo!
        Me alegro mucho haberte ayudado! y te cuento que en la configuración que te pasé esta contemplado que por defecto las imágenes aparezcan a la derecha del resumen del post y para que aparezcan solo tienes que tener definida la “Featured Image” en tus posts.
        Como el diseño es “responsive” la distribución del resumen de tu post y la imagen destacada están distribuidos en porcentaje.
        Una vez que tengas tu slider definido si te animas me pasas la url y yo te ayudo a ajustar esas proporciones de manera apropiada vale? Mucha Suerte!!

        Reply
  22. José Baena

    Buenas, gracias por este gran aporte que nos resuelve miles de dudas. Quería preguntarte si sabes como podría hacer que al pulsar un boton de un slider se abriese una ventana superpuesta (flotante)con un video de youtube. Muchas gracias.

    Reply
    • Susana Barriga

      Hola José!
      Gracias a ti por la visita! Mira, para resolver tu problema tal vez puedas usar un plugin que se llama “WP Video Lightbox”. Una vez instalado puedes crear una sección de una columna (o las que tu quieras) y añades un módulo de texto, en él añades el shortcode para que aparezca tu vídeo. Al clicarlo se abrirá un un pop up flotante… El shortcode es de este estilo:

      [video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" 
      anchor="click here to open YouTube video"]
      [video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" 
       anchor="http://www.example.com/images/youtube-thumb.jpg"]

      Mucha Suerte!!

      Reply
  23. gisela

    HOLA
    gracias por su blog,necesito su ayuda, quisiera centrar el menu secundario en el tema divi y no se como hacerlo, muchas gracias por su atencion
    gisela

    Reply
    • Susana Barriga

      Hola Gisela!
      Para centrar el menú secundario prueba este CSS:
      /* Secondary menu alignment */
      #et-info {
      float: none !important;
      text-align: center;
      }
      Mucha Suerte!!

      Reply
  24. Isidoro Jiménez

    Buenas Susana, ante todo felicitarte por este gran post!. Tengo una duda que no he conseguido resolver leyendo su post. Estoy creando una pagina la cual tiene un menú con 5 enlaces, hasta ahí bien, pero mi problema es que cuando accedo a la pagina desde un móvil que el menú aparece con el típico botón “hamburguesa”. Quería saber si es posible mostrar en la versión móvil el mismo menú que en la versión escritorio. De no ser así, ¿seria posible poner mas grande botón “hamburguesa” de la versión móvil?, ya que este aparece demasiado pequeño y resulta difícil de pulsar.
    Muchas gracias por su aporte!.

    Reply
      • Susana Barriga

        Hola Isidoro,
        Por motivos de espacio es mejor usar el botón de hamburguesa… para crecerlo en tamaño te sugiero este CSS:
        .mobile_menu_bar:before {font-size: 63px;}
        Tu decide en pixeles el tamaño que quieres que tenga… y Mucha Suerte!!

        Reply
  25. Manuel García

    Hola Susana, sabrías como poder poner el módulo de “control deslizante de vídeo” y que se vean solo las miniaturas de los vídeos sin un vídeo en grande encima de ellos. Gracias

    Reply
    • Susana Barriga

      Hola Manuel!

      El módulo de “Video Deslizante” esta pensado para que los vídeos que están “deslizándose” debajo, al clicarlos, se vean en la pantalla que tienen arriba… si eliminas esa pantalla por ejemplo con un CSS como este:

      et_pb_slider et_pb_slider_carousel et_pb_slider_no_pagination et_pb_controls_light 
      et_slide_transition_to_1 et_pb_bg_layout_dark {display: none;}

      . quedan solo los vídeos en el deslizante pero no se abren al clicarlos… Buscaré alguna otra solución pero lamentablemente por ahora eso no es posible… Mucha Suerte!!

      Reply
  26. Juan Cortés

    Buenas Susana, en primer lugar darte las gracias por todo lo que nos enseñas con este blog.
    En segundo lugar me gustaría preguntarte como se puede eliminar el contenido de las entradas en el modulo blog, es decir, cuando en la pagina principal se vean las imagenes de cabecera de las entradas, se vea solo eso, sin mostrar el contenido completo ni un extracto del mismo. Espero que me hayas entendido.
    Muchas gracias!!

    Reply
    • Susana Barriga

      Hola Juan!
      Muchas gracias por tus palabras! me animan a seguir ayudando y a no dejar de contestar todas las dudas…
      Sobre tu consulta, que tal si intentas con este CSS:
      .post-content {display: none;}
      Para que desaparezcan autor, fecha y comentarios además de categorías entra en “Settings” del módulo blog y desclicas esas opciones… ya me contarás cómo te va con esto… Mucha Suerte!!

      Reply
      • Juan Cortés

        Gracias por tu respuesta, pero he puesto esa linea de codigo en css personalizado del apartado divi y no me funciona, me sigue saliendo exactamente igual. Esta es la pagina en la que estoy trabajando por si te es util. iphotosuar.esy.es.
        Muchas gracias.

        Reply
        • Susana Barriga

          Hola Juan!

          Una forma rápida de obtener lo que necesitas es instalando un plugin de Elegant Themes que se llama “Article Card Plugin” haciendo click en este link podrás descargarlo y para que veas de qué va el plugin y cómo instalarlo, te dejo este otro link a un vídeo en youtube, vale? Espero te ayude en lo que necesitas! Mucha Suerte!!

          Reply
  27. Justo

    Hola, tengo un problema que no se como resolver, la linea del sidebar de la tienda me ocupa todo el alto de la página, incluido el menú.

    Gracias

    Reply
    • Susana Barriga

      Hola Justo!

      Me puedes pasar tu URL para que vea el problema que tienes? así podré darte una solución, vale? Mucha Suerte!!

      Reply
  28. Javier Bazán

    Hola Susana,

    Como puedo quitar el icono de búsqueda que me aparece seguido del menú, se que es un módulo, pero no veo de dónde tengo que quitarlo. Gracias!

    Reply
    • Susana Barriga

      Hola Javier!
      Solo tienes que abrir Divi > Theme Customizer > Header & Navegation > Header Elements y aquí desactivas la casilla de “Show search Icon”. Con eso eliminas el iconito de la lupa en el menú… Mucha Suerte!!

      Reply
  29. Jesus

    Hola Susana ,
    Espero que estés bien y aprovecho para una pregunta.
    Intentó poner en el blog de la web dos widgets en barra lateral de categorías y otro de archivos por fecha.El tema es que los he quitado porque el título se me duplica y no sé porqué.
    Por ejemplo si pongo entradas por fecha aparece dos veces y en categoría igual categoría categoría.
    Ahora no lo tengo puesto ya que queda feo.
    Alguna sugerencia?
    Mil gracias por tu tiempo y gran trabajo.
    Saludos

    Reply
    • Susana Barriga

      Hola Jesús!
      Me alegra tener noticias tuyas :)!!
      Es extraño lo que me comentas… ya que al añadir un widget, tu le pones el título que quieres que aparezca… claro que, si no personalizas el título, saldrá el que tiene por defecto y obviamente se duplicará al tener el mismo widget con diferentes características dos veces o más en la barra lateral.
      Por tanto para que no suceda eso, lo que tienes que hacer es poner título personalizado a cada widget que añadas… con eso no tendría que duplicarse… ya me contarás si eso resuelve tu problema… Saludos y como siempre Mucha Suerte!!

      Reply
  30. JuanchoCusi

    Hola Susana, felicitaciones por tan buen post. Soy nuevo en esto de los CMS, quisiera que me aclares una duda, al comprar el paquete desarrollador de divi puedo usarlo en multiples paginas web con diferentes dominios?. Debo pagar por usarlo en cada dominio?. Tengo derecho a descargarlo en computador?. el pago anual es por el uso de la plantilla o solo por el soporte?. gracias de antemano por tus respuestas.

    Reply
    • Susana Barriga

      Hola Juancho!
      Muchas gracias! actualmente Elegant Themes ofrece dos paquetes, uno para pagar anualmente y otro para hacer un solo pago y de por vida tener todas las plantillas y plugins… En ambos casos puedes usar cualquiera de las plantillas en cuantos dominios quieras, como también descargarlo en tu ordenador sin ningún inconveniente… con el pago anual, si adquieres ese paquete, tienes todas las ventajas a disposición. Incluido el soporte (en inglés) en su foro y si tienes dudas, en español, te las resuelvo por aquí con muchísimo gusto… Yo compré el Life Time Acces ya que finalmente es como pagar por adelantado 3 años, te ahorras 18 euros, tienes todas las ventajas y lo mejor de todo es que ya no tienes que pagar nunca más… bien no? si te animas te dejo este link para que tengas un descuento del 10% en ambos paquetes… Mucha Suerte!!

      Reply
  31. Alicia

    Hola Susana yo tengo la versión Divi 2.4.6 y el problema que tengo es que cada vez que quiero quitar una sección o fila tengo que borrar la pagina entera porque no me permite borrar, no se si es incompatibilidad porque mi versión de wordpress es 4.7.3 o es por que no esta actualizada o qué.
    Gracias por este post para lo que no sabemos ingles 🙂
    Por cierto mi ordenador es mac y uso safari , lo mismo es eso?

    Reply
    • Susana Barriga

      Hola Alicia!
      Tienes razón el problema es más que probable la incompatibilidad entre la versión de la plantilla y la de WordPress, el ordenador que uses y el uso de safari no tendrían por qué darte problemas… y si mal no recuerdo, se podía borrar cualquier elemento sin tener que rehacer todo el trabajo… has hecho la prueba de desactivar tus plugins para ver si alguno esta afectando? y no olvides vaciar tu caché también… Mucha Suerte!!

      Reply
  32. Carlos

    Hola Susana.
    Gracias por toda la info…. Es muy muy útil.
    Me gustaría saber cómo quitar el símbolo divi de arriba en la versión móvil y iPad… Y a salga en su lugar el nombre de la web.
    Muchas gracias

    Reply
    • Susana Barriga

      Hola Carlos!
      De nada! a ti las gracias por la visita…
      El logo de Divi se reemplaza automáticamente una vez que defines tu propio logo en Divi < Theme Options < Logo. Aquí haces click en el botón "Upload" y en tu librería eliges la imagen de tu logo, clicas en "Set as Logo" y luego le das al botón de guardar "Save Changes" al final de la página . Con esta acción se elimina completamente el logo de Divi en todo el sitio y en todos los dispositivos. Mucha Suerte!!

      Reply
  33. Carlos

    Hola Susana,

    Permiteme comentarte que quisiera saber como hacer para desde un modulo de 6 anuncios quiero crear enlaces para igual numero de diapositivas, cada una relacionadas a una en especifico, pero al entrar en ajustes de diapositivas / css personalizado no me da identificador css, para poner mi ancla1 o en su defecto el nombre que vaya a utilizar, sino que: antes, elemento principal, despues, titulo de la diapositiva, deslizar contenedor de la descripcion, descripcion de diapositiva, boton e imagen de diapositiva. En cual de ellos he de colocar mi referencias de enlace tanto en los anuncios como en las diapositivas?

    un saludo.

    Reply
    • Susana Barriga

      Hola Carlos!
      Todo esto quieres hacerlo en una misma página? disculpa es que no tengo muy claro lo que quieres hacer…

      Reply
  34. Carlos

    Hola Susana!
    Enhorabuena por tu post. Muchas gracias.
    Tengo una duda q a lo mejor me puedes contestar,
    En la version movil y tablet me aparece el simbolo Divi y select page en ingles, querria poner el nombre de la pagina. y un texto de “escolle páxina” en vez de eso en ingles…
    Es facil de modificar?
    Muchísimas gracias!! Un saludo Carlos

    Reply
    • Susana Barriga

      Hola Carlos!
      Muchas gracias! sobre tu consulta, por un lado al establecer tu logo en Divi < Theme Options < Logo, éste tiene que verse en tu web y en todos los dispositivos en los que abras la web. Y para asegurarte de que se vea una vez establecido el logo no es mala idea limpiar el caché. Por otro lado, tienes la posibilidad de cambiar el texto que aparece en móviles "select page" de la siguiente manera: Abre el archivo "functions.php" encuentra y cambia el código en negritas por el texto que quieras que aparezca en vez de la "select page" por ejemplo "escolle página": div id="et_mobile_nav_menu" a href="#" class="mobile_nav closed" rel="nofollow" class="select_page">‘Select Page’, ‘Divi’)

      Así podrás estandarizar tu menú en todos los dispositivos ;)… no te olvides de comentarme si funciona bien mi sugerencia, vale? Mucha suerte!!

      Reply
  35. peter aleman

    Saludos, disculpen.. he buscado mucho acerca de la pregunta que voy a dejarles sin emargos algunas cosas he encontrado y no me han funcionado. Alguien sabe como modificar el texto de “read more” en mi blog module. EStoy realizando un sitio en español y no logro editar o traducir el texto. Muchas Gracias y saludos

    Reply
    • Susana Barriga

      Hola Peter!
      Ese texto pertenece a la parte “administrativa” de tu sitio, es decir, para que el texto este en español solo tienes que cambiarle el idioma a tu sitio. Para ello vas a Settings > General Settings bajas hasta el final de la página y donde pone “Site Language” cambias “English” por “Español” y listo, todo tu sitio estará en español, incluido los botones y textos que por defecto aparecen actualmente en inglés.
      Pero algo que tienes que tomar en cuenta antes de hacer esto es que, si tienes el plugin Woocommerce instalado previamente en inglés, puedes tener conflicto en los links que haya creado previamente y puedes perder información… por tanto, antes de realizar el cambio de idioma en todo tu sitio, instala el plugin “WooCommerce (es)” que traducirá previamente tu plugin “WooCommerce” y luego traduce tu sitio… Mucha Suerte!!

      Reply
  36. Teresa

    Excelente tutorial, he aprendido mucho no solo del artículo sino también de los comentarios de los compañeros. Eso si, el post empieza con divi 2.4 y ya va mucho más avanzado…la verdadera revolución empezó con Divi 3.0 y su nuevo constructor web 🙂

    Reply
  37. Ana

    Hola Susana, me resulta muy útil la información que compartes! Quería preguntarte, eligiendo el módulo de portfolio, a los proyectos les añado categorías, bien, pues al clicar en una categoría los resultados de todos los proyectos que tienen esa categoría, se me abren una página con una columna a la derecha y cada entrada ocupa el resto del espacio, me gustaría si es posible que no apareciese la columna de la derecha y que los resultados de la búsqueda se visualizasen con la apariencia del módulo blog “rejilla”. no sé si me he explicado bien… muchas gracias por tu tiempo! mul gracias!

    Reply
    • Susana Barriga

      Hola Ana!
      Me alegra que te guste el blog! gracias a ti por la visita 🙂
      Me puedes pasar tu URL para que vea y te de una mejor ayuda? un abrazo y Mucha Suerte!!

      Reply
      • Carla

        Hola Susana,

        Muchas gracias por tu post!

        Una duda… intento descargarme Divi en wordpress.org y no lo encuentro…

        voy a: Aparencia>Temas>añadir nuevo y en el buscador “buscar temas” escribo “divi”.

        Me salen otros temas pero no este…

        ¿A qué puede ser debido?
        ¿Cómo puedo solucionarlo?

        Gracias de antemano 🙂

        Reply
        • Susana Barriga

          Hola Carla,

          Divi es una plantilla Premium (de pago) que no pertenece al directorio de plantillas de WordPress.org

          Para tener acceso a Divi (y a otras 86 excelentes plantillas) tienes que ir a Elegant Themes. Para ver los precios haz clic en el botón verde de arriba a la derecha que dice “Join to Download

          Existen 3 planes de contratación que te paso a resumir:

          1. Plan Personal

          Tienes acceso a todas las 87 plantillas de Elegant Themes, incluyendo por supuesto Divi (pago anual para seguir teniendo acceso a las actualizaciones y servicio soporte)

          2. Plan Developer

          Tienes acceso a todas las plantillas de Elegant Themes + Plugins + Archivos Photoshop (pago anual para seguir teniendo acceso a las actualizaciones y servicio soporte)

          3. Plan Lifetime Access

          Acceso a absolutamente todo y para siempre, sin pagar nada nunca más.

          Sin duda una excelente elección. Yo las uso desde hace años en todos mis blogs y van de cine.

          Un saludo!!

          Reply
  38. Richard Gonzales

    Hola, Susana que exelenten post,muy agradesido por tu aporte, quisiera hacerte una consulta, yo cuento con divi 3 y quiero hacer el efecto de paralaje entre 2 imagenes, que mientras mueva el scroll una se mueva muy lenta hacia abajo el otro va subiendo un poco mas rapido.
    hice una prueba poniendo una imagen en un modulo, mientras que la otra en la fila, las dos imagenes me aparecen, pero cuando aplico paralaje en la fila o en la seccion general, la imagen que esta en la fila se va hacia el lado derecho mostrandome solo lamitad de la imagen, como podria solucionar eso???
    Por cierto si le doy margenes en las opciones que me muestran se mueve todo el bloque mas no la imagen

    Reply
    • Susana Barriga

      Hola Richard!
      Muchas gracias! te animas a pasarme la URL para que vea lo que te pasa y te de una solución a medida? Mucha Suerte!!

      Reply
  39. jesus ureña

    Hola Susana.
    De nuevo gracias por todo y espero hayas empezado bien el año.
    Quería comentarte algo que no está relacionado con Divi pero seguro que sabes orientarme.
    He puesto un botón de donación Paypal en la web y todo está configurado correctamente pero me ha quedado pequeño el que aprece al pinchar en la pestaña del menu principal “colabora con la asociación” .Lo digo porque lo he puesto también en un widget lateral en la página de inicio y ese está bien.
    En el código que paypal te da en html no veo la opción de poner o cambiar los valores para hacerlo más grande.Tampoco buscando por google o paypal he encontrado la respuesta.
    Si puedes agradecería tu consejo.saludos y mil gracias Susana.

    Reply
    • Susana Barriga

      Hola Jesús!
      Mil disculpas la demora en contestar… te animas a pasarme la URL de donde tienes el problema para que te de una mano? un abrazo y la mejor de las suertes!

      Reply
      • jesus

        Hola Susana, no pasa nada por la demora ya que imagino que andas liada. te dejo la url donde el botón de paypal está insertado a través del código que me dieron y no consigo en ese código auamnetar el tamaño y queda muy pequeño.
        https://www.fqeuskadi.org/colabora-fq-euskadi

        por cierto aprovecho para otra pregunta. He dejado puestos dos selectores de lenguaje .Uno está arriba a la dcha en la barra superior pero no se veía en los móviles y he agregado un segundo que se ve en los móviles también pero me ha descuadrado un poco la altura de menús de escritorio y no queda demasiado bien en los móviles.Te he dejado los dos puestos para que lo veas en ambos dispositivos y a ver si me ayudas con eso y cual crees la mejor opción que me está volviendo loco.Como siempre MIL GRACIAS por tu infinita ayuda y siempre buena disposición.

        Reply
        • Susana Barriga

          Hola Jesús!
          El código que insertas para el botón de PayPal es parecido al siguiente verdad?:

          <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
          
              <!-- Identify your business so that you can collect the payments. -->
              <input type="hidden" name="business"
                  value="donations@kcparkfriends.org">
          
              <!-- Specify a Donate button. -->
              <input type="hidden" name="cmd" value="_donations">
          
              <!-- Specify details about the contribution -->
              <input type="hidden" name="item_name" value="Friends of the Park">
              <input type="hidden" name="item_number" value="Fall Cleanup Campaign">
              <input type="hidden" name="currency_code" value="USD">
          
              <!-- Display the payment button. -->
              <input type="image" name="submit"
              src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_donate_92x26.png"
              alt="Donate">
              <img alt="" width="1" height="1"
              src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
          
          </form>
          

          Si es así, tienes que crear tu propio botón, lo subes a tu librería, copias su URL y la reemplazas en tu propio código buscando una línea similar a esta: src=”https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_donate_92x26.png” y no tocar nada más que eso… luego haces una prueba de que el botón funciona bien y listo… con eso el tamaño del botón lo tienes solucionado.

          En cuanto a tu cambio de idiomas, si tienes dos instalaciones de WordPress, ¿no es mejor solo colocar dos banderitas pequeñas que no ocupen mas de 32x32pixeles cada una y que al clicarlas te lleven a la web por idioma? con eso creo que el diseño no se vería afectado en nada…. Un abrazo y mucha Suerte!!!

          Reply
  40. Javier Ramos

    Buenos días Susana. Quería darte las gracias por tu esfuerzo y reporte. Soy un neófito que inicialmente quería montar una pequeña plataforma de formación basada en Moodle; yo deseaba saber si con Divi sería posible enlazarlas, o si por otro lado existe algún plugin integrado en Divi que se pueda adecuar a mi propósito.
    Muy agradecido
    Javier

    Reply
    • Susana Barriga

      Hola Javier!
      La verdad es que Moodle es un LMS básico pero bien montado y con una estructura muy definida para cumplir la función para la que se creó: enseñar. WordPress es más flexible y es bueno identificar a ambos como softwares con diferentes finalidades, diferente lenguaje de programación y por tanto ambos tiene sus propias plantillas o temas que se ajustan a esa programación…
      Por lo tanto la forma en la que yo te sugeriría que uses Divi es creando una Home Page o una Landing Page y luego instalando esta App: “Edwiser Bridge – WordPress Moodle LMS Integration” para integrar WordPress y Moodle. De esta manera puedes mostrar en WordPress los productos/cursos de Moodle en tu WordPress y en tu landing page colocar toda la información de contenidos y call to actions que atrapen a tus clientes ;).
      Este es un plugin que esta bastante bien logrado. Su web es edwiser.org pero puedes descargar el plugin desde tu panel de WordPress clicando en Plugins < Add New y en buscar pegas el nombre que te puse entre comillas... lo instalas y en los Screenshots de las características del plugin verás cómo se configura... Espero haberte ayudado... y no te olvides de compartir con todos tu plataforma cuando la tengas online! Mucha Suerte!!

      Reply
    • Jesús

      Hola Susana,
      Gracias por tu gran ayuda.
      He seguido tus consejos y lo de Paypal funciona ok.
      Lo de las banderas tengo que pensarlo.
      Quería tu sugerencia sobre qué plantilla utilizar para crear una página tipo guía folleto dentro de la web de ayuda a padres .
      Llevará texto imágenes e iconos. Qué me recomiendas?
      Mil gracias y un abrazo.

      Reply
      • Susana Barriga

        Hola Jesús!
        Me alegra haberte podido ayudar con eso!
        Sobre la plantilla creo que lo que tienes que tomar en cuenta es la “forma” u “orden” en el que quieres que tus usuarios (en este caso padres/madres) reciban esa información y en función a eso decides el o los módulos que quieres usar… Valerte de una plantilla preelaborada es buena idea pero igualmente terminarás modificándola en función a tus necesidades… así que pienso que es mejor hacerlo desde cero y con un orden de prioridades… Muchísima Suerte!!

        Reply
  41. laida

    ¡Hola Susana!
    No encuentro dónde está la opción para activar la flecha de scroll para subir al inicio de la página, ¿dónde es?

    Gracias por tus tutorialeS!!

    Reply
    • Susana Barriga

      Hola Laida!
      Tienes dos botones que puedes activar con estas funciones: uno es el “Back To Top Button” y el otro es el “Smooth Scrolling”. Para activarlos vas a Divi < General y bajas la ventana hasta donde se encuentran estos botones, los activas y listo... Mucha Suerte!!

      Reply
  42. David

    Buenos dias Susana, muchas gracias por la informacion que compartes en este blog, no te imaginas lo que ayudas a los que empezamos con divi y con extra.
    Queria hacerte dos consultas.
    1-Tengo un sidebar donde añado widgets, pero estos se muestran con unos colores en el encabezado que nada tienen que ver con el look del sitio. ¿donde puedo tocar para cambiar el estilo de estos encabezados de widgets ( xej autor, etc)?
    2.-Todos los titulos del sitio ( h2,3, etc) se muestran en mayusculas aunque yo los escribo en minusculas, ¿donde puedo tocar para que los titulos aparezcan tal como yo los escribo?

    Muchas gracias por todo

    Reply
    • Susana Barriga

      Hola David!
      Con muchísimo gusto te ayudo, pero será más fácil si me pasas tu URL…
      Aunque te puedo avanzar que, para modificar el o los estilos de la web o blog, lo ideal es hacerlo modificando el código CSS y si me pasas tu url podré ver mejor lo del formato de los títulos… estaré a la espera! Mucha Suerte!!

      Reply
      • David Aranda Ortega

        muchs gracias Susana, desde que puse el post he ido aprendiendo algo y bueno… ahi voy.
        te pongo mi enlace para que le eches un vistazo:
        https://supervirgenextra.com

        en estos momentos recurro a ti porque llevo varios dias intentando arreglar la desaparicion por arte de magia de todos mis formularios de bloom ( el plugin de elegant), cada vez que debe aparecer uno aparece en el estilo style: “display:none” y no tengo manera humana de saber de donde viene este estilo, ni a arreglarlo claro.

        Si me puedes echar una mano te lo agradeceria

        Reply
        • Susana Barriga

          Hola David!

          Ahora me queda más claro el problema… tienes el tema “Extra” instalado, no “Divi”… y ambos tienen prestaciones similares y otras muy diferentes ya que Extra esta configurado específicamente para hacer Blogs y Divi es más como una pizarra en blanco… Para solucionar tu problema de tipografías, te sugiero que instales el plugin “Divi Builder” ya que podrás realizar la modificación en el “Theme Customizer” y en vivo y directo.
          Por otro lado, con el plugin Bloom, si actualizándolo no se resuelve el problema entonces talvez tengas que desinstalarlo, borrar y volver a instalar realizando una copia previa de la información que hayas recolectado con él… Mucha Suerte!!!

          Reply
  43. Javier

    Buenas noches! Tengo el siguiente problema:
    Tengo módulos organizados en la página de la siguiente manera: 3 filas de 4 columnas cada fila, ordenadas en el ordenador para que se vean de izquierda a la derecha y cuando veas los 4 módulos bajes a la siguiente fila y asi hasta la última. En el móvl sin embargo, salen ordenadas primero las la primera columna de arriba abajo y luego salta a la segunda, se puede cambiar esto?

    Reply
    • Susana Barriga

      Hola Javier!
      Al tener la característica de “Responsive” es inevitable que Divi trate de acomodar, de la mejor manera posible, todos tus elementos en la pantalla de un móvil para que sean visibles y accesibles sin que te penalice Google… y claro, el orden será de acuerdo a la lógica en la que aparecen… Ahora bien, si quieres forzar que aparezcan más pequeño podrías probar el “Visual Builder” para ver en vivo el diseño de tu blog en móvil y modificar el espacio entre columnas para ajustar que se vean más elementos en pantalla a la vez… Mucha Suerte!!

      Reply
  44. josé Bozquez

    Hola Susana, muchas garcias por tu ayuda. Me gustaría que me explicases como puedo cargar las plantillas psd en el tema..

    Reply
    • Susana Barriga

      Hola José!
      Las plantillas PSD te sirven para tener las “medidas exactas” de los elementos que conforman un módulo tales como: fondos, imágenes, tamaño de slides, etc etc. Por tanto solo te sirven para personalizar, desde tu ordenador, esos elementos en photoshop para luego subir el resultado (imágenes, fondos, etc) a tu web.
      Mucha Suerte!!

      Reply
  45. ricardobotella

    Hola, Susana! Verás, estoy creando una web con Divi y tengo una duda… Quería saber si es posible enlazar un botón a una parte concreta de la misma página. Sé que es posible enlazarlos a diferentes páginas, pero no encuentro la forma de hacerlo a un lugar concreto de la misma.. Muchas gracias y enhorabuena por el post!!!

    Reply
    • Susana Barriga

      Hola Ricardo!

      Cuando el link dirige a una parte inferior o superior de la misma hoja se llama enlace o vínculo tipo ancla y te diré cómo se hace con html5 que es el lenguaje que usa Divi para crear tus anclas.

      Pero primero debes saber que para aplicar esto deberás ubicar las dos pestañas del cuadro de texto que estan a la derecha, en la parte superior. Se llaman “Visual” y “Text” y debes clicar la de “Text” que es la que muestra el lenguaje html y donde deberás pegar los códigos que te dejo a continuación:

      Para empezar hay que definir esa parte a la que quieres enviar a las visitas cuando hagan clic sobre ese enlace que pondrás luego. Así, para definir un ancla en la parte inferior basta con colocar esta línea de código en la parte correspondiente:

      <a name="ancla"></a>

      Puede llamarse ancla, o cualquier palabra clave a la que quieres “anclar” el link de arriba…

      Ahora falta colocar el propio enlace en la parte superior:

      <a href="#ancla" title="Ir Ancla">Ir Ancla</a>

      Con esto ya tienes tus links dentro de la misma página… Mucha Suerte!!

      Reply
  46. María L. Andrada López

    Hola Susana, muchas gracias por todo lo que explicas, mira necesito un buscador avanzado en divi, es para una web inmobiliaria, que pueda filtrar por precio, casas en alquiler, casas en venta, lotes en venta, etc.
    En vez de utilizar una plantilla especifica para inmobiliaria decidi usar Divi, pero necesito si o si un buscador de este tipo.
    ¿Como puedo solucionarlo? he encontrado un plugin pero cuesta $ 79 dolares!!

    Reply
    • Susana Barriga

      Hola María!
      Un plugin interesante para cubrir esta necesidad podría ser “WPCasa Advanced Search” que es específico para la búsqueda de categorías sobre la temática que manejas y es gratuito… te dejo aquí una web demo que han hecho con este plugin para que veas cómo funciona: demo.wpcasa.com
      Mucha Suerte!!

      Reply
      • María L. Andrada López

        Muchas Gracias Susana, lo probare, por cierto, no me llega la respuesta al correo.

        Reply
        • Susana Barriga

          De nada María!
          Creo que si no te suscribes al comentario o al post no te llegan actualizaciones… me fijaré y lo corregiré… muchísimas gracias 🙂

          Reply
  47. María Hernández

    Hola Susana,
    lo que mas problemas me esta dando con el diseño es la separación entre módulos (filas y secciones)que según tu explicas es muy sencillo pero, ¿donde encuentro la posibilidad de juntar y separar modulos con esas flechas que tu indicas?
    O el ancho de la web con el botón deslizante que tú utilizas
    Me podrías ayudar
    Muchas gracias

    Reply
    • Susana Barriga

      Hola María!
      Para visualizar el constructor y estas opciones que menciono, solo tienes que acceder a tu blog como habitualmente y desde tu menú abrir “Visit site” para abrir tu home, al abrir esta ventana verás en la parte superior el menú de tu WordPress y en él un botón morado con una “D” mayúscula dentro y alado “Enable Visual Builder” al clicar esta opción podrás ver las opciones “en vivo” del Divi Builder o constructor de Divi… Mucha Suerte!!

      Reply
  48. Javier

    Buenas y ante todo excelente post.

    Estoy montando un blog con divi.

    La apariencia de todo el sitio es fondo negro y texto blanco encima.

    Mi problema son LAS ENTRADAS. No se donde tocar ya para poner el fondo negro porque me sale blanco.

    Muchas gracias ¡¡¡

    Reply
    • Susana Barriga

      Hola Javier!
      De lo que hablas es del texto correspondiente al “contenido” de tu sitio y para unificarlo solo tienes que ir a Divi > Theme Customizer > General Settings > Typography y aquí modificas la opción “Body Text Color”… Mucha Suerte!!

      Reply
  49. Ferran

    Hola Susana, antes que nada felicitarte por este espacio ya que es de gran ayuda y utilidad y agradecer tu disposición y cordialidad para todos los que empezamos con esto.
    A continuación, me gustaría exponerte mi problema para poder hallar juntos una solución. Anticipo que como plataforma de gestión utilizo WordPress y como tema Divi.
    En el blog que llevo entre manos, he diseñado un menú principal con las siguientes páginas: Inicio / Artículos / Acerca de, etc. Dentro de la página Artículos, la he organizado en subpáginas según la temática, como por ejemplo: Salud / Rendimiento / Nutrición etc.
    Mi intención es que al escribir una entrada concreta, aparezca en la página de Inicio junto con otras entradas como “lo más reciente” (cosa que he conseguido por medio del módulo de Blog) pero que al mismo tiempo apareciera dicha entrada única y exclusivamente en la subpágina relacionada con su temática.
    Esto no lo he conseguido ya que al colocar en cada subpágina de Artículos el módulo de Blog, hace que me aparezcan todos los posts. He intentado crear un menú principal con las mismas páginas pero creando categorías como pestañas desplegables en Artículos en lugar de subpáginas pero me he dado cuenta que las categorías no se pueden editar con el Constructor Visual Divi como una página y aparece de esta forma únicamente el post sin dejarme agregar nada más.
    Gracias de antemano y un saludo.

    Reply
    • Susana Barriga

      Hola Ferrán!
      La opción más aconsejada para agrupar post de la misma temática es adjudicarles categorías y como buena práctica te aconsejo usar el botón “Read More”, que ofrece el menú del cuadro de texto donde escribes el post, para que al abrir la página de categorías se abran los post con su “Featured Image”, un resumen del inicio del post y un botón de leer más… Ahora bien, en la página de categorías, como mencionas, no se puede modificar el diseño usando el constructor pero si podrías modificarlo tocando el código del archivo php que contiene su estructura, lo que te llevaría a crear un child theme. Mucha Suerte!!

      Reply
  50. Guada

    Hola Susana!!! mil gracias, qué crack! Tengo una consulta … hay alguna manera de que en el fullwidth slider, los títulos de cada diapositiva que incluyamos no estén en el centro, y poder colocarlos en otra parte .. no encuentro esta opción. Gracias!!!!!!!!!!

    Reply
    • Susana Barriga

      Hola Guada!
      Te animas a pasarme tu URL para ver el slide que mencionas y así te doy una mano? muchas gracias!!

      Reply
  51. jesus

    Hola de nuevo Susana,
    Quería saber cómo convertir con css en divi una imagen cuadrada a redondo ( sin usar prgramas ) y qué módulo es el más indicado para dentro de la imagen redonda poner un pequeño texto que enlace a otra página de la web.Y si existe alguna forma de poner algo como lo más destacado con una especie de noticias pero no con el formato que ya tengo del blog en la Home abajo sino algo más pequeño y escueto.Muchas gracias por tu infinita ayuda y tu siempre buena disposición.
    Un cordial saludo

    Reply
    • Susana Barriga

      Hola Jesús!
      Creo que el módulo que más se ajusta a tus necesidades es el “Blurb Module”, en su Advanced Design Settings puedes poner una imagen de fondo. Una vez que lo tengas creado me dices dónde esta y te paso el css para transformar la imagen en circular…
      Para tus noticias… creo que el módulo que estas usando no es mala idea, pero yo le bajaría el tamaño al texto del cuerpo… con eso quedaría menos llamativo verdad?
      Mucha Suerte!!

      Reply
      • Jesus

        Hola Susana , qué tal? El módulo que dices lo tengo creado en mi web al principio donde hay cuatro módulos con imagen cuadrada y que dicen qué es la fq etc.El tema es que igual cambio eso por lo que te comenté una imagenredonda pero con un pequeño texto dentro.Pero el módulo ya está creado.No sé si el cambio te parece bien p lo dejarías como está.
        Respecto de las noticias aunque tengo en una sección abajo últimas noticias del blog , quería ponerlo con alguna cosa más en pequeño peroarriba en una sección donde ahora está el anuncio de una jornada .No sé si me he explicado bien.Mil gracias por tu ayuda y un cordial saludo .

        Reply
        • Susana Barriga

          Hola Jesús!
          Para que las imágenes sean circulares pega este css en Divi>Theme Options:
          .et_pb_animation_off {border-radius: 50%;}
          Para tus noticias no has pensado que es buena idea colocar un tipo scroll text en tu barra lateral? así ahorras espacio y tiene la apariencia de noticias… te sugiero el plugin “Scroll Text Widget”
          Mucha Suerte!!

          Reply
          • jesus

            Hola Susana, gracias nuevamente.Mi portada no lleva barra lateral.Entiendo que dices crearla con un widget en una sección especial con un módulo de barra lateral. Ya me cuentas dado que no sé si me gustará mucho en la home poner una barra lateral-Pero según me digas igual la pongo.Saludos cordiales y grciassss

          • Susana Barriga

            Hola Jesús!
            Si no deseas usar una barra lateral otra solución puede ser usar contenido tabulado o en tablas, animadas tipo slider, dentro de un módulo de texto. Para ello puedes usar el siguiente código:
            [tabs slidertype="left tabs" auto="on"] [tabcontainer] [tabtext] Nombre de la casilla uno [/tabtext] [tabtext] Nombre de la casilla dos [/tabtext] [/tabcontainer] [tabcontent] [tab] contenido de la casilla uno [/tab] [tab] contenido de la casilla dos [/tab] [/tabcontent] [/tabs]
            Tendrás un resultado como en mi web de empresa en el apartado de identidad, con la salvedad que el tuyo cambiará de tab a tab como si fuese un slider animado y podrás aumentar el número de tabs duplicando el código que corresponde a [tabtext] y [tabcontent] Mucha Suerte!!

  52. Marco

    Hola Susana, necesito colocar una imagen de fondo en el menu principal de divi, Me puedes ayudar. Muchas gracias

    Reply
    • Susana Barriga

      Hola Marco!
      Para poner una imagen de fondo en tu menú principal… tal como el de mi web, tienes que usar este código CSS en Divi>Theme Options>bajas hasta la ventana CSS y lo pegas:
      #main-header { background: url(‘http://tuweb.com/tuImagenParaElFondo.jpg’); min-height: 300px;}
      El tamaño de la imagen es de 1369 × 300 pixeles y 72 dpi… El alto (300px) puedes variarlo a gusto… Mucha Suerte!!!

      Reply
    • jesus

      Hola Susana , no es que no quiera es una opción que contemplo para ciertas páginas blog etc pero en la home si deseo ponerla sólo se puede a través de un módulo? No hay otra opción reduciendo el ancho ? Tú me dirás cómo es la mejor opción de barra en la home.Por cierto muy chulas tus tabs y el colorido de las mismas.Mil gracia y un afectuoso saludo

      Reply
      • Susana Barriga

        tienes algún ejemplo de lo que quieres conseguir? así me hago una mejor idea y te ayudo…

        Reply
        • jesus

          Hola Susana, cuanto tiempo .Espero que estés bien.Quería comentarte que estoy pensando en poner una barra lateral dcha a la web en determinadas páginas.
          MI problema es que la página de inicio que tengo como estática no la lleva y ocupa el ancho completo. Cómo podría reducir esa pagina u otra para poner la barra lateral sin que me descuadre demasiado lo que tengo en la portada que es donde seguramente pondría la barra lateral si me gusta cómo queda?
          Sé que son malas fechas y por eso no hay prisa.
          Un cordial saludo y FELICES FIESTAS

          Reply
          • Susana Barriga

            Hola Jesús!
            Cómo estas? también espero que estés muy bien!…
            Sobre lo que me comentas… si bien el diseño de tu página de inicio es de ancho completo, también esta compuesta por varios módulos estándar que no son necesariamente de ancho completo, verdad? y cada módulo es susceptible de contener más de una columna… por ejemplo del tipo 3/4 – 1/4.
            Yo usaría el formato 3/4 para contener la información que ya tienes y el 1/4 para la barra lateral.
            Esa barra la puedes personalizar en la ventana de “widgets” que te permite crear tus propios widgets personalizados y seleccionas lo que quieres que se vea… es cuestión de hacer variantes y pruebas…
            Para ti y la Asociación Muchísimas Felicidades y Bendiciones!!! y sobre todo Mucha Suerte!!

  53. Pedro Rodriguez

    Hola, tengo un problema, me voy a enlaces permanentes y selecciono personalizado, no lo actualiza esta opcion, es por la configuración del Divi, no lo averiguo, me puedes ayudar??

    Reply
    • Susana Barriga

      Hola Pedro!
      Los permalinks son propios de la instalación de WordPress y no se ven afectados por la plantilla ya que ésta no predomina sobre la instalación del back-end si no que afecta al front-end de tu web… una posibilidad es que reinstales la última actualización de WordPress, que borres caches y nuevamente intentes modificar los permalinks… Como consejo te sugiero que antes de iniciar cualquier trabajo de una web, incluso antes de instalar plugins y plantillas lo ideal es configurar estos detalles que marcan la forma en la que aparecerán tus URLs. Mucha Suerte!!

      Reply
  54. Ana

    Hola Susana, felicidades por este post tan útil, yo tengo problemas con el logo, en un pc se ve perfectamente pero en tabletas y móviles no se reduce y tapa parte de la información, qué se puede hacer?. Muchas gracias!!!!

    Reply
    • Susana Barriga

      Hola Ana!
      Te sugiero que uses el “Visual Builder” ya que puedes manipular el diseño en vivo y cambiar la visualización en diferentes dispositivos para modificar el diseño para cada dispositivo… Otra forma de que tu logo sea visible en todos los dispositivos es que el formato para web sea el adecuado, es decir, en el tuyo tienes dos elementos un detalle muy bonito dentro de un círculo y el texto pero ambos no se perciben bien por el tamaño… Tal vez es buena idea ampliar el tamaño del texto a lo largo o de poner el círculo arriba y el texto más grande abajo… Para ver mejores posibilidades de que tu logo se luzca te aconsejo usar el customizador de Divi y te sugiero que intentes poner el logo (tal como lo tienes ahora) centrado. Para ello, abre el “Theme Customizer” en Divi ▸ Theme Customizer ▸ Header & Navigation ▸ Header Format. De esta manera tendrás el logo por arriba de tu menú y no se superpondrá sobre la información que mencionas en otros dispositivos. Por otro lado también puedes configurar que el logo se esconda en los dispositivos y aparezca luego al deslizar la información hacia abajo… Espero haberte ayudado… Mucha Suerte!!

      Reply
  55. Carolina

    Hola! la cabecera y formato de texto cómo se adapta automáticamente al movil?, para que se adapte el formato y no salgan letras por párrafo. Alguien me lo puede decir, porfavor. Gracias

    Reply
    • Susana Barriga

      Hola Carolina,
      Divi en su configuración ya tiene la propiedad de adaptarse automáticamente a cualquier dispositivo, no tienes que hacer nada, ni instalar plugins ni nada por el estilo… ya que si lo haces conseguirás el efecto contrario, que se desconfigure y te salga cualquier cosa en las pantallas de móviles y tablets… Mucha Suerte!

      Reply
  56. Elena

    Ay! Se me olvidaba otra duda que no logro resolver, ¿es posible quitar el icono de llamada de la cabecera? Me gustaría dejar solo el email y las redes sociales y además poder tener la opción de colocarlo a la derecha en vez de a la izquierda.
    Gracias!
    Elena

    Reply
    • Susana Barriga

      Te refieres al ícono de la lupa, verdad?… Si se puede quitar. Y para ello lo que tienes que hacer es aplicar el siguiente css en Divi > Theme Options y al final de la página en custom css pegas:
      #et_top_search {display: none;}
      y le das a guardar… Mucha Suerte!!

      Reply
  57. Elena

    Hola Susana!!

    Primero de todo, enhorabuena por este pedazo de post que te has currado, se nota que controlas muy bien esta increíble plantilla. Yo la estoy comenzando a utilizar y la verdad que se pueden hacer maravillas. Ahora estoy con una web nueva y me han surgido unas dudas que por más que busco no logro saber, ojalá puedas ayudarme…te cuento:
    – He utilizado el módulo blog para que me aparezcs en rejilla los post que voy publicando, hasta ahí bien, pero me gustaría como he visto en algun blog que al pasar por encima de la miniatura que se cambiase la capa y poder poner texto encima. He visto que la opción que me da Divi es poner una capa de color y un icono, pero no sé como hacer lo de poner texto en vez de icono.
    – Por otro lado, quería saber si es posible cambiar el diseño de las páginas de categorías para que por ejemplo tambien aparezca en formato rejilla en vez de las entradas de esa categoría una debajo de otra..
    – Tambien quería saber como se suben iconos personalizados ya que no encuentro en los que ofrece Divi ninguno que me guste para mi temática.

    Muchísimas gracias por tu tiempo y dedicación!!
    Un saludo!!
    Elena

    Reply
    • Susana Barriga

      Hola Elena!
      Muchas gracias por tus palabras! de veras que me exijo en contestar y trato de ayudar en todo lo que puedo y a todos los que me preguntan algo por que eso también me hace aprender más de la plantilla 😉
      Sobre tus consultas:
      Para que aparezca texto y un resumen del contenido, además de un link para abrir la página de tus post, puedes usar un módulo de slide de posts… no es mala idea, muestra la imagen que tienes asignada y funciona igual que un slide de imágenes…
      Sobre las páginas de categorías, lamentablemente hasta ahora no se puede modificar de manera sencilla, a no ser que crees un child theme y cambies el archivo código del archivo .php que define las características de esta página…
      Con relación a los íconos… te sugiero un plugin llamado Better Font Awesome para hacerlo de la forma más sencilla… ya me contarás cómo te va con todo esto, vale? Mucha Suerte!!

      Reply
  58. Jesus

    Hola Susana, de nuevo empiezo por darte las gracias.He visto en una página inglesa un montaje con imagnes y vectores que em ha gustado y no sé si es posible hacer con Divi.Seguro que sí pero parece complicado.Es un cuerpo humano con sus organos de tal forma que al pinchar en uno de ellos te aparece en un módulo lateral lo que es y los problemas que entraña para ciertas personas con determinadas patologías.Me gustaria enviarte el enlace de la página pero no sé tu email.Luego ya sé que das sesiones pos skype pero priemro quiero saber si no te importa si es factible.Gracias mil y un saludo

    Reply
    • Susana Barriga

      hola Jesús!
      Te respondí por mail… espero la URL vale? Mucha Suerte!

      Reply
      • Jesus

        Es admirable todo tu trabajo y la buena disposición que muestras.Ya te envié el link Susana.Un afectuoso salido y graciasssssss.

        Reply
        • Susana Barriga

          A ti las gracias por confiar en mi para ayudarte! Mucha Suerte!!

          Reply
  59. pedrodragonfenix

    hola Susana esta mañana te dejé un comentario pero no lo veo, bueno la cuestion es que necesito quitar el logo de divi de los dispositivos moviles ya que aparece y queda fatal
    gracias, buen tutorial

    Reply
    • Susana Barriga

      Hola Pedro!
      Disculpa por las molestias… siento que no hayas visto tu post publicado… pero ahora te contesto, vale?
      Para establecer el logo tienes que ir a ePanel > Theme options y donde pone “Logo” estableces tu logo buscándolo en tu librería… esta acción hace que el logo se establezca como predeterminado en tu sitio y además permite que aparezca en todos los dispositivos reemplazando el de Divi… me gustaría que me comentes si aparece tu logo en el ordenador y solo desaparece el de Divi en móviles. Si a pesar de establecer el logo sigues teniendo el problema, me gustaría que me pases tu link, lo reviso y te digo qué puede estar pasando… Mucha Suerte!!

      Reply
  60. VALERIA

    Hola Susana! Que generosidad que tienes con tus aportes y sobre todo con tu tiempo! Muchas gracias!
    Mira, yo tengo mi web actualmente en shopify pero quiero salir de esta plataforma ya que no es flexible en lo que a SEO se refiere.
    Así que leyendo tu post me entusiasmé, pero en hacerla yo…. así que quería preguntarte y perdón por lo básico de mis preguntas:
    *Hay posibilidad de ver de forma gratuita como se opera este tipo de plantillas (me da temor no poder manejarla)
    *Cuando compre la plantilla, opero con ella online? cómo es el caso de shopify? o se baja a mi ordenador y la trabajo con algún programa específico?
    *Para instalar el woocommerce o cualquier plugins hace falta conocimientos técnicos especiales? O es una conexión relativamente sencilla?

    Te dejo un saludo y las gracias por adelantado!

    Reply
    • Susana Barriga

      Hola Valeria!
      Me encanta tener tus preguntas, especialmente por que abren la posibilidad de explicar cosas que parecen sencillas o básicas pero son importantes para lo que lo necesiten…
      Para que comprendas cómo funciona Divi te dejo varios links, desde el básico para que conozcas Divi desde dentro, un ejemplo de página y un link al Divi Builder, la herramienta de construcción de Divi.
      En principio puedes acceder a este link y verás un intro a la plantilla.
      En este otro link te dejo un ejemplo de uso de la plantilla que me encanta.
      En este link verás cómo funciona la herramienta estrella de Divi, el Divi Builder, solo clica el botón “try the Divi Builder for free” y ponte a jugar. Verás que no es complicado el uso, es muy intuitivo y fácil de aprender y comenzar a crear…
      Al comprar la plantilla tienes que instalarla en tu propio hosting, por tanto antes de adquirirla debes tener tu propio dominio y hosting comprados para instalar tu WordPress y luego la plantilla.
      Para instalar woocommerce es muy sencillo, desde el escritorio de WordPress abres la pestaña “Plugins”, add new y buscas woocommerce… lo instalas, activas y listo… luego tienes que configurar woocommerce, pero eso tampoco es muy complicado, es ir paso a paso y ya si tienes otra duda al respecto con muchísimo gusto te ayudo… Mucha Suerte!

      Reply
  61. pedrodragonfenix

    hola Susana, buen tutorial, tengo una consulta, ¿como puedo ocultar el logo de divi en los dispositivos moviles? en el escritorio si se oculta, pero en los dispositocivos moviles es muy molesto verlo en primer lugar.

    Reply
  62. Carolina Velasquez

    Hola Susana, gusto en saludarte. Realmente no quiero hacer ninguna consulta. Solo quiero felicitarte por el esfuerzo que hiciste al publicar este maravilloso post y el tiempo, dedicación y paciencia en responder cada una de las consultas. De verdad eres una persona que le pone mucho amor a lo que hace y por eso es que sale muy bien. FELICIDADES!

    Reply
    • Susana Barriga

      Muchas gracias Carolina! definitivamente me has alegrado el día…

      Reply
  63. Conchi

    Hola Susana, sería posible poner un menú secundario que apareciese en una página determinada nada más?.
    Muchas gracias.

    Reply
    • Susana Barriga

      Hola Conchi!
      Claro que si!… para eso tienes el módulo “Fullwidth menu” y lo mejor de todo es que puedes aplicarlo tanto en páginas como en posts… Mucha Suerte!!

      Reply
  64. Tina

    Buenas tardes, gracias por el tutorial, una pregunta, quiero cargar los psd que vienen en la carpeta DiviPSD pero no tengo idea, te agradezco si me podes echar una mano.

    Reply
    • Susana Barriga

      Hola Tina!
      No comprendo muy bien tu consulta… dónde quieres cargarlos? mil disculpas… si me lo aclaras un pelín más te ayudo con muchísimo gusto!!

      Reply
  65. Belén

    Hola Susana, ya encontré la forma de hacer aparecer la descripción en la categoría, es creando un category.php en el child. tengo otra pregunta, que plugin o que forma hay de visualizar una caja de autor después de un post?

    gracias!

    Reply
    • Susana Barriga

      Hola Belén! me alegra mucho que hayas resuelto el problema! y muchas gracias por compartir la solución!! sobre lo del plugin… te aconsejo que lo resuelvas sin plugins ya que cargan demasiado el CPU en el que esta alojada tu web… y para solucionarlo te dejo este ejemplo para que reemplaces con tu propia información:

      [author] [author_image timthumb='on']http://www.tuweb.com/wp-content/uploads/tuimagendeautor.jpg[/author_image] [author_info]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam luctus rutrum nisi, at maximus arcu luctus in. Cras elit odio, porttitor vel aliquam non, rhoncus non ex. Quisque ut mi sit amet nulla venenatis accumsan. Cras quis diam elit. Maecenas quis sollicitudin sapien, eu condimentum nunc.[/author_info] [/author]

      Lo copias y vas a Divi> Theme Options > Integration. Aquí activas (enable) la opción “Enable single bottom code”, luego en la caja de más abajo, donde pone “Add code to the bottom of your posts, before the comments” pegas el código que copiaste y verás que aparece automáticamente debajo de todos tus posts por defecto.
      Mucha Suerte!

      Reply
  66. Ser Natural

    Hola Susana, gracias por tu magnifico tutorial. Tengo una web de terapias alternativas y quiero mostrar en una página de categoría la descripción de la misma y abajo los post de esa categoría, no encuentro la forma de mostrar la descripción, he buscado soluciones pero no encuentro nada que me solucione el problema. ¿sabrías decirme si se puede y como se hace?

    Muchas gracias!

    Reply
  67. Jose

    Buenos días Susana,
    Quería hacerte una consulta, tengo instalada la plantilla Extra, como debo hacer para bajarme DIVI 3.0 e integrarlo en la plantilla? No acabo de aclararme.

    La segunda pregunta es si en el caso de la plantilla Extra es posible descargarse los diseños que hay en la página de elegant themes para que sea más facil y modificando y no empezar de cero..

    Y ya para acabar, he conseguido traducir los menús, pero hay mucho contenido en Ingles, me imagino que no se puede traducir todo, verdad?

    Muchas gracias…

    Reply
    • Susana Barriga

      Hola Jose!
      Muy buenos días para ti también! 🙂
      La forma en la que integras Divi en la plantilla Extra es instalando el plugin “Divi Builder”… así tiene en tu back-end la herramienta más poderosa de Divi a tu servicio pero en otra plantilla :).
      Es importante que tomes en cuenta que en la instalación de Extra también tienes diseños preelaborados en la biblioteca que te pueden ayudar a ahorrar tiempo y tener acabados que puedes personalizar con tus imágenes y contenido… y parecidos o iguales a los diseños de demo de la web de Elegant Themes, pero siento comentarte que esos demos por ahora no están disponibles para descargar…
      Con el tema de traducciones… si quieres que todo tu entorno este en español lo que tienes que hacer es en Settings > General Settings y bajas hasta encontrar la pestaña “lenguaje del sitio” y selecciona español… así todo tu front-end aparecerá en español y Divi automáticamente tendrá todo traducido en español también… Mucha Suerte!!

      Reply
  68. elisa

    Buenas tardes, utilizo Divi en Word pRess y quiero editar el HTLM para poner etiquetas H1 o H2 en apartados de los módulosque no sean losde texto como accedo al HTLM

    Reply
    • Susana Barriga

      Hola Elisa!
      En todos los módulos tienes un recuadro para colocar texto que se llama “Content” o “Contenido” y en ese recuadro verás dos pestañas arriba a la derecha que se llaman “Visual” y “Text”, en la primera tienes las mismas opciones que los recuadros en los que escribes tus posts o páginas y también tienes el menú desplegable para seleccionar el texto que quieres etiquetar como título o subtítulo en la ventana desplegable que comienza con la opción paragraph o párrafo. Si quieres hacerlo manualmente clicas la pestaña “Text” y verás todo el lenguaje HTML para hacerlo… Mucha Suerte!!

      Reply
  69. Miguel

    Hola Susana,

    Quiero reformar mi web con Divi y necesito que todas las páginas comiencen situando en primer lugar el logo a la izquierda, con un texto a su derecha y después, justo debajo de lo anterior, la barra de menú principal (sin logo), con anchura total del monitor.

    Buscando por Internet, he visto muchos diseños de página diferentes, todos utilizando Divi, pero ninguno tenía una estructura como la que yo necesito.

    Utilizando Divi, ¿Es posible colocar la barra de menú debajo de una cabecera superior?

    Saludos y gracias por tu respuesta

    Reply
    • Susana Barriga

      Hola Miguel!
      Te refieres a un resultado como el que yo tengo en mi home page? En todas las páginas puedes conseguir ese resultado, si es lo que quieres me lo dices y te comento como hacerlo, vale? Mucha Suerte!!

      Reply
  70. jorge olascoaga

    Hola, Susana! tengo una duda de este tema y es la siguiente, si esta nueva version de DIVI 3.0 incorpora la facilidad de enlazar mas redes sociales en su footer o header segun sea el caso, ya que en en la version DIVI 2.7.7, solo viene (Facebook, Twitter, Google plus y RSS). Saludos.

    Reply
    • Susana Barriga

      Hola Jorge!
      Al actualizar a la nueva versión verás que en Divi > Theme Options siguen las mismas opciones de redes sociales: Facebook, Twitter, Google y RSS entonces para ampliar tus redes yo tengo una solución muy práctica:
      Creas tus propios botones de redes en imagen, abres un post nuevo y en el pegas los botones (imágenes) y les pones el link de la red social a cada una, copias el código HTML de tus botones, eliminas el footer, lo reemplazas con un widget de texto al que le pegas el HTML de tus botones… publicas y listo… ya tienes todos los botones que quieras al pie de página… Mucha Suerte!!

      Reply
      • Jesús

        Hola de nuevo Susana.El tema de las redes sociales y el truco que das me gusta pero cómo hacer para que aparezca whatsapp y la opción de imprimir? Saludos y graciasssss .por cierto el curso que ibas a preparar sobre Divi cómo va ? Estaría bien.

        Reply
        • Susana Barriga

          Hola Jesús!
          Te cuento que para Whatsapp y Viber, además de muchas otras redes sociales y opciones de imprimir o enviar por mail, suelo usar el plugin “AddToAny Share Buttons” que añade la barra flotante de redes que puedes ver en este blog. Es bastante liviano y no satura tu web con peticiones que ralentizan el CPU… Sobre el curso estaba a la espera de Divi 3 y ahora estoy terminando de preparar varios vídeos que acompañarán al contenido del curso… muchas gracias por preguntar al respecto! y Mucha Suerte!!

          Reply
          • Jesus

            Hola Susana me ha quedado muy bien con el plugin add to any share buttons.Quería hacerte una consulta nueva y es que yo tengo la cabecera en modo deslizamiento con un menú tipo hamburguesa.Me gusta ese menú pero con él desparece la barra superior que existia con el teléfono email etc ya que queda escondida dentro del menu hamburguesa.Me dicen si no es posible conservar ese tipo de menú pero también mantener la barra superior fija en el top con el teléfono etc.Hay forma de hacerlo o sólo se puede si la cabecera lleva un menú centrado o por defecto?
            Gracias por tu gran ayuda y lo que voy aprendiendo de Divi.Un saludo

          • Susana Barriga

            Hola Jesús!
            Me quedaba pendiente responder esta tu pregunta… disculpa la demora, pero para compensarte te dejo este css… pégalo en Divi ▸ Theme Options ▸ General Panel ▸ Custom Css:

            #page-container {
            position: relative;
            top: 33px;
            }
            #top-header {
            position: fixed;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            }

            Dime si te va bien vale? Mucha Suerte!!

  71. Juan José Santana Guerra

    Buenas tardes Susana! En primer lugar felicitarte por todo lo que ayudas a que comprendamos mejor el funcionamiento de Divi. Tengo una duda y creo que no ha sido resuelta anteriormente a ningún otro compañero y a ver si me la podrías resolver. Es referente al uso de los shortcodes ( he leído y visto su post y solo explican como utilizar alguno de ellos), en particular de los Content Boxes. ¿Es posible de las cinco opciones que nos presentan cambiar los colores de fondo de los mismos y sustituir el icono por otro de aquellos que lo presentan? Por ejemplo la opción shadow, que es sin icono, solo aparece en un color gris. Si quisiese ponerlo en otro color, ¿Se podría hacer?. Por más que he investigado, tampoco se como se insertan lo que ellos llaman icon list, tres únicas opciones para separar un listado mediante el símbolo del cheklist en verde, una x en rojo y un punto similar al de viñeta en negro, en el supuesto caso de que quisiera hacer uso de ellos para el contenido de un desglose en un post. Tampoco se si hay algunos otros shortcodes que aún no perteneciendo a elegantthemes sean compatibles con Divi o algún pluggin que realice estas funciones de embellecer el contenido de un post y si sabrías recomendarme alguno. Muchísimas gracias de antemano!. Un saludo 🙂

    Reply
    • Susana Barriga

      Hola Juan José!
      De nada! a ti las gracias por pasarte por aquí 🙂
      Claro que es posible, todas las modificaciones son posibles y ahora, con el editor visual de Divi 3 es posible editar en tiempo real todas las características de los módulos y su contenido. En cuanto a las cajas de contenido puedes modificar el color usando este código css y cambiando los colores a tu gusto:
      .et-warning .et-box-content {
      color: #ff7979;
      background: #ffecd5;
      border: 1px solid #60a7ff;
      -moz-box-shadow: inset 0 0 45px #f0bfba;
      -webkit-box-shadow: inset 0 0 45px #f0bfba;
      box-shadow: inset 0 0 45px #dbbaf0;
      }
      El icono es parte de una imagen mas grande y puedes cambiarlo usando este código css:
      .et-warning:before {
      width: 17px;
      height: 17px;
      background: url(http://www.elegantthemes.com/preview/TheProfessional/wp-content/themes/TheProfessional/epanel/shortcodes/images/shortcodes-sprite.png) no-repeat -75px -41px;
      }
      Lo que tienes que modificar son los datos “no-repeat -75px -41px”. Te aconsejo que descargues la imagen de la url y veas todos los íconos que te proponen…
      Mucha Suerte!!

      Reply
    • jesus

      Hola Susana , he copiado el código, como me has dicho, pero la barra superior no aparece visble arriba del todo y queda oculta con el menú hamburguesa deslizante como antes.Ya me contrás y muy agradecido por tu excelente trabajo para con nuestra asociación.UN cordial saludo.

      Reply
    • Jesus

      Hola Susana, perdona que te dije que no valía el codigo para la barra top y menú fijo pero SÍ que ale y queda muy bien.Fue un falll mío al pegar el código puse algo mal.Gracias por tu gran disposición y todo un detallazo Un saludo.

      Reply
      • Susana Barriga

        Hola Jesús!
        Me alegra mucho que te haya funcionado!! ya me dirás cómo te va quedando la página… Muchísima Suerte!!

        Reply
  72. Ivan

    Hola, estoy empezando con divi y tengo un problema. El pie de pagina no se me mantiene visible, al hacer scroll por la pagina el contenido pasa por encima y no se porqué. Le he dado mil y una vueltas y he buscado por la web pero no he encontrado nada, solo cosas relacionadas con que el footer esté siempre abajo, y eso ya lo he hecho. Lo que quiero es que esté siempre visible, que el contenido no pase por encima. Gracias. Saludos

    Reply
    • Susana Barriga

      Hola Ivan!
      Te sugiero que crees un widget de pie de página que podrás personalizar a tu gusto y no desaparecerá por ningún motivo. Además, el footer que aparece por defecto lo podrás eliminar con este código css:
      #footer-info {display: none;}
      Mucha Suerte!!

      Reply
      • Jesus

        Hola Susana, encantado como siempre.El código ese css para eliminar el footer lo añades en el css del nuevo widget o en el css de wordpress apariencia editor.Gracias por tu trabajo y paciencia.Aprovecho también para preguntar cómo colocar una imagen de fondo ancho completo y que dentro de esa imgen en una esquina aparezca texto y sea legible tanto el texto como la imagen.Lo he visto en alguna web.Infinitas gracias

        Reply
        • Susana Barriga

          Hola Jesús!
          El código lo tienes que poner en Divi < Theme Options < custom CSS. Lo pegas y le das a guardar... Para lo de la imagen puedes hacerlo usando un módulo de diapositivas de ancho completo (fullwidth slider), solo creas una diapositiva, eliges la imagen que quieres como "Background Image" y al final de las características de la diapositiva encontrarás una ventana para escribir el texto que quieres que aparezca sobre la imagen... incluso podrás poner otra imagen que aparezca y/o un botón... Mucha Suerte!!

          Reply
          • Jesus

            Hola Susana , gracias de verdad por tu ayuda.He tomado nota para implementarlo.Todavia me pilla de sopetón la cantidad de cosas de Divi.Tenía 2cuestiones más.El módulo de imagen que al ponerte encima sale un fondo superpuesto con un icono me gusta pero no consigo que al ponerte encima se vea dentro la descripción del contenido .P.ej qué es la vida con fibrosis y redirige a otra página.
            La otra después de intentarlo muchas veces no consigo modificar anchos y altos de secciones o filas.Lo he intentado con el constructor visual desde lamisma web pero nada.Perdona por tanta pregunta.Estoy leyendo mucho sobre divi pero acabo de empezar.GRACIASSSSSS.

          • Susana Barriga

            Hola Jesús!
            Tu sigue preguntando, no te preocupes!! que yo también aprendo de vuestras consultas 🙂
            Si quieres que aparezca contenido sobre las imágenes, lo que necesitas colocar es un módulo de slider en el que activas la opción “Show Title and Caption”. El “Título” y la leyenda o “Caption” son los que le pones a la imagen en tu carpeta de “Media”.
            Sobre los altos y anchos de secciones y filas también puedes hacerlo usando el “Theme Customizer” que también esta activo… o, si me pasas un links donde quieres hacer las modificaciones yo te paso un CSS para que consigas lo que necesitas vale? Mucha Suerte!!

          • jesus

            Gracias Susana.He intentado hacer lo que me dices pero no logro alinear bien el texto ya que le he añadido una diapositiva con fondo blanco con un poco de transparencia donde va el texto.Igual le quito ese fondo y lo arreglo.Un saludo.

  73. Mary

    Hola Susana, yo uso la plantilla Divi en uno de mis sitios, pero la verdad hace bastante no le hacia nada ya que ahora no me dedico mas al diseño web, y me encuentro ahora con que no me sale lo que una vez hice en otro sitio. Yo quiero usar en la pantalla de inicio una imagen completa, es decir creo que corresponde usar una seccion de anchura completa, pero lo que no encuentro es como agregarle botones a esta sección, como los 20 ejemplos que muestras en tu articulo, donde describes las funciones del modulo fullscreeen header.
    Yo he agregado a esta sección un modulo de Control deslizante de anchura completa, ya que necesito diferenciar 3 temas en la web.
    También antes había visto como estaba hecho el diseño de divi cofee, creo que es uno de los ejemplos, pero ahora no lo encuentro.

    Bueno si me puedes ayudar a ver donde encuentro esas 20 opciones de diseño te lo agradecería mucho.

    Reply
    • Susana Barriga

      Hola Mary!
      Para conseguir el efecto que deseas puedes hacer lo siguiente:
      1. creas una sección de ancho completo y añades un módulo de cabecera completo o fullwith header,
      2. en sus características especificas que sea de pantalla completa…
      3. aquí te toca decidir si quieres usar los dos botones que te propone el mismo módulo o si quieres usar un menú específico para este módulo (ya te digo cómo hacerlo en el punto 5)
      4. lo importante es cómo colocar la url para que el botón al clicarlo deslice toda la pantalla hasta el link. Para ello si decides usar los botones del módulo tienes que colocar el nombre del botón y en la url del mismo colocas # y “tu link” en el bloque de texto… En el bloque de texto el link debe tener esta característica:

      <a id="tu link" name="tu link"></a>  nombre del botón

      5. Si necesitas más de dos botones tu solución parte por añadir a la sección un módulo de “fullwith menú” que crearás en Appearance > menu > custom links colocando en el nombre del botón lo que tu quieras y en la url # y el texto al que quieres que se deslice… y en el bloque de texto defines tu link igual que en el punto 4.
      Espero te sirva! Mucha Suerte!!

      Reply
      • Mary

        Claro!! Gracias!!

        Reply
  74. ANDER

    Hola, yo lo que busco es poder diseñar una pagina con fotos en las que un elemento de la foto sobresalga del marco y se superponga al fondo, los textos u otras fotos. es eso posible con DIVI 2.7 o divi 3.0?

    Reply
    • Susana Barriga

      Hola Ander,

      Ya sea que quieras una ventana emergente, o una lupa de producto, un efecto mouseover al pasar con el ratón…sí que se puede. Si puedes decirme alguna web que tenga ese efecto que deseas, te detallo la respuesta de forma más concreta.

      De todas formas creo que hay pocas cosas que no se puedan hacer con Divi 🙂

      Y todavía queda por ver todo lo que nos depara Divi 3.0!!

      Un saludo!

      Reply
      • Jesus

        Hola Susana me encnata tu página y diseño.Tengo una web con la plantilla nirvana y ahora estoy cambiando radical a Divi.Voy a crear una página de estática pero además en el menú queria poner una página llamada blog con todas las entradas de la antigua que son muchas , en la nueva de divi.
        Quiero que sea tipo rejilla y con sólo unas cuantas con la posibilidad como tu tienes en tu blog de un fragmento con imagen y leer mas.
        Cómo lo puedo hacer, se pueden poner por categorías que ya tenía creadas en la antigua web?
        Muchas gracias por tu ayuda

        Reply
        • Susana Barriga

          Hola Jesús! muchas gracias por tus palabras me alegra mucho que te guste mi trabajo 😉
          Para conseguir el mismo diseño que tengo en mi página “Blog” solo tienes que crear una página nueva, darle el nombre de Blog, activar el Divi Builder y, una vez activado, clicar “Load From Library” o descargar desde la librería, se abre una ventana y aparece un listado de todos los archivos prediseñados. Busca en la lista: “Blog Mazonri” y dale al botón de descargar.
          Automáticamente se descargan los módulos y la estructura diseñada, solo tienes que personalizar la información del titular y los colores o fondos que quieras que aparezcan además de la cantidad de publicaciones… Con eso personalizado, publicas tu página “Blog” y listo…ah! no te olvides de añadir el link de tu blog a tu menú!… Mucha suerte!!

          Reply
          • jesus

            Hola Susana, gracias nuevamente por tu ayuda ya que gracias a ellla ya he puesto el blog mazonri.Pero tengo otra pregunta y es que en los móviles mi página web sale sólo con códigos alfanuméricos la página estática que es la principal o Inicio , salvo que en el móvil físicamente lo cambie a ver como we completa.Sabes el porqué?
            Gracias nuevamente y un saludo

          • Susana Barriga

            Hola Jesús!
            Me alegra haberte ayudado! creo que tienes un problema de compatibilidad de plugins… Te aconsejo desactivar tus plugins, borrar el caché y fijarte activando uno a uno si se ve bien en tu móvil. Así descubrirás cuál te da problemas. Yo tuve ese problema especialmente cuando tenía activada la función “móvil” en Jetpack, es decir un plugin para volver “responsive” a mi tema… y como Divi ya es responsive esto generaba incompatibilidades en los diferentes dispositivos móviles… lo desactivé y listo. Mucha Suerte!!

          • Jesus

            Hola Susana, tenias razón al desactivar la función móvil del jetpack se solucionó.Mil graciassss

          • Susana Barriga

            De nada! con mucho gusto!! 🙂

  75. Cristian Amaya

    Hola buena noche. SUSANA como estas espero que muy bien

    oye nose quisiera hacerte algunas preguntas. quiero crear mi sitio web con divi y wordpress
    pero lo que no se como comprar es el hosting quiero comrarlo por goddady y pues nose cuel comprar es como una especie de portafolio y tambien queria incluir algo de woocomerce nose que hacer que me recomiendas

    Gracias

    Reply
    • Susana Barriga

      Hola Cristina Amaya,

      Yo te recomiendo que contrates el hosting con Webempresa que es la compañía que yo uso. La atención es muchísimo más personalizada y si tienes dudas o te surge un problema van a ayudarte enseguida.

      Además tienes este cupón wordpress20 para obtener un 20% de descuento inmediato.

      Si estás empezando con tu web, el Plan Inicio de Webempresa puede ser suficiente. O si planeas meter muchas imágenes, quizá el plan Standard sería mejor. De todos modos luego puedes cambiar de plan si lo necesitas sin ningún problema, simplemente pagando la diferencia (yo lo he hecho varias veces).

      Las compañías multinacionales como Godaddy no prestan en general una buena atención al cliente, ya que tienen miles de ellos y no les importa uno más o menos. Sus precios son algo más bajos, pero la seguridad y atención al cliente es bastante deficiente. En mi opinión no compensa contratar con una de estas compañías y arriesgar nuestro trabajo.

      En todo caso, si quieres una compañía muy barata de hosting, te recomiendo ipage. Son muy buenos en relación calidad/precio. Por el momento creo que son los mejores entre las empresas “Low Cost” de hosting.

      Mas información en https://www.hostingwordpress.com.es/ipage-mejor-hosting-barato/

      Puedes ver un cuadro comparativo entre ipage y Godaddy en este enlace.

      La plantilla Divi es la mejor elección que puedes hacer. Y por supuesto es totalmente compatible con el plugin Woocommerce, así que no vas a tener ningún problema al descargarlo.

      Suerte con el proyecto y un saludo!!

      Reply
    • Jesus

      Hola Susana, el otro día me dijiste como escoger el esilo del blog mazonri.El problema es que cuando entras a ver una entrada completa tienen el diseño antiguo y feo.Hay alguna forma de moficar esas entradas como digo completas o hay que ir una por una.
      El nuevo estilo que aplique a una entrada nueva es fácil con Divi pero cómo lo hago para que todas las anteriores sean iguales? Se puede? Queda claro que me refiero a la parte que ves cuando en la portada del blog mazonri le das a leer más y te abre la entrada completa.No sé si me he explicado.Reitero mi agradecimiento por lo que aprendo contigo y la agilidad de tus respuestas.Graciassss

      Reply
      • Susana Barriga

        Hola Jesús!
        La gran ventaja que tiene Divi es que también puedes diseñar individualmente tus post con el Divi Builder… así que, si no quieres el diseño preestablecido de las publicaciones, puedes optar por diseñar con el builder cada publicación de manera individual y quedará como tu quieras, por otro lado, puedes crear elementos globales para aplicarlos en todos tus post para ahorrar tiempo en crear cada vez el mismo elemento… 🙂 Mucha Suerte!!

        Reply
  76. Cristian adolfo

    Excelente post, me gustaría saber que theme recomiendas para un blog personal, saludos amiga.

    Reply
    • Susana Barriga

      Hola Cristian!
      Definitivamente te recomiendo Divi y no solo por que soy fan 😉 si no por que te encontrarás con una plantilla que te facilita absolutamente todo y que te permite personalizar incluso tus propios posts!
      Para que termines de animarte te dejo este link para que recibas un 10% de descuento en el plan LifeTime, que cuesta más caro pero si sumas tres pagos de los otros planes habrás cubierto la inversión en poco tiempo además de tener las 86 plantillas que acompañan a Divi, los 6 plugins que lo complementan y la asistencia técnica de por vida. Yo tengo el LifeTime plan y te aseguro que vale la pena.
      Y si, por ahora, solo quieres comprarte el plan Developer te dejo este link para que te lleve directamente a su 10% de descuento! Mucha suerte!!

      Reply
  77. Isidoro Ruiz

    Buenas noches Susana,

    Disculpa por la hora en Canarias no es tan tarde.

    Bueno soy algo novato tengo la web hecha con el tema weblizar, quisiera poder hacerla con tienda online pero esta plantilla que uso no es compatible con woocommence.

    Divi si lo es, mi pregunta es: ¿Podría copiar la web tal cual con Divi o debo rehacerla de cero si cambio de plantilla?

    Muchas gracias anticipadas por tu contestación.

    Creo que ayudas a muchísima gente.

    Un abrazo y gracias de nuevo.

    Reply
    • Susana Barriga

      Hola Isidoro!
      Cuando instalas la plantilla no tienes que hacer nada más que activarla y el divi builder respetará el contenido sin ningún problema, a no ser que tengas algún “shortcode” específico de la otra plantilla, pero eso, al ser novato en el tema seguramente no lo tienes aplicado en ninguna parte… Mucha Suerte!!

      Reply
      • isidoro

        Muchas gracias por tu contestación Susana.

        Un fuerte abrazo

        Reply
  78. julio

    Hola

    Alguien sabia decirme como hacer si se puede un area de miembros dentro de divi alguna idea .

    Gracias

    Reply
    • Susana Barriga

      Hola Julio,
      Usando el módulo de Login podrías conseguirlo… Mucha Suerte!

      Reply
  79. anablancocomunicacion

    Hola Susana! Buen trabajo. Actualmente estoy trabajando esa plantilla. Pero no encuentro por ningún lado como hacer que cuando alguien da click en alguna pestaña del menú el texto baje solo. No sé si es algo relacionado con el parallax effect pero tengo un lío… Por ejemplo en esta página lo tienen obcipol.com y necesito hacer eso con DIVI.¿Será que esta plantilla no tiene esa opción? ¿O que es un plugin que no he logrado encontrar? Un saludo!

    Reply
    • Susana Barriga

      Hola Ana!
      Mil disculpas por la tardanza, intento ver tu web pero no identifico el tema con el que estas trabajando… tampoco veo el problema que me comentas… si me das la URL te ayudo con mucho gusto! Mucha Suerte!!

      Reply
  80. Gustavo Rojas

    Hola Susana, Wow!!! eres magnifica con ésto que haces y lo más impresionante es que les respondes a todos. Admirable manejo de tus post.

    Quiero hacerte una consulta. Tengo instalado Divi en una pagina con la cual le estoy ayudando a unos amigos vamossomewhere.com y deseo colocar una barra superior fija encima del menu principal donde me aparezca el logo y un mensaje de advertencia. He intentado con muchos olugins pero algunos no me permiten incluir el logo o se posicionan sobre el menu y lo tapan.

    Yo quiero que quede asi tal cual una barra donde tiene el logo este blog inteligenciaviajera.com/60-mejores-blogs-de-viajes/

    Gracias por la ayuda que me puedas brindar 🙂 Saludos desde Colombia 🙂

    Reply
    • Susana Barriga

      Hola Gustavo!
      Muchas gracias por tus palabras! hago lo que puedo por contestar, aunque a veces no puedo hacerlo inmediatamente y me tomo un tiempito…
      Sobre tu consulta, creo que una solución práctica es aprovechar la posibilidad de poner una imagen en lugar de un botón de texto… ese mismo mensaje de advertencia puede ser a su vez un botón con URL propia y ser parte del menú… para ello te sugiero que vayas a tu menú y le des a añadir “Enlace personalizado” o “Custom Links” aquí coloca la URL de tu enlace. Luego en la etiqueta de navegación “Link text” coloca la URL de la imagen de tu mensaje que previamente habrás subido a tu librería multimedia usando este código:

      <img src="http://el link de tu imagen"/>

      Con esto tienes una imagen con URL en vez del texto. En cuanto al orden de los botones, te sugiero colocar primero los botones del menú con texto y al final el de la imagen que quieres… Mucha Suerte!!

      Reply
  81. hernan78

    hola Susana, increible el post, quiero saber si tengo maneras de integrar plenamente heromenu o heroe menu a divi, estoy intentando que se vea bien en los dispositivos móviles pero no logro hacerlo, heroe menú me brinda la posibilidad de que un experto lo instale por mi pero ya pagué por el plugin y es para varios sitios y no pagaría cada vez que quiera instalarlo, te dejo el link del plugin, heroplugins.com/product/hero-menu/documentation/ heromenu es muy bueno para lo que me pide mi cliente, tiene algunas opciones mas que el menu por defecto de divi, pensé que sería bueno como complemento, pero en celulares se vé la hamburguesa el simbolo del menu encimado al logo y no como barra tomando todo el ancho de la pantalla como debería ser, integrandolo con otros themes para wordpress no tiene problemas, se visualiza bien, pero en divi no, disculpa las molestias, desde La Plata Bs. As Hernán Ferreyra, Éxitos!!

    Reply
    • Susana Barriga

      Hola Hernán!
      Este plugin es excelente! para integrar el código que te dan en la documentación tienes que colocarlo en Divi>Theme Options>Integration… ahí colocas el código que necesitas que se añada en la cabecera o en el cuerpo de tu web.
      Cuando lo tengas integrado mándame tu web! seguro que queda impresionante!! Mucha suerte y un saludo a la hermosa gente de La Plata!!

      Reply
  82. Javier

    Hola, enhorabuena y gracias por el post!
    Estoy comenzando a utilizar divi pero… no se si se puede hacer todo. Esto es simple, en un slider, quiero que los textos aparezcan cada uno con animaciones diferentes, y a diferente velocidad, y cuando digo textos me refiero a cada linea dentro de una diapositiva (el titulo por una parte y el contenido por otro), y la siguiente diapositiva que sea distinto. En resumen, personalizar la animacion de cada texto.
    Gracias otra vez, un fan.

    Reply
    • Susana Barriga

      Hola Javier!
      Ya de entrada te digo que con Divi se puede hacer todo lo que se te ocurra! es super moldeable y tienes un sin fin de herramientas para conseguirlo…
      Sobre tu consulta, lo que quieres conseguir es un acabado tipo presentación de sliders de Power Point? por que si es así, lo que puedes hacer es combinar fondos fijos o en movimiento con efecto parallax, vídeos de fondo! (que no se puede con power point he??), imágenes que se superponen sobre el fondo o imágenes sin contorno-fondo, tipo png con transparencia, para conseguir un efecto visual 3D. Los textos pueden aparecer de arriba, abajo o de izquierda a derecha y la alineación puede ser centrada, marginada a la derecha o izquierda y/o justificada… si deseas hacer algún efecto tipo “marquesina” con código HTML, podrías colocar en la ventana de texto (donde se ve el código HTML de tu texto) los siguientes códigos modificables según te convenga…

      <marquee width=50% height=60> Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels </marquee>
      

      y si quieres un texto en movimiento tipo “créditos” (de abajo – arriba)

      <marquee width="100%" style="text-align: justify;" scrolldelay="1" direction="UP" scrollamount="1" ;"="" strength="100" ,="" freq="5" phase="10" 5",=""><center><font color="#ff66ff" size="2"><br>Tu texto<br></font></center></marquee>
      

      Como estos efectos de movimiento con código HTML podrás encontrar muchas opciones más en internet…
      Espero haberte dado una mano con esto! Mucha Suerte!!

      Reply
      • Javier

        Muchas gracias por responder… y en sábado!
        Los de Divi deberían contratarte pues eres mucho más entusiasta que ellos… en su foro me han respondido que no se puede hacer lo que pido…
        En cuanto a tu respuesta, no quiero hacer una marquesina. En realidad, creo que la idea es simple: animar los textos dentro de una diapositiva independientemente. Actualmente el full slider de divi introduce la imagen de fondo, una imagen superpuesta y un bloque de texto que agrupa el título, texto y un botón. Este último grupo se mueve como un todo, y no cada elemento por separado.
        Lo que tu me respondes, cómo dices que se puede meter ahi?
        Saludos

        Reply
        • Susana Barriga

          Hola Javier!
          Gracias!! me halagas mucho con tus palabras…yo aprendo mucho con las preguntas que me hacen 🙂 … pero sí que es verdad que me apasiona tener una herramienta tan versátil como esta… además me alegra mucho ser de ayuda! 🙂
          La solución que te planteo tiene que ver con todos los elementos que son parte de una diapositiva del slider: fondo, títulos, imagen y texto… la idea que te sugiero es crear un fondo, usar las imágenes que se superpongan dentro de la diapositiva como desees y que el código HTML para el texto lo añadas en el espacio para escribir texto… aquí te digo cómo hacerlo:
          Abres los “general settings” del módulo de slider (las 3 rayitas de la izquierda), añades un slider o diapositiva y abres los settings de esa diapositiva… se abre la ventanita y bajas hasta el cuadro en el que se escribe texto… en él tienes dos pestañas a la derecha, una se llama “Visual” y la otra “Text”. Tienes que clicar esta última para añadir el código en HTML que te comento…
          Lo que conseguirás es que tu diapositiva tenga todos los elementos con una animación interesante… Mucha Suerte!!

          Reply
  83. Javi A.

    Hola. ¡Fantástico artículo! Gracias por toda la info.
    Tengo dos preguntas:
    1.- Si solo pago un año de Elegant Themes, lo que no tengo desde el segundo año es la actualización del tema Divi, verdad? o tampoco puedo usar el tema si no pago?
    2.- Has notado pérdida de velocidad en la carga? algunos dicen que el exceso de código genera un problema al respecto.

    Gracias 🙂

    Reply
    • Susana Barriga

      Hola Javi!

      Al pagar un año pagas por las características del plan que adquieres por ese año… pasado el tiempo del contrato lo que te queda es la(s) plantilla(s) sin posibilidad de actualizaciones.

      Todas las plantillas que te hayas descargado de Elegant Themes podrás seguir usándolas sin problema, pero no podrás acceder a las nuevas actualizaciones hasta que renueves el plan.

      El tema del tiempo de carga depende de muchos factores y uno de ellos, además de la plantilla, es el hosting donde alojas tu(s) web(s). Yo tengo alojado todo (varios blogs) en Webempresa y me carga todo muy rápido (todos los blogs los tengo hechos con Divi).

      Así que no te preocupes por eso ya que Divi y en general todas las plantillas de Elegant Themes tienen un código muy limpio. Y además se posicionan muy bien en Google.

      Un saludo y mucha suerte con tu proyecto!

      Reply
  84. aurora

    Excelente post Susana, enhorabuena.
    no consigo ver donde se regula el tamaño de las fotos en vista previa, las de las categorías donde aparencen todos los post uno por debajo del otro, y como se regula el tamaño de la foto en el post; es decir, si no quiero que ocupe todo el ancho y que la foto sea más pequeña, como se hace? Sobre todo para las foto verticales que bajan demasiado.
    Muchas gracias.

    Reply
    • Susana Barriga

      Hola Aurora!
      Muchas gracias! me alegro que te guste 🙂
      Me gustaría identificar las fotos a las que te refieres… te animas a enviarme la URL en la que aparecen esas imágenes y así veo cómo ayudarte?

      Reply
  85. Ramón Márquez Ruiz de Seres de Luz Blog

    Hola Susana, hace tiempo di con tu artículo y me acabaste convencer con Divi. Aunque hay un par de cosas que no sé como realizar, ya que no deja las opciones predeterminadas que necesito. Verás, mis dudas son con respecto al módulo Blog, en anchura completa, pues deseo personalizarlo un poco más:

    1. Quiero que haya un margen a los lados del texto, para que ni el título de la entrada, ni los metadatos, ni el breve extracto queden a sangre, es decir, que no se vean pegados al margen visible.

    2.También me gustaría centrar el botón de leer más, y añadirle la primera L mayúscula, y cambiarlo de color al color que yo quiera, pues estoy utilizando un tono predeterminado.

    3. Otro cambio que me gustaría realizar si es posible, aunque no es tan relevante como lo demás –vamos, que si no puede hacerse tampoco pasa nada– sería ponerle un fondo blanco solamente al trozo de texto de las entradas, sin tener que cambiar el color de la columna entera.

    No sé si me he explicado bien, espero que puedas ayudarme a resolver este problemita tonto. Muchas gracias de antemano por tu respuesta! ; )

    Reply
    • Susana Barriga

      Hola Ramón!
      Me encantaría ayudarte mejor y si me pasas tu URL seguro que podré hacerlo sin problemas… me lo pasas?

      Reply
        • Susana Barriga

          Hola Ramón! acabo de responderte por mail :)… espero haberte ayudado!! Mucha Suerte!

          Reply
          • Ramón Márquez Ruiz de Seres de Luz Blog

            Muchas gracias por contestar y por el halago, Susana! He probado la solución que me diste y funciona, aunque hay un problema. También añade espacio a la imagen del post y no queda demasiado bien. Hay alguna forma de que solo afecte al texto? Otra cosa que te quería preguntar es si se puede centrar la cabecera del post y los metadatos –del módulo blog– y cambiar el texto “leer más” por otra cosa, y agrandarlo de tamaño.
            Perdona, te voy he puesto para que sea desplegable y ocupe toda la pantalla. Como puedo hacer que sea una fila emergente que salga del lado derecho?
            Y la última pregunta, es sobre un módulo que he visto en la documentación y no encuentro por ningún lado. Es el de navegación, o algo por el estilo, para poner en tus post del estilo: post anterior, post siguiente. Si pupieras decirme donde está, sería genial. Gracias otra vez y espero tus respuestas! ; )

          • Susana Barriga

            Hola Ramón!
            Tu página es preciosa! así que los halagos muy merecidos!!
            – Otra solución que te puedo dar es que le quites el margen o borde a los posts, entonces no necesitarás cambiar los márgenes del texto ni nada… Para centrar tu título y la información de quién escribe, fecha, etc… puedes pegar este CSS:
            .et_pb_blog_0 .et_pb_post .entry-title .post-meta {text-align: center;}
            – Para que el texto de “leer más” no quede tan pequeño y pegado al texto te sugiero:
            .et_pb_posts a.more-link {font-size: 18px; padding-top: 18px;}
            – Si quieres cambiar el texto “leer más” por otro texto añade este código en Theme option>Integration> head window:

            <script type="text/javascript"> 
            jQuery(document).ready(function(){ 
            jQuery(".more-link").text("your text"); 
            });
            </script >
            

            – Con el tema del menú veo que ya lo has resuelto!! verdad? muy bien!!
            – El módulo que comentas se llama “Post Navigation” delante tiene dos flechitas hacia adelante y atrás y lo encuentras al crear una sección estándar con una columna y añadirlo desde la lista de módulos…
            Mucha Suerte!!

          • Ramón Márquez Ruiz de Seres de Luz Blog

            Muchas gracias Susana otra vez! Escribo los primeros códigos en el mismo lugar donde probé la primera solución? y puedes mandármelos por correo? No me deja copiarlos desde aquí.

          • Susana Barriga

            Hola Ramón!
            Si, todo lo que es CSS se escribe en theme options > custom css … disculpa por no poder copiar y pegar el código… te lo envío por mail si quieres…

          • Ramón Márquez Ruiz de Seres de Luz Blog

            Muchas gracias otra vez, Susana! Tengo un problema con los dos primeros códigos que me has sugerido, no sucede nada, ningún cambio. Y creo que serían interesantes de implementar. En cuanto al último css, el de cambiar lo de “Leer más” ha funcionado a la perfección, ya está funcionando y queda de maravilla. He revisado la primera alternativa que me diste y le he añadido espacio arriba. Ahora la imagen se ha separado de la linea y se ve mejor. Perdona que te pregunte tantas cosas ; )

          • Susana Barriga

            Hola Ramón!
            No te preocupes por preguntar! a mi me gusta responder y ayudar con mucho gusto 🙂
            Has intentado borrar el caché por completo y actualizar tu página? eso debería bastar para que los cambios aparezcan… por si acaso, después de hacer eso también te sugiero que veas en varios navegadores además de Explorer, como Chrome o Firefox…

  86. Arsenio Martínez Urquiola

    Hola Susana:

    Enhorabuena por este magnífico post. Tengo la siguiente duda: Estoy realizando un Portfolio filtrable para una web. He utilizado el módulo Imagen y texto para construir cada proyecto. El problema es que cuando introduzco la imagen destacada me la coloca con el tamaño original de la foto, de modo que me aparece la imagen recortada. ¿Cómo puedo elegir una miniatura o imagen que se adapte al portfolio final y no aparezca recortada?

    Te agradecería tu ayuda. Gracias

    Reply
    • Susana Barriga

      Hola Arsenio!
      Muchas gracias! Sobre tu duda, para el formato de imágenes en general uso un ancho de 1366px por el alto que desees ya que se ajustará automáticamente al tamaño de la pantalla del dispositivo en el que abran tu web o blog por ser una plantilla “responsive”.
      Para las “Featured Images” suelo usar 800px de ancho por 400px de alto o menos según el estilo gráfico del sitio…
      Mucha suerte!!

      Reply
  87. Miguel Palomino Urdapilleta

    Hola Susana. Enhorabuena por tu excelente trabajo y clarisimas explicaciones. Mi problema consiste en que necesito que el menu principal en la pagina de inicio aparezca debajo de la imagen de cabecera y en el resto aparezca arriba del todo y no encuentro la forma de hacerlo. ¿como se te ocurre que podría hacerlo? Muchas gracias y enhorabuena de nuevo

    Reply
    • Susana Barriga

      Hola Miguel!
      Muchas gracias!!
      Lo que te sugiero es que crees una página, que luego será la que definas como página de inicio, y en ella crees primero el módulo de imagen y luego el módulo de menú por debajo… y posteriormente los módulos que necesites para crear la home de tu web…
      En cuanto al menú, puedes definir que solo aparezca al comenzar a bajar la página con el cursor.
      En las páginas interiores el menú aparecerá al hacer scroll down (bajar hacia abajo con el cursor) y esa puede ser una buena salida a lo que necesitas… Mucha Suerte!!

      Reply
      • Miguel Palomino Urdapilleta

        Muchisimas Gracias Susana!! Eres una crack!! Me estaba volviendo un poco mas loco de lo que estoy y con tu consejo he solucionado el problema. Querría abusar de tu amabilidad y consultarte la integracion de un plugin para hacer la web en dos idiomas. Cual es el mejor para ti? WPML? Eres mi gurú.
        Muchas gracias!!!

        Reply
        • Susana Barriga

          Hola Miguel!
          Gracias por tus palabras!! me animan a seguir aprendiendo cosas de Divi para seguir ayudando ;)…
          Sobre tu consulta, plugins de traducción los hay de pago, como el WPML y gratuitos. De estos últimos, los mejores son “Loco Translate”, “WP Google Translate” o “Google Translate WordPress » WP Translate” que son interesantes y no suelen causar problemas con la plantilla… Mucha Suerte!!

          Reply
          • Miguel Palomino Urdapilleta

            Gracias de nuevo por tu amabilidad. Voy a probarlos porque WPML da problemas y debe tener alguna incompatibilidad con Divi pues el menu hamburguesa no me funciona en móviles y tablets y en algun foro he visto que aconsejan desactivarlo. !!Gracias Susana!!

          • Susana Barriga

            Hola Miguel!
            Otro consejo que te doy es desactivar todos los plugins que tengas instalados e ir activándolos uno a uno para ver cuál es el que te genera problemas y borrar el caché cada vez.
            También puede que exista una incompatibilidad entre plugins… y finalmente también es una buena idea desactivar la plantilla y activar una de las más sencillas de WordPress, tipo “Twenty Sixteen” y verificar si todos los plugins funcionan correctamente… Muchas Gracias a ti por la visita y ya sabes, si necesitas ayuda estaré por aquí 🙂 Mucha Suerte!!

  88. DecoLookbook

    ¡Hola! ¿Sabés si puedo trackear los botones como eventos en Analytics? Quiero saber exactamente cuántas personas hacen click. ¡Gracias!

    Reply
    • Susana Barriga

      Hola!
      Te cuento que desde que “Divi Leads” se a integrado al Divi builder ya no estás limitado a las pruebas de seguimiento de páginas enteras. Ahora es posible trackear o testear cualquier módulos individual o secciones enteras de contenido.
      Para que veas cómo funciona te paso el link de un video publicado por el equipo de Elegant Themes… Mucha Suerte!!

      Reply
  89. Jorge

    Hola Susana, maravilloso trabajo!!!, tenia una duda que me esta volviendo loco, como hago en el blog de entradas para cambiar el formato del blog?, en la configuracion de pagina “BLOG” no me deja usar el constructor divi , y ya no se como hacerlo, solo quiero poder cambiar el formato de mis posts, y no se como hacerlo.
    Muchas gracias

    Reply
    • Susana Barriga

      Hola Jorge!
      Haber si te he comprendido bien… tienes una página que se llama blog y con el Divi Builder le has asignado el módulo “blog”? y lo que quieres cambiar es el formato en el que aparecen tus posts en esa ventana?… confírmame si es así para darte algún consejo útil, vale? 😉 Saludos y Mucha Suerte!!

      Reply
  90. elisaruiz2014Elisa

    Hola Susana,
    Muchas gracias por tu post. Querí preguntarte una duda, que no sé muy bien cómo resolver (tal vez sea una tontería…). Quiero hacer un carrousel con logos del estilo “nuestros clientes” pero no encuentro la manera de hacerlo. De esos en los que vas añadiendo logos y ellos van pasando automáticamente, ¿me explico?
    ¡Muchísimas gracias de antemano por tu ayuda!

    Reply
    • Susana Barriga

      Hola Elisa!
      A ti las gracias por la visita!! Para resolver tu consulta creo que puedes hacer una “galería de imágenes”… Para hacerlo, creas una sección estándar, asignas una columna a la sección y seleccionas el módulo de galería de imagen, seleccionas las imágenes que quieras se vean como logotipos, elige la opción “Grid” o cuadrícula y eliges la cantidad de imágenes que quieras que aparezcan en una sola fila (por defecto el diseño de la plantilla es de 4 columnas una foto por columna) al clicarlas se agrandarán… Des-seleccionas la opción de mostrar el nombre de la foto, a no ser que quieras que salga el nombre. Todo se verá según el tamaño de las fotos y la cantidad de imágenes que decidas se vean a la vez: si tienes 8 imágenes y pones que se muestren 4 entonces aparecerá una fila con 4 imágenes y la paginación mostrará que existe una segunda página con más imágenes, si pones que se muestren 8 imágenes se generará una segunda fila debajo de las 4 imágenes y no se mostrará la paginación, aparecerán 8 imágenes en dos filas todas a la vez… Mucha Suerte!!

      Reply
  91. Guille

    Hola Susana, madre mía eres una bloguera súper activa!
    Esta pregunta creo que no te la han hecho….

    En una sección de mi proyecto, uso una fila de tres módulos

    Queda muy bonito, estupendo, pero ahora quiero que cada uno tengo una anchura concreta.

    Pues el de mas a la izquierda lo quiero estrechar, y le pongo la propiedad {max-width: 90px;} en la sección CSS Personalizado de los ajustes de la fila en el constructor DIVI, GENIAL FUNCIONA!

    Ahora el de en medio. Como no quiero desbaratar la responsividad pruebo con el editor del navegador, y localizo el elemento que quiero ensanchar, y digo vale: {width: 50%;}, por eso de no forzar a un móvil a mostrar una imagen definida con 500px de anchura… OK FUNCIONA, ha quedado como quiero.

    Ahora viene el problema.

    Intento añadir el código en la sección CSS Personalizado de los ajustes de la fila en el constructor DIVI y no funciona.
    Descargo un Plugg-in para hacer modificaciones CSS, llamo a la clase del elemento y escribo la propiedad CSS que quiero modificar y no funciona.
    Me meto en la hoja e estilos del temo busco el elemento en cuestión y no lo veo por ningún lado.
    Rastreo todos los ficheros CSS haber si encuentro el elemento en cuestión y no lo veo por ningún lado….

    Tiene que haber una solución mas fácil !

    Un saludo y gracias!

    Reply
    • Susana Barriga

      Hola Guille!
      Muchas gracias por tus palabras!! me encanta saber que te animas a indagar en el código y conseguir lo que buscas! es como magia no?? para poner el código tienes dos opciones, una es el apartado para CSS del propio módulo… y otra en el ePanel. Para ello abres Divi > Theme Options y al final de la página > Custom CSS… pega aquí tu código y te tiene que funcionar 😉 me lo dices vale? saludos y Mucha Suerte!!!

      Reply
  92. lucia

    Buenos días.
    Estoy volviendome loca simplemente intentado que se visualicen las palabras de los menus del header. Lo único que consigo es que se vean 4 rayitas en la parte superior derecha de la cabecera. Pero yo quiero un encabezado completo. He hecho clic en todas partes y sigo viendo unicamente las 4 rayitas.

    Por otra parte, tengo una sección con modulos tipo anuncio en los que he insertado unas fotos. He puesto una sección de cuatro columnas. Pero solo veo dos y dos. Es decir, dos arriba y dos abajo. Nada de cuatro columnas. Qué tengo que hacer para ver las cuatro columnas en la misma fila.

    Aprovecho y planteo otra cuestión.
    Como reducir la altura de cada sección?..

    Ayuda please.

    Gracias de antemano.

    Reply
    • Susana Barriga

      Hola Lucía!
      Has intentado el Theme Customizer?? vas a Header y Navegation > Header format > y selecciona uno a uno los estilos para ver cómo modifican tu menú… espero que esto te ayude… si no es así pásame tu web para ver en vivo tu problema y darte alguna solución más… Mucha Suerte!!

      Reply
  93. Joan

    Hola Susana!

    ¿Como puedo subir a wordpress las páginas, post, … de muestra?

    Lo he hecho con otros temas, pero con este me estoy encallando.

    Gracias.

    Reply
    • Susana Barriga

      Hola Joan!
      Si te refieres a las páginas y posts que hayas descargado (exportado) de otra web y quieres subirlas (importarlas) a tu web actual… lo que tienes que hacer es ir a la barra del menú que tienes a la izquierda y donde pone “Tools” clicas sobre “Import” y si no tienes te pide instalar el plugin de importar archivos y a continuación te dice que subas el archivo que quieres subir y que contiene toda la información de tus post, páginas, comentarios e imágenes… Mucha Suerte!!

      Reply
  94. Rita

    Hola Susana, felicidades nuevamente por el post. Tengo una duda que trae de cabeza. Tengo unas imágenes con bordes transparentes para que quede el color en ondas. Lo subo al wordpress en png y se ve perfectamente el fondo transparente y la forma coloreada con ondas pero al ponerla como fondo en divi me hace un cuadrado completo osea no pone fondo transparente sino blanco. Ya puse para que el módulo fuese transparente y añadirle la imagen pero no hay manera.

    Reply
    • Susana Barriga

      Hola Rita!
      Probablemente tienes configurado que las imágenes en general tengan asignado un borde.. Me pasas tu web para que lo verifique y te ayude mejor? gracias!

      Reply
  95. Pipo

    Hola Susana es asombroso el éxito con tus comentarios…Estoy intentando hacer una web de noticias (soy de TV) y he instalado el tema Extra y claro tengo dudas, la idea es hacer una web tipo “el confidencial” por supuesto sin tantas pretensiones, solo quiero poner noticias y que aparezcan en ese estilo, es decir una foto y texto encima, o una foto y texto al lado cosas así, en principio sencillas, pero para mi es complicado. pregunta: para hacer que aparezca 1ª tengo que editar la noticia como pos en el editor de wordpress y asignarle una categoría, porque después quiero pulsar y que salga a total y que modulo tengo que utilizar??
    Muchas gracias, ah no se si tienes asesoramiento atraves de videoconferencia, yo una vez lo utilice en e-comerce y estuvo muy bien, si lo tienes dímelo…..

    Reply
    • Susana Barriga

      Hola Pipo!
      Muchas gracias! y que interesante tu proyecto!! muchas felicidades…
      Sobre tu consulta, vas por muy buen camino, tus noticias pueden ser “posts” o pueden ser “proyectos”. Para que aparezcan en el módulo de “Blog” deben ser “posts”… También es importante que tomes en cuenta que, para que aparezca solo una parte de tu publicación, deberás aplicar la opción “read more” en el lugar en el que quieras cortar la información de tu post en la ventanita en la que los editas…
      En el Módulo “Blog” tendrás dos sistemas de visualización, en rejilla y en resúmenes… cualquiera de los dos es vistoso e interesante… además de muchas opciones de personalización.
      Generalmente hago asesoría por hora a través de Skype, si te interesa me mandas un mensajito por la ventana de contacto y charlamos! Mucha Suerte!!

      Reply
  96. Seti

    Hola, Gracias por tu respuesta a mi pregunta el pasado dia 8, acabé cambiando el diseño por una galería pues nada funcionó.
    Ahora estoy con otra web que también me plantea un problemilla. Resulta que todas las páginas tienen que ir sobre fondo negro y en principio todo iba bien hasta llegar a la página Contacto. No encuentro la forma de definir el color para la fórmula de “captcha”, que debería ser claro o blanco, también me interesa definir con el mismo valor la información que aparece de forma automática cuando te olvidas de rellenar algún campo del formulario. ¿Qué solución hay?
    Voy a poner una vela a Santa Susana!

    Reply
    • Susana Barriga

      Hola Luis!
      Me pasas tu web para que vea tu problema y te de una mano? gracias!!

      Reply
      • Seti

        Hola Susana,.
        Creía que estabas de vacaciones, así que indagué en el foro de usuarios Divi, venciendo mi resistencia natural ya que no domino el inglés y eso me supone mucha frustración. A pesar de ello, solucionaron mi problema de forma fácil y rápida y adjunto la solución por si puede servirle a alguien.
        Para el captcha: En Ajustes del módulo contacto, pestaña CSS personalizado, en el último campo se encuentra: “Texto de captcha”, ahí escribir la fórmula: color: #ffffff;
        Para la información si te olvidas de rellenar un campo obligatorio: Opciones Tema Divi > General, último apartado “CSS personalizado” añadir:
        .et-pb-contact-message {
        color: #ffffff !important;
        }
        Gracias a eso, el texto aparecerá en blanco, aunque sirve para cualquier color cambiando la fórmula correspondiente.
        Atención: me aconsejan utilizar un “tema hijo” de cara a posteriores actualizaciones.
        Un cordial saludo

        Reply
        • Susana Barriga

          Hola Seti!
          Si… me pillaste de “vagaciones” jejejeje y me alegra mucho que te hayas animado a pedir help al equipo de Elegant Themes!!… Muchísimas gracias por el aporte y por pasarte por aquí! Un abrazo y Mucha Suerte!!!

          Reply
  97. Juanma

    Hola Susana,

    primero felicitarte no sólo por tu post, si no por toda la ayuda que ofreces… impresionante!

    Yo tengo una duda sobre la funcionalidad de Divi acerca de la traducción de la web/blog a varios idiomas:

    – Se traduce la página automáticamente?

    – En el caso de las nuevas entradas, cómo se hace la traducción?. Se necesita pluggin? También lo hace automáticamente?

    – Qué opinión tienes de Divi para webs multiidiomas?

    Muchas gracias. Un saludo!

    Reply
    • Susana Barriga

      Hola Juanma!
      Muchas gracias! Sobre tu consulta, pienso que Divi es la mejor plantilla para cualquier tipo de trabajo, ya que con su herramienta de construcción, el Divi Builder, no veo ningún tipo de web o blog que se le resista… ahora bien, si por traducción te refieres a la traducción de tu contenido y no a la estructura “administrativa” de la plantilla, entonces solo podrás hacerlo con un plugin. Los hay de pago y gratuitos y de estos últimos los mejores son “Loco Translate”, como también “WP Google Translate” o “Google Translate WordPress » WP Translate” que son interesantes y no suelen causar problemas con la plantilla… mucha suerte!!

      Reply
  98. Rodrigo

    Muchas gracias Sunana por tu excelente post acerca de Divi………me ha ayudado muchisimo!

    Tengo un par de problemas……..He creado un par de entradas en el blog tipo rejilla con contenido extracto con el botón de leer más pero cuando se da click en leer más no se desplega el resto del artículo, cual puede ser el problema? que estoy haciendo mal?
    El otro problema que tengo es que las entradas de texto que ingreso para crear los artículos del blog me aparecen con un margen muy amplio en blanco al inicio que le da muy mal aspecto, como puedo arreglarlo?

    Reply
    • Susana Barriga

      Hola Rodrigo!
      Normalmente el botón de leer más lo que hace es abrir una ventana nueva con la URL del post completo… Pero no abre el post o lo despliega en la misma ventana… Lo que ves en el módulo de Blog es el “excerpt” o resumen del post, que lo marcas en la ventana de edición de los posts usando el botón “read more”…
      Para tu segunda pregunta me puedes pasar la URL de tu web? así puedo ver el espacio en blanco que comentas y te digo que anda mal… estaré a la espera 🙂 Mucha Suerte!!

      Reply
      • Rodrigo

        Susana, lo que me he dado cuenta es que el botón Leer más me redireccionaba al blog por una mala configuración de los enlaces permanentes (todas las entradas se generaban con el enlace /blog). Ahora me abre el artículo del blog (con el espacio en blanco que te mencionaba) pero el blog no tiene la disposición rejilla y la leyenda Leer más a pesar que en la vista previa me aparece.

        Desde ya, muy agradecido por tu colaboración

        Saludos

        Reply
        • Susana Barriga

          Hola Rodrigo!
          Me alegro que hayas solucionado este problema! en cuanto a tu otra consulta… si asignas una “Featured Image” a tus post, el espacio en blanco que comentas se “llena” con esa imagen y todo el diseño de tu post se distribuye de manera armoniosa. Además esta imagen aparece arriba del resumen del post en tu módulo Blog… Muchísima Suerte!!

          Reply
          • Rodrigo

            Excelente Susana….muchas gracias!!!

          • Susana Barriga

            de nada! con mucho gusto y ya sabes, si compartes mi blog en tus redes me haces un gran favor 🙂

  99. Juan Carlos

    Hola Susana, podrias indicarme por favor como coloco un boton sobre una imagen, pero de las que se colocan desde el modulo imagen?

    Muchas gracias

    Reply
    • Susana Barriga

      Hola Juan Carlos!
      El módulo de imagen no esta creado para colocar un botón sobre la imagen pero te permite que la imagen por si misma sea un botón y al clicarla te lleve a la URL que designes… Si deseas que aparezca si o si un botón sobre una imagen puedes usar el módulo de “Call to action”. En las características principales asignas las características del botón y en las características avanzadas designas la imagen de fondo que aparecerá detrás del botón… Mucha Suerte!!

      Reply
  100. Lydia

    Hola Susana, quiero cambiar mi página web y me he aventurado a usar Divi, he de decir que esto me viene un poco grande ya que no tengo ni idea de html ni css, ni de hacer páginas en general, mi pregunta es si das algún curso para aprender a manejar a fondo esta plantilla, que aunque es intuitiva hay muchas cosas que son dificilillas, sobre todo para los que no tenemos ni idea.
    Muy interesante tu página, aclara bastantes dudas.
    Saludos
    Lydia

    Reply
    • Susana Barriga

      Hola Lydia!
      Muchas gracias por la visita!
      La mayor ventaja que te da Divi es que no necesitas realmente tener nociones de HTML y css para lograr resultados realmente profesionales… pero has dado en el clavo sobre la necesidad de un curso para sacarle el jugo a la plantilla… Te cuento que estoy preparando un curso en dos niveles sobre el uso del Divi (principiantes y avanzados) que no ha visto la luz todavía por que dentro de muy poco saldrá la actualización 3 de Divi… así que un pelín de paciencia que ni bien salga la actualización de Divi mi curso estará al alcance de todos y serás la primera en enterarte!! Mucha Suerte!!

      Reply
  101. José Palazón

    Hola Susana de nuevo. Tengo una duda existencial respecto a un proyecto que estoy desarrollando. Me gustaría saber si en una imagen creada con Photoshop e insertada en DIVI como imagen y la cual lleva cinco botones diseñados, estos botones pueden convertirse en link que al pasar el ratón por encima para que te conduzca a una parte específica de una sección en DIVI. No quiero abusar de la confianza pero si no tengo respuesta a esta cuestión igual estoy enfocando mal la herramienta que estoy utilizando. Si no te importa, y prometo no molestarte más, te mando la url de mi proyecto para qu me digas si ves posible llevarse dicho proyecto a DIVI aunque sea con una apariencia o disposición diferente. Mi proyecto puede verse en: aprendemusica.es/pop-rorff/

    Un millón de gracias y espero puedas aclararme la cuestión para seguir invirtiendo tiempo en el nuevo proyecto o dejarlo pasar.

    Un cordial saludo

    Reply
    • Susana Barriga

      Hola José!
      No es molestia! no te preocupes tu regresa por aquí y pregunta que si yo tengo la respuesta con mucho gusto te ayudo :)… Me parece que la solución va por subir primero los fondos sin las imágenes de los botones y arriba colocar los botones… cómo?… así: creas una sección normal o de ancho completo y le asignas un background, que puede ser imagen o vídeo (el fondo sin botones) y luego creas módulos de botón con los links que necesites este módulo aparecerá sobre el background que creaste… Mucha Suerte!!

      Reply
  102. Raimon

    Hola Susana,
    Muchas gracias por tu post y por tus respuestas!
    Acabo de instalar Divi y no encuentro una forma asistida para añadir un código html en o
    ¿Existe una forma de hacerlo con Divi?
    Te reitero mi agradecimiento y hasta pronto.

    Reply
    • Raimon

      :_( me refería a las etiquetas HEAD y BODY 😉

      Reply
    • Susana Barriga

      Hola Raimon!
      Si que existe, se encuentra en el ePanel, en el apartado “Integration”. Lo que tienes que hacer es activar las funciones que necesites. Estas son las funciones de las que dispones:
      Enable header code
      Enable Disable
      Enable body code
      Enable Disable
      Enable single top code
      Enable Disable
      Enable single bottom code
      Add code to the < head > of your blog
      Add code to the < body > (good for tracking codes such as google analytics)
      Add code to the top of your posts
      Add code to the bottom of your posts, before the comments
      Saludos y Mucha Suerte!!

      Reply
  103. José Palazón

    Estimada Susana. Gracias por el magnífico tutorial y, muy especialmente, por tu gentileza para responder tantas dudas. Mi consulta te va a parecer casi infantil, pero después de haber descubierto DIVI y mirar sus posibilidades, me ha gustado mucho hasta el punto de plantearme hacer una página web con DIVI. Mi pregunta es: si tengo un blog en WordPress (en un servidor) y quiero hacer una página web (no un blog), ¿DIVI me permite convertir ese blog en una página web en cuanto a apariencia de manera que no se trate de una serie de post a la manera habitual de un blog?

    Si la respuesta es sí, ¿sólo es cuestión de configurar la apariencia general de la página desde el principio para ir construyendo posteriormente lo que necesito?

    Gracias de antemano y recibe un cordial saludo.

    José

    Reply
    • Susana Barriga

      Hola José!
      Cuando instalas Divi, lo que cambia es el estilo de la web que tienes creada, en este caso de tu blog… para que no sea un blog como tal deberás crear links independientes a cada post (que al final son URLs independientes) y colocarlos en el menú a modo de páginas… espero haber entendido bien tu pregunta 😉 Mucha Suerte!!

      Reply
      • José Palazón

        Hola Susana. Muchas gracias por tu pronta respuesta. Ya llevo dos días trasteando DIVI y la verdad es que creo que le voy cogiendo el punto, aunque me queda mucho por andar. Si no es molestia, quería preguntarte por qué no me funciona el modo “clonar” en un módulo. Lo he intentado en muchas ocasiones y, finalmente, he optado por crear un nuevo módulo similar a otro creado. Gracias de antemano y recibe un cordial saludo.

        Reply
        • Susana Barriga

          Hola José!
          Gracias a ti por la visita! La clonación de módulos es por defecto una característica que no debería fallarte por ningún motivo… probablemente al actualizar la plantilla se corrija el error, vale?… Otra forma de “clonar” podría ser guardar el módulo que quieres clonar en la biblioteca y luego crear un nuevo módulo e importar desde la biblioteca el que guardaste antes… Mucha Suerte!!

          Reply
      • José Palazón

        Hola Susana. Sólo quería comentarte que me daba problemas el clonar un módulo debido a la utilización de un navegador (Mozilla), sin embargo con Explorer va perfectamente. Gracias.

        Reply
  104. carlos

    Hola Susana,

    En primer lugar agradecerte tu tiempo y esfuerzo, muchas gracias!!!

    Mi problema es que no consigo hacer que el deslizante o slider, el tipico slider de imagenes, sea de ancho total, por mas que lo intento solo ocupa la mitad o menos de el espacio que le asigno, solo lo consigo con el de noticias, pero no con el Control deslizante de anchura completa..

    De nuevo gracias y un saludo !!!

    Reply
    • Susana Barriga

      Hola Carlos!
      Me pasas tu web para que lo vea? así te ayudo mejor 🙂

      Reply
  105. Seti

    Hola Susana,
    Buscando solución a un problema desde bastante tiempo, he dado con tu blog.
    Te felicito, por tu conocimiento y por tu disposición a ayudar.
    Hasta la fecha no encuentro solución a un inconveniente.
    Estoy trabajando con DIVI versión 2.7.5, he diseñado un Portfolio de anchura completa en modo carrusel, todo perfecto, sólo que me interesaría desactivar la opción de link a una pagina superior para todas las imágenes de dicho carrusel, es decir, eliminar totalmente la opción icono, fondo hover al pasar el ratón, etc. ¿Es posible?
    ¿Hay que meter algún codigo, si es así, donde? ¿Tendre que crear un Theme Hijo?
    Enormemente agradecido a tu labor

    Reply
    • Susana Barriga

      Hola Luis,
      Gracias por las felicitaciones, con muchísimo gusto te doy una mano…
      Mira lo que necesitas es activar o desactivar las funciones por slide, en principio si no colocas un URL no abrirá ninguna ventana emergente… ahora el resto de opciones si quieres que desaparezcan, que tal si me pasas tu web para que vea lo mismo q tu y te de una solución exacta para ti?… Un abrazo y Mucha Suerte!!

      Reply
      • Seti

        Gracias Susana.
        Esta es la web: totpack.com, en el apartado Models encontraras a que me refiero, todas las páginas, en segundo nivel, después de la imagen principal esta el portfolio carrusel, si pasas el mouse por cualquier imagen se activa un fondo en gris (que no se puede eliminar en Ajustes avanzados de diseño, por más que yo selecciono el color blanco transparente) y el símbolo “+”.
        Yo quiero eliminar estos dos detalles y al tiempo, “desactivar” la opción de ampliar esta imagen, ya que solo es un ejemplo de lo que cada máquina puede elaborar pero sin mayor importancia.
        Muy agradecido por tu respuesta, por tu interés y por tu rápida respuesta.
        Un cordial saludo

        Reply
        • Susana Barriga

          Hola Luis!
          Intenta con este CSS y me dices si te soluciona el problema, vale? Mucha Suerte!!
          .et_pb_fullwidth_portfolio.et_pb_bg_layout_dark .et_pb_portfolio_image .et_overlay {background: rgba(0, 0, 0, 0);}
          .et_overlay:before {display: none;}
          Eso por ahora… lo del zoom tengo una opción pero quiero verificar otros detalles para darte la mejor respuesta…

          Reply
  106. Diego

    Hola Susana, felicidades por el trabajo realizado, no tengo palabras, soy muy nuevo y me parece que estás en otra galaxia. Te quería hacer una consulta, estoy en pleno proceso de un blog de libros y música con otro tema que está muy bien pero es muy limitado, he estado viendo Divi y parece que está a años luz del mío. Me gusta mucho todo, pero me gustaría preguntarte si es posible que en la pagina de inicio puedan aparecer las entradas que vaya haciendo por ejemplo con máximo de 15, pero en lugar de como aparecen una debajo de otra pudieran aparecer en plan mosaico, de tal manera que a una primera vista viéramos 15 cuadradillos con su imagen cada uno para que el que quiera pueda pincharlo, de la misma forma que si te vas a la página de “Libros” aparezca tibien así y no tengas que llegar hasta abajo para ver la última entrada que hay en la pagina. Espero haberme explicado bien y muchas gracias de antemano. Te pongo mi web (edicionoriginal.com) donde quizás podrías ver lo que intento decirte, como estoy ahora cambiándola continuamente para ver como la dejo lo mismo te sale algo diferente.

    Reply
    • Susana Barriga

      Hola Diego!
      Muchas gracias por tus palabras! Mira, para que aparezcan tus posts lo que tienes que hacer es abrir tu página de inicio y crear un módulo de blog en el lugar que quieres que aparezcan tus publicaciones. En él especificar el modo “rejilla” para que aparezcan las publicaciones tal como quieres, también puedes decir la cantidad de posts que quieres que aparezcan y más detalles de autor, fecha, comentarios, categorías, etc… Un saludo y Mucha Suerte!!!

      Reply
  107. Rita

    Hola Susana, quería consultarte una cosa que me tiene loca. En el menú inicio tengo activado el formato de cabecera para que aparezca cuando haya movimiento, osea al hacer scroll hacia abajo. Pero esta opción por cuestiones de diseño y estética no quiero que aparezca en el resto de pestañas, contacto, nosotros etc… en esas quiero que quede fija. ¿Puedo hacerlo? estoy loca buscando opciones y no veo. Me podrías decir por favor

    Reply
    • Susana Barriga

      Hola Rita!

      El formato que le das al encabezado se aplica a toda la plantilla (páginas, posts, proyectos, categorías, tags, etc, etc)… pero tal vez tu solución es pensar a la inversa, es decir, que el diseño de tu cabecera sea fijo en general y que crees una página como la de inicio en la que el módulo superior tenga el formato de aparecer o desaparecer al hacer scroll… Dime si te parece bien mi idea! Mucha Suerte!!

      Reply
  108. inma

    Hola Susana, comparto con el resto de opiniones el excelente trabajo tuyo de dedicación al Divi en Español. Mi duda es la siguiente: He cambiado mi pagina web hecha con Divi al directorio raíz, anteriormente estaba en una carpeta llamada WP, todo me ha funcionado bien, excepto los links de las páginas que aún contienen el directorio WP. ¿existe un plugin para reparar esto o que se puede hacer para no tener que revisarlos todos uno a uno?? Muchas gracias de antemano.
    Inma

    Reply
    • Susana Barriga

      Hola Inmma!
      Muchas gracias!! es que Divi me encanta… 🙂
      Me parece que un plugin que puede ayudarte es “Better Search Replace”… si te va bien con él me lo dices que me alegraré mucho de haberte podido ayudar! Mucha Suerte!!

      Reply
  109. Carmen

    Hola Susana, gracias por tus aportes, leyendo los post he podido aclarar muchas dudas!
    Mi duda es si se puede aumentar el tamaño de la ventanita de la información que aparece en el icono del mapa de google, ya que en la versión de ordenador se ve bien pero para la tablet o el móvil me queda muy pequeño.
    No se si me he explicado bien!
    De todas formas gracias por toda la información que nos aportas.
    Saludos,
    Carmen

    Reply
    • Susana Barriga

      Hola Carmen!
      Gracias a ti por visitar mi blog 😉 me pasas tu url para verla en móvil y tener más claro cómo ayudarte?

      Reply
  110. albertophotographerL

    Muy buen trabajo e interesante. Gracias por tu trabajo. El Divi me lo echo al carrito ahora mismo!

    Reply
  111. María

    Hola Susana! Enhorabuena por tu post!

    Quería preguntarte, si es posible, insertar valoraciones de los “comentarios” que hacen los usuarios.

    Estoy en plena creación, y no sé si ésta opción es posible con esta plantilla.

    Te agradezco de antemano, la información que nos brindas! Es de gran ayuda!

    Reply
    • Susana Barriga

      Hola María!
      La verdad es que sería muy interesante poder poner un sistema de valoraciones de los comentarios y el único plugin que pienso puede dar esta función es “Comment Rating Field Plugin”. Divi no tiene esa característica añadida en su formato, pero si no quieres usar un plugin y realmente necesitas ese valor agregado, el tema Extra de Elegant Themes te lo incluye en su formato. Aquí te dejo un link a un post que hice sobre esta plantilla que también es bastante poderosa ya que usa el mismo sistema de Divi Builder y el entorno de Divi. La diferencia entre Divi y Extra es que Divi es como una pizarra en blanco para enfocarla a cualquier tipo de web o blog y Extra esta diseñada especialmente para Blogs. Aquí también te dejo un vídeo del sistema de rating de la plantilla Extra… Mucha Suerte!!

      Reply
  112. Jesús Mederos

    Hola Susana! Excelente trabajo el que realizas cubriendo un gran vacío que existía en español para DIVI.
    Mi pregunta tiene que ver con los campos personalizados y generación de taxonomías. Hasta donde sé las 2 opciones que mucha gente utiliza son los pluguins “Types” y “Custom Post Types”. Ambos funcionan razonablemente bien pero el problema viene cuando quieres que esa nueva estructura que has creado aparezca en el frontend de tu theme, especialmente para los que no somos duchos en programación. Me preguntaba como habías resuelto este tema de los campos personalizados y su integración en DIVI.
    ¡¡Muchas gracias!!

    Reply
    • Susana Barriga

      Hola Jesús!
      La verdad es que los campos personalizados me resultaban muy útiles hasta que descubrí esta plantilla… antes qué nada, dime qué campos tienes creados para que te pueda decir de qué otro modo integrarlos con el uso de la plantilla…

      Reply
  113. Manuel Martinez

    Hola Susana,

    Primero felicitarte por el post!, leyendo algunas de tus respuestas he salido de unas buenas dudas sobre Divi. Sin embargo, hay una cosa que no he podido resolver, a ver si me puedes ayudar.

    Divi a partir de la versión 2.6 incorpora un modulo para el buscador, lo cual es genial por que ya no te limitas a colocarlo solamente en la barra lateral. El problema que tengo es que estoy armando una tienda con woocommerce, pero al momento de usar el buscador del modulo, este solo busca contenido relacionado con paginas y post, pero no incorpora a los productos. Así, si uso ese buscador para buscar cosas relacionadas con los productos aparece “Resultado no encontrado”.

    Conoces alguna solución a este problema?
    Ojalás me puedas ayudar.

    Muchas Gracias!
    Manuel.

    Reply
    • Susana Barriga

      Hola Manuel!
      Muchas gracias!! me alegra haberte sido de ayuda… 🙂
      Sobre el módulo de búsqueda, lamentablemente en esta actualización el módulo no “busca” productos :(, pero debería funcionar perfectamente con el sistema de búsqueda por defecto… para solucionar tu problema probablemente lo mejor será añadir un plugin tipo search-everything que podrás configurar donde quieras… Espero que en la próxima actualización nos den la alegría y ajusten el módulo para que busque hasta debajo de las piedras jejeje
      Mucha Suerte!!!

      Reply
  114. Julio

    Hola Susana, desde hace tiempo quiero comprarme una plantilla, pero no sé por cuál decidirme. Soy artista visual, me especializo en pintura. Quiero una página web como esta: madebyminimal.com/demo/dorsey/ Estos tipos venden muy cara la plantilla y también las actualizaciones (100 dólares anuales), pero por otro lado no he encontrado nada parecido en wordpress. Tengo wordpress.org instalado en mi Hosting. Mi pregunta es, ¿cuál plantilla wordpress premium multiprupose puede adaptarse lo más acercado posible de entre los siguientes theme?: divi, avada, X Theme, the 7, etc. (aquí entran los que tú conoces).
    ¿Por qué un tema multipropósito? Ni idea, no sé exactamente lo que significa exactamente. Quiero vender los cuadros por internet y deduzco que estos temas se pueden adaptar mejor.
    Los pintores, no los fotógrafos, los pintores en específico, necesitamos una página muy limpia, minimalista que carge muy rápido los contenidos visuales, de muy fácil navegación, con un menú siempre presente, y hoy en día, con un diseño muy intuitivo para otros medios electrónicos móviles. Aquí otros ejemplos más estáticos todavía y no responsive, pero con ellos te puedes dar una idea la estética: hugolugo.com y kekevilabelda.com
    Muchas gracias por tus consejos,
    Un saludo

    Reply
    • Susana Barriga

      Hola Julio!

      Como tu yo buscaba alguna plantilla adaptada a mis necesidades como diseñadora gráfica y te cuento que con Divi he encontrado lo que estaba buscando, éste blog (hostingwordpress.com.es) lo diseñé con Divi y mira mi web de empresa http://www.imagos.com.es, en ella pude desplegar visualmente la línea de trabajos que desarrollo a primera vista y eso me facilitó mucho las cosas.

      Por lo que veo en los ejemplos que me apuntas, solo tendrías que configurar tanto el logo como el menú para que estén a la izquierda y listo, como en esta página que diseñé para unos clientes: http://www.hospitaletdelinfant.es

      Al hablar de una plantilla multipropósitos básicamente nos referimos a que puede, por todas las herramientas que tiene, adaptarse a cualquier tipo de web o blog… Divi es como arcilla en tus manos… y si eres artista ya me imagino lo que obtendrás como resultado.

      Lo que yo hice, fue comprarme el plan Lifetime, que en principio parece mas caro, pero si lo piensas es una inversión a tres años ya que, si compras los otros planes tendrás que pagar anualmente, no solo en Elegant Themes, si no en todos los proveedores de plantillas. Pero comprando el plan Lifetime solo pagas una vez y te olvidas, todas las actualizaciones además de 86 plantillas adicionales y 6 plugins de infarto vienen en el paquete… Te dejo este link para que te descuenten un 10% en este paquete si te animas…

      En cuanto a vender tus cuadros te aconsejo que instales el plugin woocommerce, que te permite configurar una tienda online normal (si quieres vender tus cuadros en formato impreso, con envío y todo eso) o también para productos digitales…

      Espero haberte dado el empujoncito que necesitabas para pasarte al lado “nada oscuro” de Divi!! Mucha Suerte!!

      Reply
  115. carolina

    Hola Susana, Me encanta tu manera de explicar y lo paciente y “solidaria” que eres con todos los que te piden ayuda.

    te contacto por que quiero hacer diseñar una pagina como una referencia que tengo y no logro dar como fué que se hizo para repetirla en mi pagina web.

    el diseño que quiero hacer es este de la imagen transparente que baja de arriba hacia abajo que ademas de transparente tiene un diseño con unas letras y una barra azul. Es esta una imagen completa?, o se diseña con algún módulo?- que no se cuál es…

    yo creo que es una imagen completa, pero no logro dar con el módulo que me permita tener una foto de fondo y otra (la transparente) que se desplace de esa manera al pasar el ratón y tenga un link.

    este es el link de lo que quiero hacer: offbeatcreative.co.uk/our-work

    La otra pregunta es como ponerle un footer a un menú vertical? como el del link que doy… que tiene un footer y logos de redes sociales?

    Agradecida si pudieras darme unos tips.

    saludos

    Carolina

    Reply
    • Susana Barriga

      Hola Carolina!
      Muchas gracias por tus palabras, yo ayudo con lo poco que se… pero las preguntas me ayudan a aprender cada día mas y más sobre las bondades de esta plantilla y eso es algo que tengo que agradecer a todos los que confían en mi para ayudarles…
      Sobre tu consulta, la mejor solución la tendrás si creas proyectos en vez de posts… te podría quedar algo como la página de inicio de mi web http://www.imagos.com.es
      En cuanto al footer, lo que tendrías que hacer es, en theme customizer > Header & Navegation > Header Format activar la casilla Vertical “Menu Orientation” y definir si lo quieres a la izquierda o derecha.
      El footer por defecto irá al final del todo y podrás definir ahí tus redes sociales…
      Mucha Suerte!!

      Reply
  116. Mar

    Buenos días Susana,

    He leído todos los comentarios para no tener que molestarte con mis preguntas, pero al final veo que tengo que hacerlo :(.

    Mi problema es el siguiente:

    Quiero hacer un blog, que sea independiente de la página, he instalado el módulo de blog, pero soy incapaz cuando hago una entrada, primero que me salga tipo foto y a la derecha un resumen y que cuando se clique la foto o la descripción salga todo entero mi entrada. Me sale que no hay resultados.

    Si lo hago de forma página, no consigo nada y si lo hago de forma última entradas tampoco.

    Me podrías ayudar con este tema, llevo un mes y no consigo hacerlo bien, me he leído todo tipo de temarios, comentarios pero sigo igual.

    Muchas gracias

    Reply
    • Susana Barriga

      Hola Mar,
      No te perocupes y gracias por confiarme tu duda 🙂
      En el menú de tu web (Blog-1) veo que, para conseguir lo que quieres, solo te falta la foto… para eso lo único que tienes que hacer es establecer una “featured image” en cada post. Es la imagen que tienes abajo de categorías, tags, etc en la barra lateral derecha de la ventana del post que estés escribiendo. Cuando defines esa imagen automáticamente aparece en el módulo blog o en posts relacionados.
      Para crear tu blog, esta bien crearlo a partir de una “página” y diseñarlo descargando, de la biblioteca de Divi, el módulo Blog. Este módulo automáticamente muestra tus últimas publicaciones o posts y los muestra con la URL que corresponde a cada uno… tus publicaciones tienen que tener de nombre y url algo diferente al nombre de tu página “Blog”, te lo menciono por que veo que en las dos publicaciones que aparecen en tu menú blog-1 ambos tienen como url tuweb/blog1 eso tienes que cambiar…
      Mi consejo:
      1º crea post nuevos con su propio nombre en la URL y en el título, es decir, si tu post se llama “Ofertas de empleo para discapacitados y mayores de 45 años” ese mismo nombre deberá tener en la URL: tuweb.com/ofertas-de-empleo-para-discapacitados-y-mayores-de-45-años.
      2º Luego, en tu página de nombre Blog, en el módulo de Blog configura la cantidad de posts o publicaciones que quieres que aparezcan, clicas en “Show Featured Image” para activar que aparezca la imagen del post, y también activa “Read More Button” para que aparezca un link de leer más. Finalmente activa “Show Pagination” para que al final de la página, cuando tengas más post que los que se muestren en la página blog, aparezca un botón de leer entradas anteriores o antiguas…
      Con eso deberías tener cubierta tu pregunta 😉 Mucha suerte!!

      Reply
  117. Marcos

    buen día, tuve problemas al actualizar la versión del DIVI, al hacerlo me da error y el mensaje es que ya está la carpeta DIVI creada. La pregunta es si se puede hacer en forma manual y si es asi pierdo toda la web ya creada? Gracias!

    Reply
    • Susana Barriga

      Hola Marcos,

      El mejor consejo que puedo darte a futuro es que antes de hacer cualquier actualización hagas una copia de seguridad… es un rollo pero te evita sufrimientos… con Divi si has realizado cambios a los estilos y los has guardado en el ePanel no tendrías que perder nada al actualizar la plantilla. Puedes hacer una instalación manual pero previamente tendrías que exportar todos los estilos de tus páginas a tu biblioteca y desde ahí descargarlos a tu ordenador para posteriormente cargarlos desde la plantilla si tienes inconvenientes.
      Otra posibilidad es instalar (momentáneamente) una de las plantillas básicas con las que viene WordPress (por ejemplo Twenty Sixteen) y activarla y ver si sigues teniendo problemas y borras el caché. Una vez hecho esto volver a activar Divi y ver si eso a modificado algo…
      Pero… antes de hacer nada… intenta desactivar tus plugins, borra todo el caché y fíjate si sigue dándote problemas la actualización. Si todo va bien, el problema te lo esta causando un plugin… si todo sigue igual sigue mi consejo del párrafo anterior… Mucha Suerte!!

      Reply
  118. jose manuel garcia flores

    Hola,me gustaría saber si Divi tiene o permite crear una MyWishlist?

    Reply
    • Susana Barriga

      Hola José!
      Te cuento que Divi permite la instalación de un plugin específico para la lista de deseos, solo tendrías que tener instalado el woocommerce y añadir el plugin “YITH WooCommerce Wishlist”… es gratuito y cumplirá su cometido sin ningún problema… Mucha Suerte!

      Reply
  119. bixaky

    Hola, en primer lugar decirte que estoy aprendiendo mas con este tutorial que con los muchos que llevo vistos hasta ahora y te lo agradezco enormemente. Estoy creando un blog de fotografía, y tengo el mismo problema de la barra lateral pero he introducido ese codigo (aunque no se ni si lo he introducido donde se debe) pero me sigue apareciendo la barra lateral. También quería saber si al poner blog en rejilla se pueden poner mas de 3 columnas. Y una última duda, en el blog cada entrada tiene una foto, como podría eliminar el texto que viene debajo?
    Muchísimas gracias por adelantado!

    Reply
    • Susana Barriga

      Hola Bixaky!
      Me alegra muchísimo que mi tutorial te sea de utilidad! 🙂
      Sobre tu consulta, debes saber que las páginas tienen la posibilidad de remover la barra lateral cambiando su template o “formato” en “Page Attributes” lo cambias de “Default Template” a “Blank Page”.
      Pero las publicaciones, proyectos o páginas de categorías no tienen esa opción, es por eso que proponía el código CSS. Pega el código en el ePanel de Divi, al final de la ventana dice “Custom CSS” y alado tienes la ventanita para pegar el código… si no aparece tu modificación probablemente lo que toque es borrar el caché y si te sigue dando problema me pasas la url para que te lo revise más a fondo.
      En cuanto al módulo de blog, por defecto esta diseñado en 3 columnas, así que por ahora no podremos aumentar más columnas. Pienso que más adelante, en alguna de las actualizaciones tomarán este gran detalle en cuenta.. lo que si puedes hacer es modificar la distancia entre cada ventanita de post y los márgenes.. Sobre tu última duda, si solo quieres que aparezcan imágenes y no texto tu mejor opción es crear proyectos en lugar de posts, así para mostrar el contenido de los proyectos creas sliders para portafolio y listo… Si todavía quieres que no aparezca el texto pásame tu url y te ayudo 😉 y no te olvides de contarme si te va bien con esto, vale? Mucha Suerte!!

      Reply
      • José Joaquín

        Gracias por responder tan rápido! Te cuento, he borrado la caché con un plugin pero sigue saliendome la barra lateral, la tengo vacía, pero ahí sigue… Y los textos he conseguido que no aparezcan reduciendo el tamaño de la letra a 0, pero claro, el espacio que deberían ocupar sigue ahi… La dirección de la web es iphotosuar.esy.es, de momento está muy verde y lo poco que tiene es para ir viendo como va quedando. Muchas gracias.

        Reply
        • Susana Barriga

          Hola José!
          Intenta pegando este código en tu ePanel:
          body.archive #page-container #sidebar {display: none;}
          body.archive #page-container #left-area {width: 100%;}
          body.archive.et_right_sidebar #main-content .container:before {display: none;}
          y cuéntame si te va bien! Mucha Suerte!!

          Reply
      • José Joaquín

        Hola de nuevo, gracias por tu respuesta. Puse el código CSS donde me indicaste y borre la caché, pero sigue saliendome la barra la teral en el blog… y el texto de las fotos no consigo quitarlo. Mi web es iphotosuar.esy.es, espero que puedas ayudarme. Muchísimas gracias.

        Reply
        • Susana Barriga

          Hola José,
          Espero que el código que te dejé te sirva!!

          Reply
  120. Ricardo

    Hola Susana,

    Tengo un problema con el footer y es que cada vez que actualizo, vuelve a aparecer el “Diseñado por Elegant Themes y WordPress”. Sabes si hay alguna forma de que se quede fija mi información y no la estandar en cada actualización?

    Muchas gracias de nuevo.

    Ricardo

    Reply
    • Susana Barriga

      Hola Ricardo!
      La mejor manera de evitar este problema es eliminando directamente el footer que viene por defecto con la platilla y, una vez eliminado, personalizar uno propio usando un widget de footer…
      Para eliminar el footer actual usa este CSS: #footer-info {display: none;}
      Mucha suerte!!

      Reply
  121. Carlos

    Hola Susana, una vez más recurro a tu sabiduría, tengo un problema con el modulo portafolio de anchura completa, solo salen 3 imágenes en vez de cuatro, no es que me importe mucho aunque prefiero 4, lo peor es que se salta la imagen que seria la cuarta y no la muestra.

    Muchísimas gracias por el servicio tan bueno que prestas y un saludo.

    Nota: Te dejo el enlace de la pagina por si no me he explicado bien “Carrusel de músicos”
    catolicosporlamusica.es/?page_id=136

    Reply
    • Susana Barriga

      Hola Carlos!
      Por defecto el portafolio muestra normalmente 4 imágenes… probaste a ver en diferentes exploradores y en diferentes formatos de pantalla: móviles, tablets etc?

      Reply
      • Karlosd

        Si lo he probado todo y nada.

        Reply
        • Susana Barriga

          Hola Karlos!
          Que vueltas le estamos dando jejejej… no te preocupes, te propongo otro intento más y los que hagan falta, vale?
          Pega este CSS y veamos si ahora funciona!!
          .et_right_sidebar #sidebar {display: none;}
          .et_pb_gutter.et_pb_gutters2 #left-area {width: 100%;}
          .et_right_sidebar #main-content .container:before {display: none;}
          Mucha suerte!!

          Reply
  122. Gonzalo Valencia

    Debo felicitarte, super tu respaldo Divi en español. Hoy tengo horas buscando una opcion para varios sitios, y aunque ya le habia puesto el ojo a ET, tu me convenciste con tu versión latina de apoyo. Cinco estrellas para ti. Bueno a meterle mente a Divi y manos a la obra.

    Reply
    • Susana Barriga

      Hola Gonzalo!
      Muchas gracias!! y ya sabes dónde encontrarme si tienes algún problemilla… Mucha Suerte!

      Reply
  123. Gerard Juan Parlorio

    Hola susana me gustaría implementar un timeline con divi sabes de alguna herramienta q tenga divi para dicha función. Estoy utilizando el pluging cool timeline. Q va de lujo, pero se como ponerlo para q ocupe en pantalla completa ya q no me deja introducir el módulo de texto.

    Reply
    • Susana Barriga

      Hola Gerard!
      El plugin que usas se puede poner como widget o en cualquier lugar de tu web usando el shortcode [cool-timeline], entonces se me ocurre que podrías intentar crear un “Fullwidth Code Module” y pegar ese shortcode para ver si te funciona bien… Mucha suerte!!

      Reply
  124. Joan

    Hola Susana,

    Tengo una duda, quiero que el pie de página (zona de widgets) tenga anchura completa. ¿Cómo lo hago?.

    Gracias

    Joan

    Reply
    • Susana Barriga

      Hola Joan!
      Para conseguir que tu footer y toda la web sean de anchura completa, solo tienes que abrir: Theme Customizer > General Settings > Layout Settings y desclicar la opción “Enable Boxed Layout” ya que esta función es la responsable de crear un fondo debajo del contenido de tu web. Al desactivar la casilla le dices que quieres que tu web abarque el total de la pantalla. Mucha suerte!!

      Reply
  125. Manel

    Hola Susana! Me ha encantado tu entrada y la ayuda con DIVI… mi pregunta… tengo un cliente que quiere que en el Slider tenga un fondo… un texto con su enlace… hasta aquí bien… pero ahora quiere añadir el logo de su empresa y que también tenga un enlace ¿lo ves posible con DIVI? le he dado mil vueltas y no consigo hacerlo! Mil Gracias.

    Reply
    • Susana Barriga

      Hola Manel!
      Me alegra mucho que te haya gustado mi post! sobre tu consulta, creo que la mejor forma de añadir el logo con link es: creas el slider en el que quieres colocar fondo, texto y… vas hasta el final, a “Content” y en la ventana en la que se escribe agregas multimedia, es decir colocas el logo desde tu biblioteca y le añades el link que quieras… Espero que esto te ayude! Mucha suerte!!

      Reply
  126. Manuel

    Sabes de algún tutorial en español de como usar divi y wpml es lo único que me falta para que mi blog quede estupendo

    Reply
    • Susana Barriga

      Hola Manuel!
      Te dejo este link del mismo plugin que ilustra con vídeos cosas básicas del mismo. Mucha suerte!!

      Reply
  127. Kraneo G

    Hola Susan, una pregunta, en la página http://www.elegantthemes.com/gallery/divi/ muestra que puedes hacer ajustes dentro de “vistas previas en directo”. Cómo lo hago ? Saludos.

    Customize Everything, With Live Previews

    Reply
    • Susana Barriga

      Hola Jorge!
      Cuando se refieren a las vistas previas en directo, se refieren a las modificaciones que se realizan al usar el “Theme Customizer” y el “Module Customizer”… al abrirlos verás que se abre una ventana lateral izquierda con el menú del contenido a modificar y a la derecha se muestran los cambios “en vivo y directo” antes de guardarlos… una vez que guardes los cambios, estos se aplican al diseño. Mucha suerte!!

      Reply
  128. Yolanda Martínez

    Felicidades Susana por la información que ofreces, tengo un blog que tengo que cambiar para que sea responsive y estoy buscando una plantilla, he visto Divi en tu post y me pregunto si me valdría en apariencia y necesidades para que se aproxime o parezca al estilo y plugins que ya tengo. Gracias!

    Reply
    • Susana Barriga

      Hola Yolanda!
      Disculpa por no contestarte antes, es que te tenía en la carpeta de spam!! y muchas gracias por tus palabras :).
      Te cuento que las plantillas de Elegant Themes son, en el momento, la opción en plantillas más mimadas por Google en lo referente a adaptabilidad a las diferentes pantallas y dispositivos en los que abran tu web o blog, por cierto es precioso! (indiecolors.com/blog/) y con Divi o Extra puedes aprovechar muchísimo más el uso de imágenes y vídeos… De Extra tengo un post que te puede ampliar las ventajas que tiene, solo que lo tengo publicado en la web de mi empresa y aquí te paso el link… Sobre los plugins que tienes instalados, no veo que ninguno pueda causar problemas o incompatibilidades con la plantilla, en todo caso, te sugiero que, una vez instalado, los actives uno a uno y veas, borrando el caché cada vez, que todo siga funcionando bien… Muchísima Suerte!!

      Reply
  129. Tomas

    Hola Susana, una vez más vuelvo a mi blog de referencia para DIVI.

    A través de DIVI – opciones del tema – diseño – diseño de entrada individual, puedo desactivar que se muestre la fecha y los comentarios en la parte superior de las entradas.

    Pero, ¿cómo puedo desactivar que se muestre la fecha y los comentarios en la página blog? He probado desactivándolo en DIVI – opciones del tema – diseño – ajustes generales pero no funciona. ¿Cómo podría hacerlo?

    Me gustaría mostrar solo el autor y la categoría, quitando la fecha y el número de comentarios.
    Muchas gracias