tema divi

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!

Deja un comentario

El email no ser√° publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo Garc√≠a Asensio
  • Los datos se usar√°n para gesti√≥n de comentarios y medidas de seguridad
  • Legitimaci√≥n: tu consentimiento.
  • Destinatarios: los datos estar√°n ubicados en los servidores de Siteground.
  • Derechos: podr√°s ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. m√°s info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar