¡Hola de nuevo amigo lector! Si estas pensando en crear tu propia página web, imagino que habrás escuchado hablar de la Plantilla Divi para WordPress. Si no es así, aquí te traigo una guía completa para que puedas entender mejor de qué se trata y por qué es la mejor opción para ti.

Se trata de una potente aliada en el desarrollo de tu página, ya que puede ahorrarte interminables horas de trabajo. Además, con ella podrás conseguir un resultado totalmente profesional sin tener apenas conocimientos sobre programación.

Prepárate para conocer a fondo la plantilla Divi para WordPress. ¡Empezamos!

La plantilla Divi es una de las más utilizadas en todo el mundo para el desarrollo web debido a su facilidad de uso. Su sistema de “drag and drop” la convierte en una de las mejores opciones para el usuario, tanto el avanzado como el básico.

Es evidente que hoy en día si no estás en Internet, prácticamente no existes. Cualquier empresa va tarde si aún no tiene una página web corporativa. Por eso, debemos buscar los recursos adecuados a la hora de realizar esta tarea. Cuando comenzamos con el proceso de digitalización existen dos posibles vías.

1. Contratar el servicio: Buscar a un profesional que se encargue de la creación de tu página web, es la primera opción que podemos barajar. La falta de experiencia en la materia puede llevarnos a realizar un trabajo inadecuado, y que finalmente no obtengamos los resultados esperados. Debemos tener en cuenta cuál es nuestro presupuesto, ya que la contratación de alguien externo nos supone un desembolso económico.

2. Realizar la web nosotros mismos: Llevar a cabo esta tarea sin tener experiencia anterior puede saturarnos, además de no conseguir un resultado totalmente profesional. El consumo de tiempo también es algo a tener en cuenta, ya que deberás dedicarle una cantidad considerable si quieres unos buenos resultados.

Cada situación es diferente, y por lo tanto, se debe valorar cada una de forma independiente para tomar la mejor decisión.

La plantilla Divi para WordPress es una buena opción en cualquiera de los dos casos descritos. Aunque, altamente recomendable en el segundo de ellos, ya que nos permite realizar un trabajo profesional, sin experiencia, y con un ahorro de tiempo impresionante.

 

Ventajas

  • Soporte: Cuando compramos el tema Divi, no solo estamos adquiriendo una plantilla. El gran equipo que se encuentra detrás de su desarrollo está trabajando continuamente en mejoras y actualizaciones. Además, contarás con un soporte técnico constante al que puedes recurrir en caso de que tengas algún tipo de problema.
  • Velocidad de carga: Es sabido que la velocidad de carga es uno de los aspectos que Google tiene en cuenta para el posicionamiento. Se cree que los constructores tan visuales como Divi flojean en este aspecto. Nada más lejos de la realidad, sus puntuaciones en Page Speed así lo demuestran.
  • Responsive: Hablamos de una plantilla para WordPress totalmente responsive. Su adaptabilidad a los dispositivos móviles como smartphones y tablets es muy buena. Además, tiene la ventaja de poder editar cada versión por separado. Es decir, podrás cambiar en tiempo real el editor, y de esta forma ver su versión móvil por ejemplo.
  • Crear y guardar partes globales: Supongamos que necesitas crear un formulario, y te gustaría que apareciera en varias páginas distintas de tu web. Puedes crearlo en una de ellas, guardarlo en la biblioteca y hacerlo global. De esta forma, lo puedes insertar en las páginas que quieras y cada modificación que le realices afectará a todos ellos de forma automática.
  • Sitios múltiples: Como lo oyes, con la licencia del tema WordPress Divi, podrás usar sus plantillas en cuantas páginas web desees. Si te dedicas al diseño web, es una fantástica opción, ya que podrás usarla en todos tus proyectos.
  • No necesitas conocimientos de programación: Para usar Divi no necesitas saber los principales idiomas de programación como HTML, CSS o Javascript. Su interfaz es tan intuitiva que hasta un niño podría hacer una web con un aspecto profesional.
  • Diseño muy flexible: Los diseños que puedes realizar con Divi son infinitos. Sus más de 40 módulos Divi diferentes te permiten crear multitud de  combinaciones.
  • Integración con Woocommerce: Si en tu caso eres dueño de una tienda física y quieres dar el salto al e-commerce, no hay problema. Esta plantilla es totalmente compatible. Incluso incluye el módulo “Tienda”, especialmente diseñado para esta tarea.
  • Plantillas prediseñadas: Una de sus principales atractivos es el acceso a la biblioteca de Divi. Podrás optar por multitud de plantillas completamente diseñadas, para después activarlas en tu página web. En definitiva, podríamos decir que te dan tu web hecha, para tan solo hacerle algunas modificaciones a tu elección.
  • Precio: Por último, cuánto te va a costar. Tienes dos planes diferentes para elegir. La versión económica (y mucho para lo que ofrece) por 89$ al año (unos 78€). La segunda opción, con un pago único de 249$ (unos 217€), la cual te da acceso de por vida. Sí, has escuchado bien, acceso de por vida a la plantilla Divi y todas sus posibilidades.

