Curso de Divi Theme para WordPress – Cómo crear una página web desde cero

En este curso + tutorial os vamos a enseñar cómo crear una página web con Divi Theme paso a paso y desde cero.

Dentro de las mejores plantillas wordpress están Genesis, Elementor y Divi. Pero en este tutorial os hablaremos sobre Divi y las ventajas por las que elegí que esta fuera la plantilla Wordpress por excelencia de todos mis proyectos web a partir de entonces.

 

¿Qué es Divi Theme?

Divi es sin duda una de los theme o plantillas de Wordpress más utilizados actualmente, ya que permite fácilmente crear una página web o blog, gracias a lo fácil que son utilizar los módulos que incluye.

Actualmente ha mejorado y depurado muchísimo el código Divi Theme, permitiéndonos crear páginas web super optimizadas tanto en diseño cómo en velocidad carga (SEO).

 

También te podría interesar:

Códigos CSS y HTML para WordPress [+trucos]. Colores CSS para personalizar tu página web o blog

57 Mejores Plugins de WordPress gratuitos y pago en 2018

Los 20 mejores sitios para descargar themes WordPress gratis

 

Ventajas de Divi Theme

 

1. Pago único y actualizaciones para siempre.

La principal ventaja por la que decidí utilizar Divi es porque tiene un pago único y actualizaciones para siempre. No todas las plantillas ofrecen este tipo de soporte. Es decir, la mayoría de los proveedores de software te venden su producto y debes renovar el soporte anualmente si quieres seguir recibiendo actualizaciones y mejoras. En cambio con Divi, con pagar una vez, ya tienes actualizaciones y todas las mejoras que se vayan realizando para siempre.

2. Utiliza la plantilla Divi en todos sitios que diseñes.

Divi es desarrollado por Elegant Themes. Ellos te ofrecen también una licencia bastante amplia a la hora de poder utilizar su plantilla en todos los sitios que diseñes. Es decir, lo normal es que una licencia sea para un único sitio, pero con la licencia de Elegant Themes puedes instalar Divi en todos los sitios que montes sin ninguna restricción.

3. Plantilla optimizada para el SEO. Hace unos años era prácticamente imposible optimizar bien el pagespeed de estas páginas, pero a día de hoy podemos lograr page speed superiores a 90 y que nuestre página web cargue en menos de 2 segundos, una auténtica pasada.

 

Si quieres saber más sobre qué es Divi, solo tienes que leer la entrada de mi blog para conocer todas sus cualidades y darte cuenta de porqué es una de las mejores plantillas WordPress por las que deberías de invertir en tu web.

 

Características para crear una página web con Divi Theme

 

• Divi al ser ya de por sí una plantilla, te ofrece un diseño base sobre el que podemos realizar nuestra web. Es como las plantillas que vienen cuando instalas Wordpress. Pero a diferencia de esas plantillas, con Divi puedes personalizarlas todo lo que quieras.
• Puedes conseguir que distintos sitios que tienen Divi no se parezcan en nada. Esto es ideal porque es lo que debes conseguir si por ejemplo quisieras mejorar tu marca personal.
• Una de las principales recomendaciones para una web de marca personal es que tenga estilo propio, que no utilices una plantilla que todo el mundo pueda tener.
• Aunque mucha gente use Divi, puedes estar tranquilo de que tu diseño seguro que no lo tiene nadie, y eso es un punto a favor si quieres destacar y potenciar tu marca.
• Ahora que ya conocemos las ventajas y cualidades de Divi os voy a enseñar a crearos un entorno de pruebas para que podáis comenzar a crear vuestros primeros diseños con Divi.

 

Cómo instalar WordPress y Divi Theme

Antes que nada os vamos a enseñar cómo instalar WordPress para los que no sepáis hacerlo aún. Os vamos a mostrar cómo crearos un entorno de pruebas en vuestro pc para que no necesitéis disponer de un hosting para comenzar a trabajar.

