CURSO Crear SITIO WEB con Adobe XD y Elementor en Wordpress | Checklist maquetar página web

Vemos cómo armar un sitio web online paso a paso, llevando el diseño desde Adobe XD a Wordpress, con el maquetador de sitios Elementor. Además vamos a usar Evernote, donde guardamos nuestra checklist de pasos para armar el sitio Wordpress.
INDICE DE CONTENIDOS:
01:00 Vamos con la checklist.
01:08 Instalar plugins en Wordpress.
03:29 Configurar actualizaciones automáticas de plugins.
03:52 Instalar plantilla Astra.
04:29 Activar tema hijo (Child Theme). ¿Por qué es importante?
07:22 Configurar tamaño mínimo de miniaturas.
08:20 Empezamos a maquetar el sitio web.
11:06 Configurar tipografía y colores del sitio.
14:25 Crear y configurar la página.
16:46 Instalar el maquetador Elementor.
17:32 Empezamos a maquetar la página con Elementor.
34:14 Crear bloque de dos columnas en Elementor.
40:22 Poner enlaces a los botones.
41:15 Configurar formulario de contacto.
44:18 Agregar enlaces de llamadas en números telefónicos.
47:02 Para terminar: configurar botón de Chat Whatsapp.
Lo primero que hacemos es instalar los plugins esenciales para que nuestro sitio web cuente con todas las funciones necesarias: Contact Form 7, Chat Whatsapp, Wordfence Security y Elementor.
Luego vamos a instalar el tema Astra, que nos va a servir para maquetar nuestro diseño, generando un tema hijo o child theme, para realizar los cambios necesarios sin que las futuras actualizaciones de la plantilla sobrescriban nuestros ajustes.
Después de ajustar las miniaturas de imagen en la sección Ajustes de Wordpress, comenzamos a personalizar el diseño con las opciones que nos da Astra en Apariencia, Personalizar. Subimos el logotipo y el favicon; configuramos la tipografía y los colores.
A continuación, comenzamos la creación y maquetación de las páginas. Para ello, usamos Elementor, que tiene un sistema de bloques: foto principal, imágenes, listados de servicios, encabezados, formulario de contacto, entre otros.
Iremos exportando diversos elementos desde Adobe XD, como imágenes, textos, colores, íconos, y haciendo los ajustes para que el sitio se parezca al boceto. Para verificar esto, iremos viendo cómo queda en el navegador Chrome.
En cuanto a las imágenes en Wordpress, es necesario que las optimicemos previamente, es decir, que las bajemos al tamaño en que van a aparecer y con un peso lo más bajo posible. Para ellos, podemos usar herramientas como Photoshop o Photopea (gratuita). Recordar también completar los atributos alt (texto alternativo) y title (título).
Finalmente, configuramos el botón de Whatsapp y el formulario de contacto.
OTROS VIDEOS QUE PUEDEN SERVIRTE:
Qué es una landing page y para qué sirve: • 🏅Qué es una LANDING PA...
Cómo instalar plugins favoritos: • Cómo guardar tus plugi...
Cómo configurar Google Analytics: • Cómo configurar Google...

[@miguelalejandrobritorausse5023]

Buen tutotial Omar. Sigue asi. Saludos.

[@omarmalufcomunica]

Muchas gracias 😊