1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…
0 comentarios - Por Toni Borras

Tutorial WordPress: Webs con DIVI

Si por algo ha triunfado la plataforma WordPress es por su sencillez y la fácil implementación de los miles y miles de plugins que existen y que nos facilitan la vida enormemente a todas aquellas personas que no somos programadores pero que queremos empezar a hacer nuestros primeros pinitos en el mundo del diseño web, SEO y marketing online.

Dentro del ecosistema de WordPress, existe una empresa llamada Elegant Themes que hace un tiempo se hizo famosa por la creación de su constructor visual DIVI. De hecho hoy os quiero hablar de este tema / plugin de esta empresa ya que nos permite sin tener nociones de programación ni diseño web empezar a realizar experimentos y aprender como funciona todo.

El constructor visual de DIVI es una herramienta muy versátil y potente que te permite diseñar páginas web impactantes, responsive y con una calidad propia de un profesional en muy poco tiempo

Así que sin más dilación, procedo a explicaros los 5 pasos necesarios para poder empezar con vuestro proyecto con esta magnífica herramienta.

Cómo instalar DIVI en WordPress

Antes que nada os tengo que decir que debéis tener un dominio y un servicio de hosting con una instalación de WordPress. Actualmente la mayoría de hostings ofrecen la instalación de WordPress en un solo clic rellenando algunos pasos con la información del proyecto. En este artículo no explicaré como seleccionar un dominio ni un hosting ni tampoco como instalar WordPress, eso lo dejaremos para otro artículo y hoy solo nos dedicaremos a explicar como hacer una página web en 5 minutos con DIVI y WordPress.

Si ya tienes instalado tanto el tema del DIVI como el constructor visual en tu proyecto y solo quieres aprender como hacer en 5 minutos un diseño desde cero para tu proyecto, puedes ir directamente al siguiente paso: Crea tu primera plantilla con DIVITambién te recomiendo visitar el paso de la creación del tema hijo de DIVI, si aún no lo has hecho.

Accede a la página de Elegant Themes

Lo primero que debes hacer es ir a la página web de la empresa Elegant Themes y verás esta pantalla (puede que haya cambiado desde que he escrito este post). Lo único que debes hacer es hacer clic con el ratón en el botón del menú “Join to Download” tal y como aparece en la siguiente captura:

Accede a la página web de Elegant Themes

Página web de los creadores de DIVI

Selecciona la opción de suscripción (anual vs para siempre)

Una vez hecho clic, entraremos en otra página donde nos dará la opción de escoger los dos tipos de suscripción disponible. Me gustaría aclarar que tanto el tema como el constructor visual DIVI, no están disponibles para descargar en la tienda ofiicial de plugins y temas de WordPress y la única manera de poder gozar de su potencia y versatilidad es mediante el proceso de suscripción anual.

En esta captura podemos observar los dos tipos de suscripción disponibles en el momento de escribir este artículo:

En la primera opción tenemos la opción de suscribirnos por un año por $89, que al cambio en euros son unos 81,5€, donde tendremos acceso a todos los temas creados y diseñados por la compañía así como todos los plugins. Además y durante un año tendremos acceso a todas las actualizaciones y soporte técnico en inglés.

Por otro lado, tenemos la opción de realizar un único pago de $249 (228€) y tendremos acceso a todo, al igual que en el primer caso pero esta vez para toda la vida. No tendremos que renovar nuestro plan y siempre dispondremos de las últimas actualizaciones de todos los productos de la compañía.

En nuestro caso, para probar tanto el tema como el plugin, escogimos la primera opción. En este punto os puedo decir que tanto si os dedicáis al diseño web como queréis empezar a crear un proyecto propio, la primera opción es totalmente válida y se amortiza en muy poco tiempo.

Proceso de pago vía tarjeta o PayPal

Una vez escogida la opción deberemos rellenar con nuestros datos y método de pago para finalizar nuestra suscripción y poder acceder a todos los plugins y temas:

Proceso de pago para suscripción DIVI

Acceso al panel de usuario

Una vez hecho el pago y habernos dado de alta en la plataforma, entraremos con nuestro nombre de usuario y password creados en el paso anterior en el menú donde podremos descargarnos todos los productos para utilizar en nuestro proyecto en WordPress:

Menú donde descargar el tema DIVI

Menú donde podremos descargar el tema DIVI y otras muchas cosas

Ahora tenemos acceso a un montón de cosas interesantes pero en este artículo solo usaremos la potencia y la sencillez del tema DIVI.

Descarga el archivo Divi.zip a tu disco duro

