En este post te quiero enseñar a instalar y utilizar el tema Divi, que es hoy en día el tema más utilizado a nivel mundial en WordPress.
Te voy a mostrar las principales opciones de personalización de Divi que son las «Opciones del tema» y el «Personalizador de temas». Así como algunos de los increíbles efectos que se pueden implementar con el maquetador visual que incluye Divi para crear el contenido de las diferentes páginas del sitio web.
Un elemento clave que no se va a tratar en este post son los layouts o plantillas de Divi. Pero, te dejo un enlace a un post sobre su uso: plantillas Divi
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
ÍNDICE TUTORIAL DIVI
- ✅ VÍDEO PRESENTACIÓN DE DIVI
- ✅ PLANES, PRECIOS DE PLANTILLA DIVI + DESCUENTO:
- ✅ CREAR PÁGINA WEB CON DIVI
- ✅ OPCIONES DE CONFIGURACIÓN DE LA PLANTILLA DIVI
- ✅ RECURSOS Y OPCIONES DE DISEÑO DE DIVI
- ✅ DIVI SUPPORT CENTER - HERRAMIENTA ANÁLISIS Y SOPORTE DE DIVI
- ✅ VÍDEO: COMO CREAR UNA PÁGINA WEB CON DIVI EN MENOS DE 2 HORAS
Curso WordPress online con Divi
✅ VÍDEO PRESENTACIÓN DE DIVI
Aquí te dejo un vídeo presentación de Divi para que conozcas sus principales características.
SUPER DESCUENTO DIVI
✅ PLANES, PRECIOS DE PLANTILLA DIVI + DESCUENTO:
😮Ahora 10% de descuento por tiempo limitado
->🥇PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins.
Este es un plan de renovación anual. Es decir, para seguir disfrutando de actualizaciones de la plantilla debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras.
El precio de este plan es de 89$ + IVA, pero con el descuento del 10% se te quedará en 80 $ + IVA
NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $80 con el descuento ya aplicado.
DESCUENTO PLAN YEARLY ACCESS
->🥇PLAN LIFETIME ACCESS: El plan Lifetime Access incluye la plantilla Divi + Plantilla Extra + 3 plugins.
Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de actualizaciones y todos recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras
El precio de este plan es de 249$ + IVA, pero con el descuento del 10% se te quedará en 224$ + IVA
NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $224 con el descuento ya aplicado.
DESCUENTO PLAN LIFETIME ACCESS
✅ CREAR PÁGINA WEB CON DIVI
Lo primero que tendrás que hacer después de comprar Divi es instalarlo.
En este post te explico detalladamente como instalar Divi en WordPress y como activar la licencia
Existen otras maneras de instalar plantillas en WordPress. Aquí te dejo un enlace a un post donde explica todas las formas
SUPER DESCUENTO DIVI
¿Permite Divi un tema hijo o child theme?
Como con cualquier otra plantilla de WordPress, puedes usar el tema divi directamente o utilizar también un tema hijo o child theme.
Cuando se ralizan modificacioes en el código de cualquier plantilla de WordPress y posteriormente se procede a realizar una actualización de la misma se borran todas las modificaciones realizadas, lo que implica que hay que volver a realizarlas.
Se realizan modificaciones en el código de una plantilla de WordPress para conseguir elementos de diseño que nos son posibles a través del panel de administración de la plantilla. Pero también es posible incluir códigos que modifiquen o implementen alguna funcionalidad de WordPress o de alguno de sus plugins. Por lo que independientemente de la plantilla que uses con WordPress es probable que con el tiempo tengas que realizar alguna modificación.
Por esta razón mi recomendación es que uses una plantilla hijo o child theme de Divi.
Instalar un child theme o tema hijo es igual que una plantilla normal. Se realiza siguiendo el mismo procedimiento.
De esta manera instalaremos la plantilla divi y después la plantilla divi hijo (por este orden). Lo único que has de tener en cuenta es que una vez instaladas, la plantilla que tendrás que activar será divi hijo.
Aquí te dejo un post donde te explica todos los detalles sobre los temas hijo, además desde este post te puedes descargar un child theme o tema hijo de Divi.
*** Enlaces para ampliar información sobre Divi ***
✅ OPCIONES DE CONFIGURACIÓN DE LA PLANTILLA DIVI
Te voy a dar un esquema para que te familiarices con el lugar donde puedes encontrar las diferentes opciones de configuración del tema divi:
SUPER DESCUENTO DIVI
Opciones del tema de Divi:
Desde opciones del tema podremos, entre otras cosas: subir el logo, configurar las redes sociales en las que estamos presentes, hacer que el menú sea flotante o no, activar el botón de volver a la parte superior, añadir código de analytics, etc.
La pantalla de opciones del tema se divide en 8 pestañas: General, Navegación, Constructor, Diseño, Anuncios, SEO, Integración y Actualizaciones. Habitualmente usarás las pestañas General, Integración y Actualizaciones.
para acceder a las opciones del tema en Divi iremos a: “Divi > Opciones del tema”.
Opciones tema Divi
Personalizador de temas de Divi
Desde el personalizador de temas podremos realizar la inmesa mayoría de ajustes generales de diseño, diseño de header y diseño de footer. El personalizador de temas cuenta con un menú de opciones en el lateral izquierdo y una herramienta de previsualización de cambios en tiempo real en el lado derecho de la pantalla.
Desde el personalizador de temas de Divi podremos establcer el tipo general de fuente a utilizar, tamaños generales de las fuentes, colores de los enlaces, etc. También podremos realizar todos los ajustes de diseño del header o cabecera de la web y el footer o parte inferior del sitio web (incluso la zona de widgets).
También tenemos opciones de diseño específicas para tablets y móviles, así como opciones generales de diseño para el blog, botones y Woocommerce
Para acceder a las opciones del personalizador de temas iremos a: “Divi > Personalizador de temas”.
Al acceder al personalizador de temas encontraremos diferentes apartados según la parte de la web que queramos personalizar: Ajustes generales, Cabecera y navegación, Pie, botones, Blog, Estilos para dispositivos móviles, etc.
Personalizador de temas de Divi
De manera muy resumida, los principales bloques de opciones que puedes encontrar en «Divi > Opcione del tema» son:
a.- Ajustes Generales: Desde este apartado gestionaremos las opciones generales de diseño.
i.- Ajustes de formato: desde aquí personalizaremos las principales características dimensionales de la web. Anchura de sidebar y de la parte de contenido, posible diseño con caja, altura de sección y fila del page builder y color de énfasis.
Ajustes de formato de divi
ii.- Tipografía: desde este apartado configuraremos las diferentes tipografías que utilizará el tema divi para WordPress en la web. Elegiremos tipos de fuente, tamaño, espacio entre letras y estilos por defecto. Aunque luego en cada lugar concreto podremos personalizar los tipos de letras.
b.- Cabecera y Navegación: Desde aquí gestionaremos las opciones de personalización del diseño del header o encabezamiento de la web. Encontraremos los siguientes apartados según la zona a personalizar:
i.- Formato de cabecera: aquí elegiremos el tipo de diseño de cabecera que queremos, posición de logo y tipo de menú principal. Utilización o no de un menú tipo hamburguesa.
En este post puedes ver los diferentes diseños de header que podemos elegir con WordPress y Divi: Diseño de headers con Divi
ii.- Barra de menú principal: Desde aquí podremos personalizar el diseño de la barra de menú principal: color de fondo, color ítems menú, tipo de fuente, tamaño de fuente, tamaño del logo, altura barra de menú, etc.
Opciones de configuración de la barra de menú principal
iii.- Barra de menú secundario: aquí personalizaremos todas las opciones de diseño de la barra que aparece por encima del menú principal, que es la denominada barra de menú secundaria.
iv.- Ajustes de navegación fija: aquí personalizaremos todas las opciones de diseño del menú flotante, pegajoso o sticky cuando se hace scroll en la web.
v.- Elementos de cabecera: aquí elegiremos elementos que queremos que aparezcan en la cabecera (email, teléfono, redes sociales, etc).
c.- Pié: Desde aquí podremos personalizar el diseño del footer de la web. Colores de fondo, colores de fuentes, redes sociales, créditos de la web, diseño de widgets, etc.
Desde aquí podremos personalizar los elementos del pie que queremos que se muestren, las disposición y diseño de los widgets del footer, la personalización del diseño de la barra inferior del footer y en caso de tener un menú inferior, la personalización de éste.
✅ RECURSOS Y OPCIONES DE DISEÑO DE DIVI
Ahora te voy a mostrar unos cuantos de los increíbles recursos de diseño que incluye la plantilla Divi a través de sus constructor (page builder o maquetador visual) conocido como el Divi Builder, que sirve para crear el contenido de las diferentes páginas del sitio web.
Animaciones de los diseños realizados con Divi
Todos los elementos de diseño de la plantilla incluyen 7 posibles animaciones. Además, estas animaciones no son fijas sino que se pueden personalizar modificando sus parámetros por defecto, a través de los selectores de opciones de movimientos.
Sombras en todos los elementos de diseño de Divi
Todos los elementos de diseño de Divi disponen de opciones de sombreado. Incluso los elementos de texto, también disponen de este tipo de opciones. Divi dispone de 7 diseños diferentes de sombreados. Pero, podremos personalizar cualquiera de estos diseños hasta crear el sombreado perfecto. Incluso podremos personalizar el color de la sombra.
Opciones de diseño HOVER de Divi
Los elementos de diseño de Divi cuentan con opciones de diseño tipo «hover». Pero, ¿qué significa esto?.
Pues significa que podremos establecer cambios en color, tamaño y otros, cuando el usuario pone el puntero del ratón sobre un elemento de diseño. Por ejemplo, podemos hacer que cuando el usuario ponga el ratón sobre un icono, éste cambie de color. Por ejemplo, que cuando el usuario ponga el ratón sobre un botón, éste cambie de tamaño. Y todo lo que se te pase por la imaginación.
Aquí tienes más información y más vídeos sobre el efecto hover con Divi
SUPER DESCUENTO DIVI
Divisores / Separadores de Secciones
Otro recurso de diseño de Divi tremendamente interesante es la posibilidad de establecer casi cualquier diseño de separador de contenido dentro de una misma página. Es decir, separadores de secciones.
Estamos cansados de ver separadores de secciones rectos, sosos y que llaman poco la atención. Con Divi podremos crear separadores es la parte superior e inferior de una sección, podremos elegir entre un montón de diseños de separadores predefinidos, y ajustar los parámetros del diseño elegido. De esta manera conseguiremos crear separadores de secciones que llamen la atención al cliente y conseguiremos tener una web más moderna y fluida.
Personalización de Bordes con Divi
La mayoría de elementos de diseño de Divi disponen de potentes opciones de bordes. Desde las cuales podremos establecer grosor de borde, tipo de borde, radio de curvatura de las esquinas, color del borde. Pero, no solo eso. Además, podremos establecer estas opciones de diseño de bordes de manera independiente para bordes superiores, inferiores y laterales.
Márgenes interiores y exteriores
Todos los elementos de diseño de Divi cuentan con opciones para establecer márgenes exteriores al elemento (margin) y márgenes interiores (padding o relleno). De esta forma podremos controlar totalmente la separación entre los diferentes elementos del diseño.
Opciones de Transformación de Divi
Los elementos de diseño de Divi cuentan con una herramienta de transformación. Esta herramienta permite realizar modificaciones sobre cualquier elemento de las siguientes tipologías:
- Escala: esta opción permite modificar el tamaño de cualquier elemento. Esta modificación de la escala podemos realizarla de manera proporcional o independiente.
- Posición: podemos cambiar la posición de cualquier elemento sin importar los elementos circundantes.
- Rotación: podemos rotar o girar cualquier elemento según los 3 ejes espaciales
- Sesgar: podemos estirar y deformar cualquier elemento.
Aquí tienes más info sobre los efectos de transformación de Divi
✅ DIVI SUPPORT CENTER – HERRAMIENTA ANÁLISIS Y SOPORTE DE DIVI
Divi incluye una herramienta dentro de WordPress, para ir un paso más allá en el soporte de la plantilla y poder analizar rápidamente las causas que puedan estar produciendo un mal funcionamiento del tema Divi.
Para acceder al centro de soporte de Divi, has de acceder al panel de administración de WordPress e ir a: “Divi > Support Center”
Estado del sistema (System status) – Comprobación de la configuración del hosting y su compatibilidad con Divi
El system status de Divi nos aporta información sobre la configuración del servidor y nos indica si existe algún tipo de problema en la configuración del hosting que pueda estar produciendo algún tipo de problema en Divi.
Para ver el informe completo haz clic en el enlace: “Show full report”.
Si todos los parámetros están en verde, significa que la configuración del servidor es adecuada para un correcto funcionamiento de la plantilla Divi. Si tienes parámetros en amarillo significa que si se modificarán esos parámetros el funcionamiento de Divi sería mejor. Si tienes parámetros en rojo, lo mejor será ponerse en contacto con el hosting para que revisen la configuración.
Análisis del Estado del sistema Servidor – Divi
Acceso remoto a Divi – Remote Access.
Esta opción sirve para que el equipo de soporte pueda acceder a tu WordPress y analizar el problema que tienes en tu web. Solo debes activar esta opción, cuando el equipo de soporte así te lo indique.
Modo seguro de Divi – Safe mode
Muchos problemas que se producen con la plantillas en WordPress, están asociados a temas hijo o a compatibilidad con otros plugins.
La mejor forma de verificar esto es desactivar el hijo o todos los plugins. Pero, eso puede causar problemas a los visitantes mientras están desactivados alguno de estos elementos.
El safe mode de Divi soluciona este problema ya que tu web no cargará los plugins, ni el tema hijo, pero solo para ti o para el equipo de soporte, mientras que los visitantes de la web seguirán disfrutando de las funcionalidades que aportan los plugins y tema hijo que tengas instalado en WordPress.
Documentación y ayuda Divi – Documentation & Help vídeos
Esta sección incluye vídeos de ayuda y soporte sobre Divi
Avisos y errores de WordPress – Debug log Divi
El Debug log permite muy fácilmente recolectar información para ti o para el equipo de soporte de Divi sobre avisos y problemas que recoge WordPress en su archivo de logs.
Es decir, esta opción nos dará información valiosa sobre los problemas que puedan estar sucediendo en WordPress.
✅ VÍDEO: COMO CREAR UNA PÁGINA WEB CON DIVI EN MENOS DE 2 HORAS
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquín.
Una pequeña pregunta que quería hacerte y estaría muy agradecido de tu respuesta.
¿Conoces algún CSS para que en la cabecera, las subcategorías dentro de una categoría queden más juntas. Es decir, Europa en lugar de Europa
Bélgica
Croacia Bélgica
Croacia
sin tener que usar el generador de temas. Por lo menos en Extra aparecen así de separadas y llega un momento en que en ordenador no se ven todas.
Otra opción que se vean en dos líneas…
Muchas gracias anticipadas
Saludos
Victor
Hola de nuevo.
Creo que al mandar el mensaje se ha «roto» el intento de explicación por mi parte.
Me refería a Europa-Bélgica-Croacia en lugar de Europa—Bélgica—Croacia, es decir menos espacio entre cada una de ellas en vertical, claro.
O una segunda opción, ponerlos en dos columnas.
Te pido disculpas por las molestias
Muchas gracias anticipadas
Saludos
Victor
Buenas Victor
Prueba con la propiedad line-height-> https://www.w3schools.com/cssref/pr_dim_line-height.asp
En este hilo tienes un código para Divi: https://divi.help/threads/dropdown-menu-line-height.3408/
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso DIVI, Curso actualizaciones y seguridad en WordPress, Curso diseñador web Freelance, Curso como gestionar un Blog, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc. (más de 30 cursos)
Muchas gracias por los códigos y veré la plataforma de cursos.
Saludos
Victor
Hola de nuevo.
Muchas gracias por la rápida contestación.
De aquí me surgen dos posibles opciones:
1) “Desconecto” el constructor, corto, pego. Pero igual te deja “residuos”.
2) Crear un nuevo post, misma url, fecha, meta, etc, corto, pego y borro el viejo.
¿Crees que esta segunda opción será más “limpia”?
¿Sin modificar nada, solo la estructura, Google lo puede considerar post nuevo y perder posicionamiento?
Muchas gracias de nuevo y perdón por el tocho. 🙁
Saludos
Victor
P.d: Miraré Rocket y tus cursos. Algunos me pueden interesar mucho.
Buenas
No crees uno nuevo, modifica el post que tienes (quitando el constructor y usando el editor clásico), para que para Google sea el mismo post que tenías antes.
Una vez no utilices el constructor en el post, no habría «residuos». De hecho no se cargará el constructor si no lo usas en ese post
Un saludo
Hola Joaquín.
Te estaría muy agradecido si pudieses contestar a esta pregunta.
Tengo bastantes posts de una web hechos con el maquetador de Divi y pensando SOLO en rapidez de carga e independientemente del tiempo que tardara en hacerlo, ¿crees que volviendo a hacer esos posts sin maquetador (sin modificar urls ni nada), es decir, un corta y pega en el editor estandar, mejoraría la velocidad de cada entrada?
Muchas gracias anticipadas
Saludos
Victor
Hola Victor.
La diferencia se va a notar sobre todo si los posts que has creado con el constructor tienen muchos módulos.
Pero, como norma general sí. La carga de un post es más rápida si usas el editor clásico que no genera estructuras que si usas el Constructor que tiene estructuras de bloques y módulos.
Puedes hacer la prueba realizando unas mediciones con GTmetrix antes y después de modificar un post, a ver que resultados obtines.
Para la velocidad de carga también es muy importante la caché, optimización de imágenes y optimización de código, carga de scripts, etc. Yo desde hace algún tiempo uso el plugin WP Rocket en mis web con Divi y me va geneal. Aquí tienes un post sobre WP Rocket
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso DIVI, Curso diseñador web Freelance, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc. (más de 30 cursos)
Un saludo