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!

YouTube video

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. 

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.

YouTube video

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.

YouTube video

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.

YouTube video

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.

YouTube video

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.

YouTube video
Ilustración de Aprender WordPress gratis en mi canal de youtube

🎓 Curso GRATIS para dominar tu Hosting WP

Consulta entre 28 tareas típicas si tienes una web o te dedicas a WordPress profesionalmente.
👀 Mira las marcas de tiempo para ir a lo que te interesa.
Ver en Youtube

🛠️ Recursos relacionados

Ver todos
Inicia sesión

Sólo los socios del club de expertos pueden utilizar esta funcionalidad.