Creo que siempre hay que pensar en el diseño de una página web desde responsive, quizá es más trabajo al principio pero es mejor que adaptarlo después.
Introducción
Creación de Páginas Web: HTML, CSS y Publicación Online
Desarrollo Frontend: HTML, CSS y JavaScript Básico
Fundamentos del Backend: Lenguajes, Bases de Datos e Infraestructura
Sitios Code con HTML y CSS
Fundamentos de HTML: Uso y Creación de Etiquetas Básicas
Escribir y estructurar tu primera página web con HTML
Construcción de un Portafolio con HTML y CSS
Maquetación de Iconos Sociales en HTML para Desarrolladores
Fundamentos de CSS: Selectores y Propiedades Esenciales
Escritura y Enlace de CSS en Proyectos HTML Básicos
Estilización de un Portafolio con CSS: Creación de un Header Atractivo
Superposición de Elementos en CSS: Técnicas y Ejemplos Prácticos
Estilización avanzada con CSS: Flexbox y transformaciones
Estilización de Iconos Sociales en CSS3 y HTML5
Optimización de CSS y Enlaces en HTML para Portafolios Web
Despliega tu página a internet
Cómo subir tu página web a Internet paso a paso
Despliegue de Sitios Web Gratis con Netlify
Compra y configuración de un dominio personalizado en Namecheap
Compra y configuración de hosting web compartido con HostGator
Sitios No-code con WordPress
Creación de Sitios Web sin Código con WordPress
Instalación de WordPress en hosting propio
Instalación y configuración de Elementor en WordPress
Creación de una Página Web desde Cero con Elementor
Maquetación de Héroes con Elementor para Páginas Web
Creación de Páginas Web con WordPress y Plantillas Prediseñadas
Conclusiones
Análisis de Proyectos Estudiantiles para Mejorar tus Iniciativas
Desarrollo Web Básico: HTML, CSS y WordPress
Obtención del Diploma en Desarrollo Web Profesional
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Al empezar a diseñar una página web, la sección Hero es crucial. No solo define el aspecto visual inicial que los visitantes verán, sino que también cumple una función esencial de captar la atención. Utilizando Elementor, podemos crear y personalizar esta sección de manera profesional y atractiva.
Comienza creando una nueva sección "hero" grande para personalización. Sigue estos pasos:
Añadir estilo de fondo:
Ajustar la disposición de la imagen:
Modificar la altura del contenedor:
Luego de establecer el fondo, puedes empezar a añadir contenido adicional:
Agregar columnas internas:
Incluir imágenes personalizadas:
Añadir editor de texto y personalizarlo:
Una vez que el texto y la imagen están colocados, se puede enriquecer más el diseño:
Descripciones en texto:
Ajustar la caja contenedora:
Los íconos sociales son fundamentales para enlazar a tus perfiles en redes:
Estructuración de columnas para íconos sociales:
Personalización del fondo y tamaño:
Con estos pasos, tu sección Hero puede ser transformada en un escaparate poderoso y dinámico que atraiga y retenga la atención de los visitantes. Elementor permite una gran libertad creativa, aunque requiere un mínimo de conocimientos para garantizar que lo que construimos sea visualmente atractivo y funcional.
Aportes 18
Preguntas 7
Creo que siempre hay que pensar en el diseño de una página web desde responsive, quizá es más trabajo al principio pero es mejor que adaptarlo después.
Hasta las clases anteriores vi que el profe dominaba bien los temas, pero en esta lo vi algo perdido, como si estuviera explorando Elementor sin mucha seguridad. Quizá le faltó preparar mejor el diseño para hacerlo más similar al contenido hecho con código, pues el resultado final no se vio tan bueno.
😁 👉 Es importante elegir un buen constructor para wordpress (como lo es Elementor) y aprender a usarlo de manera correcta, a futuro te evitará muchos quebraderos de cabeza y obtendrás un resultado más profesional para tu página.
Existe otro elemeto llamado Elementor Header & Footer, te ayuda a generar un cabecera, menú y pie de pagina y insertarlo en todas la paginas de forma automática, ademas es mejor crear la plantilla desde Theme Bulider y condicionarlo a la pagina que quieras.
Personalmente prefiero otros construtores mas practicos como DIVI u Oxygen.
Sería interesante profundizar en el responsive pero, supongo, debe estar en los cursos de WordPress de Platzi 😄
Maquetar el hero con Elementor es una parte fundamental en la construcción de una página web, ya que esta sección es la primera que ve el usuario al ingresar al sitio. Para lograr un buen diseño es necesario utilizar herramientas que nos permitan crear de forma fácil y rápida, como lo es Elementor. Además, es importante tener en cuenta que el diseño debe ser responsive, es decir, adaptarse a diferentes tamaños de pantalla, ya que actualmente la mayoría de las personas navegan en internet desde dispositivos móviles. Así, se garantiza una buena experiencia de usuario y se evita que los visitantes abandonen el sitio por problemas de visualización. Con Elementor, es posible maquetar el hero de manera visual y personalizada, con la opción de arrastrar y soltar elementos para lograr un diseño atractivo y coherente con la imagen de marca.
para los links de redes sociales, elementor tiene un widget de iconos de redes, de esa forma se coloca más rápido y se usan los iconos de awesome font
Que elementor este en español me da ansiedad
bueno no hay curso de esto, toco cacharrearle.
.
Una enorme cantidad de sitios web en el mundo están construidos con WordPress.
Es un mundo aparte todo su ecosistema y tiene una comunidad muy amplia en todo el mundo.
Esta herramienta Elementor me ha parecido muy práctica e interesante para comenzar, excelente las clases.
Es muy sorprendente esta herrmamienta WordPress y de como hacemos este sitio web en poco tiempo a excepcion del registro y la configuracion.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?