En la sección de Downloads, lo único que deberemos hacer es hacer clic en el botón rosa “Download” y descargar el tema que estará en formato .zip (Divi.zip) en nuestro disco duro:

Pantalla para seleccionar donde guardar el tema divi

Podemos guardar el archivo donde queramos, ya que lo que viene ahora es subirlo a nuestro proyecto WordPress. Para aquellas personas más avanzadas y que estén familiarizadas con la aplicación Filezilla solo tendrán que descomprimir el archivo .zip y subir el contenido en la carpeta Themes de WordPress (dominio.com/wp-content/themes/).

Instalación del tema mediante WordPress

Pero para aquellos que quieran un modo aún más sencillo para instalar el tema, vamos a acceder a nuestro proyecto WordPress y en el menú lateral izquierdo dentro del panel de administración haremos clic en apariencia -> temas como podemos ver en la siguiente captura:

Menú de WordPress para acceder a los temas

Y una vez accedido al menú de Temas podremos subir nuestro archivo Divi.zip directamente y podremos instalarlo de manera muy fácil:

Selecciona el archivo para subir el tema

Después de seleccionar el archivo zip que nos hemos descargado desde la web de DIVI, debemos hacer clic en el botón “Instalar ahora” y empezará la subida del archivo. En nuestro navegador podremos ver el porcentaje de subida en tiempo real, en nuestro caso hemos usado Google Chrome y se nos muestra en la parte inferior izquierda del navegador:

Porcentaje de subida del tema divi

Creación del tema hijo de DIVI

Una vez subido a la plataforma WordPress y antes de activar el tema debemos crear un tema hijo o child theme.

¿Pero por qué?

Muy sencillo. Si activamos el tema padre o tema original que nos hemos descargado podemos llegar a perder algunos cambios que haremos más adelante cuando actualicemos el tema.

A medida que vamos avanzando en la creación del proyecto y vamos aprendiendo trucos más avanzados para crear un proyecto optimizado para la experiencia de usuario (UX) y para posicionamiento SEO, deberemos editar algunos archivos internos del tema y si no creamos un tema hijo, cuando el tema saque alguna actualización importante o estética, es muy probable que perdamos esas modificaciones que hemos realizado. Lo único que quiero que sepáis ahora es que crear el tema hijo de cualquier tema de WordPress está considerado como una buena práctica y evita posibles problemas en el futuro.

Así que vamos a ver como debemos crear un tema hijo. En este caso, recomiendo utilizar Filezilla.

Cómo usar Filezilla para crear un tema hijo de DIVI

Lo primero que debéis hacer es descargar e instalar el programa (Filezilla) en vuestro disco duro y consultar la información de vuestra base de datos ubicada en vuestro hosting. Normalmente la encontraréis en el cPanel o cualquier otra plataforma que utilice vuestro hosting. Si no sabéis de lo que hablo. lo mejor que podéis hacer es consultar con el soporte técnico que tengáis, como obtener los datos de conexión de la base de datos asociada a vuestro proyecto.

En el caso de haber instalado WordPress anteriormente de manera manual, ya sabréis como funciona y podéis ir directamente a la carpeta themes e ir al siguiente paso Creando la carpeta del tema hijo.

Configurar Filezilla fácilmente

Una vez tengamos los datos de conexión la BD (base de datos) e instalado el cliente FTP en nuestro ordenador, procedemos a configurar todos los parámetros (da igual si estáis en Linux, Mac o Windows):

Captura cliente FTP multiplataforma Filezilla

Esta es la imagen de Filezilla una vez instalado en nuestro ordenador.

Ahora debemos configurar nuestra conexión con el servidor hosting que tengamos. Para ello deberemos ir a Archivo -> Gestor de sitios:

Gestor de sitios en Filezilla

En este menú podremos configurar los parámetros de conexión con el servidor que aloja nuestro proyecto

Los parámetros necesarios para configurar son:

  • Servidor FTP, la url de nuestro servidor para podernos conectar.
  • Puerto de la conexión
  • Usuario
  • Contraseña

Tanto el protocolo como el cifrado, son dos variables que dependerán de cada hosting y que os deben decir como configurarlas. Muchos hostings ya ofrecen la posibilidad de crear archivos de configuración para Filezilla. Tan sencillo como importar ese archivo a nuestro cliente FTP y listo.

Una vez hecha la configuración correctamente, ya podremos conectarnos al servidor y navegar hasta la carpeta Themes de nuestro proyecto WordPress y configurar el tema hijo. Para ello, normalmente deberemos navegar hasta la ruta “httpdocs/tudominio/wp-content/themes”, también puede variar si has instalado WordPress en otra carpeta dentro de tu hosting o dominio.

