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.
¿Quieres que te active Elementor PRO en tu web?
¡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.
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:
- Cómo saber los colores que usa una página web con la extensión de Chrome ColorZilla
- Cómo saber las fuentes que utiliza una web
- Cómo descargar imágenes de cualquier web
- Guía: Diseña tu web en tiempo record con el page builder Elementor
- Cómo montar una web gratis en tu ordenador para hacer pruebas con Desktopserver
- Cómo importar contenido de prueba en WordPress para diseñar mejor nuestra 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.
