Seleccionar página

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


VER CURSOS

 

 

 

 

 

curso divi online

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 20% de descuento por tiempo limitado

SUPER DESCUENTO DIVI

 

 

 

->🥇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 20% se te quedará en 70 $ + 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 $70 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 20% se te quedará en 199$ + 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 $199 con el descuento ya aplicado.

DESCUENTO PLAN LIFETIME ACCESS

 

 

 

CREAR PÁGINA WEB CON DIVI / INSTALAR EL TEMA DIVI

 

Vamos a ver ahora otras cuestiones sobre la plantilla Divi para WordPress

 

 

Cómo se instala Divi

 

Instalar Divi es super sencillo, te comento los pasos:

 

a.- Descargar Divi: en primer lugar debes acceder a la página de Login (inicio de sesión) de Elegant themes. A continuación Introduce tu usuario y contraseña. En la siguiente pantalla ves haciendo scroll hasta localizar la plantilla Divi.

Una vez localizada haz clic en “Download” y luego en “Theme package”. A continuación guarda la descarga en el escritorio de tu ordenador.

 

descargar divi para luego instalarla

 

b.- Instalar Divi: para instalar Divi accede a tu panel de administración de WordPress y ve a: “Apariencia > Temas”.

Una vez allí haz clic sobre el botón: “Añadir nuevo” que aparece en la parte superior. Ahora haz clic en el botón: “Subir tema” y después en el botón “Examinar”. A continuación elige el archivo que antes hemos descargado y pulsa el botón “Instalar Ahora”.

 

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 instalar 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 ***

 

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 de divi

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.

 

pantalla para personalidar el diseño web con Divi

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 la plantilla divi

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.

 

configuracion menu principal divi

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 incluye un montón más de opciones de diseño, aquí solo te he resumido algunas de ellas.
SUPER DESCUENTO 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.

 

system status divi - estado del sistema divi

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

 

 

Compártelo ya!!

▷LLÉVATE TODOS ESTOS RECURSOS GRATIS

 

LLEVATE GRATIS:

 

👉 CURSO WORDPRESS Y DIVI (24 Clases en vídeo)

 

👉 MASTER CLASS: Claves para crear una web que consiga clientes

 

👉 TALLER SEO: Keyword research + 👉 Guía para crear una web profesional + 👉 Training Mis plugins imprescindibles

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com