Creando la carpeta del tema hijo

Una vez estamos en la carpeta themes, procedemos a crear un nuevo directorio, con el botón derecho del ratón. En nuestro caso hemos creado la carpeta con el nombre “Divi-child” pero puedes poner el nombre que quieras. En pasos posteriores deberemos tener en cuenta el nombre que hemos usado para esta carpeta.

Creando los archivos function.php y style.css

A continuación deberemos crear 2 archivos dentro de este directorio que acabamos de crear: “functions.php” y “style.css”. Estos dos archivos serán los que nos permitan hacer modificaciones a nuestro tema hijo sin importar si el tema padre sufre actualizaciones o modificaciones oficiales. Estaremos cubiertos de cualquier cosa. También puedes copiar el archivo “screenshot.png” del tema padre. Este archivo es la imagen en miniatura que aparece en el panel de WordPress cuando seleccionas el tema, nosotros no lo haremos.

Para la creación de estos dos archivos podemos usar cualquier editor de textos, como por ejemplo el Bloc de notas de Windows. Nosotros utilizamos SublimetextEn otro artículo hablaremos sobre él ya que es una herramienta muy potente y a tener en cuenta para cuando tengáis un poco más de nivel o si ya tenéis conocimientos básicos de html, css, php, javascript, etc… Lo que a nosotros nos encanta de esta herramienta es que tiene un plugin con el que nos podemos conectar directamente al servidor y trabajar directamente sin tener que estar abriendo el archivo y guardándolo manualmente con el cliente FTP.

El archivo “functions.php” se debe rellenar con el código siguiente (ver captura debajo) para que configure el estilo del padre correctamente:

No os preocupéis si no entendéis nada de lo que pone en estas lineas de código. Lo único que necesitáis saber es que gracias a este código, estamos diciéndole a WordPress que nos aplique a nuestro tema hijo todo el estilo del tema padre. Es decir, que haciendo esto, este tema hijo tendrá el mismo aspecto que el tema padre.

A continuación se muestra la parte de código que debemos introducir en el archivo “style.css”, la parte importante y clave es el apartado Template: Divi, tal cual aparece en la siguiente imagen:

Activando el tema hijo Divi

Una vez repasado todo esto ya estamos listos para activar nuestro tema hijo y empezar a diseñar nuestro proyecto :).

Para activar el tema hijo solo tienes que ir al panel de control de administrador de WordPress y en Apariencia -> Temas y activar el tema hijo que aparecerá en el listado.

Activación del tema hijo Divi en WordPress

Como puedes observar, nuestro tema hijo no tiene imagen en miniatura ya que no hemos copiado el archivo “screenshot.png”.

¡Felicidades! Acabas de activar tu tema hijo y ya puedes crear tu proyecto en Divi y WordPress. Una vez tenemos activado nuestro tema hijo o child theme ya podemos hacer lo que queramos que nada ni nadie nos podrá quitar ni eliminar nuestras modificaciones, creaciones, etc…

Ahora podremos ver en el menú lateral que nos ha aparecido el menú contextual DIVI donde podremos ajustar y configurar nuestra nuevo tema. Por ahora lo dejaremos y vamos a centrarnos en la creación de una nueva página con el constructor visual de DIVI.

Cómo crear una página con DIVI

Ahora viene lo mejor de todo. Cuando aprendemos a usar la potente herramienta del constructor visual de DIVI.

Lo que haremos es ir a Páginas del menú lateral y haremos clic en Añadir nueva. Ponemos el título de la página, por ejemplo “Mi primera página con DIVI” y pulsamos el botón  “Usar el constructor DIVI”. De momento dejaremos los otros parámetros tal cual están:

Hacer clic en el botón Usar Constructor Divi

Accediendo al Constructor Visual de Divi

Una vez que hagamos clic en dicho botón se nos mostrará otro menú donde podremos usar el Constructor Divi o, y aquí era donde quería llegar, podremos usar el Constructor Visual.

Una auténtica maravilla.

Menú donde puedes seleccionar el tipo de constructor DIVI

Después de hacer clic en el botón “Usar Constructor visual” se os abrirá otra página donde podréis editar cualquier parámetro y crear una página web con solo unos clics del ratón.

Alucinante.

No tenéis que saber ni programación ni código ni nada de nada. Una herramienta muy potente. Lo único que tenemos que tener en cuenta es que dentro del Constructor visual solo podremos modificar, crear o eliminar los elementos u objetos que se encuentren entre el menú superior o header (donde aparece la barra de menú y logo) y el footer inferior. Estas dos secciones las podremos modificar más adelante desde otros apartados.