Módulos que incluye el tema Divi

Los módulos que incluye la plantilla Divi para WordPress son el principal elemento con el que construirás tu página web. Existen más de 40 diferentes y debes ir combinándolos de la forma que creas conveniente. Más adelante voy a enseñarte como usar algunos de ellos.

A continuación te mostraré algunos de estos módulos:

 

  • Tienda: Anteriormente mencionaba una de las ventajas de Divi a la hora de confeccionar un e-commerce. Este modulo permite crear tablas de productos de una forma rápida y sencilla.
  • Contadores: Podrás introducir contadores de diferentes tipos para dar una información mucho más visual. Tienes la opción de elegir entre contadores de barras, circulares o numéricos.
  • Blog: En muchas ocasiones, tener un blog asociado a nuestro sitio web o marca personal nos beneficia. A veces, es muy recomendable usar esta vía de comunicación con nuestro usuario. Con este módulo, podemos hacer visible la parte de nuestro blog que deseemos, en cualquiera de sus secciones.
  • Tabla de precios: Incluir el precio de nuestros productos o servicios puede ser primordial dependiendo del sector. Este módulo te permite crear tablas destacadas para diferenciar entre servicios, pudiendo añadir información, además de un botón final para adquirir el producto.

Diferencia entre Divi Builder y Divi Theme

Al adquirir la plantilla Divi, no solo tenemos acceso a dicha plantilla, sino que podemos utilizar las diferentes herramientas que Elegant Themes nos proporciona. Entre ellas se encuentra el “Divi Builder”, o constructor de Divi.

Esta herramienta nos permite acceder a todos los elementos anteriormente mencionados, sin necesidad de usar el tema en cuestión. Es decir, podemos confeccionar nuestra página web utilizando la interfaz constructora por módulos, aunque usemos un tema diferente. 

Entonces te preguntarás: ¿cuál es la diferencia entre usar el tema WordPress Divi y el constructor Divi?. Muy sencillo, al usar el tema Divi, tenemos la posibilidad de una personalización mucho mayor en los menús, pie de página y demás elementos principales del sitio. Mientras que, si tan solo usamos el constructor, nos limitamos a usar la interfaz por módulos para publicar el contenido de nuestras páginas o entradas.

 

Plugins extra de Elegant Themes

Los plugins son una herramienta muy utilizada en cualquier web que se realice con WordPress. Su uso, nos facilita mucho la vida en algunas tareas fundamentales para tener una página web en orden y bien optimizada.

Existen multitud de plugins con las mismas funcionalidades que los que Elegant Themes nos proporciona. Esta empresa nos ofrece dos plugins Divi adicionales con los que llevar a cabo acciones esenciales en el día a día de cualquier webmaster.

Monarch Social Sharing

Darle la posibilidad a los usuarios de compartir nuestra página, así como las publicaciones de nuestro blog, se ha convertido en algo muy importante para cualquier estrategia de marketing. Esta es la principal función de Monarch Social Sharing.

Su facilidad de uso y adaptabilidad a los diferentes dispositivos, dan un extra a la hora de escogerlo. Con Monarch, podemos editar los iconos sociales para compartirlos en cada una de nuestras páginas. Además  de la forma en la que se muestran, pop-ups, barras laterales, o incluso widgets.

 

