Antes de comenzar con la guía en castellano sobre Divi permíteme evaluar tu situación:
- ¿Quieres diseñar tu blog por ti mismo pero no tienes ni idea que tema WordPress elegir?
- ¿Estás cansado de lidiar con plantillas difíciles de manejar, que requieren mucho tiempo y además no te permiten realizar gran parte de lo que andabas buscando?
- ¿Te desesperas ante la excesiva cantidad de información que encuentras en internet?
Si estás en alguno de estos casos no te preocupes puesto que yo también pasé por esa dura etapa.
La buena noticia es que afortunadamente existe grandes productos si se sabemos dónde elegir.
Para facilitarte esta tarea hoy te traigo una guía muy completa sobre una plantilla para WordPress que me ha dado muchas satisfacciones: Divi, el tema framework de Elegant Themes.
Hoy quiero compartir mis conocimientos contigo, hacer un repaso de sus características principales así como de sus carencias.
Antes de comenzar con la guía quiero recordarte que si quieres aprender más sobre otras herramientas y recursos interesantes relacionados con el diseño te recomiendo:
Los 6 errores en el diseño web que arruinarán tu proyecto digital y todas las claves para evitarlos
Guía en castellano sobre Divi
Divi es un tema desarrollado por la empresa norteamericana Elegant Themes que te va a permitir diseñar una gran variedad de sitios web partiendo de un mismo producto.
Tanto Divi y como su constructor Divi Builder te ofrecen:
- Diseñar rápidamente: su uso es sencillo y gracias a acciones como duplicar, importar y cargar elementos tu proceso de diseño se va a ver acelerado.
- Código: apenas necesitas implementar código. Si sabes de lenguajes tipo CSS pues mejor. Personalizarás tus webs a tope dándoles un aspecto mucho más profesional y diferente.
- Resultados: los diseños obtenidos son minimalistas, elegantes y profesionales.
¿Qué puede diseñar con Divi?
Divi es un tema multipropósito lo que significa que con él podrás crear webs de temáticas muy distintas como por ejemplo: restaurantes, blogs, portfolios de fotografía, pequeños negocios e incluso tiendas online gracias a su integración con el plugin WooCommerce.
Como ejemplo te muestro a continuación una serie de sitios webs basados en Divi y Divi Builder:
¿Qué va a ofrecerte Divi?
Ponerme a relatar todas y cada una de las características de Divi y Divi Builder nos llevaría un curso completo y no es esa mi intención.
Por eso en este artículo te mostraré las que para mi son las principales características que hacen de Divi un tema muy sencillo de usar, potente y elegante.
De todas maneras si quieres ampliar conocimientos te aconsejo que te pases por el blog de mi amigo Omar de la Fuente en el cual publiqué una guía sobre Divi Builder que te servirá como complemento. 😉
Veamos algunas de sus características:
Instalación de Divi
La instalación de Divi es super sencilla y te llevará sólo un par de segundos:
- Descárgalo a través de tu cuenta de Elegant Themes.
- Accede a tu WordPress y selecciona «Apariencia > Tema» y presiona «Añadir uno nuevo».
- Selecciona Divi, instálalo y actívalo. Ya tienes tu tema Divi listo para ser usado. 😉
Creación tema hijo
Una de las posibilidades que te ofrece Divi como framework es la de crear un tema hijo para personalizar tu sitio web de la manera que quieras sin afectar negativamente el funcionamiento de tu sitio web.
El proceso de instalación es igual de sencillo:
- En el respositorio de WordPress busca el plugin llamado Child Theme Configurator, instálalo y actívalo.
- Ve a «Herramientas > Child Theme» y presiona el botón «Analyze».
- Haz clic en «Create New Child Theme» y tu tema hijo será instalado.
- Para activarlo nos dirigimos «Apariencia > Tema», seleccionamos el tema hijo y lo activamos. Hecho. 😉
Tras la instalación tendrás dos archivos: functions.php y styles.css.
Son esos dos archivos los que te permitirán personalizar tu sitio web tanto como quieras.
Con el primero podrás añadir funciones en PHP y con el segundo estilos en CSS para cambiar la apariencia de tu web.
En el siguiente vídeo te muestro paso a paso cómo instalar tu tema Divi y tu tema hijo:
Sinergia Divi + Divi Builder
Muchas veces se habla de Divi sin mencionar a parte a Divi Builder y es que estamos hablando dos productos totalmente diferentes:
- Divi es un tema framework.
- Divi Builder es un plugin para diseñar el contenido de tu web.
Con Divi editarás y personalizarás los aspectos generales de tu web como el logotipo, tu cabecera, pié de página, el tipo de fuente así como su color y tamaño.
Mientras que con Divi Builder nos centraremos en forjar y diseñar el grueso de tu web con sus módulos y opciones de diseño.
La principal ventaja es que ambos productos han sido diseñados para que se complementen a la perfección de forma que se potencien mútuamente logrando resultados realmente soprendentes.
Además ambos vienen paquetizados en los planes de contratación, es decir, disfrutarás de ellos sin tener que gastar un céntimo más. 😉
Configuración de la cabecera
Uno de los aspectos que más me gusta de Divi es la facilidad para configurar la cabecera mediante el personalizador de temas pudiendo así cambiar la ubicación del logotipo, la disposición de los menús y sus estilos.
Con Divi podrás modificar sus elementos de la siguiente forma:
- Por defecto: tu logo a la izquierda y el menú a la derecha.
- Centrado o centrado en línea: si quieres tu logotipo centrado ésta es sin duda tu opción.
- Deslizar: tu menú se muestra oculto en el lado derecho de la pantalla.
- Pantalla completa: tu menú se mostrará en pantalla completa haciendo clic en el icono ☰.
Guía en castellano sobre Divi: Estilos de la cabecera
Además el tema te deja aplicar estilos específicos sobre el menú principal y el secundario que conforman la cabecera:
Guía en castellano sobre Divi: Menu Primario y secundario
Por último Divi te da la opción de mostrar tus iconos sociales así como un botón de búsqueda:
Guía en castellano sobre Divi: Elementos de cabecera
Accede rápido a WordPress
Una opción sumamente interesante es el acceso rápido que el personalizador de temas te ofrece a otras partes del administrador de WordPress como por ejemplo:
- Menús.
- Widgets.
- Portada estática.
Guía en castellano sobre Divi: Acceso rápido a WordPress
Luego, si necesitarás añadir un nuevo menú, modificar o sustituir tus widgets o incluso establecer tu página de inicio y la de tu blog, lo podrás hacer todo a través de esta herramienta sin tener que acceder al panel de administración de WordPress ahorrándote tiempo durante el proceso.
Modos de edición de Divi Builder
El diseño del contenido de tu web se hará con Divi Builder a través de dos modos de edición: el Back-end o el Front-end.
El Back-end es la parte ubicada en el panel de WordPress de tu página. Es la vía de diseño que Elegant Themes ofrece desde el principio y el que resultados más estables ha dado hasta el momento:
Guía en castellano sobre Divi: Back-end
Por otro lado tenemos el Front-end, un modo que te permite diseñar tus páginas en la parte visual, directamente sobre ellas:
Guía en castellano sobre Divi: Front-end
Dado que ambos tienen sus pros y sus contras Elegant Themes ha desarrollado recientemente el Wireframe, un híbrido entre el back-end y el front-end para que te beneficies de las ventajas de estos modos de edición ?:
Guía en castellano sobre Divi: Wireframe
Disposición de layouts
Como verás los módulos son los bloques básicos del diseño, cada uno con una funcionalidad específica que dotará a tu web con la potencia que necesita.
Y te preguntarás: ¿pero cómo los inserto en mi web?
Pues de forma muy simple: a través de los distintos diseños o layouts que Divi Builder te ofrece.
Con el plugin contarás con hasta 20 disposiciones de diferentes a través de sus secciones estándar, de anchura completa y especial:
Guía en castellano sobre Divi: Layouts
Para ello sólo necesitas crear una sección, elegir el tipo de columna que necesitas e instalar allí los módulos.
Esta amplia gama de layouts es esencial ya que con ellas diseñarás páginas con disposiciones de todo tipo.
Integración de 46 módulos listos para su instalación
Como vimos los módulos serán elementos claves en tu web para aportarle a ésta un sin fin de funcionalidades diferentes.
Divi Builder cuenta en la actualidad 46 módulos con un montón de particularidades distintas que vienen la verdad muy bien para evitar tener que estar instalando plugins todo el tiempo:
Guía en castellano sobre Divi: Módulos
Los módulos que existen en la actualidad son:
- Acordeón.
- Anuncio.
- Audio.
- Barra lateral.
- Blog.
- Botón
- Búsqueda.
- Comentarios.
- Conmutador.
- Contador de número
- Contadores circulares.
- Contadores de barra.
- Correo electrónico Opt-in
- Código.
- Formulario de contacto
- Galeria
- Imagen.
- Iniciar sesión
- Llamada a la acción
- Mapa.
- Navegación por los mensajes.
- Persona.
- Slider.
- Slider para vídeos.
- Código de anchura completa.
- Imagen de anchura completa.
- Mapa de anchura completa.
- Menú de anchura completa.
- Portafolios de anchura completa
- Slider de anchura completa.
- Slider de mensaje con anchura completa.
- Título de anchura completa.
- Título de publicación de anchura completa.
Configuraciones y ajustes de todo tipo
El proceso de diseño con Divi Builder no termina con la selección de tus layouts y la instalación de tus módulos.
Todos los elementos básicos de Divi Builder (secciones, filas y columnas) se configuran por medio de tres pestañas principales:
Contenido
Es el lugar donde incluirás el contenido principal: una imagen, video, texto, etc…
Guía en castellano sobre Divi: Ajustes de contenido
Diseño
Aquí realizarás todas las configuraciones relativas a la apariencia de ese elemento como por ejemplo: el tipo de alineación, el tamaño del texto, color, tipo de fuente, relleno, margen, etc…
Guía en castellano sobre Divi: Ajustes de diseño
Avanzado
Si sabes de CSS esta puede ser una de tus secciones favoritas ya que podrás incluir clases e identificadores así como todo tipo de reglas CSS:
Guía en castellano sobre Divi: Ajustes avanzados
Guarda tus diseños en la Biblioteca de Divi
Imagina que diseñas tu web pero hay partes que te gustan tanto que te encantaría poder aplicarlas en otras páginas o incluso en otro sitio web distinto.
Pues esto es totalmente posible gracias a la Biblioteca de Divi:
Guía en castellano sobre Divi: Biblioteca Divi
Este elemento es fundamental y una de las razones por las que tanto Divi como Divi Builder me convencen como un tema top para diseñar cualquier sitio web.
Con la biblioteca no sólo vas a poder guardar el diseño de una página completa sino prácticamente todo lo que diseñes con Divi Builder:
- Diseños de páginas completas.
- Secciones.
- Filas.
- Columnas.
- Módulos
El proceso es muy simple:
- Diseña un elemento.
- Guárdalo en la biblioteca.
- Instálalo.
Lo bueno es que la instalación no sólo se puede realizar en tu sitio web sino en cualquier otro que tenga Divi Builder gracias al mecanismo de exportación/importación de archivos que te mostraré más adelante.
Elementos globales
Otra opción muy interesante son los elementos globales.
Los elementos globales son aquellos que, una vez creados e implementados en tu web, permanecen conectados de tal forma que un cambio en la configuración de uno se reflejará inmediatamente en los demás:
Guía en castellano sobre Divi: Elemento global
De esta manera podrás implementar elementos muy interesantes como un pié de página más completo que el que Divi te trae por defecto, un call to action, un área con texto, un formulario de contacto para captar suscriptores, etc…
Plantillas prediseñadas
Otra manera de ahorrar mucho tiempo con el diseño es con las plantillas prediseñadas que trae Divi Builder en su biblioteca:
Guía en castellano sobre Divi: Plantillas prediseñadas
Encontrarás una gran variedad de plantillas clasificadas por temáticas para que selecciones la que más te convenga.
Además, tanto Elegant Themes como otras empresas ofrecen plantillas gratuitas a tu libre disposición.
Exportación / importación de diseños y configuraciones
Otra herramienta super útil es la exportar e importar tanto diseños como configuraciones.
Por un lado, tras almacenar un diseño en la biblioteca de Divi podrás exportarlo para luego importarlo en otra web con Divi Builder:
Guía en castellano sobre Divi: Exportar e importar diseños
De igual forma tendrás la posibilidad de hacer lo mismo con todos los ajustes y configuraciones realizados en los siguientes elementos
- Opciones del tema.
- Personalizador de temas.
- Personalizador de módulos.
Guía en castellano sobre Divi: Exportar e importar configuraciones
Como ves si te dedicas al diseño web de forma profesional la cantidad de tiempo que te ahorrarás será enorme. ?
Corrige errores fácilmente
Divi Builder trae consigo botones de deshacer/rehacer para que siempre puedas rectificar cualquier error que hayas cometido:
Guía en castellano sobre Divi: Deshacer/rehacer
Así mismo tienes la opción historial para que puedas volver atrás seleccionando un estado anterior:
Guía en castellano sobre Divi: Historial
Además, recientemente añadieron una serie de comandos en forma de shorcuts para que a través del teclado de tu ordenador puedas copiar, cortar, pegar, deshacer, rehacer y un montón de acciones super interesantes que te ahorrarán mucho tiempo.
Búsqueda
Una funcionalidad nueva muy interesante es la del buscador de opciones que encontrarás en todos los elementos de diseño de Divi Builder.
Sólo tienes que introducir la palabra clave de las opciones que te interesen configurar y se mostrarán todas ellas.
De esta forma irás directo al grano evitando perder bastante tiempo. 😉
A/B Testing con Divi Leads
Divi Builder trae incorporado un nuevo sistema de testeo que te permitirá analizar el potencial de tus landing pages para saber cuál de ellas genera más conversiones.
Sólo tienes que crear varios tipos de diseños y configurar el sistema.
Divi Leads se encargará de mostrar tus versiones a usuarios distintos para recopilar posteriormente toda la información.
Guía en castellano sobre Divi: Divi Leads
Una vez hecho esto tendrás a tu disposición un completo informe estadístico donde toda la información recogida será visualizada en forma de gráficos y otros elementos permitiéndote comprender de un rápido vistazo cuáles de tus diseños están funcionando mejor.
Diseño Responsive
Cada día el uso de dispositivos móviles tipo tablet y smartphones está creciendo exponencialmente. Por eso el diseño responsive, es decir, la capacidad que tu sitio web tiene para adaptarse a los distintos dispositivos móviles, es fundamental.
En este aspecto Elegant Themes no sólo se han asegurado de implementar un diseño fluido sino que también te ofrece distintas herramientas para que tú mismo intervengas en el proceso:
Guía en castellano sobre Divi: Diseño responsive
Podrás configurar estilos como el margen, padding, tamaño de fuente y la visualización o no de cada uno de los elementos dependiendo del dispositivo que selecciones.
Seguridad con Divi
La seguridad de tu sitio web es algo que debes tener muy en cuenta desde el principio.
Por esa razón desarrollé mi artículo Cómo aumentar la seguridad de tu sitio web sin complicaciones con el objetivo de que tengas las bases para implementar un sistema de seguridad sólido que blinde tu sitio web.
Elegant Themes se toma también muy en serio este aspecto.
Prueba de ello son las auditorias a las que se han visto sometidos continuamente por Sucuri una empresa internacional especializada en seguridad web:
Guía en castellano sobre Divi: Certificado de seguridad con Divi
Actualizaciones
Esto mola y mucho. ?
Te cuento: Elegant Themes publica mejoras frecuentes a través de sus actualizaciones eliminando así posibles errores de código que afecten tanto la experiencia de usuario como la seguridad.
Pero aparte de esto están incorporando nuevas funcionalidades que te permitirán diseñar de forma mucho más eficiente.
Algunos ejemplos recientes son:
- Wireframe view.
- Barra de búsqueda en los módulo.
- Nuevas opciones de background.
- Mejora en el sistema de documentación.
Mejoras que no te van a costar ni un sólo céntimo ya que son totalmente gratuitas. ?
Precio
Elegant Themes cuenta en la actualidad con 2 planes de contratación:
Guía en castellano sobre Divi: Precios Elegant Themes
Yearly Access
Por 89$ al año vas a disponer de los siguientes productos:
- Acceso a todos los temas: casi 90 temas a tu disposición.
- Acceso a todos los plugins: podrás usar los plugins Divi Builder, Monarch y Bloom desde el primer momento.
- Actualizaciones de todos tus temas: frecuentes mejoras en el código.
- Soporte premium: tus preguntas serán respondidas a cualquier hora del día.
- Uso ilimitado de sus productos: podrás instalarlos en tantos sitios web como quieras.
- Garantía de 30 días de devolución: en caso de no estar satisfecho te devolverán el dinero sin ningún problema.
Lifetime Access
Si eres diseñador web y/o quieres ahorrar dinero a medio y largo plazo por un precio de 240$ vas a disfrutar de todos los beneficios del plan anterior de por vida.
Nunca tendrás que renovar más y podrás seguir sacándole todo el partido a tus productos a la vez que disfrutas de los nuevos que vayan saliendo.
Cómo crear una home page con Divi en unos minutos
Para ir terminando te muestro un vídeo muy práctico y didáctico donde te enseño paso a paso cómo diseñar por ti mismo una home page con la ayuda de Divi y Div Builder.
¡Vamos a ello!
¿Es todo es tan bonito como lo pintan?
No, ni mucho menos.
Ni Divi ni Divi Builder son productos perfectos y el que diga lo contrario está mintiendo. Lo siento pero es así.
Hay varias cosas que considero que debes tener en cuenta:
- Aprendizaje: dominar las herramientas que te ofrece Divi y Divi Builder requiere dedicación. No esperes dominarlo todo en un par de días. Te va a llevar algo de tiempo adquirir un conocimiento profundo de ellas.
- Inglés: tanto la documentación como los videos que Elegant Themes te ofrece se encuentran en inglés. Si bien todos sus tutoriales están explicados a la perfección no deja de ser un impedimento para aquellos que no dominen bien este idioma.
- Consumo de recursos: tenerlo todo a tu disposición sin tener que tocar nada de código tiene un precio que hay que pagar. El tema ocupa más tamaño otros productos como Génesis. Es fundamental adquirir un buen hosting que te permita mantener tus velocidades de carga al nivel que deben estar.
- Configuraciones: algunas opciones de configuración, como por ejemplo las del SEO, son demasiado extensas. Es mejor a veces mejor delegar esta tarea a plugins de calidad tipo Yoast SEO.
- Efecto lock-in: si un día decides prescindir de Divi Builder y usar otro plugin esto se convertirá en una molestia. Esto se debe a que al desinstalarlo, en lugar de dejarte intacta toda la información, se mostrará una serie de shortcodes en su lugar. Si borras los shortcodes se borrará la información por lo que tendrás que diseñar esas páginas previamente. Afortunadamente existen soluciones y además tengo constancia que la empresa está trabajando en este asunto.
¿Preparado para lanzar ya tu web con Divi o necesitas más información?
Seguramente toda la información que te acabo de mostrar te ha sabido poco. Te entiendo perfectamente ya que, como todo en la vida, para dominar una herramienta necesitarás horas de práctica e investigación contínua.
Pero no te preocupes: es cuestión de perseverancia y formación constante.
No obstante, si eres de los que quieres atajar el camino y crear una web profesional, elegante y con alto poder de conversión tienes ahora a tu disposición mi curso Crea tu web con WordPress y Divi.
Con este curso te llevas:
- 5 módulos de formación constante donde aprenderás todo lo necesario: desde cómo contratar tu hosting y dominio hasta el proceso de diseño de todas y cada una de las páginas fundamentales que tu web debe tener.
- Acceso de por vida a todo el contenido.
- Actualizaciones ilimitadas.
- Soporte contínuo través del foro de alumnos.
- Te regalo Divi con actualizaciones ilimitadas.
- Y no olvidemos que Divi es un 2 x 1 ya que con su instalación puedes hacer uso también de su constructor visual Divi Builder.
La idea es simple: ayudarte a lanzar tu proyecto digital lo antes posible. ¿En cuanto tiempo? ¡Eso dependerá de ti!
Pero puedo asegurarte que tendrás todo el material necesario junto con mi apoyo para que no te falte de nada.
Cientos de alumnos ya se han beneficiado de este curso y siguen enriqueciéndose compartiendo experiencias en el foro del curso.
¿Mi recomendación? ¡Prueba el curso y luego me cuentas! 😉 ¡Tienes 15 días de garantía!
Crea tu web con WordPress y Divi
Y aquí termina la guía en castellano sobre Divi. ¿Qué te ha parecido? ¿Tienes más dudas? ¡Te espero en los comentarios! 🙂
Hola Pedro.
Muchas gracias por este artículo tan completo, la verdad es que no conocía esta herramienta, así que ahora me tendré que poner manos a la obra siguiendo tus consejos para sacar el máximo partido cuando lo instale.
Saludos
Hola David,
Me alegro que lo hayas encontrado interesante 😉
La verdad es que Elegant Themes está desarrollando productos de muy buena calidad y Divi es sin lugar a dudas uno de ellos. Normal que esté ya posicionado como uno de los mejores temas para WordPress del mercado.
Ojo, el producto tiene aún cosas que mejorar. Esto hay que dejarlo claro. Pero lo bueno es que la empresa está incluyendo actualizaciones y mejoras de forma frecuente y eso es importantísimo, por eso tengo tanta fe en ellos.
Si te animas a probarla no dudes en comentarnos que tal te va.
¡Un abrazo!
Hola Pedro!
Súper completa esta guía sin dudarlo la he compartido con mi audiencia que seguro les será de mucha utilidad. Ya no tendrán excusas de no atreverse a crear su propia web con lo fácil que lo hace el constructor de Divi. Aunque yo soy algo más de usarlos en momentos concretos como por ejemplo una landing page, para quien se ve con miedos, realmente recomendable.
Un gran trabajo, ¡saludos!
Rosa León
¡Hola Rosa!
Un placer verte por aquí compañera y mil gracias por compartir el artículo con tu audiencia 😉
Si, lo bueno de Divi y Divi Builder es que su uso es bastante sencillo y el potencial enorme así que ya no hay excusas para diseñar, jeje.
¡No te pierdas las actualizaciones de Elegant Themes ya que van a tope! Te dejo el enlace por si te interesa: https://www.elegantthemes.com/blog/category/theme-releases
Ya me dices 😉
Abrazos
¡Buenas Pedro!
Si hay algo que tenía clarísimo cuando me propuse lanzar mi blog el año pasado es que merecía la pena invertir en un buen tema. ¡Al pedir referencias DIVI estaba entre los candidatos en mi top 3!
Sé que a quién esté en una situación parecida de indecisión en estos momentos tu artículo le va ayudar mucho a salir de dudas, y que tu opinión y los vídeos le van a servir para perder el miedo que puedan tener a lo desconocido 😉
A mí me costó decidirme y al final elegí otro tema, un poco a voleo, jeje. Me pregunto si hubiera escogido ese mismo después de haber leído con un post como este…
Te felicito por el trabajazo 🙂
Un abrazo
¡Hola Beatriz!
Muchas gracias de corazón por pasarte por mi blog y aportarnos tu experiencia.
Elegir un buen tema es como bien dices una inversión y no un gasto. El «problema» es que hay muchos y tanta información que muchas veces uno no sabe cuál elegir.
Eso es precisamente lo que intento aportar con mi blog dejando claro que Divi es una magnífica elección para un usuario con conocimientos en diseño web de todo tipo.
Aunque ojo, como cualquier otro producto, no es perfecto y necesita mejoras
Pero lo bueno es que la empresa Elegant Themes está incluyendo mejoras frecuentemente y añadiendo más funcionalidades. Y todas gratuitas claro. De hecho sacaré la semana que viene un post de ello 😉
Muchas gracias por todo y seguimos en contacto,
Un abrazo
Muchas gracias x el tutorial, es difícil encontrar un material tan buen en español. Éxitos! 🙂
Hola Flor,
¡Bienvenida¡ Muchas gracias por pasarte por mi blog y aportarnos tu opinión.
Me alegro que te sea de utilidad y puedas aplicar lo aprendido en cualquiera de tus proyectos 🙂
Aquí estaremos para lo que necesites, tanto sobre Divi como cualquier otro producto relacionado con WordPress
Un abrazo fuerte
A qué se puede deber el error de que el builder de divi no se active en el front end??
Hola!
La verdad es que no he tenido un problema de ese tipo.
¿No puedes activarlo en el front-end?¿Has probado si tienes una actualización del plugin que descargar? Si es así hazlo.
Si te sigue pasando puedes probar desactivando tus plugins y activar uno a uno comprobando si alguno entra en conflicto con Divi Builder y así descartas.
Ya me cuentas.
Un saludo!
Hey Pedro. Buen artículo. Yo uso también DIVI para mi sitio web y para el de mis clientes. Es una herramienta muy intuitiva y te permite maquetar sin complicaciones. Para serte honesto, no sabía cómo instalar el Child Theme así que me ha servido bastante. Voy a probarlo en mi web para hacer algunos diseños diferentes.
En mi caso compre el plan anual, pero me surge la duda, si instalo este plugin en la web de mis clientes, cuando se me acabe el año debo actualizarlo en las webs de ellos? No me queda muy claro :/
De nuevo muy buena guía. Saludos desde Colombia parcero. Éxitos
Hola Yeferson,
Gracias de nuevo por pasarte por aquí.;)
¿Usas Divi entonces? ¡Perfecto! Es una muy buena elección y tiene una equipo que, como bien sabrás, está incluyendo muchas mejoras que están de lujo.
Sí, lo del tema hijo está muy bien siempre que necesites personalizar vía CSS y/o PHP tu web o la de tus clientes. Yo por ejemplo ahora estoy diseñando una para uno de mis clientes y he tenido que recurrir a un tema hijo para hacer cambios en las categorías de las entradas ya que Divi aún no ofrece una funcionalidad para este tipo.
Sobre el tema de las actualizaciones: si tu plan es anual, instalas los productos de Elegant Themes en la de tus clientes, pasa ese año y no actualizas ellos no podrán actualizar esos productos porque éstos están vinculados a tu licencia.
Por eso, si eres diseñador yo siempre recomiendo adquirir el plan de por vida, el Lifetime Access. Aunque al principio es más caro a medio plazo sale mucho más rentable. La verdad es que merece la pena.
Ya me dirás.
¡Un abrazo!
Hola, soy Galaad.
Acabo de leer tu respuesta a Yeferson.
Yo en nada voy a comenzar a diseñar la web de un cliente. Me gustaría saber para tenerlo claro si lo ideal es que deba cobrarle por una licencia para él con la que yo diseñarle la web además del servicio de diseño en sí.
Gracias
Hola de nuevo,
Yo normalmente incluyo Divi, además de otros productos, con el diseño web para mis clientes. Eso le da un valor añadido a tu servicio y evitas que ellos tengan que gastarse un dinero extra en adquirir el tema.
Como tengo la licencia de Divi Lifetime Access no tengo problema, ya que ésta no caduca nunca.
Le instalo el tema, los plugins premium que necesite, activo la licencia y listo.
Espero haberte ayudado 😉
Osea, comprarle la licencia para siempre (Divi Lifetime Access) a cada cliente y no cobrársela en el tarifa final. Querías decir eso?
Hola,
No exactamente.
Elegant Themes te permite instalar todos sus productos en tantos sitios web como quieras.
Si quieres instalar Divi en la web de un cliente sólo tienes que:
1. Descargar Divi.
2. Instalarlo en la web.
3. Añadir tu nombre de usuario y clave API en el panel de Divi «Opciones del Tema > Updates»para que tu cliente pueda actualizar Divi.
De esta forma se ahorrará tener que comprar Divi o cualquier otro producto de Elegant Themes.
¡Un abrazo!
Hola Pedro!
Me han recomendado tu blog una amiga diseñadora gráfica porque tengo Divi en mi web como theme y quería saber cómo configurarlo para que los posts del blog me aparezcan en el medio de la pantalla y no ligeramente en el lateral izquierdo como ahora.
Estamos haciendo pruebas de momento con el código css con los técnicos en el foro del soporte oficial de Elegant Theme, pero nothing de nothing. No se provoca los cambios.
Sabes algo al respecto? Ya que el texto centrado y más estrecho de laterales es más fácil de leer-escanear para el lector.
Gracias!
¡Hola Galaad!
Encantando de conocerte.
Pues para los posts sólo tienes que dirigirte al back-end de cada post, es decir, en editar entrada y a la derecha de tu entrada verás un menú llamado «Ajustes de publicación de Divi». Ahí podrás seleccionar que tu post tome el ancho completo de tu página o se sitúe a la izquierda o derecha.
No tienes que recurrir a CSS ni nada por el estilo. Es una funcionalidad que te ofrece el tema por defecto.
Ya me dices, ¿ok?
Un abrazo
Nada. No te lo permite. Solo tener la barra lateral en la izquierda, en la derecha o texto ancho del todo. Yo quiero la columna del texto totalmente centrada y que además pueda configurar su anchura.
Hola Galaad,
Si quieres personalizar el ancho tendrás que utilizar CSS.
Con algo así te bastaría:
.single-post #main-content .container {
max-width: 800px;
margin: auto;
}
Podrás pegar ese código en la hoja de estilos de tu tema hijo (si tienes uno) o en la casilla «CSS personalizado» de las Opciones del tema de Divi.
Si no se reflejan los cambios prueba a borrar la caché tanto de tu navegador como de tu plugin caché, si utilizas uno.
Si siguiera sin visualizarse comprueba que tu proveedor hosting no tiene implementando un sistema caché por defecto. De ser así tendrás que pedirle que te lo desactiven.
Un abrazo
El parámetro de «margin: auto;» puede ser otro? Ahora si me deja configurar el ancho de texto, pero la columna sigue estando ligeramente a la izquierda. Y la quiero en el medio. Como en este mismo artículo tuyo de Divi.
La cuestión es facilitar el escaneo al lector lo máximo posible,
Hola,
Realmente tendría inspeccionar tu post para ver los estilos que están afectando a tu página.
Prueba esto:
body #page-container #left-area {
width: 100%;
}
Sino ya me dices y lo veo con más detalle 😉
Abrazos
Hola Pedro.
He aplicado los dos códigos que me has dicho seguidos:
.single-post #main-content .container {
max-width: 800px;
margin: auto;
}
body #page-container #left-area {
width: 100%;
}
Pero en los artículos se me visualiza ahora la línea del margen:
http://www.galaadlopez.com/dinero-con-sentido/
Hola,
Aplica:
#main-content .container:before {display: none;}
De todas formas asegúrate que en tu entrada has seleccionado que el contenido tome el ancho completo a través de los «Ajustes de publicación de Divi»
Te lo comento porque lo ideal es hacerlo todo con Divi y en última instancia aplicar estilos CSS.
Un abrazo
Hola Pedro!!!
Ya había podido disfrutar de tus vídeos en la END sobre Divi y gracias a ello, tomé la decisión de utilizarlo.
Simplicidad y rapidez para maquetar. Muy intuitivo y se aprende bastante rápido.
Darte las gracias por esos vídeos y por este pedazo de guía en español.
Un abrazo.
Hola Rubén,
¡Qué bueno verte por aquí!
Me alegro que el artículo te sea haya sido de utilidad y que poco a poco estés pudiendo diseñarte tu propia web con Divi a tu medida, tú solito. 😉
Así te ahorras una buena pasta y de paso aprendes, que el saber no ocupa lugar, ¿no? jajaj
Pues nada, muchas gracias por pasarte y te espero en el curso de la END de Antonio G, que pronto sacamos más módulos entre los cuáles uno sobre Divi, por supuesto 😉
¡Un abrazo!
Muchas gracias Pedro, estoy aprendiendo un montón contigo. He decidido dar el salto y hacer mi blog más profesional y todo lo que cuentas en tu blog y en los tutoriales de youtube me está resultando interesantísimo. En un par de días empezaré con todo…así que estoy ilusionada y asustada a la vez. Gracias de nuevo por tu trabajo.
Saludos
Hola Marta,
Encantado de verte por aquí y muchísimas gracias por pasarte por aquí y dedicarme algo de tu valioso tiempo.
Sinceramente me alegro un montón que estés contenta, animada y que te resulte de valor lo que te estoy mostrando.
Aunque parezca mentira comentarios como éste me dan una fuerza enorme para seguir adelante con mi proyecto y si encima me dices que te has decidido a dar el saldo para diseñarte un blog más profesional pues ya me alegras el día del todo 😉
Muy pronto volveré a la carga con más material para el blog (llevo unos meses de parón con varios proyecto) que seguro que te va a venir estupendamente.
Lo que necesites por aquí estaré,
¡Un abrazo!
Hola de nuevo Pedro!
Bueno, parece que ya tengo la estructura (más o menos) como la quiero, a falta de detalles y me he puesto a escribir las entradas…y llegó el problema!! jeje
He visto muchos vídeos y he leído mucho…me recomiendas que haga las entradas con el constructor de DIVI o que las haga «normal»…no soy capaz hacerlo bien, no encuentro como editar la letra.. el personalizador de temas «no me hace caso» y cuando modifico algo…no varía en mi entrada…en fin…que estoy hecha un mar de dudas!!
Gracias de antemano y buena semana!!!
Hola Marta,
¿Qué tal? Me alegra verte por aquí 😉
Te comento.
Las entradas las recomiendo editar siempre con el editor de WordPress en lugar de utilizar un plugin maquetador como por ejemplo Divi Builder, Elementor, etc… De esta manera te asegurarás que el contenido nunca se pierda si desinstalaras alguno de estos plugins o se diera un fallo en la visualización del contenido creado con ellos.
Para realizar ese diseño de tus entradas Divi puedes hacer parte de ello a través del «Personalizador de Temas > Blog > Publicación». Esta herramienta te permitirá cambiar los estilos de tu título y metadatos de tu entradas, pero nada más. El resto lo tienes que hacer con CSS que es un lenguaje que te permite modificar el diseño de cualquier elemento de tu web.
De todas formas me apunto tu feedback para crear un artículo en el futuro y así ayudaros un poco más con el diseño de vuestra web.
¿Te parece?
¡Un abrazo!
Hola!
Enhorabuena por su web!
Quisiera saber sobre el idioma de Divi para gestionarlo. Está en castellano?
Por otro lado, quería saber si decido no renovar al año de contrato y deja de actualizarse, si podría tener muchos problemas de incompatibilidad o puedo aguantar un tiempo.
Muchas gracias.
Saludos.
¡Hola Jesús!
¿Qué tal?
Gracias por pasarte por aquí.
Sí, Divi se encuentra en castellano así que no vas a tener problemas para comprender su funcionamiento.
Con respecto a la otra pregunta. Lo recomendable es actualizarlo siempre que puedas. Eso no quiere decir que no vaya a funcionar pero si que pueden darse problemas de incompatibilidad con otros elementos básicos de tu web como por ejemplo los plugins así como problemas de vulnerabilidad en tu web.
Por esta razón yo lo que hice en su momento fue adquirir la licencia de por vida, la Lifetime Access. De esta forma aunque más caro al principio a la larga salgo ganando ya que no tengo que renovar más y dispongo de todo lo que me ofrece Elegant Themes.
Si necesitas un pequeño descuento pásate por mi sección recursos y allí encontrarás uno para Divi. No es un descuento brutal pero al menos te ayudará un poquito más.
¡Un fuerte abrazo!
Hola Pedro!
Tengo una duda con los temas hijos. Cuando quieres actualizar DIVI, sólo tienes que actualizarlo y automáticamente se actualiza en el tema hijo sin modificar las características de tu web?
¡Hola Marta!
Sí, sólo tienes que actualizar el tema Padre, es decir, Divi en tu caso. Al ser un tema hijo éste heredará las características de su tema padre junto con las nuevas actualizaciones y a la vez conservará las modificaciones que hayas implementando en él con código CSS o PHP (si es que hiciste alguna).
Abrazoos
Muchas gracias Pedro!!
¡A ti Marta!
Un abrazo
Hola Pedro, enhorabuena por tu trabajo y mil gracias por toda la info, me está sirviendo un montón.
Tengo un problemilla y quería saber si alguien me puede echar un cable:
Estoy terminando una web con Divi, mi menú principal se compone de 5 pestañas o botones (enlaces personalizados) que enlazan a cada bloque correspondiente del contenido, todo funciona perfecto.
Para adaptar la vista a móvil y tablet he tenido que crear 3 bloques modificados nuevos que se muestran sólo cuando la pantalla es más pequeña, todo esto con la opción de ocultar o mostrar en cada bloque del constructor.
La cosa es que cuando la vista es para escritorio las pestañas del menú redireccionan perfectamente, pero cuando la pantalla es más pequeña esos enlaces a esos 3 bloques no funcionan.
Ya he probado a darles la misma id CSS que a los que se muestran cuando está en vista escritorio y nada de nada…me queda muy poquito y este tema me trae de cabeza y evidentemente o puedo lanzar la web con este problema.
¿Hay alguna alternativa?
Muchas gracias de antemano!!
¡Hola!
¿Qué tal? Me alegra muchísimo saber que esta guía te esta sirviendo de utilidad 😉
¿Podrías compartir la url de tu proyecto y así lo podemos mirar con mayor facilidad?
¡Un saludo!
Hola Pedro como puede ser que un tema premium como Divi no tenga soporte gratuito?
Hola Diego,
El soporte de Divi vienen incluído siempre que tengas una licencia contratado con ellos. Ocurre con Divi al igual que con cualquier otro producto premium. Es realmente por lo que pagas anualmente (o de por vida). Por el soporte y las actualizaciones.
Ten en cuenta que detrás del soporte hay gente que trabaja y por tanto recibe un sueldo. De lo contrario sería totalmente inviable.
Saludos
Magnífico tutorial…
Le traigo una duda que nos está surgiendo en el desarrollo del diseño para móvil de una tienda en WordPress con WooCommerce y DIVI:
Estamos intentando que en la cabecera del desarrollo móvil de la tienda aparezca la barra del menú con el logotipo de la empresa, el icono del menú hamburguesa, el icono de búsqueda, un icono de acceso a «Mi cuenta» y un icono para el carrito de compra.
Tal y como DIVI lo personaliza quedaría con el logotipo de la empresa, el icono de búsqueda y el icono del menú hamburguesa.
¿Sabríais cómo hacerlo en DIVI? ¿O en su defecto qué hook debería reprogramar en el tema hijo creado?
Muchas gracias…
Sigue así que es de mucha utilidad a la comunidad…
Un saludo…
Hola Antonio,
¡Muchas gracias!
Nos es un poco difícil orientarte por aquí. Envíanos un mensaje privado a través de nuestro formulario de contacto para ofrecerte asistencia personalizada y resolver tu caso lo mejor posible.
Un abrazo
Hola David buenos tardes! Tengo una duda y no se si podrías ayudarme.
Quiero poner dos o tres fotos en mi portada principal de la web, si puede ser que se cambiaran por otras 3 (slider creo que es), y no hay manera de encontrarlo.
Solo encuentro la opcion de poner un collage y no es lo que quisiera.
Si pongo 4 columnas luego en el movil se ven de arriba a abajo y queda fatal…
¿Podrias ayudarme porfa?
Muchas gracias
Silvana
Hola Silvana,
Encantado de hablar contigo por aquí 😉
¿Has probado a hacer uso del módulo Slider de Divi? Aquí tienes más información.
Saludos
Buenas tardes,Pedro.
con respecto al curso de diseño en WordPress con Divi, entiendo que la licencia de Divi y D. Builder es para exclusivamente para la primera web que diseñemos, no para todo lo que hagamos, no? O sea, si yo hago tres landing pages, por ejemplo, solo podría usar Divi con una, para las demás tendría que sacar la licencia. ¿Es así?
Muchas gracias y un saludo
Hola David,
¿Qué tal?
Exacto, nosotros te instalaríamos la licencia en la web donde vayas a trabajar con Divi. Eso implicaría que puedes diseñar tantas landing pages en tu sitio web como quieras.
Si posteriormente compras otro dominio y quieres usar Divi en él tendrás que tener tu propia licencia lo que te permitiría instalar el tema no sólo en esa web sino en tantas como quieras.
Espero haberte ayudado