Arriba

Rafa Arjonilla

Cursos

Replicando Themes con Elementor: Divi Cafe

Hoy comienza esta serie de vídeos en los que vamos a ver cómo replicar themes con el maquetador visual Elementor. Para empezar vamos a replicar el Theme Divi con Elementor. En 5 vídeos iremos construyendo una de sus más famosas demos hasta dejarla totalmente clavada. Se trata de la plantilla Divi Cafe.

¡Vamos a ello!


En el primer vídeo hemos visto cómo replicar las 2 primeras secciones del Theme Divi Cafe con Elementor. Ha sido muy sencillo y divertido. También te dejo el enlace del Child Theme de Genesis Monochrome Pro que comento en el vídeo por si quieres echar un ojo. A mi me parece casi arte de lo simple y bello que resulta.

Pasos que hemos seguido en el Vídeo 1 para replicar el Theme Divi con Elementor

  • Crear una página de WordPress normal
  • Cambiar ajustes de página de Elementor hemos cambiado nuestra página a la plantilla Canvas de Elementor
  • Añadir la sección para simular el menú
  • Ajustar el ancho de la sección, el color de fondo y añadir un elemento de espacio para que se muestre
  • Añadir la sección principal y tras ajustar el ancho, añadir una imagen de fondo y dejarla bien colocada
  • Completar el diseño con una capa de fondo
  • Agregar la sección 2 y en ella colocar una imagen
  • Ajustar el ancho de la sección y del contenido a ancho completo
  • Quitar todos los espacios entre columnas
  • Configurar la imagen para que se abra en un lightbox

Vídeo 2: Secciones con 2 columnas intercaladas de la plantilla Divi Cafe con Elementor

Ahora vamos con las secciones 3 y 4, que le dan un toque muy profesional y visual a la plantilla.

Vídeo 3: Hacemos uso del widget de columnas de Elementor

En el siguiente vídeo veremos cómo calcar una sección súper visual que una vez más tira de imagen de fondo con parallax, pero además haremos uso del elemento columnas que hasta ahora no habíamos usado.

Vídeo 4: Creamos los menús de la panadería artesana de la Plantilla Divi Cafe

Cuarto vídeo donde vamos a ver cómo crear con Elementor los menús de la tienda de panes artesanos que aparecen el la plantilla Divi Cafe.

Vídeo 5: Creamos la sección con formulario de contacto con el elmentor Forms de Elementor

Y llegamos al final. En este último vídeo vemos cómo crear la sección donde está el formulario de contacto.


Antes de terminar, te quería comentar que Elementor page builder tiene una versión gratuita que puedes encontrar en el repositorio de plugins de WordPress. Y una versión PRO con muchas más opciones. Te las dejo también a continuación.

Ahora sí, te dejo algunos enlaces de interés que también iré ampliando con las herramientas que estoy usando para conseguir los colores, las imágenes y las medidas de los elementos que estamos replicando. ¡Estáte atento!

Recursos para diseñadores web

Si tienes cualquier duda puedes escribirme al formulario que te dejo a continuación. ¡No te cortes!

Y como digo en los últimos vídeos, si te parece interesante el curso de diseño web que estoy preparando sobre Elementor, escríbeme aquí y te haré un descuento cuando salga.

Por último, si te parece interesante este contenido y crees que puede ayudar a alguien más te invito a que lo compartas en redes. ¡Es un win win! Muchas gracias.