Bloom Email Opt-in

En este caso, hablamos de un plugin dedicado al email marketing. Con Bloom Email Opt-in podremos confeccionar nuestros formularios de inscripción y colocarlos donde nos parezca mejor.

Al igual que con Monarch, podremos utilizarlo en cualquier tema, ya que es un plugin independiente al tema Divi. Su sencilla configuración en el panel de WordPress nos permite contactar con nuestros usuarios rápidamente.

Es importante comentar que nos da la posibilidad de conectarse con herramientas de email marketing como Mailchimp. De esta forma, no perderemos ninguno de nuestros leads por el camino.

Por último, tenemos la opción de realizar tests A/B, con los que diferenciar entre diferentes formatos de formulario. Así, podemos identificar cuál de ellos es más efectivo. Y por lo tanto, mejorar nuestra estrategia a lo largo del tiempo.

Puedes ver otros plugins para wordpress en este post sobre las mejores herramientas SEO.

Cómo instalar la plantilla Divi para WordPress

Como has podido ver hasta ahora, la versatilidad de la plantilla Divi es enorme. Por si aún no te convences del potencial de esta herramienta, voy a mostrarte cómo instalarla, configurarla y empezar a usar algunos de sus módulos.

Lo primero que tenemos que hacer es ir a la página web de Elegant Themes y comprar la licencia que más se adapte a nuestras necesidades.

Una vez la tengamos, tan solo necesitamos descargar la plantilla Divi y sus plugins.

 

Instalar la plantilla Divi en WordPress

Para instalar Divi en WordPress tan solo debemos ir a nuestro panel de administrador. En el menú general de la izquierda pulsamos en la pestaña Apariencia > Temas. Aquí pulsamos el botón “Añadir nuevo”, en la parte superior izquierda del navegador.

Pasaremos a una nueva sección, donde nos aparecerán los temas gratuitos que incluye WordPress, pero que aún no tenemos instalados. Ahora, justo donde antes teníamos el botón “Añadir nuevo”, aparecerá un nuevo botón llamado “Subir tema”. Pulsamos dicho botón y seleccionamos el archivo zip con el tema Divi que nos descargamos anteriormente.

 

Pulsamos en “Instalar ahora” y esperamos a que se instale. Una vez terminada la instalación, tendremos que hacer clic en activar y listo. Ya tenemos nuestro tema Divi instalado y activado en WordPress para usarlo.

A continuación, veremos un paso recomendable a la hora de empezar a utilizarlo.

Cómo crear un tema hijo con Divi

Este paso, aunque no es obligatorio, si es altamente recomendable. Crear un tema hijo nos permite modificar de la forma que queramos cualquier parte de nuestra página web, sin que la base de la misma se vea afectada.

¿Qué quiere decir esto? Muy sencillo: cuando modificamos los aspectos de la plantilla con la que estamos trabajando, archivos principales del tema como los estilos CSS o el PHP se ven alterados. El problema viene cuando tenemos que actualizar Divi. Es muy probable que en dicha actualización, algunos de los archivos de los que hablamos se vean suplantados por unos nuevos. Esto provocaría la perdida de todas nuestras modificaciones en los mismos.

Si no queremos tener problemas de este tipo, una fácil solución es crear un tema hijo con el que trabajaremos a partir de ahora.

Para ello, debemos instalar un plugin gratuito que nos ayude con la tarea. Pulsamos en la pestaña plugins, y seguidamente en “Añadir nuevo”. Nos vamos al campo de búsqueda situado en la parte superior derecha y buscamos el plugin “Child Theme Configuration”. Lo instalamos y activamos directamente.

Seguidamente, vamos a la pestaña Herramientas > Child Themes. En este apartado, nos aparecerá la configuración del plugin. En el primer paso, debemos seleccionar la opción “crear un nuevo tema hijo” y en el segundo, seleccionamos el tema padre desde el que se va a crear, el cual será el tema Divi.

Pulsamos el botón “analizar” y esperamos a que nos aparezcan los siguientes pasos a seguir. Recomiendo dejar estos apartados tal como están, ya que no es realmente necesario realizar ninguna modificación. Excepto el nombre del nuevo tema que podemos cambiarlo sin problemas.

