10 videotutoriales para crear una Web wordpress con DIVI

10 videotutoriales para crear una Web wordpress con DIVI
crear una web wordpress divi

Si estás pensando en crear una web WordPress con un diseño potente y versátil, este este es tu post. Divi es uno de los temas, plantillas o templates más atractivos que podrás encontrar. Es el tema estrella de los desarrolladores de Elegant Themes. Su flexibilidad le ha hecho ser lo más para muchos diseñadores gráficos. Ha revolucionado completamente el diseño web con WordPress y con las actualizaciones implementadas primero en 2015 y hace poco en 2016, se ha puesto a la vanguardia en cuanto a prestaciones de diseño. Se adapta a cualquier tipo de web, desde una simple landing page hasta una web corporativa con e-commerce, Divi lo hace todo posible. Y además de forma muy fácil e intuitiva.

Podéis encontrar el tema Divi y ver cómo queda aquí en la demo de Elegant Themes.

Divi es un tema totalmente traducido, que permite una optimización brutal para todos los tipos de dispositivos y lleva la responsividad un paso más allá, permitiendo no solo optimizar contenidos sino también eliminar o añadir contenidos según el tipo de dispositivo desde el que se acceda a nuestra web. De tal forma que, podríamos tener una web diseñada para móviles y otra para ordenadores o una parte fija y otra variable según el dispositivo.

Creando una web con un maquetador visual peculiar: el súper flexible Divi Builder

Antes de empezar con los videotutoriales, debes saber que Divi usa un maquetador visual propio. Probablemente, ya conozcáis otros maquetadores visuales como Page Builder o Visual Composer. Pues bien, Divi usa uno muy particular, tanto es así que se llama “Divi Builder”. Hasta hace poco, este maravilloso maquetador ha sido el motivo de la discordia entre los diseñadores gráficos y los desarrolladores webs más puristas. ¿La razón? Bueno, pues que por un lado es muy sencillo -si tienes buen criterio, claro- poder llevar a cabo una web “resultona” y que mole. Los diseñadores gráficos tienen una gran baza con este theme porque es muy “customizable” y permite una gran variedad de efectos. Pero, amigos, esto no sale gratis y aquí viene el razonamiento de quiene no lo avalan.

Los wordpresseros más puristas avisan de que Divi es un tema que tiene problemas en la “trastienda”: no cumple el principio de economía de código y sufre de “code bloat” (o lo que es lo mismo, código inflado). También hay otra cuestión que es más bien estética en cuanto al Panel de Control de Divi y a la forma en que aparece su maquetador. Muchos opinan que está poco integrado en la estética WordPress y que pareciera un nuevo CMS.

crear pagina web wordpress con maquetador visual divi

Y aunque esto sea un poco excesivo, es cierto que Divi es un tema muy peculiar. Para muchos, el mejor tema WordPress de 2016 pero para otros, un auténtico horror en cuanto a uso de código. Hasta hace poco, Divi era un poco sectario. ¿Qué queremos decir con esto? ¿Que no debo usarlo? ¡No! Solo que sí es verdad que debemos asumir algunas cosas al comenzar a trabajar con Divi… sigue leyendo…

En primer lugar, es muy probable que te enganches. Que el tema te absorba y que intentes emplearlo en muchos proyectos webs. En segundo lugar, al trabajar con este reconocido y popular tema de Elegant Themes, estás dejando de trabajar con todos los demás y mientras la mayoría de temas permiten saltar de uno a otro sin demasiados sustos, con Divi hemos de ser precabidos. Hacer una copia de seguridad antes de probar con otro theme es una condición indispensable para quienes usen Divi.

Hasta hace poco, como decíamos, si tenías tu web construida con Divi y cambiabas a otro tema todos los shortcodes que creaba el maquetador visual se convertían en líneas de código muerto. ¡Y entonces venía tu cara de horror! Já. Bueno, pues después de mucho tiempo, en Elegant Themes han tomado nota y han subsanado esto convirtiendo el maquetador Divi Builder en un plugin que se hace cargo de implementar estas funcionalidades en otros temas que no sean de Elegant. Así pues, ya tienes un motivo más para que te decidas a diseñar con Divi.