Primeros pasos con el Constructor Visual

Si pasamos el ratón por encima de la pantalla que se nos acaba de abrir, podréis observar dos rectángulos de colores. Uno verde, que es el que se ve a simple vista y por fuera de este y abarcando toda la superficie entre el menú superior y el footer, otro de color azul.

También podeís observar unos rectángulos del mismo color que los recuadros con algunos iconos. Son los paneles contextuales de cada elemento dentro del constructor visual. Además también veréis unos círculos con el icono “+”, esos círculos nos permiten agregar otros elementos tanto dentro del mismo como a continuación.

Página por defecto constructor visual

Estos dos recuadros representan dos clases a tener en cuenta en programación y diseño web.

  • Recuadro azul: Representa una sección o <section></section> dentro de el código html. Suele hacer referencia a apartados bien diferenciados dentro de una página web.
  • Recuadro verde: Representa una fila o la clase row en código html (que proviene del framework Bootstrap).

Solo tenéis que saber que cada elemento se utiliza para una determinada función tanto estética como funcional dentro de la página web. En artículos posteriores os hablaré con un poco más de profundidad de todos estos aspectos.

Además de estas configuraciones, podrás encontrar un montón más. Pero lo que vamos a hacer ahora mismo, es otra cosa más mágica para ir viendo como funciona el constructor.

Activar template o plantilla prediseñada de Divi

Para no perder tiempo y aprender a utilizar Divi de manera rápida, activaremos una plantilla prediseñada de Divi para modificarla y crear nuestra primera página web con el constructor visual.

Vamos a ir a la esfera de color lila de la zona inferior, la que tiene 3 puntos blancos y le daremos al círculo que contiene el símbolo “+” para cargar cualquier página prediseñada de la biblioteca de Divi.

Añadir plantilla desde biblioteca Divi

En nuestro caso hemos seleccionado “Página de inicio corporativa” y tenemos seleccionada el recuadro “Reemplaza el contenido existente” ya que queremos sobrescribir lo que ya teníamos.

Una vez seleccionado vuestro template se os cargara la plantilla y veréis una página web con algunas imágenes, textos y una disposición de elementos.

A continuación, aprenderemos a modificar y adaptar la primera sección de la plantilla para crear nuestro proyecto a medida.

Captura de pantalla del template de Divi

Esta es la página que se nos ha generado con la plantilla seleccionada

En la imagen anterior se puede observar la página que se nos ha generado al seleccionar la plantilla “Página de inicio corporativa”. La verdad es que es un template muy completo, que se adapta a cualquier dispositivo (responsive) y además nos permite configurar todos los parámetros (fondo, textos, imágenes, secciones, widgets) sin tener ni idea de programar y de una manera muy sencilla y práctica.

Adaptar el template o plantilla de Divi a nuestro proyecto

Lo que vamos a hacer a continuación es adaptar la sección principal a nuestro proyecto de prueba. Cambiaremos el color de fondo, el título h1 (título principal) y subtítulo. Además añadiremos una imagen para que quede todo más chulo y eliminaremos alguna sección para saber cómo se hace.

¡Vamos allá!

Una de las maravillas de esta herramienta para WordPress llamada Divi es que puedes modificar cualquier cosa de una manera tremendamente sencilla. Vamos a comprobarlo.

Cambiando el título y subtítulo del banner principal

Para ello lo único que debes hacer es situarte sobre el texto, seleccionarlo, borrarlo como si de un editor de textos se tratara y escribir un título y subtítulo relevantes para tu proyecto.

Captura página divi template

Selecciona el texto que deseas cambiar

Una vez cambiado el texto, cambiaremos el estilo del botón y su  texto. En otro artículo hablaré sobre cómo escoger los títulos y palabras clave para que tu página web o tienda online posicionen mejor en Google.

Como se ve en la imagen de arriba, tenemos 2 elementos del constructor Divi en esta captura (antes os he hablado un poco por encima de los elementos u objetos):

  • Enmarcado de color lila, tenemos una sección de ancho completo. Si os acordáis, la primera vez que entramos en el constructor visual, nos apareció la sección de color azul. La diferencia entre estas dos secciones, básicamente es que la de ancho completo se utiliza para añadir slides o elementos que requieren de todo el ancho de pantalla, mientras que en las otras secciones suelen haber márgenes o espacios donde los elementos dentro de la sección no ocupan todo el ancho de la pantalla.
  • Con un recuadro gris oscuro y sin estar enmarcado tenemos otro elemento, el slide o control deslizante, que en este caso es de anchura completa ya que va junto con la sección de ancho completo antes mencionada.