Finalmente, pulsamos en el botón “crear”, et voilà! Tenemos nuevo tema hijo.

 

Seguidamente, tenemos que volver a la sección Apariencia > Temas. Aquí, veremos que tenemos nuestro tema padre Divi y su tema hijo con el nombre que le hayamos puesto, el cual activaremos inmediatamente.

A partir de ahora, tendremos nuestro tema Divi hijo funcionando y no habrá que preocuparse de que nos afecte ninguna de sus futuras actualizaciones.

Guía de uso del tema Divi para WordPress

Por último, os voy a mostrar cómo se trabaja con el tema WordPress Divi, para que puedas comenzar con tu proyecto. En esta guía te voy a enseñar qué elementos componen la plantilla y cómo se utilizan.

En primer lugar, es importante diferenciar entre las dos posibles vertientes que tiene el constructor Divi. La primera de ellas es el constructor en sí, donde podemos añadir y modificar todos los elementos que veremos más adelante. En segundo lugar, tenemos el constructor visual Divi, el cual podríamos decir que es como modificar tu sitio web sobre la misma página que verás finalmente. En los próximos puntos me centro en este último, por lo que lo vas a entender mejor.

Primero que nada, debes saber la forma en la que el constructor visual anida el contenido dentro de cada página. Para ello, utiliza tres tipos de elementos diferentes, los cuales se encuentran uno dentro de otro. Estos elementos son las secciones, filas y módulos. Por orden, diremos que las secciones contienen a las filas y las filas contienen a los módulos.

Secciones

Las secciones son la parte más amplia de la página. Aquí es donde configuraremos parte de su estructura, pudiendo elegir entre tres diferentes tipos cuando añadimos una de ellas. Los diferentes tipos son:

 

  • Estándar: Es la sección normal para insertar filas.
  • De ancho completo: Son secciones en las que no se pueden insertar filas, sino que tan solo pueden insertarse algunos tipos de módulos especiales. Su particularidad es que tiene anchura completa de pantalla, es decir, lo que incluyamos en ellos se verá en todo el ancho de la página web.
  • Especiales: Este tipo de secciones nos permite dividir el ancho de la página con diferentes combinaciones, para de esta forma distribuir las filas a nuestro antojo.

Filas

Dentro de las secciones nos encontramos con las filas. En este caso, podemos configurarlas para que dispongan de un número determinado de columnas dentro de cada una de ellas. Cuando añadimos una fila, debemos elegir el número de columnas que deseamos tener dentro de la misma, así como su distribución. Es posible elegir filas de hasta 4 columnas y distribuirlas a nuestro antojo.

Por ejemplo, podemos seleccionar una fila de 2 columnas donde la primera ocupe 1/3 del espacio y la otra los 2/3 restantes. Algo muy útil cuando queremos alternar con nuestros diseños.

Módulos

En tercer lugar tenemos los módulos. En este caso contamos con más de 40 diferentes. Algunos de ellos son vídeos, pudiendo insertarlos directamente o desde una URL. Otros son separadores, barras contadoras, galerías de imágenes y muchos más.

Este último elemento que podemos integrar en nuestros diseños, es donde realmente insertaremos los contenidos que deseamos.

En el siguiente paso, verás de qué forma puedes integrarlo todo para crear tu sitio web.

 

Cómo usar la plantilla Divi para WordPress

A continuación, te voy a mostrar cómo confeccionar una página simple con el constructor visual Divi.

En primer lugar, vamos a la sección páginas y pulsamos en “Añadir nueva”. Seguidamente, hacemos clic en el botón morado que dice “Usar el constructor Divi”, para después pulsar en “Usar el constructor visual”.

Una vez estamos en nuestra nueva página nos disponemos a crear. En este apartado deja volar tu imaginación y experimenta con las miles de combinaciones posibles. Prueba cada uno de los módulos Divi y descubre cómo funcionan todos ellos. En este post, me voy a limitar a enseñarte algunos para que puedas hacerte una idea de cómo funcionan.

Una vez que tenemos nuestro constructor visual abierto, lo primero que debemos escoger es qué tipo de página vamos a construir. Podemos elegir entre crear una nueva página desde cero, empezar clonando una ya existente o insertar una de las páginas hechas con Divi desde la biblioteca.

Nota: Esta última opción es muy útil cuando comenzamos con un proyecto. En la biblioteca, encontramos multitud de diseños prácticamente finalizados y que podemos utilizar en nuestro sitio web. Échale un vistazo y descubre diseños increíbles sin realizar ni un solo clic. Si en algún momento te ves falto de inspiración no dudes en recurrir a la biblioteca de Divi, siempre puedes encontrar ideas interesantes.

En este caso, vamos a comenzar por una página nueva, ya que el objetivo es enseñar cómo empezar a utilizar la plantilla Divi.

Una vez seleccionado el primero de los tipos de página, se nos creará una sección, fila y módulo. Para este ejemplo, vamos a escoger una fila de dos columnas, siendo la primera de ellas de 2/3 del espacio y la otra del resto.

Para añadir un módulo en la columna izquierda, debemos pulsar en el símbolo “+” que se encuentra dentro de un círculo negro. El primero que añadiremos será un formulario de inscripción a nuestro blog. Mientras que en la columna derecha insertaremos una foto nuestra para que nos conozcan en cuanto accedan a nuestra página.

 

La interfaz de cada uno de los módulos es bastante fácil e intuitiva de usar. Tan solo debemos pulsar en la rueda dentada que se encuentra en la parte superior izquierda de cada uno de ellos para acceder a su configuración. Aparecerá una pestaña emergente, desde donde controlaremos todas las preferencias de cada módulo. Esta ventana se divide en 3 pestañas diferentes:

  • Contenido: donde introduciremos el texto o los valores que aparecerán en el módulo escogido.
  • Diseño: donde modificaremos los colores, tamaño y demás preferencias.
  • Avanzado: donde podrás introducir código CSS especifico para modificar su apariencia.

Para configurar este primer formulario, vamos a escoger un color de fondo, escribiremos un texto llamativo que invite al usuario a contactar con nosotros, y por último le daremos un estilo al botón que funciona como CTA (call to action). Una muy buena alternativa para los formularios de inscripción es la utilización de un Lead Magnet, pero esto mejor lo veremos pronto en un nuevo post de manera más extensa.

Por último, introducimos un nuevo módulo de imagen en la columna derecha, abrimos su configuración y elegimos de nuestro ordenador una foto de nosotros mismos que nos guste para mostrarle a nuestros usuarios.

Quedaría algo así:

Finalmente, añadiremos una nueva fila pulsando el boton “+”, en este caso dentro de un círculo verde. Esta vez, elegiremos una fila de una sola columna, donde insertaremos un nuevo módulo de vídeo.

En dicho vídeo, insertaremos un vídeo desde Youtube. Para ello, iremos al panel de configuración del módulo de vídeo y pulsaremos en añadir vídeo. Seguidamente, pulsaremos en insertar desde URL en la parte izquierda de la nueva ventana emergente que nos aparece. Aquí, introduciremos la URL del vídeo que deseamos que aparezca y pulsamos en el botón de “insertar vídeo”.

Automáticamente, el vídeo aparecerá en nuestra página, podemos reproducido desde la misma o abrirlo en su URL de Youtube directamente.

A continuación, te dejo un vídeo con un pequeño tutorial de la misma página de Elegant Themes. En él podrás ver una iniciación completa al tema Divi para WordPress.

Conclusiones

La plantilla Divi para WordPress es una de las más completas que existen en el mercado. Pocas pueden ofrecerte tal cantidad de posibilidades a este precio.

Su facilidad de uso, gracias a su constructor visual incluido, es un atractivo muy a tener en cuenta. Por otro lado, pocos ofrecen plugins adicionales, además de una enorme biblioteca de contenido listo para ser usado. Si prestamos atención a esto, prácticamente nos dan el trabajo hecho.

Yo uso el tema Divi desde que comencé con mi proyecto, y estoy totalmente agradecido y satisfecho con el producto. Si decides probarla por ti mismo, estoy seguro de que no te arrepentirás.

¿Y tú? ¿qué plantilla utilizas? Cuéntame en los comentarios por cual te has decidido y qué experiencia has tenido con ella. ¡Un saludo y nos vemos en el próximo post amigo lector!