¡No te asustes! Solo recuerda que, como con cualquier otro tema, antes de hacer cualquier cambio es bueno tener a mano una copia de seguridad y al instalar plugins, asegurarte de que han sido probados con la última versión de WordPress. También debes saber que Divi está totalmente preparado para trabajar con Woocomerce y es también una buena elección a la hora de montar una tienda online.

Divi: un tema muy completo para webs corporativas, tiendas y blogs

Es un tema muy completo tanto para webs corporativas o tiendas como para portfolios personales y blogs. De hecho, si tienes un blog y eliges Divi podrás customizar tus entradas como si fueran páginas y podrás dar una apariencia de magazine a tu blog a poco que te familiarices con su maquetador visual.

Una vez puestos en situación, os vamos a enseñar a trabajar con Divi. Seguramente no os váis a arrepentir. Básicamente porque es un tema en el que, sí, vale quizás haya excesivo código en su hoja de estilo o tarde un poco más en cargar que otros de temas de su “liga” como Canvas. Pero tiene lo que básicamente todos los usuarios buscamos: crear una web bonita, flexible, escalable, dinámica, responsive y adaptable a WooComerce sin tocar una línea de código.

Vamos con los 10 videotutoriales para crear una web con Divi!

1.- Conoce Divi, sus últimos cambios y unos ajustes básicos.

Los cambios realizados en el diseño del ePanel de Divi fueron (y aún son) de lo más significativo y revolucionario. Es totalmente distinto al de los temas (en apariencia). En cuanto te acostumbres a él, te será difícil abandonarlo. ¡Súper cómodo!

2.- El sistema de compra y las posibilidades de uso de Divi.

Otra de las cuestiones que diferencian a Divi de cualquier de los temas que habitualmente podemos encontrar en Themeforest es que está hecho por Elegant Themes y tiene unas condiciones de compra distintas al resto. Lo habitual es que una plantilla premium cueste como unos 65 $ y sea de un solo uso. Con Elegant Themes la cosa es distinta. Te ofrecen varias modalidades de compra, cada una con distintas prestaciones. Incluso con la más básica, vas a pagar un poco más, 69 $, pero es muy probable que te compense. Sobre todo, si piensas tener Divi en más de un sitio web porque podrás utilizarlo todas las veces que quieras y esto es una gran ventaja. Además, con esta compra te ofrecen de forma gratuita un amplio paquete de temas del siempre fiable equipo de Elegant, con su propio soporte. El hándicap viene en que, si quieres tener todas las actualizaciones activas, la cuota de 69 $ por todo esto será anual. Lo habitual era pagar una vez por un solo uso y olvidarse. Aquí puedes usar todas las veces que quieras pero para que todas las actualizaciones estén bien y estar respaldado por Elegant deberás pagar anualmente. Estudia tu caso, no para todo el mundo es igual, pero nosotros tenemos claro que es recomendable.

3.- Divi está completamente traducido a español: así es por dentro.

El tema Divi viene completamente traducido a español y esto hará que tu trabajo sea mucho más sencillo. Es una gran ventaja ya que la mayoría de temas vienen en inglés y a veces nos encontramos con términos técnicos que no sabemos muy bien lo que significan. Pues bien, con Divi te ahorrarás tener que buscar esas palabrejas en Google. Podrás tenerlo todo en español.

4.- Podrás cargar contenido Demo página a página.

Este videotutorial muestra, entre otras cosas, como cargar el contenido de la demo de Divi. A diferencia de otros temas, Divi no carga todo el contenido de una vez sino que puedes cargar según te interese una “home corporativa”, “landing page”, “contacto”, “servicios” o “sobre nosotros” por ejemplo y aplicarlo a tu propio sitio web de forma independiente. Aunque en este videotutorial (del 2014) aún está el maquetador anterior, actualmente con Divi Builder el proceso es muy similar. Cargas el contenido de la biblioteca y ya está. También puedes además realizar tu propio diseño predefinido y dejarlo ahí guardado en la biblioteca para usarlo tantas veces como quieras sin necesidad de volver a realizar todo el proceso. La última de las facilidades es la opción de “copiar” y “pegar”. Podrás clonar módulos de una página a otra sin necesidad de copiar códigos, desde el propio maquetador.

