Índice
Cada vez son más las personas particulares que por su cuenta deciden crear su propio negocio en internet, ya sea de marca personal, de blog, eCommerce…
Y cada vez son más las herramientas que permiten a casi cualquier usuario que se lo proponga poder crear, diseñar y configurar su página web.
Tanto si ya tienes conocimientos de WordPress o Diseño Web, como si apenas acabas de aterrizar en este sector, estoy segura de que la plantilla Divi de Elegant Themes te va a sorprender tanto como me ha sorprendido a mi.
Por eso a continuación, te detallo una introducción de cómo funciona y cuáles son todas las ventajas de esta herramienta tan potente.
¿Qué es Divi y cómo funciona?
Divi en una plantilla para usar en WordPress y diseñada por el proveedor de temas y plugins Elegant Themes. Lo peculiar de esta plantilla, es que además de tener un diseño limpio y atractivo, cuenta con su propio constructor web, así puedes modificar prácticamente cualquier detalle de la página web.
No hace mucho, Divi anunció que también está disponible como plugin constructor web (Divi Builder) que funciona con cualquier otra plantilla de WordPress, lo cuál nos da una idea del enorme potencial que puede llegar a tener esta plantilla tan completa.
En realidad existen infinidad de plantillas y temas para crear una página web en WordPress, pero lo cierto es que pocas son tan completas, funcionales, limpias y actuales como el tema Divi.
Divi es una plantilla de pago, pero esto es algo que no te debe evitar usarla. Todo lo contrario, las plantillas de pago son de pago precisamente porque tienen un equipo detrás de soporte y que actualiza y mejora la plantilla cada cierto tiempo. Así te aseguras que tu web no quede desactualizada.
Además, el equipo que hay detrás de Divi, Elegant Themes, es uno de los mejores. Dispone de 87 temas y plugins para WordPress que destacan por un diseño práctico, intuitivo, responsive y sobre todo muy elegante, como su nombre indica ;).
Hacer una web con Divi paso a paso
No te voy a engañar. Si tienes cero conocimientos de creación de una página web, tendrás que afianzar antes algunos aspectos y ver más de un tutorial sobre Divi y sobre otros puntos. Como son elegir tu hosting, dominio, SEO u otras configuraciones específicas que requiera tu web.
Pero tampoco te voy a decir que es muy complicado crear una web con Divi en poco tiempo, pues no necesitas conocimientos de programación o de CSS para ello.
Con esta plantilla WordPress que incluye su propio constructor web podrás crear fácilmente una web corporativa, un blog, una web de marca personal, una revista digital… Pero para lo que destaca principalmente Divi es para el diseño de una tienda online con WooCommerce, pues integra numerosas opciones para los productos, tienda, precios…
Además, constantemente se realizan actualizaciones de optimización para mejorar el SEO de Divi, y recientemente se ha añadido un maravilloso Marketplace, donde puedes adquirir layouts, extensiones o child themes perfectamente compatibles con la plantilla.
Una vez instalado el plugin o la plantilla Divi, para empezar a construir tu web, simplemente tienes que entrar en la Página o Entrada de WordPress que quieras editar y clicar en el botón superior de Usar el Conctructor Divi. Automáticamente se te abrirán todas las opciones de diseño de esta plantilla.
Ahora vamos a ver cuáles son los principales elementos que necesitas conocer de la plantilla Divi para empezar a utilizarla:
Secciones y módulos
El constructor web del tema Divi es bastante sencillo de usar porque funciona con secciones y con módulos.
Estos son muy visuales, se distinguen con diferentes colores y pueden ser arrastrados (drag and drop) de un lugar a otro con el mismo ratón de ordenador. Esto hace que sea muy fácil ordenar las secciones de tu página web.
Para diseñar la web tendrás que ir añadiendo estas secciones, las cuales pueden ser:
- Sección de anchura completa (borde morado).
- Sección estándar (borde azul).
- Sección especial (borde rojo).
- O añadir una sección desde la biblioteca (lo explicamos más abajo).
Después, clicando en «Insertar columna», eliges las columnas y las divisiones que quieres incluir en cada sección. No te preocupes si no lo tienes muy claro porque después se puede volver a cambiar la estructura.
Y a continuación, clicando en «Insertar módulo» puedes añadir el módulo que quieras. Hay unos 46 y algunos de los más usados son:
- Acordeón
- Deslizador (Slider)
- Imagen
- Mapa
- Pestañas
- Texto
- Vídeo
- Anuncio (Icono)
- Blog
- Formulario de contacto
- Recomendación (testimonio)
- Tienda (productos de ru eCommerce)
- Botón
- Galería
- …
Una vez ya tengas la sección y el módulo elegido, puedes empezar a darle estilo y a configurar lo que necesites.
Puedes cambiar los tamaños, colores o interlineados de la tipografía, añadir o quitar margen (margen personalizado), añadir una imagen de fondo, convertir la imagen en parallax, poner títulos, cambiar colores, añadir bordes, añadir enlaces… y una infinidad más de opciones.
Esto lo puedes configurar en los apartados «Ajustes generales» y «Ajustes avanzados de diseño». Incluso, si tienes conocimientos de CSS, cada módulo contiene un apartado de CSS personalizado.
Al principio te puede parecer un poco complicado encontrar cada cosa que quieras cambiar o retocar, pero al hacerlo varias veces verás como resulta bastante mecánico.
Opciones de plantilla
Como todos los temas para WordPress, Divi también incluye las opciones de plantilla, desde donde podrás configurar otras muchas opciones de tu página web.
Las opciones de plantilla contienen:
- OPCONES DEL TEMA; para añadir el logo y favicón de tu web, integrar código de Analytics, Clave API de MailChimp, direcciones de las Redes Sociales, activar la barra de navegación fija, activar el modo blog…
- PERSONALIZADOR DE TEMAS; para configurar el menú de la cabecera de tu web, el pie de página, los Widgets, la altura de las secciones, el ancho del sidebar, cambiar la tipografía, poner un fondo a la web…
- PERSONALIZADOR DE MÓDULOS; te permite personalizar cada módulo de tu web, como las imágenes, la tienda, la llamada a la acción, los menús, el separador, la barra lateral, el ancho completo deslizante (slider)…
- EDITOR DE ROL; En el caso de que seáis varios diseñadores o colaboradores, esta opción es esencial. Desde aquí se puede indicar qué permisos habilitas para cada Rol. Es decir, a qué opciones de diseño de Divi puede acceder el Administrador, Editor, Autor, Contributor o Shop Manager.
- BIBLIOTECA DIVI; Esta es una gran ventaja con respecto a otras plantillas de WordPress. Con la Biblioteca de Divi puedes exportar e importar módulos, secciones o incluso diseños completos de una web a otra. Más abajo te detallamos esta opción.
Lo bueno del «Personalizador de temas» y el «Persnalizador de módulos» es que te dejan ver la interfaz de la web mientras la diseñas (fron-end), desplegándose el menú con todas las opciones de personalización en una columna lateral izquierda.
Además, también puedes personalizar las páginas de tu web mientras las visualizas en tamaño smartphone, tablet o PC.
Biblioteca Divi
Esta es sin duda una de las características que más me ha fascinado de la plantilla Divi y una de las que más tiempo me ha ahorrado sin duda.
Para empezar, Divi te da la opción de elegir una de sus plantillas predefinidas guardadas en su Biblioteca, para que no tengas que crear tu diseño desde cero.
Algunos de los diseños predefinidos de Divi son:
- Página de Inicio básica.
- Página de Inicio Tienda.
- Página de Inicio Empresa.
- Página de anchura completa.
- Blog estándar.
- Modo Mantenimiento.
- Página de aterrizaje.
- Acerca de nosotros.
- Contacta con nosotros.
- Página de Ventas.
- …
Para utilizarlas simplemente tienes que elegir la que te interese y pulsar el botón «cargar». Después puedes ir sustituyendo las imágenes y textos por los de tu página web.
Esto ya te puede adelantar mucho trabajo, pero Divi aún tiene una opción mejor. También te permite guardar diseños tuyos en esta Biblioteca y exportarlos e importarlos desde una página a otra, ya sea de la misma web o de otra diferente.
¡¡Ahorrarás horas de tu tiempo!! y si vas a crear diferentes webs con diseños parecidos, esta opción te viene como anillo al dedo.
Front-end y Back-end
En las primeras versiones, este tema solo tenía las opciones de diseño en el back-end, pero desde la versión 3.0 de Divi, también se te permite diseñar y configurar sus secciones en el front-end, es decir, mientras visualizas la web. Así podrás ver los cambios al instante.
Esta opción se activa en «Habilitar el Constructor Visual».
De todas formas, si prefieres hacer el diseño de tu web desde el back-end, Divi te permite hacer una previsualización de cada sección al clicar en el icono del ojo.
Puedes previsualizar la sección en modo smartphone, modo tablet y modo PC.
Diseño Responsive
Como ya he comentado antes, Divi es una excelente plantilla responsive, es decir, se adapta perfectamente a los diseños webs en smartphones, tablets y PCs.
De esta forma, solo haciendo un diseño web, Divi reajusta las secciones a los demás formatos y apenas tendrás que modificar nada para obtener el mismo diseño en todos los dispositivos.
No obstante, si prefieres diseños distintos en cada dispositivo, puedes personalizarlos a tu gusto, modificando márgenes, espacios o incluso eliminando secciones.
En definitiva, me parece (y coincido con mucha gente) que Divi es la mejor plantilla para WordPress que hay en este momento, por incluir un constructor web sencillo y práctico, por su diseño atractivo y porque lleva detrás un gran equipo de desarrolladores y diseñadores que actualizan constantemente y dan soporte.
Con esta plantilla para WordPress, casi cualquier usuario puede diseñar su página web, empezando con un diseño sencillo.
No obstante, Divi tiene tantísimas opciones de diseño, que una vez vayas investigando podrás crear cualquier tipo de web con efectos y funciones muy profesionales.
La única pega que le veo a este tema es que prácticamente toda la información que encuentras en internet está en inglés, por eso espero haberte ayudado a conocer mejor esta plantilla premium con este post de Divi en español. 😉
