TEMA DIVI DE WORDPRESS | Este es el primer video de la serie de tutoriales del tema Divi donde vemos una introducción al tema y cuáles son sus principales características.
Este post contiene afiliación. Si usas mi enlace de afiliado para comprar la herramienta estarás apoyándome a crear nuevo y mejor contenido. Afiliado de Elegant Themes.
Qué tipo de plantilla es Divi
Divi es una plantilla multipropósito esto significa que incluye herramientas o está preparada para crear una página web corporativa, un blog, o una tienda online.
Su herramienta principal es un editor visual drag and drop que nos permite crear el diseño de la web de una forma muy rápida y sencilla.
Además, incluye integración con otros servicios como Google Analytics o Google Maps, y fuentes tipográficas de Google.
También tiene funcionalidades avanzadas como un test A/B o galería de plantillas.
El tema más utilizado de WordPress
Según las estadísticas Divi es el tema de WordPress más utilizado y no es de extrañar ya que gracias a su constructor visual, evolución, precio es el ideal para todo tipo de diseñadores.
Si eres un diseñador novel o un usuario que está empezando en WordPress, este tema te permite crear fácilmente tu página web.
Y también, permite la introducción a otros conceptos de la web y reduciendo la curva de aprendizaje de ramas adicionales como el Diseño Web, SEO, y Marketing Digital en general.
Y si eres un diseñador avanzado, freelance o agencia es una herramienta a tener en cuenta para estandarizar la creación de algunos tipos de web.
DIVI BUILDER – Editor Visual
El principal punto fuerte de este tema es que se ha convertido en una herramienta central del diseño de la web gracias a un constructor visual.
Este constructor visual se llama Divi Builder y es totalmente visual, drag and drop y con una curva de aprendizaje muy buena.
Te permite crear el diseño arrastrando y configurando bloques que configuran la estructura de la web y se personalizan con sus numerosas opciones.
Divi builder ha ido evolucionando con el tiempo con numerosas funcionalidades.
Entre ellas, 46 bloques de contenido con una cantidad inmensa de opciones de personalización.
Pero también se ha conseguido una interfaz fluida y se ha potenciado las mecánicas de trabajo avanzadas como «Guardar bloques, heredar diseños, historial de cambios, atajos…» que permiten trabajar de forma rápida y muy cómoda.
Desde la web de Divi puedes probar el editor visual de Divi.
46 Elementos de contenido
Te resumo algunos de los módulos de Divi, puedes hacer clic en los enlaces para ver ejemplos.
Módulos básicos:
Texto: un módulo para crear los títulos y párrafos de la web con un montón de opciones para personalizar el tamaño, tipografía, color, sombreado, fondo, enlaces, citas, listas etc… Módulo de texto.
Imagen: un módulo para insertar las imágenes de la página web, personalizable con filtros, efectos, bordes, sombreados y mucho más. Módulo de Imagen
Video: El módulo de video es perfecto para agregar un solo video en cualquier lugar de su web. Simplemente cargue un video o indica una URL. Módulo Video
Botón: un botón simple y muy personalizable para redirigir a tus usuarios Módulo botón
Reproductor de música: Un sencillo reproductor para tus audios muy personalizable que facilita el compartir archivos de audio y permite que un usuario reproduzca música mientras navega, tener un podcast o música. Reproductor de música.
Propaganda o anuncio: (no tiene nada que ver con los anuncios) es un módulo prediseñado que combina una imagen, titulo y texto para mostrar fragmentos de información importante. Módulo de Anuncio.
Divisor: una forma sencilla de agregar espacio en blanco en cualquier lugar del diseño, también sirve para crear líneas horizontales. Divider.
Galería: Un módulo sencillo y elegante que muestra las imágenes de forma ordenada. Módulo de galería
Slider: el típico carrusel básico de imágenes y texto a modo diapositivas, puede ser de ancho fijo o ancho completo y admiten fondos de paralaje, así como fondos de video de ancho completo. Slider
Módulos Avanzados:
Llamada a la acción: un módulo que combina texto, párrafo y botón para crear fácilmente llamadas a la acción. Módulo de CTA
Acordeón: un módulo excelente para consolidar la información en formato de bloques alternativos muy utilizado para mostrar preguntas frecuentes. Módulo de Acordeón
Toggles (palanca): parecido al módulo de acordeón pero con otro formato en el que las tablas de contenido se pueden insertar individualmente. Toggles.
Contador de Barras: Los contadores animados son una forma efectiva de mostrar estadísticas en forma de gráfico a sus visitantes. Contador de barras.
Contador del círculo: Un contador circular para mostrar estadísticas e información de forma muy visual. Módulo de Contador circular.
Contador regresivo: una cuenta atrás personalizable, ideal para indicar la fecha de comienzo o fin de un evento u oferta. Cuenta atrás.
Contador numérico: Muestra un contador numérico que muestra una cifra de manera muy visual. Contador numérico.
Blog: el módulo de blog te permite insertar los post de tu blog en cualquier lugar de la web, útil para crear tu estilo propio para el blog. Módulo de blog.
Post Slider: un slider que muestra el titulo e imagen destacada de los post del blog en una galería deslizable. Módulo de post slider
Comentarios: un módulo personalizable que muestra los comentarios de una publicación.
Código: Un módulo para introducir códigos HTML personalizados como iframes con los que, por ejemplo, insertar herramientas externas.
Portafolio: muestra el contenido del portfolio de una forma sencilla y en cualquier lugar.
Portafolio filtrable: Un módulo que muestra el contenido del custom post type de portfolio con un filtro de categorías.
Persona: muestra información de clientes o de un equipo de trabajo de forma fácil. Módulo de persona.
Testimonio: Un módulo pensado para mostrar testimonios de una persona y mejorar la percepción de los usuarios. Módulo de testimonio.
Navegación lateral: Un módulo que permite crear una navegación adicional lateral en páginas y post para pasar de un contenido a otro de forma sencilla. Navegación lateral
Título de la entrada: Inserta el título de la página o entrada en cualquier lugar y configura un diseño potente con sus opciones. Post Title.
Vídeo Slider: Este módulo le permite colocar una colección completa de videos en un solo control tipo slider. Ideal para mostrar cualquier grupo de videos. Video Slider.
Tienda: muestra los artículos de tu tienda online con Woocomerce en cualquier lugar puedes fíltralos por categorías u otras características. Tienda
Tabla de precios: Muestra una tabla de precios para comparar diferentes precios y características de productos. Tabla de precios.
Buscar: es la típica barra de búsqueda web con el que los usuarios buscaran un contenido en tu blog. Buscador.
Barra lateral: Muestra una barra lateral en cualquier lugar de tu web y personalízala a tu gusto, puedes crear diferentes barras laterales. Barra lateral.
Botones sociales: Sencillos botones para indicar redes sociales y que tus usuarios te sigan con un solo clic. Botones Sociales.
Pestañas: Muestra información separada por pestañas en una sección para tener a mano y de forma ordenada información relevante. Pestañas
Encabezamiento: Un módulo pensado para crear una cabecera sencilla de la página, con título y subtitulo sencillo. Encabezamiento
Mapa: muestra un mapa con integración de Google Maps para mostrar una ubicación exacta. (Necesita una API de Google Maps)
Módulos de formularios
Formulario de contacto: un sencillo formulario de contacto con opciones avanzadas como captcha o ajustes condicionales. Módulo de formulario
Módulo de Suscripción: Un formulario de suscripción a los principales servicios de newsletters como MailChimp , AWeber y FeedBurner. Suscripción.
Responsive configurable
A parte del diseño responsive automático que ajusta el contenido a diferentes dispositivos, con Divi puedes crear y personalizar el diseño para dispositivos móviles, tablet y escritorio.
La personalización del responsive se puede hacer mediante la configuración de elementos globales como las secciones, columnas o módulos de contenido.
Pero además, no solo se permite ocultar o mostrar estos elementos sino que también se permite cambiar la mayoría de las opciones de personalización (Como tipografías, tamaños de texto, imágenes… ) separadas por dispositivos.
Traducido al español
El tema está traducido al español, lo que permite entender todas las opciones y trabajar cómodamente entendiendo las anotaciones adicionales de las opciones.
Alguna palabra está en spanglish, pero bueno.. en general está perfecto.
Test A/B
Divi tiene funcionalidades avanzadas pensadas para el marketing digital, como por ejemplo el diseño con test A/B, que permite mostrar dos diseños diferentes de un elemento y medir cual es el que tiene más conversión.
De esta manera podemos configurar diferentes títulos, textos, imágenes, videos, formularios y botones para medir cuales convierten más.
Plantillas de páginas prediseñadas
Divi incluye una galería de diseños prediseñados que podemos cargar para inspirar nuestros diseños.
A diferencia de otras herramientas de contenido de demostración (demos) que incluyen otros temas, divi solo te carga la página del diseño que eliges y no toda una web de demostración con decenas de páginas y cientos de imágenes que si no utilizas tienes que ir borrando después.
Además, se puede guardar cualquier diseño dentro de la galería de la web y también exportar cualquier diseño a otra instalación de WordPress con Divi externa.
Tema ligero para ser multipropósito
Mentiría al decir que Divi es un tema ligero, ya que dada la cantidad de funcionalidades que incluye no puede ser tan ligera como un tema de un único propósito cuyo diseño sea creado con las lines justas de código.
Pero hay que reconocer que desde Elegant Themes se han preocupado por la optimización y la rapidez de la web.
En una de sus actualizaciones, el editor visual se convirtió en el editor visual más fluido y se añadieron técnicas de optimización como el comprimido de archivos de código.
Divi es uno de los pocos temas que incluyen funcionalidades de optimización web como el comprimido del código.
No es el tema más rápido, pero con unas pocas técnicas de optimización web puedes tener una web con divi muy rápida y con unos tiempos de carga muy buenos, que sobrepasan la media de otras webs.
Soporte y foro
Desde Elegant Themes se ha mantenido siempre un foro de soporte muy bien comunicado al que podemos acceder si tenemos preguntas o fallos con sus temas o plugins.
Con el boom de Divi, mantener el Soporte debe de ser todo un reto, y por ello se ha creado además un foro de la comunidad y una biblioteca de tutoriales donde resolver las dudas menores y dar soluciones adicionales al soporte.
Usuario Ideal
Divi es ideal tanto para usuarios que empiezan en el diseño web con WordPress, como para profesionales que quieren una herramienta con la que construir una web rápidamente con unos estándares de diseño actuales.
Puedes crear una web sencilla para tener tu negocio en internet, crear un blog para crear una estrategia de marketing de contenidos, marca corporativa o personal y aplicar técnicas de posicionamiento seo, y si eres emprendedor también puedes crear una sencilla tienda online.
Divi es una herramienta de diseño web fácil de utilizar, con editor esquemático y editor visual drag and drop y sus usuarios ideales son:
- Para profesionales que no quieren desarrollar con código.
- Para crear webs, blogs, tiendas de servicios o tiendas online de forma rápida.
- Para crear o implementar un diseño profesional.
- Personas que quieran iniciarse en el diseño web profesional.
- Blogueros
- Emprendedores o Autónomos.
- Profesionales del Marketing.
- Diseñadores Gráficos.
- Fotógrafos.
- Profesionales del video marketing.
- Periodistas.
- YouTubers, Streamers e Instagramers.
Si tu proyecto necesita funcionalidades adicionales desarrolladas con código, también puede ser Divi la plantilla base para tus proyectos de desarrollo.
Por ejemplo, muchas de las webs de servicios oficiales de la ciudad de Rivas Vaciamadrid (mi ciudad), utilizan Divi como base y las funcionalidades especiales son desarrolladas aparte.
Nos lo contó con más detalle mi amigo Jesús García en la ponencia WordPress en la administración pública dada en la Meetup de Madrid de WordPress.
Aunque hay que tener en cuenta otras características de los proyectos grandes o con necesidades especiales, como comportamiento de la web, uso de los datos, velocidades de procesos etc… donde normalmente se busca la máxima optimización al milisegundo, donde Divi no es la opción más óptima para ello.
Precio del tema Divi
El precio de divi tiene dos modalidades de suscripción que incluyen todos los temas y plugins de Elegant Themes.
Las modalidades de suscripción son Suscripción por año de 89 dólares o pago único de 249 dólares.
Puedes obtener un descuento de Divi navegando apuntando a la Newsletter de Elegant Themes.
Es una de las pocas herramientas premium de WordPress que incluyen un pago único de por vida y eso es un punto a favor, y creo que una de las principales características de su éxito.
Conclusión
El tema Divi es una herramienta fantastica para crear diseños en WordPress, facil de utilizar, muy accesible y en constante evolución.
Si estás empezando con el diseño web, quieres construir webs fácil y rapidamente y quieres hacerlo sin codgio esta herramienta es perfecta para ti.
Dicho esto hay que saber que no existe el tema perfecto.
Y aunque está optimizada y es muy potente conviene utilizar un buen hosting para utilizar esta herramienta y tener unas nociones y recomendaciones en cuenta cuando la usamos.
Y también conviene ver tutoriales o hacer un curso de WordPress para poder utilizarla adecuadamente.
¡Un saludo y espero que esta serie de tutoriales te sea de ayuda!