Como veremos en otro artículo, el constructor Divi te ofrece la posibilidad de añadir elementos desde su biblioteca, de la misma manera que te permite añadir páginas prediseñadas o templates.

Cambiando el texto del botón principal

Para modificar y configurar el botón que aparece por defecto con el nombre “Learn More” tenemos que hacer clic en el recuadro gris del control deslizante, en el segundo icono, la rueda dentada, que a partir de ahora será el icono de configuración de cada elemento dentro del constructor.

Después se nos abrirá otro menú donde aparecen las distintas páginas o pantallas del control deslizante, en nuestro caso solo hay una (aparecerá con el título que hemos cambiado antes) y entramos haciendo clic en el icono de configuración. Antes de continuar quiero hablaros de las distintas secciones de este menú, como podéis observar en la imagen inferior, tenemos:

  • Contenido: Esta sección está orientada al contenido de cada elemento dentro de Divi. Aquí podremos cambiar, añadir, eliminar textos, enlaces, imágenes y todo lo relacionado con cada objeto.
  • Diseño: Aquí podremos modificar y adaptar el contenido a nuestro gusto, es decir, cambiaremos los márgenes de los elementos, el estilo de los botones, etc…
  • Advanced: Esta sección es para personas con conocimientos avanzados de CSS. En otro artículo os contaré más acerca de este apartado ya que con unos conocimientos básicos se pueden hacer maravillas con la maquetación. Aquí es donde aprenderemos a usar el archivo style.css que hemos creado en la carpeta del tema hijo.

Una vez tenemos esto claro, podremos cambiar cualquier cosa que nos apetezca en toda la página y en cada elemento del template.

Pantalla de edición de control deslizante de Divi

Para cambiar el texto del botón solo debes cambiarlo en esta sección

Como te habrás dado cuenta, aparecen los cambios que hemos realizado antes en el título y subtítulo. Ahora solo debemos cambiar el texto del botón.

Para hacer estos cambios hemos ido a la sección “Texto”, si hacemos scroll hacia abajo, podremos ver otras secciones interesantes.

Cambia la imagen principal y el fondo de pantalla

Primero vamos a cambiar la imagen que aparece a la izquierda de los títulos, para ello vamos al apartado de “Image&Video” y lo único que debemos hacer es añadir otra imagen. Y para cambiar el fondo del control deslizante haremos lo mismo en la sección “Fondo”.

Modificaciones sección principal Divi

Este es el resultado después de hacer algunas modificaciones

¡Esto ya parece otra cosa!

En apenas unos clics, hemos configurado el banner principal. Existen miles de configuraciones que tendrás que ir viendo a medida que avanzas en el arte del diseño web con Divi. Solo es cuestión de probar algunas configuraciones y ver los resultados en tiempo real. Esa también es una de las ventajas de Divi.

Eliminar una sección o elementos de Divi desde el constructor

Esta parte es tan sencilla que solo voy a deciros una cosa.

Si algo no os gusta, solo tenéis que poneros encima de un elemento, esperar a que os aparezca el rectángulo de color donde antes nos aparecía el icono de configuración (según el elemento que sea) y hacer clic en el botón de la papelera y automáticamente desaparecerá como si jamás hubiera estado ahí.

Cambiar el logo de la página web desde Divi

Para cambiar el logotipo que aparece por defecto con el logo de Divi, lo único que debemos hacer es ir al escritorio de WordPress y en la barra lateral buscar donde aparece Divi -> Opciones del tema y en la primera posición te aparecerá el Logo donde podrás subir tu propio diseño para que la página se adapte más a tu proyecto.

Pantalla para cambiar el logo en Divi

En el menú de Divi de la barra lateral de WordPress podremos añadir el lgoo para nuestro proyecto

 

Conclusiones

Con todo esto creo que ya tienes para hacer al menos una página web sencilla pero visualmente impactante. Practica un poco y ya verás que fácil es diseñar webs con WordPress  y Divi.

En próximos artículos entraremos más al detalle de algunos aspectos de Divi que realmente merece la pena que sepáis ya que nos ayudarán a ahorrarnos mucho tiempo en el diseño web.

Si te ha gustado el tutorial sobre Divi o quieres aprender cosas más avanzadas o concretas, por favor deja un comentario y te responderé y lo tendré en cuenta para los próximos artículos. Y si además crees que este tutorial puede ayudar a otras personas, por favor comparte y difunde 🙂

 

 

 

 

Comentarios

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

    Deja un comentario

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