En este entorno de desarrollo podréis incluso trabajar con mayor agilidad sobre todo a la hora de tener que modificar ficheros ya que el acceso a ellos está más de la mano y no necesitáis subirlos después al servidor.

 

Ventajas de empezar en un entorno local

• Se desarrolla más rápido. El diseño del tema es muchísimo más rápido. Solo por eso ya merece la pena. Tocar el HTML y los estilos CSS en local es super ágil. Modificas directamente los ficheros PHP y CSS, y con solo refrescar el navegador con F5 ya tienes los cambios implementados.
• Copias de seguridad. Puedes hacer copias de seguridad muy rápido. Copias la carpeta de tu wordpress, exportas la base de datos y ya tienes una copia de seguridad.
• Restaurar en caso de desastre con mayor facilidad. Solo tienes que restaurar los ficheros y la base de datos.
• No te tienes que pelear con las minucias de linux: permisos de los archivos, permisos de los usuarios de bbdd, configuración del dominio, etc.

 

Desventajas de empezar en un entorno local

• No tiene SSL. Lo tienes que configurar después.
• Tienes que migrar la web al servidor. Pero tampoco es tan complicado. Subes los archivos e importas la base de datos y listo.
• Es más complicado enseñarle los avances a tu cliente. Puedes publicar tu web que tienes en tu casa a internet, pero tiene su complejidad. En mi blog tengo un artículo donde explico cómo montar un servidor web en un NAS Synology o en una RaspberryPi. Ambas opciones te pueden servir. También tienes la opción de conectaros con Team Viewer.
• Las optimizaciones de WPO que tengas pensadas no te servirán en local. Deberás aplicarlas cuando lo subas al servidor.
• Auditorías. Algunas herramientas de auditoría no se pueden hacer en local, pero algunas como WebSite Auditor sí lo permiten.

Para montar un entorno de desarrollo en tu pc en un servidor de tu casa solo necesitas un servidor de aplicaciones (Apache o Nginx), un motor de base de datos (MySQL o MaríaDB) y PHP. Todo eso ya lo incopora Xampp en un único paquete para facilitarte la instalación. Ahora vais a ver lo sencillo que es instalarlo.

 

Pasos para instalar Xampp

Xampp es una aplicación que contiene servidor de base de datos MySQL o MariaDB, un Servidor Apache y lenguaje PHP entre otros. También incorpora servidor de correo, FTP y Tomcat, pero a nosotros solo nos interesa BBDD, Apache y PHP.

Hay gran cantidad de versiones de Xampp donde podemos elegir la versión de PHP que nos interesa sobre todo. A nosotros siempre nos debe interesar que tenga PHP 7.0 porque tiene el doble de rendimiento que PHP 5.6. Entre las versiones 7.0, 7.1 y 7.2 yo suelo elegir PHP 7.0. En alguna ocasión he utilizado alguna de las otras dos y me ha dado problemas de compatibilidad algún que otro plugin de WordPress.

Tened en cuenta que el software libre, al ser libre y mantenido por terceros, no se actualiza todo lo rápido que nos gustaría por lo que muchos plugins, temas, etc no están siempre actualizados a la última.

