Cuando empezamos una web con WordPress, tarde o temprano tenemos que elegir el tema de WordPress con el que vamos a trabajar. No es una decisión menor, porque de ahí dependen buena parte del diseño, la estructura de las páginas y lo fácil o difícil que será hacer cambios más adelante.
Divi es una de las opciones más conocidas dentro de WordPress. No solo funciona como tema, también incluye un constructor visual que nos permite editar las páginas viendo los cambios casi al momento. Esto hace que podamos montar diseños bastante completos sin tener que escribir código para cada ajuste.
El primer paso, claro, es saber cómo instalar Divi en WordPress. El proceso suele ser sencillo, aunque no siempre se hace de la misma manera. Algunos proveedores de hosting incluyen asistentes que facilitan la instalación, mientras que en otros casos tendremos que descargar el archivo de Divi y subirlo desde el panel de WordPress.
Una vez instalado, podemos empezar una página desde cero o apoyarnos en alguno de sus plantillas en Divi prediseñadas. Divi trabaja con secciones, filas y módulos, de modo que podemos añadir textos, imágenes, botones, formularios y otros elementos según lo que necesite la web.
Antes de comenzar, conviene tener algunas cosas preparadas. Luego vamos a instalar WordPress para tenerlo funcionando, necesitamos acceso como administrador y también el archivo oficial del tema, que se descarga desde la cuenta de Elegant Themes. Si vamos a instalarlo en una web que ya está publicada, tampoco está de más hacer una copia de seguridad antes de tocar nada.
Después solo tendremos que activar Divi y empezar a configurar el diseño. También podremos importar plantillas completas, guardar estilos y trabajar con elementos globales para que distintas partes de la web mantengan la misma apariencia.
En esta guía veremos qué es Divi, las formas que tenemos de instalarlo y los pasos necesarios para dejarlo listo dentro de WordPress. Así podremos comenzar a diseñar con una base bien preparada y sin complicar la instalación más de lo necesario.
Tabla de contenidos
¿Qué es Divi y para qué sirve?
Divi es un tema de WordPress creado por Elegant Themes, pero no se queda solo en cambiar el aspecto general de la web. También incluye su propio constructor visual, con el que podemos diseñar las páginas sin tener que trabajar todo el tiempo con código.
Ese constructor se llama Divi Builder. Desde el propio editor podemos añadir textos, imágenes, botones, formularios, galerías, tablas de precios o llamadas a la acción, y después moverlos o ajustar su diseño directamente sobre la página.
Esto nos da bastante libertad a la hora de crear una web. Podemos empezar con una página en blanco, elegir uno de los diseños que ya incluye Divi o importar una plantilla completa y modificarla hasta adaptarla al proyecto.
Divi también permite trabajar con partes que se repiten en todo el sitio. Por ejemplo, podemos preparar una cabecera, un pie de página o una plantilla para las entradas y aplicarlos en diferentes zonas de la web. Lo mismo ocurre con las páginas de productos si estamos utilizando WooCommerce con Divi.
Eso sí, antes de instalar Divi en WordPress debemos recordar que es una herramienta de pago. Para descargar el archivo oficial, necesitaremos acceder a una cuenta activa de Elegant Themes. Una vez que lo instalemos y activemos, tendremos disponible tanto el tema como el constructor.
En general, Divi puede facilitarnos bastante el trabajo cuando queremos diseñar desde un entorno visual y tener más control sobre cada sección. No hace todo por nosotros, pero sí evita que muchos cambios dependan de editar código o de utilizar una plantilla demasiado cerrada.
Cómo instalar Divi en WordPress de forma automática con WPFácil
Uno de los métodos más sencillos para realizar una instalación de Divi es por medio de un instalador automático, este es el caso de nuestros planes de WPFácil, los cuales incluyen un método que mejora la experiencia del usuario para poder realizar la instalación y configuración previa de lo que es el tema de Divi en nuestro WordPress nuevo, no solo para un CMS en blanco, sino también para la instalación de un sitio en WooCommerce con Divi.
Igualmente, vamos a ver unos pasos detallados de cómo instalar o cómo hacer uso del plan contratado de WPFácil en una instalación nueva que incluya el tema de Divi.
Pasos para instalación de Divi por WpFácil
Primero debemos tener acceso a nuestro panel de administración de Webempresa, para ello, si no tenemos el conocimiento, podemos ver una guía para ingresar a este wepanel. Una vez que estamos dentro, vamos a ingresar al menú de WPCenter.
Una vez dentro de la sección vamos a hacer clic en la opción que necesitemos, puede ser directamente la opción de instalar con WordPress + Divi o bien hacer clic en el botón de WordPress + Divi + WooCommerce si necesitamos crear una tiendaque tenga el tema Divi activo.
Una vez conocemos cuál es la versión que queremos instalar hacemos clic en este y seleccionamos los datos correspondientes a nombre del sitio, dominio en caso de tener varios dominios en nuestra cuenta, instalar WordPress en subdominio, asi mismo la ruta en caso de que necesitemos instalar en una carpeta específica o bajo un subdirectorio por ejemplo dominio.com/web, usualmente esto se utiliza cuando vamos a tener un nuevo desarrollo de nuestro sitio en paralelo a que el mismo se encuentre activo con información y no queramos que se caiga mientras trabajamos, email del administrador, usuario y contraseña que puede ser aleatoria o asignada manualmente.
Una vez completamos todo y hacemos clic en el botón de instalar solo nos queda esperar unos segundos a que se realice la instalación.
Cómo instalar Divi en WordPress de forma manual
Como hemos podido verificar resulta muy sencillo instalar Divi en nuestros WordPress utilizando el instalador de nuestro panel; sin embargo, también se puede dar el caso de que tengamos comprado el tema de Divi sin tener nuestro plan de WPFácil y queramos realizar esta instalación, en este caso necesitaríamos realizar una instalación manual del tema, por lo que vamos a ver los pasos a seguir.
Pasos para instalación de Divi manualmente
Primero debemos descargar el tema Divi y para ello debemos ingresar en la web de Elegant Themes, crear una cuenta en caso de que no la tengamos ya creada y realizar la compra del tema de Divi. Una vez que tengamos ya la cuenta y accedamos a nuestra zona de miembro, vamos a poder ver el apartado de descargas. En este apartado vamos a poder descargar el instalador de nuestro tema, pero también vamos a tener otros plugins o temas en caso de que adquiramos más de esta plataforma. Aquí haremos clic en el botón de descargar Divi.
Luego de que tenemos descargado nuestro tema de Divi, vamos a proceder a instalarlo en nuestro WordPress, ya sea en una instalación nueva o bien directamente en una instalación que tengamos activa y planeemos utilizar este tema en lugar del que tenemos actualmente activo.
Para realizar esta instalación vamos a ingresar a nuestro backend de WordPress, ingresando primero a la ruta de acceso de nuestro sitio, la cual sería dominio.com/wp-admin, en la cual vamos a ingresar los datos de acceso para ver el backend del sitio.
Luego de que estamos en el backend del sitio, vamos a ir al panel lateral de Apariencia > Temas. Una vez que hacemos clic en esta sección, nos va a mostrar una variedad de temas que tenemos instalados por defecto, en algunos casos solo se tiene uno activo. Sin embargo, en esta primera sección es donde vemos los temas disponibles, lo que necesitamos enfocarnos es en un pequeño botón ubicado en la parte superior de estos temas instalados que indica Añadir tema.
En esta nueva página vamos a ver una lista de temas gratuitos, pero nuevamente nuestro punto de interés debe enfocarse directamente en el espacio superior a estos temas, donde vamos a encontrar un botón que indica subir tema. Es aquí donde vamos a proceder con el proceso de selección del archivo que hemos descargado previamente, ya sea por medio de una selección o bien podemos arrastrar y soltar el archivo directamente en donde indica el botón.
Una vez que tenemos terminada la instalación del tema, tenemos que proceder con la activación del mismo, para ello, simplemente ingresamos al área donde teníamos todos los temas instalados y activamos el mismo. Para hacerlo, simplemente, al situar el cursor o mouse sobre el tema, nos mostrará un botón de activar.
Luego de que tenemos nuestro tema activo, debemos conectarlo con Elegant Themes, de tal forma que, a medida que esta desarrolladora actualice este tema, podamos hacerlo nosotros también en el panel de actualizaciones de WordPress sin necesidad de ir manualmente a descargar el tema y realizar una actualización manual del mismo, como lo haríamos en una actualización manual de WordPress, ya que en ocasiones esto puede provocar algunos problemas de visualización del sitio. Para conectar nuestra cuenta con el tema activo, simplemente ingresamos al menú de Divi > Opciones del tema > actualizaciones.
Los datos que debemos ingresar aquí son los que tenemos en nuestra cuenta de Elegant Themes, específicamente en el apartado de nuestra cuenta > api keys, aquí vamos a ver nuestras APIs disponibles, así como el nombre de usuario en caso de no conocerlo. En caso de no tenerla creada, podemos hacer clic en el botón inferior que indica generar API key nueva, para que ingresemos esta junto con el usuario en el área de actualizaciones de nuestro tema.
Finalmente, guardamos los cambios y tendremos instalado nuestro tema Divi en el sitio web.
Cómo instalar una plantilla en Divi
Como punto adicional tenemos el de poder importar plantillas en Divi, este punto lo mostraremos de una forma más rápida y menos detallada, sin embargo, igualmente útil para el desarrollo de un sitio web, sobre todo si estamos cortos de tiempo y necesitamos un sitio estilizado de forma rápida y fácil. Cosa que es posible gracias a la posibilidad de importación de elementos que posee Divi. Para ello podemos hacerlo directamente en la página que necesitamos crear; si, por ejemplo, nuestra página que nos interesa es solo la página de contacto, vamos a crear una nueva página.
Seleccionamos nuestro editor de bloques de Divi y luego nos situamos en la parte inferior del mismo, es decir, una vez que hagamos clic en el editor y nos lleve al propio constructor de Divi, si no lo tenemos activo, debemos activarlo haciendo clic en el constructor y luego, si se nos hace más cómodo, hacemos clic en el botón de edición en el frontend. Con esto hecho, vamos a ver en la parte inferior de la web unos 3 puntos con un fondo morado.
Una vez desplegamos este menú, debemos ingresar al panel de importación, es decir el botón de (+) situado en color morado una vez hacemos clic en estos tres puntos. Una vez hacemos clic aquí, vamos a ver una numerosa cantidad de plantillas a elegir, con su respectivo filtro para identificar si buscamos una plantilla orientada a una tienda o bien a lo que necesitemos.
Luego de que la tenemos identificada, simplemente debemos hacer clic en donde indique Contacto, o contact. Esto ya que en el ejemplo dijimos que buscábamos crear una página de contacto; una vez que la identificamos, hacemos clic en el botón de usar esta plantilla de color azul ubicada a un lado del propio elemento y luego el sistema realizará la importación de la misma para que posteriormente se actualice y se muestre tal como lo hemos importado.
Conclusión
Divi puede encajar bastante bien en proyectos donde queremos diseñar una web desde un entorno visual y tener margen para ajustar cada sección a nuestro gusto. Al reunir el tema y el constructor en una misma herramienta, podemos trabajar con textos, imágenes, botones, formularios, galerías y otros módulos sin tener que recurrir al código para cada pequeño cambio.
También nos deja elegir cómo empezar. Podemos cargar uno de sus diseños prediseñados y usarlo como base, algo útil cuando todavía no tenemos clara la estructura de la página. Si preferimos tener más control, podemos abrir un diseño en blanco y construirlo desde cero.
Y no todo se queda dentro del contenido de una página. Con el generador de temas de Divi podemos preparar cabeceras, pies de página y plantillas para entradas, categorías o productos de WooCommerce. Así mantenemos un estilo parecido en distintas zonas del sitio y no tenemos que repetir el mismo diseño una y otra vez.
Ahora bien, trabajar con un constructor visual no significa que la web vaya a quedar lista por sí sola. Todavía tendremos que ordenar bien el contenido, comprobar cómo se ve en móvil, reducir el peso de las imágenes y vigilar el rendimiento. Divi pone las herramientas a nuestro alcance, pero el resultado depende de cómo las utilicemos.
Antes de instalar Divi en WordPress, necesitamos una licencia activa de Elegant Themes, acceso al panel de administración y una instalación de WordPress que esté funcionando correctamente. Si vamos a cambiar el tema de una web que ya está publicada, lo más prudente es hacer primero una copia de seguridad.
En general, Divi nos permite crear y mantener diseños personalizados desde un mismo lugar. Puede servir tanto a quien está empezando con WordPress como a quienes trabajan en distintos proyectos y necesitan una herramienta flexible.
También te puede interesar:
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
