Introducción

1

Creación de Páginas Web: HTML, CSS y Publicación Online

2

Desarrollo Frontend: HTML, CSS y JavaScript Básico

3

Fundamentos del Backend: Lenguajes, Bases de Datos e Infraestructura

Sitios Code con HTML y CSS

4

Fundamentos de HTML: Uso y Creación de Etiquetas Básicas

5

Escribir y estructurar tu primera página web con HTML

6

Construcción de un Portafolio con HTML y CSS

7

Maquetación de Iconos Sociales en HTML para Desarrolladores

8

Fundamentos de CSS: Selectores y Propiedades Esenciales

9

Escritura y Enlace de CSS en Proyectos HTML Básicos

10

Estilización de un Portafolio con CSS: Creación de un Header Atractivo

11

Superposición de Elementos en CSS: Técnicas y Ejemplos Prácticos

12

Estilización avanzada con CSS: Flexbox y transformaciones

13

Estilización de Iconos Sociales en CSS3 y HTML5

14

Optimización de CSS y Enlaces en HTML para Portafolios Web

Despliega tu página a internet

15

Cómo subir tu página web a Internet paso a paso

16

Despliegue de Sitios Web Gratis con Netlify

17

Compra y configuración de un dominio personalizado en Namecheap

18

Compra y configuración de hosting web compartido con HostGator

Sitios No-code con WordPress

19

Creación de Sitios Web sin Código con WordPress

20

Instalación de WordPress en hosting propio

21

Instalación y configuración de Elementor en WordPress

22

Creación de una Página Web desde Cero con Elementor

23

Maquetación de Héroes con Elementor para Páginas Web

24

Creación de Páginas Web con WordPress y Plantillas Prediseñadas

Conclusiones

25

Análisis de Proyectos Estudiantiles para Mejorar tus Iniciativas

26

Desarrollo Web Básico: HTML, CSS y WordPress

27

Obtención del Diploma en Desarrollo Web Profesional

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Maquetación de Héroes con Elementor para Páginas Web

23/27
Recursos

¿Cómo diseñar tu sección Hero en Elementor?

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.

¿Cómo añadir una imagen de fondo y ajustar su posición?

Comienza creando una nueva sección "hero" grande para personalización. Sigue estos pasos:

  1. Añadir estilo de fondo:

    • Selecciona la opción de fondo clásico.
    • Inserta una imagen, por ejemplo, una imagen de una computadora y ajusta su tamaño para que se adapte al contenedor.
  2. Ajustar la disposición de la imagen:

    • Configura la posición de la imagen a "centro, centro" para centrarla en el contenedor.
    • Evita la repetición utilizando la opción "no repetir".
    • Ajusta el tamaño a "contiene" para que la imagen esté dentro de los límites del contenedor.
  3. Modificar la altura del contenedor:

    • Reduce la altura para eliminar espacios blancos arriba y abajo, asegurando que la imagen se vea bien.

¿Cómo añadir contenido adicional en la sección Hero?

Luego de establecer el fondo, puedes empezar a añadir contenido adicional:

  1. Agregar columnas internas:

    • Inserta una sección interna para dividir tu diseño en columnas y ajusta su tamaño según lo desees.
  2. Incluir imágenes personalizadas:

    • Usa una columna para añadir una imagen de perfil.
    • Inserta la imagen seleccionando desde la opción "Insertar medio".
    • Personaliza el estilo de la imagen con un borde redondeado al 100% para darle un toque profesional.
  3. Añadir editor de texto y personalizarlo:

    • Usa un editor de texto para introducir tus datos personales.
    • Agrega tu nombre y nombre de usuario, y luego proporciona una descripción breve.
    • Los textos pueden ser editados en HTML o desde el editor visual.
    • Convierte el texto a color blanco para mejorar la legibilidad.

¿Cómo crear un diseño adaptable y elegante?

Una vez que el texto y la imagen están colocados, se puede enriquecer más el diseño:

  1. Descripciones en texto:

    • Introduce una descripción extensa aprovechando el editor visual de Elementor. Puedes cambiar el color, tamaño y alineación del texto para mayor personalización.
  2. Ajustar la caja contenedora:

    • Cambia el ancho y la altura para acelerar el diseño y su estética.
    • Ajusta para que todo el contenido se vea armónico, usando los controles de altura mínima.

¿Cómo añadir íconos sociales de forma efectiva?

Los íconos sociales son fundamentales para enlazar a tus perfiles en redes:

  1. Estructuración de columnas para íconos sociales:

    • Crea una rejilla personalizada con cuatro, seis, o más columnas dependiendo de tus necesidades.
    • Inserta los íconos de redes sociales y ajústalos de manera que se vean elegantes y alineados.
  2. Personalización del fondo y tamaño:

    • Cambia el fondo de cada columna para hacer visibles los íconos.
    • Utiliza un código de color específico para cada red social, por ejemplo, "#0077B0" para LinkedIn.
    • Modifica el tamaño de cada celda para corregir su presentación visual.

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

Hola, una duda, ¿Dónde esta sección interior?, no me aparece a mi , gracias

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

Buen día, en la versión actual de elementor, no veo por ningún lado la Sección interior, donde la puedo encontrar para insertarla. Saludos
Queridos amigos, un aporte, para poner la foto, en elementos, básico - imagen lo arrastras - agregas la foto en Content - te aparece en la parte superior - luego en Style - Width 53% - Max 67% - Height 91 px,, como lo quiera cuadrar - Border Type - Border Width 2, 2, 2,2 - Border Color - al gusto - Border Radius - 172, 172,172,172 - luego en Advanced en alinear auto escojer el 2do icono - se centra la foto. Luego con el Texto igual en elementos, Básico - Editor de Texto arrastras a la imagen del computador - el va a salir en la parte superior - en Content añades el contenido - Style - Alignment - Justificado - Advaned - Align Self en 2do icono y se centra el texto - Pero debes tener ecuenta que cuando vas agregar el fondo del computador debes agregarlo con contenedor horizontal porque si es vertical la foto y el texto van a alinearse en columna y no en fila.
dónde está el enlace que mencionar al curso de "elementor" para profundizar?
Quedó mejor con Elementor

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.