Aquí os dejo un truco. Con el plugin PHP Compatibility Checker (https://wordpress.org/plugins/php-compatibility-checker/ ) podéis chequear vuestra web antes de cambiar la versión de PHP y verificar si sería compatible con una versión de PHP en concreto.

Esto os generará un informe detallado con la compatibilidad de todos los plugins y temas que tengáis instalados. Os dirá incluso en qué línea de código se encuentra la función de PHP que no se compatible con la versión de PHP que estemos analizando.

¡Es una pasada toda la información os va a dar y sin tener que cambiar la configuración del servidor!.

 

De todas maneras, siempre podéis cambiar la versión de PHP en el servidor, probar la web, y si no funciona volver a poner la versión que teníais antes. El problema de esto es que debéis probarlo todo y seguro que algo se os escape. Por eso con este plugin podéis aseguraros y quedaros tranquilos de que si os saca todo en verde, os funcionará sin problemas.

Continuando con la explicación de Xampp. Tenéis también varias versiones a descargar. Un ejecutable con su .Exe o la versión portable. Yo prefiero la versión portable. Por defecto no te crea los servicios de Apache y base de datos en el sistema operativo. Eso significa que tienes que arrancarlos y pararlos manualmente.

Pero no te preocupes porque en el raíz de la carpeta tienes xampp-control.exe que es un panel de control donde puedes hacer todo eso. La ventaja de la versión portable es que la puedes mover a otro pc y tenerlo todo igual. O incluso tener un Xampp con PHP 5.6 y otro con PHP 7 e ir trabajando solo con el os interese. Es muy útil para cuando tengas proyectos con ambas versiones de PHP o quieras migrar uno a otro.

 

En resumen, instalar Xampp consiste en descomprimir el zip, ejecutar el fichero xampp-control.exe y arrancar la base de datos y el apache. Después accedemos a localhost y ahí tendremos la página principal que nos dirá si está todo correctamente.

 

 

Cosas a tener en cuenta:

* En la carpeta c:\xampp\htdocs publicamos nuestro WordPress, en el raiz o en una subcarpeta.

* En http:\\localhost\phpmyadmin tenemos un gestor de base de datos donde podemos crear la base de datos y los usuarios.

 

Con esto es suficiente. Ya tenemos la infraestructura creada para comenzar a desplegar nuestra primera web con WordPress.

 

 

Pasos para instalar WordPress

Esta es la parte más sencilla, sobre todo si lo hacemos en Xampp. En un hosting o en un servidor linux se complica un poco pero la idea general es la que os comento.

Descargamos el zip de WordPress desde WordPress.org español, y lo descomprimimos en c:\xampp\htdocs\wordpress.

Entramos en phpMyAdmin en http:\\localhost\phpmyadmin y creamos la bbdd con enconding utf8-general-ci para que no tengamos problemas con los acentos.

Iniciamos la instalación de WordPress desde nuestro navegador con la url localhost\wordpress y rellenamos toda la información. Si hemos introducido todos los datos correctamente habrás conseguido instalar tu primer wordpress en cuestión de minutos.

 

Cómo instalar Divi en Wordpress

Os voy a enseñar a instalar Divi como tema o plantilla wordpress. Eso quiere decir que vamos a usar Divi como plantilla. Esta ya incorpora el constructor de divi. Si instalamos divi Builder, solo estamos instalando el constructor. Lo que nos permite usar otra plantilla diferente y al mismo tiempo podemos utilizar el constructor de divi.

Pero yo soy más de utilizar la plantilla de Divi que ya trae actualizaciones de por vida, y personalizarla a mi gusto. Así no tendré problemas de que la otra plantilla se quede obsoleta.

Instalamos la plantilla como cualquier otra. Nos la bajamos de la web de elegant themes y la subimos vía zip. En Apariencia > temas subimos el zip y seleccionamos Divi como plantilla activa, y ya tenemos Divi instalado.

Después en Divi > Opciones del tema > Updates metemos nuestra clave de la licencia para activar las actualizaciones.

 

Si nos vamos a Entradas o Páginas veremos que nos aparece un botón morado bajo el título donde podemos cambiar el editor de texto por defecto por el de Divi. De esta manera es cómo podemos utilizar el constructor de Divi.

Al pulsar el botón debería cambiar el editor y aparecer este otro.

 

Con esto ya tenemos instalado Divi y podemos comenzar a realizar un diseño.

 

Cómo crear una Landing Page con Divi

Una landing page es una página de aterrizaje. Contiene información sobre un servicio o sirve también como página de bienvenida a una web para presentarnos a los usuarios.

En una página de este tipo lo que suele diferenciarse de una página normal es que intentamos captar la atención del usuario y conseguir que este reaccione ante una propuesta que le hagamos y al final acabe dándonos su email para convertirse en nuevo suscriptor o acabe comprando un artículo entre otras muchas opciones.

Podemos construir nuestra página de aterrizaje de dos maneras. Desde el escritorio, utilizando el constructor de Divi o desde la vista previa de nuestra página utilizando el editor visual.

Editor del escritorio

Si editamos una página desde el escritorio podemos tener un diseño de esta manera.

El diseño con Divi es modular. Ofrece gran cantidad de módulos con los que puedes integrar elementos dentro de una página. Esta variedad de módulos te permite gran flexibilidad a la hora de mostrar contenido y te permite ser muy ágil si quieres cambiar solo una parte de una página.

También dispone de pequeñas plantillas o layouts que puedes aplicar a una parte de una página. De esta manera puedes tener el contenido distribuido entre 2-3 columnas y 2-3 filas. Para que os hagáis una idea os dejo una imagen de las distintas posibilidades que hay para distribuir el contenido.

Después tenemos las secciones. Con las secciones divides una página en franjas horizontales. Así puedes añadir todas las secciones que quieras y con el diseño que te parezca. Es muy útil para diseñar secciones que tengan ancho completo. Por ejemplo, para poner una foto de fondo y que encima coloquemos cierta información, como textos o un formulario para conseguir suscriptores.

 

Estos tres elementos, módulos, secciones y layouts nos permiten organizar el contenido por bloques, y así es más sencillo construir el diseño final.

 

Editor visual de Divi

 

Con Divi tenemos también un editor visual, similar al anterior, pero donde vamos viendo cómo va quedando nuestro diseño al mismo momento que vamos diseñándolo.

Se accede desde el escritorio, pulsando el botón azul “Usar Constructor visual”:

 

O desde la vista de una página, pulsando el botón “Habilitar el Constructor visual”:

En cualquiera de los dos casos habilitaremos el editor visual y podremos añadir, quitar elementos de una manera muy similar. El aspecto es como este:

 

Cada elemento aparece recuadrado con el color de la sección a la que pertenece, y en la esquina superior izquierda tenemos los controles para mover el elemento, configurarlo, clonarlo, cambiar su estructura, etc.

Con todos estos elementos ya seremos capaces de construir nuestra página de aterrizaje.

Ahora que ya sabemos cómo diseñar una página con Divi, vamos a ver qué necesitamos para hacer una web completa.

 

Cómo crear una página web desde cero con Divi

Ya hemos visto cómo crear una página web desde cero hecho por nosotros. Pero también tenemos la opción de cargar un diseño prediseñado de Divi y aplicar nuestras personalizaciones para que se ajuste a nuestras necesidades y así no tener que partir de cero.

Para cargar un diseño prediseñado desde el constructor de Divi pulsamos sobre Cargar diseño.

 

Se nos abrirá una ventana con diferentes layouts diseñados por Elegant Themes, donde podremos elegir aquel que más se ajuste a lo que tenemos en mente. Estos diseños ya traen la estructura de cada una de las páginas, así como las fotografías, tipos de letra, colores, etc.

 

 

Una vez hayamos seleccionado un layout, veremos que contiene diferentes páginas implementadas. Podemos ver el diseño de cada una de ellas, previsualizarlo o cargarlo en la página que estamos creando.

Tenemos en la mayoría de los casos, la página de aterrizaje, la home, la página de contacto, la del portfolio, la página de un proyecto, la de contacto, la de los servicios, etc. Según el diseño que hayamos seleccionado tendremos más o menos páginas.

 

Una vez que hayamos creados todas las nuestras páginas y hayamos importado cada uno de los diseños a cada una de ellas, sólo tendremos que terminar de definir tres elementos más de nuestra web: el menú superior, el contenido del menú lateral (sidebar) y el pie de la web.

 

El menú superior

Desde Apariencia > Menús podemos crear todos los menús que necesitemos. Un menú solo es una lista de enlaces. En esa lista podemos seleccionar páginas, entradas, categorías, etc. Solo tenéis que darle un nombre al menú, añadirle las páginas que conformarán el menú superior de nuestra web.

Cuando un cliente me solicita una web. yo le creo como mínimo la siguiente estructura. Es la estructura mínima que yo considero que debería tener cualquier web. Después según el tipo de negocio que se trate o las necesidades del cliente puede sobren algunas páginas o necesites otras para ofrecer algún servicio más concreto.

 

Páginas que necesitaremos:

* Inicio (esto es solo un enlace)

* Servicios

* Blog

* Tienda

* Quiénes somos

* Dónde estamos

* Contacto

Una vez que tengamos confeccionado nuestro menú deberemos ubicarlo en nuestra plantilla. Para eso en Gestionar Ubicaciones seleccionamos nuestro menú como menú principal, y de esa manera se mostrará en la parte superior.

 

 

El sidebar y el pie son otro de los dos elementos que deberemos configurar para completar nuestra web. Desde Apariencia > Widgets tenemos las diferentes áreas donde podemos añadir elementos.

 

En el área de barra lateral incluiremos los widgets que deseemos mostrar en la página de nuestro blog (en el resto de landing pages no es necesario mostrar el sidebar). Después para el pie de página tenemos cuatro áreas disponibles para añadir contenido, aunque eso dependerá de la configuración que hayamos seleccionado de nuestro pie.

 

Para eso nos vamos a Apariencia > Personalizar, y en el editor que se nos abre nos vamos a Pie > Diseño y seleccionamos cuántos elementos queremos que tenga nuestro footer. Podemos seleccionar 1, 2, 3 o 4 elementos. También podemos seleccionar el color de fondo.

En función del número de elementos que hayamos seleccionado en el diseño de nuestro footer deberemos añadir más o menos widgets en las áreas del pie que veíamos en Apariencia > Widgets.

Con eso ya tendríamos todo lo necesario para nuestra web. Tendríamos todas las páginas diseñadas, el menú superior, el pie y el contenido del sidebar para la zona del blog.

 

También te podría interesar:

​Los 35 tipos de comunicación y sus características + Infografía

15 Convertidores de Youtube a MP3 y MP4 sin programas (Fácil y rápido)

22 Mejores Cursos de Community Manager Online gratis y de pago

 

Recomendaciones adicionales para complementar vuestra página web

Además de lo anterior, es muy interesante también integrar en vuestra web un bloque de  newsletter para atraer suscriptores. Esto lo podéis hacer con el plugin de Divi que se llama Bloom.

También os puede interesar añadir iconos de redes sociales. Lo podéis hacer con el plugin Monarch de Divi. Podéis añadir los iconos de redes sociales en cada página, en la home y muchas zonas más que son totalmente configurables y adaptables al diseño de nuestra web.

 

 

Cuestiones que debemos tener en cuenta en nuestro diseño

Para terminar, solo deciros algunas recomendaciones que debéis tener en cuenta si queréis que vuestro diseño sea profesional.

 

• Realizar un estilo elegante y ordenado.
• Definir una paleta de colores con 3-4 colores que representen con la marca de vuestro negocio.
• Elegir la tipografía que más se ajuste a nuestro proyecto.
• Crear la marca personal o de empresa.

 

Espero que este tutorial de DIVI Themes te permita crear una página web paso a paso y desde cero, una o muchas… En mi blog tenéis muchos tutoriales de divi donde muestro algunos de los diseños que he implementado para algunos de mi clientes y que os pueden servir de ayuda para algún diseño que necesitéis.

¿Qué te ha parecido este curso de Divi Theme + Tutorial?

¿Cuál es tu theme favorito para crear páginas web?

Si te ha gustado el post, puedes compartirlo con amigo/a