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

Clase 22 de 27Curso de Creación de Páginas Web con Wordpress y No-code

Resumen

¿Cómo empezar a crear nuestra primera página web con Elementor?

Crear una página web eficiente y atractiva ahora es más accesible gracias a herramientas como Elementor. Este plugin simplifica el proceso al ofrecer una interfaz visual intuitiva. La magia reside en arrastrar y soltar elementos sin escribir una sola línea de código, especialmente valioso para aquellos que no están familiarizados con el desarrollo web. En esta guía, te mostraré los pasos fundamentales para configurar tu primera página desde cero.

¿Cómo gestionar tus páginas en WordPress?

Primero, accede a la sección de páginas en WordPress. Aquí verás opciones como "Sample Page", "Privacy Policy", y otras que puede que no sean relevantes para tu proyecto actual. Puedes eliminarlas fácilmente:

  1. Selecciona las páginas innecesarias marcando las casillas junto a sus títulos.
  2. Haz clic en "Mover a la papelera" y luego en "Aplicar". Así, limpias tu espacio de trabajo.

¿Cómo crear una nueva página?

Al crear una página nueva con Elementor, sigamos estos pasos:

  1. Haz clic en "Añadir Nueva". Esto abrirá una plantilla en blanco.
  2. Presiona "Editar con Elementor" para iniciar la edición. Esto abrirá el panel de Elementor, donde encontrarás diversas herramientas de diseño.

¿Cómo estructurar una página web desde cero?

Al diseñar, es importante trabajar con una estructura en blanco. Aquí se muestra cómo empezar:

  1. Cambia el título de la página a algo pertinente, como "Platzi Folio".
  2. En "Ajustes", selecciona "Canvas" como estructura de la página. Esto permite un lienzo totalmente en blanco para crear desde cero.

¿Cómo añadir y personalizar elementos en Elementor?

Para la creación de un encabezado:

  1. Añade una nueva sección y elige una estructura simple para el header.
  2. Personaliza el ancho del contenido a tu preferencia, ya sea "Caja" o "Ancho completo".

Cómo aplicar estilos:

  • Fondo: Opta por un color o imagen. Para una apariencia uniforme, utiliza un color hexadecimal consistente con tus branding.
  • Imagen: Inserta logos o imágenes decorativas arrastrando las imágenes al panel y aplicando estilos, como bordes redondeados y bordes de color.

¿Cómo añadir otras secciones y elementos?

Dentro del header:

  1. Añade una sección inferior que contenga columnas.
  2. Ajusta el tamaño de estas columnas para adaptarse a tus necesidades de diseño.
  3. Inserta imágenes y ajusta su tamaño y posición para conseguir un diseño estilizado.

¿Cómo ajustar características y estilo de las imágenes?

  • Cambia el tamaño de las imágenes jugando con el ancho y alto hasta obtener el tamaño deseado.
  • Añade bordes continuos con el grosor, estilo y color que prefieras.

Ventajas de usar Elementor

Elementor te permite jugar con combinaciones de estilos y elementos para lograr un diseño atractivo sin necesidad de conocimientos avanzados en HTML o CSS. Con un simple arrastra y suelta, puedes construir una página que se ajuste a tus necesidades y gustos.

No olvides que cuanto más experimentes con los bloques y estilos disponibles, más únicas y personalizadas serán tus páginas webs. ¡Y ahí lo tienes! Estás listo para crear y modificar tu sitio web según se necesite, gracias a Elementor.