Diseño web sin código con Elementor y Wordpress

Diseño web sin código con Elementor y Wordpress

“ Ahora vamos a repasar las fases clave del desarrollo de tu página web para que presentes tu proyecto a la Comunidad Domestika. Me gustaría que explicaras brevemente lo que has hecho en cada una y que acompañes la explicación con una o más imágenes. Concepto y referencias Empieza desarrollando todo el concepto de tu sitio web. Para ello, primero, reúne referencias visuales que te sirvan de inspiración y guárdalas en una carpeta o en favoritos. ¡Ah! Y no te olvides de que puede inspirarte cualquier cosa, no solo páginas web, sino cualquier objeto de tu alrededor, la música, tu ciudad, un paisaje… ¡Lo que sea!

Mapa de tu web En segundo lugar, traza un mapa del sitio web donde definas las páginas que compondrán la navegación de tu sitio y cómo se moverá el usuario a través de ellas. Guía de estilo Después, reúne todos los elementos y estilos generales que quieres para tu web: logotipo, conjunto tipográfico, paleta de colores y, opcionalmente, elementos gráficos. Elabora una guía de estilo con todo ello. Propuesta de diseño Ahora vas a trabajar en la propuesta de diseño, que es una de las partes más emocionantes de todo el proceso. Para ello puedes trabajar con el programa de diseño que quieras. Utilizando todos los elementos de tu guía de estilo, diseña cada una de las secciones que componen tu web y que ya has definido previamente en el mapa del sitio. Recuerda que si no sabes qué contenido o estructuras utilizar en cada una de estas secciones, siempre puedes volver a echarle un vistazo a las referencias visuales para inspirarte. Lo más importante de la propuesta de diseño es que te ayude a visualizar cómo será tu sitio cuando después trabajes con Elementor. Diseño en WordPress y Elementor Instala y configura las herramientas con las que vas a trabajar en este curso para crear todo tu sitio. Para ello, en primer lugar, asegúrate de tener un hosting y dominio donde instalar WordPress. Cuando lo tengas instalado, configúralo y crea las páginas y menús de navegación de tu web. El siguiente paso será instalar el plugin Elementor y el tema que vas a utilizar como base: "Hello Theme". Ahora ya solo te queda descargar e instalar Elementor Pro, que incluye unas funcionalidades flipantes para construir todo el diseño tu web. Es el momento de trasladar toda la propuesta de diseño web a un sitio 100% real y funcional, para ello vas a trabajar con Elementor, el kit por defecto, su maquetador de temas y las opciones de plantillas. Recuerda que en este punto debes tener presente en todo momento la propuesta de diseño web que ya has elaborado previamente. Empieza creando la cabecera y el pie de página. Continúa diseñando la página de inicio y no olvides incluir efectos de animación para que sea mucho más visual y atractiva. Ahora, crea la plantilla de proyectos y la página principal del portfolio. Y dale caña también a las secciones de "About" y "Contacto". ¡Ah! No te olvides de optimizar las imágenes de tu web para que no pesen demasiado y cargue rápido, y recuerda acompañar estas imágenes de textos que aporten, contextualicen y humanicen tu trabajo. Por último, trabaja también en el diseño las secciones secundarias de tu web, como la página de política de privacidad, la de "Error 404" y la de mantenimiento. Testeo y lanzamiento ¡Ya te queda muy poco para terminar! Es el turno de testar la web en diferentes navegadores y dispositivos, ya que a veces una web se muestra ligeramente diferente en algunos de ellos. Anota todos los detalles que no funcionan o se visualizan como te esperabas y corrígelos después en Elementor. Cuando ya lo hayas corregido todo ¡Ya esta todo listo para que tu web la vea toooodo el mundo! Una vez que la lances, no olvides mantenerla actualizada ¡Ah! Y recuerda hacer una copia de seguridad antes de hacer cada actualización. Llega el momento de que compartas tu proyecto final con la comunidad pinchando en "Crea tu proyecto". Recuerda compartir el link para ver el sitio web que has diseñado y también contarnos todo el proceso creativo que te ha llevado hasta él. Si en algún momento has puesto la web en modo mantenimiento, por fa, desactívalo para que podamos ver tu web al completo. Seguro que es una pasada :). Estoy deseando ver tu proyecto y darte feedback. Aunque te pido paciencia, intentaré acceder al foro todo lo que pueda y lo que me permitan mis proyectos profesionales. Por último, quiero invitarte a que participes activamente en el foro, no solo compartiendo tus avances, sino también dando consejos e intentando ayudar al resto de la comunidad. ¡Nos vemos en el foro! ”

Transcripción parcial del vídeo

“Ahora ha llegado tu momento, voy a repasar contigo algunos pasos imprescindibles para que hagas tu propia página web. La verdad es que era muchísima información nueva, por lo que siéntete súper orgulloso de haber llegado hasta aquí y de haberle perdido el miedo al diseño web. Acuérdate siempre de empezar reuniendo algunas referencias visuales que te inspiren. Puedes guardarlas en una carpeta o hacer un mood board con ellas. Después, dibuja un mapa de tu sitio incluyendo todas las secciones que quiere para tu web. Aquí recuerda que no hay límite de secciones ni tampoco secciones obligatorias...”

Generamos automáticamente esta transcripción y puede haber erratas.

Resumen del curso: Diseño web sin código con Elementor y Wordpress

• Nivel: Iniciación
• 98% valoraciones positivas (251)
• 13926 estudiantes
• 4 unidades didácticas
• 20 lecciones (3h 28m)
• 5 recursos adicionales

• Categoría

  Diseño Web y App

• Áreas

  Diseño de apps, Diseño de producto digital, Diseño Web, Gestión del Portafolio