DIVI es para mí el mejor «theme» tema wordpress en Español para principiantes

Para mi, el mejor tema de pago de wordpress, 100% recomendable.

Nunca fue tan sencillo construir una página web con el tema o plantilla para wordpress DIVI. 

WordPress + Divi para iniciar tu negocio online.

Para tener un negocio online es imprescindible que sepas manejar tu propia página web, si no sabes como crear tu propia página web con wordpress te invito a leer el artículo.

En la primera fase, tan solo debes ocuparte de construir un producto mínimo viable, esto es, una web sencilla con la que puedas transmitir de forma fácil y simple lo que haces y a quien va dirigida.

Lo ideal sería que fueses capaz de construir toda la web, porque a medida que vayas recibiendo visitas y analices las páginas que visitan y las acciones que realizan, tal vez debas realizar cambios mas o menos importantes.

En este artículo aprenderás a usar DIVI, el mejor tema de Elegant Themes para wordpress para construir tu página web con wordpress. Es un tema de pago de elegant themes y que vengo usando casi desde que comencé.

El «Page Builder» de DIVI.

Sin duda alguna el constructor de paginas (en ingles “Page Builder”) la principal característica de este fantástico tema para wordpress.

El constructor funciona moviendo bloques de contenido, sigue el concepto de arrastrar y soltar “Drag & Drop” que es muy fácil de usar.

Es fundamental cuando tienes que crear una nueva página dentro de tu web y quieres insertar imágenes, cabeceras, texto en varias columnas, testimonios de clientes o cualquier otro bloque.

Como se trabajan las páginas web de wordpress sin usar DIVI.

Antes de conocer el constructor de páginas es este framework de Elegant Themes, tenía que diseñar las páginas a mano (Dios mío, no quiero recordarlo) ¿Como se hace esto? Muy fácil.

Seguro que has usado word (el programa de Microsoft) o OpenOffice o alguno similar, para crear un presupuesto, para un documento de oferta, para cualquier cosa que necesite incluir una imagen como en la vista que te muestro a continuación:

Pues en wordpress la situación es muy similar, para ello usas el editor que lleva por defecto, se le llama WYSIWYG de la abreviación en Ingles («what you see is what you get») Lo que ves es lo que obtienes, en referencia a que tal como ves que queda el texto, imágenes, botones, etc. es como quedará con la pagina visible online.

La verdad es que este sistema de crear páginas ahora me resulta un verdadero coñazo, ups…

Me da mucha pereza tener que escribir sin usarlo y con esto te adelanto que pronto verás novedades de estilo en este blog.

Pero vamos a lo que vamos.

¿Como funciona el constructor de páginas web?

¿Quieres tener una paginas de inicio bloques de contenido, con fotos, gráficos y textos estructurados?

¿Quieres una página de inicio como esta?. ¿O una carta de ventas como esta otra?

Aquí puedes ver más ejemplos de páginas construidas con DIVI.

Solo tienes que añadir una nueva página en tu wordpress y pulsar el botón para usar el constructor de páginas:

Para que entiendas como funciona el constructor debes imaginar una especie de pared en la que vas a insertar secciones, filas, columnas y bloques, vamos con la explicación.

Es como una cuadrícula en la que ponemos filas y columnas, y dentro de las mismas bloques  de contenido. Las secciones es lo primero que hay que seleccionar, comienza con secciones estándar.

Secciones:

Sección ancho completo, como su nombre indica, no permite colocar filas ni columnas, directamente insertas módulos.

En este tipo de sección solo puedes usar módulos de anchura completa, habitualmente se usa el pase de diapositivas y las cabeceras a todo el ancho.

Sección estándar, es la que mas vamos a utilizar

y una vez la seleccionas te pide a continuación el número de columnas.

Por último tenemos la sección especial para diseños con varias disposiciones de filas en distintas columnas, si estás empezando con DIVI, te sugiero que olvides de momento esta último tipo.

Filas:

En una sección estándar podrías incluir las filas que quieras, como ves a continuación que hay una sección con la primera fila de 2 columnas, la segunda fila de 3 columnas y la tercera fila de 4 columnas, como ves puedes hacer casi lo que quieras.

Columnas:

El siguiente paso es seleccionar el número de columnas, que ya habrás hecho en el caso de secciones estándar. Los distintos bloques o secciones quedarán de esta forma a falta de insertar el último elemento: los módulos.

Módulos:

Secciones, filas y columnas determinan la estructura de la página, los módulos son el contenido.

Ahora veremos todos los tipos de módulos pero los más básicos y usados son los de texto y los de imagen. Así es como quedan una vez se insertan:

Y así es como los verás en la página de tu web.

Además de los clásicos bloques de texto e imagen que acabas de ver, existe infinidad de módulos, llamadas a la acción, Contadores, Botones, testimonios, vamos casi cualquier idea que te pase por la cabeza:

Como verás las posibilidades son infinitas.

Pero, esto no es lo mejor, sigue leyendo…

Plantillas y diseños personalizados.

Todo lo anterior esta muy bien, pero cuando comienzas una página web, tal vez no tengas claro cual es el diseño que te gusta.

DIVI tiene muchísimos diseños predefinidos para que arranques rápido y fácil, solo tendrás añadir una nueva página.

Pincha en el botón azul (D) Usar el constructor Divi y aparecerá la siguiente imagen donde te ofrece distintas opciones, cargar secciones, filas o columnas como acabas de ver antes.