5.- Puedes trabajar con CSS.

Divi Builder utiliza el conocido sistema de “drag&drop” (o lo que es lo mismo “arrastrar y soltar” en HTML 5). Para los principiantes (y no tan principiantes) es muy sencillo, pero además Divi te permite también trabajar con CSS y aunque este tema no está pensado para expertos en códigos (quizá a esos temas como Génesis por ser más ligeros les convenga más) sí que ofrece facilidades de customización en este sentido. NB: Page Builder es actualmente Divi Builder, como podemos ver en el vídeo de abajo. Divi Builder es un plugin pero viene ya incorporado al tema.

6.- Agrega bloques de contenido y crea grandes historias.

Con Divi se trata de ir creando bloques de contenido estructurados en filas y columnas que tengan un sentido conjunto y que cree historias de valor respecto a una marca, una persona, un producto o un servicio. No dejes que tu web quede solo en algo bonito y estético. Añádele valor y haz que el usuario se identifique con tu trabajo, proyecto, servicio o producto. Esto es fundamental si tienes algo que vender. Y en una web, de forma directa o indirecta, de forma online o de forma offline, siempre tenemos algo que vender.

7.- Haz una homepage atractiva con Divi Builder.

El maquetador de Divi es una pasada, el salto de calidad que han dado en las últimas actualizaciones es notable. Una de las cuestiones que hacen que sea muy cómodo maquetar en Divi es que podemos hacer “vista previa” sin necesidad de hacer “vista previa”. ¿Perdón? Que sí, que ya no tendremos que irnos al botoncito del lateral derecho de nuestro escritorio, ni abrir en una pestaña nueva para ver cómo está quedando nuestro diseño. Divi nos permite a través de una especie de “ojito” que nos pone en el maquetador visual ver cómo queda nuestro diseño en cada uno de los dispositivos. Ordenador, tablet o móvil. No olvidemos que la responsividad es algo súper importante y eso los desarrolladores de Elegant lo tienen muy en cuenta. De hecho, ya sabéis que la tendencia de diseño mobile ready ya está superada por la tendencia mobile first.

8.- Sus novedades aumentan las potencialidades de nuestra web.

Divi sirve para mejorar la imagen de tu empresa en Internet. Hay que convertir usuarios en clientes y Divi ofrece un montón de funcionalidades que acercarán a tus visitantes a tu empresa o marca personal. Algunas de las más sencillas son, por ejemplo, que podrás desactivar aquellos contenidos que no te interesen para ciertos dispositivos móviles o podrás mostrarlos de forma distinta u otro contenido en su lugar. Esto personalizará la experiencia usuario según el dispositivo y te hará tener más control sobre cómo se verá tu web en función del terminal y del comportamiento o perfil de usuario que se asocia a cada tipo de dispositivo.

Algo un poco más complejo, de usuario pro, es habilitar las pruebas “multivariable”. ¿Para qué sirven las pruebas multivariable de Divi? Pues, en esencia, las pruebas multivariable son distintas opciones de diseño que tú eliges dentro del maquetador visual y que Divi muestra a los usuarios de tu web de forma aleatoria analizando el comportamiento del usuario. De esta forma, y con los resultados métricos dispuestos en una gráfica podremos comprobar qué tipo de diseño es más “efectivo” por ejemplo para que hagan click en un botón de “comprar” o en uno de “contacto”. Una vez tengamos ese dato, podremos elegir un diseño definitivo teniendo en cuenta resultados cuantitativos y no variables subjetivas de gusto o diseño.

9.- Puedes volver atrás si te arrepientes.

Hay una especie de historial de diseño en el cual, si te arrepientes de lo que has hecho, aunque lo hayas guardado, puedes restaurarlo.

10.- Terminemos por el principio.

Aquí tienes un videotutorial por si te decides a instalar Divi. Tus primeros pasos son sencillos, si has “trasteado” nuestro blog, te has apuntado a algunos de nuestros cursos o simplemente ya has tenido algún contacto con WordPress, seguramente no necesites estas explicaciones básicas, pero nunca está de más recordar esas cosas rutinarias y sencillas pero que son imprescindibles a la hora de dar forma a nuestro sitio web, blog o weblog.

