Diferentes módulos disponibles para insertar en los bloques creados con el Page Builder de esta plantilla WordPress multipropósito conocida como Divi.
En un post anterior enumeramos las principales características de esta plantilla wordpress. Sigue este enlace para ver las principales características de Divi.
La plantilla WordPress Divi dispone de lo que se conoce como un page builder. El page builder sirve para construir páginas en wordpress a través de bloques y de esta forma aumentar de una manera extraordinaria la flexibilidad de los diseños de cada una de las páginas del sitio web.
En cada uno de los bloques construidos con el page builder de esta plantilla WordPress tenemos una serie de módulos disponibles para insertar.
Haz clic en el botón para ver todos los detalles sobre los diferentes planes de Elegant Themes para comprar Divi, y los descuentos disponibles:
Vamos a hacer ahora un recorrido por los módulos más significativos que nos ofrece esta plantilla wordpress.
CURSO ONLINE WORDPRESS + DIVI 3.0
Curso WordPress online con Divi
1.- Módulos de la plantilla WordPress DIVI
1.1.- Sliders
Tenemos disponibles diferentes tipos de sliders. El tipo de slider que utilizo más habitualmente para mis clientes es el de ancho completo. Aunque dependiendo de las dimensiones del bloque en el que sea insertado podemos construir sliders de diferentes dimensiones con esta plantilla wordpress.
En la página principal de nuestra web puedes ver un slider a ancho completo.
1.2.- Vídeos
Con esta plantilla wordpress es posible insertar vídeos como background o fondo como te describo en esta entrada que escribí hace algún tiempo: insertar un vídeo background con Divi
1.3.- Blog
Podemos insertar un blog en un bloque. Por lo que será fácil crear una página de blog combinada con otros elementos. También existen varias formas de distribuir las entradas en el blog (tradicional y en pequeños bloques conocido como “Mansonry”).
Blog tipo masonry
1.4.- Portfolio
Esta plantilla wordpress dispone de la posibilidad de crear proyectos y mostrarlos a través de un portfolio. Este portfolio se puede insertar en un bloque y mostrar con diferentes formatos o diseños.
Divi también dispone de portfolio filtrable. Es decir, de la posibilidad de mostrar el portfolio con filtros por categorías.
Aquí puedes ver una demo de la plantilla wordpress Divi con un portfolio filtrable.
1.5.- Iconos
La plantilla wordpress Divi, como muchas otras, dispone de módulos tipo icono (en inglés blurbs) y que está traducido en la plantilla como módulo tipo “anuncio”.
Podemos insertar iconos disponibles en la plantilla o subir iconos personalizados. Existen dos tamaños estandarizados para los iconos que vienen por defecto con esta plantilla WordPress.
Aquí puedes ver una demo de iconos en Divi
Desde aquí puedes contratar un plan de Elegant Themes y acceder a todas sus plantillas (entre ellas DIVI)
1.6.- Galería de imágenes
Como no podía ser de otro modo, esta plantilla para WordPress dispone de módulos tipo galería de imágenes. Este tipo de módulos se utiliza para mostrar diferentes imágenes sobre las instalaciones de un local, trabajos de fotografía, etc.
1.7. Desplegables
Divi dispone de dos tipos de desplegables de texto. Los conocidos como “Toggles” (conmutador) y los “accordion” (acordeón). La diferencia entre ambos es que los Toggles se pueden desplegar de manera independiente mientras que los tipo acordeón no. Los tipos acordeón solo pueden tener un elemento desplegado.
Ejemplo de módulos tipo acordeón
Ejemplo módulo tipo Toggle y accordion
1.8.- Pestañas
Esta plantilla wordpress también dispone de módulos tipo Pestañas (tabs en inglés). Aquí puedes ver una demo del funcionamiento de las pestañas o tabas en esta plantilla para WordPress.
1.9.- Texto
Evidentemente no podían faltar los módulos tipo bloque de texto que no son otra cosa que bloques que incorporan el editor de texto de WordPress. A través de él podremos insertar texto formateado, shortcodes, etc.
1.10.- Tablas de precios
Con esta plantilla WordPress también podemos insertar tablas de precios en los bloques a través de este módulo denominado “pricing tables” en inglés y “tabla de precios” en español.
1.11.- Contadores
Divi dispone de cuatro módulos tipo contador:
a.- Cuenta atrás (Countdown timer): este tipo de contador es una cuenta atrás en horas, minutos y segundos hacia una fecha determinada. Este tipo de contadores se utilizan para poner una fecha de lanzamiento para una página web, evento o similar. Aquí te dejo un enlace para saber cómo configurar dicho módulo que traducido al castellano lo denominan “temporizador de cuenta atrás”.
b.- Contadores de barra (bar counters): seguro que habréis visto en alguna web una serie de barras horizontales que sirven para puntuar porcentualmente diferentes aptitudes o habilidades.
Aquí tienes un enlace a la demo de DIVI para que conozcas el efecto de este tipo de módulo conocido como «bar counters».
c.- Contadores circulares (circle counters): Contadores porcentuales en los cuales se indica el valor porcentual en el centro del círculo y proporcionalmente en el perímetro del mismo a través de un color. Aquí te dejo un enlace para que veas el efecto de los contadores circulares
d.- Contador de número (number counter): Contador con valor numérico o porcentual con efecto de transición. Este módulo lo utilicé en una página web relacionada con un evento solidario (astussolidario) en el que se iban comprando kilómetros solidarios y a través de este tipo de contador se actualizaba (manualmente) el total de kilómetros vendidos.
Aquí puedes ver el efecto del contador numérico
1.12.- Formulario de contacto
Esta plantilla wordpress dispone de un módulo tipo formulario de contacto con los campos para nombre, email y mensaje. Además dispone de Captcha para evitar el spam.
1.13.- Llamada a la acción
Divi también dispone de un módulo para llamada a la acción (call to action) que presenta diferentes posibles configuraciones dependiendo de si queremos que el botón de llamada salga integrado en un bloque o aislado.
Aquí tienes varios ejemplos de «call to action» para la plantilla wordpress Divi
1.14.- Mapa
No podía faltar la posibilidad de integrar un mapa de Google de manera sencilla y así no precisar de un módulo para este fin.
1.15.- Tienda
Divi es perfectamente compatible con el plugin Woocommerce. Woocommerce sirve para dotar a una página web realizada con WordPress de las características necesarias para poder vender online.
Divi presenta un módulo para que podamos insertar la página principal de la tienda a través de un bloque y de esta manera dar mucha más flexibilidad a la página principal de la tienda online.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquín.
Quiero hacer podcasting y me gustaría poder meter en mi web un calendario de publicaciones de dichos podcasts, ¿es posible?
Muchísimas gracias!!!
Un fuerte abrazo desde Jaén!!
Víctor Figueroa
Hola Victor,
pues no lo se, no conozco ningún plugin para eso.
Yo buscaría dos tipos de plugins:
1.- Plugins de tipo calendario (plugins calendar wordpress)
2.- Plugins para podcast (plugins podcast wordpress)
a ver si con esos dos tipos de búsquedas encontraras lo que te hace falta, pero lo cierto es que no veo fácil que exista algo así.
Saludos desde Murcia
Hola Joaquín,
ante todo gracias por tus aportaciones claras y útiles. Necesito hacerte una pregunta, ¿se te ocurre alguna manera de hacer un calendario de eventos con DIVI? no encuentro una manera sencilla de insertar un calendario en una web en wordpress y los plugins que he probado no me convencen. Te agradecería cualquier pista.
Un cordial saludo.
Hola Pilar,
hasta el momento solo he creado una web de eventos y era un woocommerce en el cual se puede crear eventos y vender entradas. Utilicé un plugin especíico para ello que puedes ver en este post que escribí: tienda de eventos woocommerce
Creo que no es lo que buscas exactamente pero no conozco ni he probado ningún otro plugin
Hola Joaquín,
Gracias por el post.
Qué módulo me recomiendas para crear los «posts relacionados» al final de cada artículo ¿?
No tiene un módulo al efecto y me mosquea un poco. Me gustaría saber tu opinión. Plug in a parte tal ves¿?
Muchas gracias
Hola Kiko,
Desde hace algún tiempo no uso plugin de post relacionados en mis blogs, en su día utilicé shareolic pero consumía muchos recursos, ralentizaba la web y metían publicidad. Al final descarté este tipo de funcionalidad y en principio no tengo intención de volver a añadirla.
En este post puedes ver 10 plugins para post relacionados
Hola, ha sido de gran ayuda tu post, pero tengo una duda, como podría hacer un ejemplo parecido a este de http://madrid.lecool.com/ con las imágenes que redireccionan a otro lugar?
Buenas,
las imágenes que aparecen son post del blog
¿te refieres a eso, a mostrar entradas de blog con un formato parecido a ese.?
Un saludo
Hola,
Que bién encontrar tu blog! Sabes como se pueden crear diferentes barras laterales con divi? Quisiera hacer una diferenciada en la tienda online ( solo con widgets del woocomerce).
Gracias
Hola Nina,
si se pueden crear diferentes barras laterales con Divi, pero estas barras son asignadas mediante el «módulo barra lateral» por lo que va a ser difícil que puedas asignar dicha barra a las páginas por defecto de woocommerce.
Para crear una nueva barra lateral o sidebar ve a: «Apariencia > Widgets». Donde dice: «Nombre de Widget» escribe un nombre y dale al botón de «Crear». Después refresca la página y ya lo tendrás listo.
Un saludo
Estimado profesor,
Te estoy agradecido por este post.
Un cordial saludo.
Hola Gonzalo,
gracias a ti. Me alegro que te haya sido de utilidad este post sobre los módulos del Divi builder.
Un saludo
hola, muchas gracias por tu post, me ha ayudado mucho a avanzar con mi sitio.
Me gustaría saber si me puedes ayudar.
Necesito eliminar la columna que sale al costado de mi tienda con los widgets.
quiero que solo salga la tienda al ancho completo, probé eliminado los bloques pero no pude. http://www.darshangong.com/escuela/tienda/
Hola Leonardo,
Me alegro que te guste el blog.
Para quitar la barra lateral en la tienda woocommerce con Divi debes ir a: «panel de administración > Divi > Opciones del tema > General»
A continuación busca la opción: «Diseño de la página de tienda y de la página de categorías para WooCommerce» y selecciona la opción: «Ancho completo».
Un saludo
yo he probado divi y despues de un tiempo no me muestra los mapas y el carrousel de diapositivas solo muestra la primera foto.
antes funcionaba bien.
He probado a instalar todo desde cero y sigue pasando. ¿a que se debe?
En la vista previa del modulo de mapa lo veo bien. Y si uso otro tema distinto a divi y pongo el codigo html del google maps para ver un mapa sala.
Hola Francisco,
No se a que se puede deber. Yo lo que haría sería actualizar Divi a la última versión (tras hacer una copia de seguridad archivos + base de datos) y volver a crear la página donde está el mapa.
También te recomiendo que pongas tu incidencia en el foro de soporte de Elegant themes.
Un saludo
Hola Joaquín,
Yo también me he enganchado con DIVI en los últimos proyectos. Pero ahora tengo una duda para un proyecto nuevo. Tengo un diseño donde la home incluye 3 o 4 entradas del blog destacadas. Sabes si con DIVI hay algun modo de insertar una sección en una página con algunas entradas del blog?
!Gracias por tu ayuda y tus posts siempre super útiles!
Buenas Nuria,
La forma de incluir entradas en una página es a través del módulo blog del divi builder. Con este módulo puedes filtrar entradas de blog por categoría. Es decir, puedes hacer que se listen las entradas de blog de una o varias categorias.
Un saludo