Pero quiero que mires en las opciones del menú violeta.

Fíjate que hay una opción de cargar de biblioteca que lo que hace es ofrecerte infinidad de diseños pre-establecidos para distintas situaciones, para la página de inicio o home, para la página de un ecommerce, páginas sobre nosotros o acerca de mi, y muchísimas mas.

Cuando le das al botón veras algo como esto:

Solo tienes que cargar el diseño que prefieras, por ejemplo para una página de inicio básica he cargado el diseño o estructura básica que luego puedes modificar a tu gusto con imágenes, gráficos y textos.

¿Que te parece?

Estas viendo un diseño predefinido que consta de una primera sección estándar de una fila y una columna con un bloque de pase de dispositivas, aunque al ser una foto tu solo ves una de ellas.

Le sigue una sección de ancho completo con un módulo de cabecera a todo lo ancho.

Y acaba con otra sección estándar con dos filas, la primera de 4 columnas con bloques con gráfico+texto y una segunda linea de una sola columna con un módulo de llamada a la acción.

Importar y exportar diseños personalizados con DIVI.

Además de los diseños que ya vienen definidos puedes guardar tus propios diseños.

Por ejemplo, si desarrollas una pagina de inicio muy chula que te gustaría poner igual o similar en otra instalación de wordpress puedes guardar el diseño en la biblioteca.

Guarda todos lo diseños que quieras llevar a otra web y en herramientas exportar, selecciona la opción de exportar las disposiciones (así llama wordpress a los diseños de la biblioteca de DIVI).

Con la herramienta estándar de importación los puedes cargar en cualquier otra web.

Si estás pensando en usar esta opción para hacer copias o clones de una web en otras instalaciones, te recomiendo que eches un vistazo al plugin duplicator 😉

La personalización de los estilos y módulos.

Otra de las grande ventajas de este fabuloso framework de desarrollo web es la posibilidad de personalización tan amplia que tiene.

Al instalar el tema aparece una nueva opción de la barra lateral izquierda, donde están las opciones de menú, llamada Divi que a su vez despliega las opciones de personalización que vamos a repasar:

Opciones del tema

Esta opción aparece en prácticamente todos los temas de pago y sirve para configurar logotipo, favicon, enlaces a redes sociales, integración con algunos servicios, etc.

Las opciones de navegación para páginas, entradas, etc, las posibilidad de mostrar/ocultar autor, categoría, fecha y comentarios de entradas y páginas.

Por último como en casi todos los temas una zona donde integrar scripts en el head o body de la plantilla.

Los scripts son lineas de codigo que debes colocar en «todas las páginas» del sitio web para que realicen alguna funcionalidad, por ejemplo medir las visitas a tu web con Analytics, mostrar un chat o grabar las sesiones de navegación de las visitas a tu web, si has leído bien, esto se puede hacer, pero no te lo voy a contar en este artículo 😉

Personalizador de temas

Esta es una de las cosas mas chulas del tema DIVI.

Cuando entras en esta opción veras una barra lateral izquierda como la de la captura de abajo:

Hay tantas opciones de personalización que te puedes perder, mi consejo es que vayas en el orden que te propongo a continuación:

Personalizar la combinación de colores, hay cinco o seis patrones de color, prueba a ver el que mas te guste y el que mejor combine con tu identidad corporativa y los colores de tu logotipo.

Luego puedes ajustar el espacio entre secciones y filas en ajustes generales / ajustes de formato.

A continuación suelo entrar en los ajustes generales y viendo una página de texto voy a ver como queda el tamaño de texto en ajustes generales / tipografía.

Bueno, hay muchísimas cosas que puedes ajustar, te he contado lo mas básico.

Personalizador de módulos

Te permite personalizar algunas opciones de diseño para cualquier nuevo módulo que insertes en la web.

Para ir acabando y sin extenderme mucho más, te cuento que puedes personalizar cada uno de los módulos, por ejemplo, cuando insertas una imagen tiene un movimiento de izquierda a derecha al aparecer.

Puedes configurar que la imagen aparezca sin movimiento para todos lo módulos de imágenes, o bien que la llamada a la acción tenga un tamaño de letra mayor o en negrita.

Y el no va más de la personalización, además de la personalización para todos los nuevos módulos que insertes puedes hacerlo en cada uno en particular.

Simplemente debes pulsar sobre Ajustes avanzados de diseño cuando edites el modulo.

Otras opciones

Editor de Rol, no creo que lo uses si eres principiante y editas tu mismo tu página web.

Y por último la biblioteca de Divi es donde se guardan los diseños que antes hemos visto.

Comparación con otros temas como «Genesis framework»

Aunque en la mayoría de mis proyectos online y en la práctica totalidad de los proyectos con clientes uso DIVI de Elegant Themes, me veo obligado a compararlo con otros temas populares.

En este blog a fecha de escribir este artículo tengo instalado «Genesis» porque quería probar este tema que también tiene un nombre entre los desarrolladores.

Pues bien, probado esta, pero no me convence.

No aprecio ventajas significativas ni en cuanto a velocidad de carga ni a usabilidad.

Es mas si no tienes ni idea de html ni css y te gustaría retocar pequeños detalles en tu web no hay comparación, tu elección debe ser Divi.

Se lo han currado mucho estos años, yo llevo con ellos desde 2013 y cada vez estoy mas contento.

Ir a la página de Elegant Themes para ver DIVI.

Espero que esta info te haya sido útil.

Un abrazo, Quique Mora.