Conclusión

Divi es un pedazo de tema que te ayudará a resolver muchos problemas de diseño en tus inicios. Si no eres un experto en código, seguramente te alegrarás de haber escogido Divi como tema para realizar tu web. Te dará un muy buen resultado estético y podrás realizar cambios con gran facilidad.

Ten presente que los desarrolladores de Elegant Themes tienen soporte propio para cualquier duda que te surja y que hay multitud de foros especializados en los que, como aquí, se habla de Divi, de sus últimas actualizaciones y de cómo va mejorando con el paso del tiempo.

Sea como fuere, en última instancia, a la hora de realizar una web hay otra cosa que debes tener en cuenta independientemente del tema usado y es el hosting: trabaja con una empresa española y de garantías para tener todo bien atado. Nosotros trabajamos con Webempresa, y la recomendamos al 100%. El hosting y el Tema son dos piezas de un puzzle que han de trabajar conjuntamente a la hora de crear una web wordpress para que todo tu trabajo garantice tu éxito online. ¡Desde Autoempleo Bloguero estamos seguros de que lo conseguirás! Ánimo. 🙂

Periodista freelance y profesor. Apasionado de Wordpress, la comunicación y el márketing en todas sus formas.

8 Comentarios

  1. Javi A. 5 meses hace

    Hola

    No me ha quedado claro el tema del pago por uso.
    Según la web de Elegant Themes he entendido que debe pagarse anualmente por su servicio, pero después, al leer este artículo, me ha parecido entender que no, que se puede pagar solo un año y tener Divi.
    ¿He entendido mal?
    Gracias

  2. Autor

    Buenas Javi, gracias por comentar. si vas a trabajar con Divi de forma profesional, te recomiendo que pagues. De esa forma, siempre tendrás las últimas actualizaciones y plugins de los desarrolladores de Elegant, así como el amplio paquete de temas que ofrecen. La verdad es que está bastante bien y el precio es asequible, pero sí, se puede pagar una vez y tener Divi, en tanto que tu web seguirá funcionando. No obstante, perderás el soporte y la posibilidad de estar a la última en actualizaciones, plugins y temas de Elegant. Ya es una cuestión de elección personal. Lo recomendable es pagar y contar con esa garantía de Elegant. ¡Espero haber resuelto tu consulta!

  3. Julio 5 meses hace

    Hola Cristóbal Santos, tengo una pregunta. Soy pintor y quiero hacer un portafolio con DIVI y después convertirlo en tienda virtual. Me gusta mucho el tema “Dorsey” ( http://madebyminimal.com/demo/dorsey ) pero cuesta 100 euros y el puglin de la tienda virtual se cobra aparte. ¿Podrías decirme si DIVI puede adaptarse hasta tener una imagen minimalista idéntica y además una fácil navegación y ligereza como “Dorsey”?
    Muchas gracias por tu ayuda

  4. Buenas tardes. Yo tengo divi en mi blog, pero la licencia no es mía, corresponde a la persona que mi hizo mi sitio web. Puedo cancelar esa licencia y comprar otra? y si es así, afecta a mis publicaciones?. Como paso los contenidos a la nueva plantilla divi?. Espero que me puedan ayudar. Gracias

    • Hola Isabel, bastaría con que contrataras cualquier plan de Elegant Themes. De esa manera tendrías tu propia licencia. Luego bastaría con que entrases a tu administrador de WordPress, en el Apartado DIVI > Opciones del Tema > Updates, y anotaras ahí tu usuario y clave API. Esto no afectaría para nada a tus publicaciones, y tampoco necesitas volver a instalar la plantilla, ya que el archivo sería exactamente el mismo. Los comentarios tampoco tienes que psarlos, lo puedes dejar todo tal cual! Así de fácil!

  5. Sharon 2 meses hace

    Hola! Te hago una consulta… ¿Cómo hago para que me aparezca la subpágina con Divi? Porque logré crearla, pero no me aparecen las subpaginas, al menos que la persona tipee directamente el link de la subpagina.

    • Hola Sharon, Muy fácil, sólo tienes que añadirla al menú y desplazarla bajo la pestaña que quieres que aparezca.

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*