Hice una copia del blog que hice con CSS Grid del curso de Diego de Granda con Elementor:
Blog en leodexe.github.io
Introducción
Cómo se crean las páginas web
¿Qué es el Frontend?
¿Qué es el Backend?
Sitios Code con HTML y CSS
¿Qué debo saber de HTML?
Mi primera página web con HTML
Maquetando el hero
Maquetando la sección de redes sociales
¿Qué debo saber de CSS?
Mis primeros estilos con CSS
Estilos del menú
Estilizando el Hero: elementos encima imágenes
Estilizando el Hero: información del hero
Estilos para las imágenes de redes sociales
Detalles finales con HTML y CSS
Despliega tu página a internet
Cómo hacer deploy a internet
Cómo publicar tu página web gratis en internet
Compra el dominio de tu página web
Cómo comprar un hosting para mi página web
Sitios No-code con WordPress
Qué es no-code
Despliega tu página web con WordPress
Instalación y configuración de Elementor
Mi primera página web con Elementor
Maquetando el hero con Elementor
Mi primera página web con una plantilla de WordPress
Conclusiones
¡Conoce otros proyectos de este curso!
Próximos pasos para convertirte en Web Developer
Comparte tu proyecto del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Mi primera página web con Elementor
22/27Recursos
¿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:
- Selecciona las páginas innecesarias marcando las casillas junto a sus títulos.
- 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:
- Haz clic en "Añadir Nueva". Esto abrirá una plantilla en blanco.
- 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:
- Cambia el título de la página a algo pertinente, como "Platzi Folio".
- 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:
- Añade una nueva sección y elige una estructura simple para el header.
- 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:
- Añade una sección inferior que contenga columnas.
- Ajusta el tamaño de estas columnas para adaptarse a tus necesidades de diseño.
- 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.
Aportes 23
Preguntas 4
Ordenar por:
Se ve sencillo trabajar con herramientas no-code pero creo ayuda mucho tener bases de las tecnologías web ya que de esta forma sabes más o menos que necesitas y donde puede estar aquella propiedad que te serviría para ir maquetando y estilizando.
Elementor es mi builder favorito. Me agiliza muchísimo el trabajo.
📌 Elementor se vale de arrastrar y soltar elementos, además de poder editar sus estilos.
Buenos dias, a mi no me aparece seccion interior a alguien mas le pasa
Hola buenos dias a mi no me aparece el de seccion interior :( a alguien mas le pasa ??
Empecé Elementor, pero con la última actualización la interfaz es muy diferente :(
En las versiones actuales de wordpress, no aparece por defecto sección interior, debido al nuevo widget de contenedor Gridy flexbox, para activar sección interior debes ir a ajustes de elementor, y desactivar el contenedor grid y Contenedor Flexbox. Espero haberte ayudado.
\*Comentario cortecia de : Jhon Anderson Zuloeta Lopez\*
La verdad no me gustó nada elementor, no me permite editar bien lo que yo quiero, no encuentro las mismas opciones que el profesor, venía del curso de programación gratis donde se hizo tooodo con código y me pareció más sencillo😭
https://www.kommputron.com/kommputron/
me esta costando mucho trabajo , pero hay voy… lento pero seguro…
Este curso es una buena opción para aprender lo básico de WordPress. Sin embargo, me parece que está algo desactualizado. La interfaz de Elementor ha cambiado bastante, y actualmente, el plugin se puede instalar sin necesidad de crear una cuenta, a menos que se quiera acceder a la versión pro.
El campo de las páginas *no-code* es bastante prometedor y bien remunerado, pero, como ocurre con muchas áreas, es crucial estar lo más actualizado posible. Por eso, creo que sería importante que Platzi actualizara este curso para que esté al día con las últimas versiones y tendencias.
actualmente en 2025 las secciones interiores no existen en elementor la única forma de poder volver a tenerlas es que agarren una plantilla cualquiera un poco vieja de cualquier página pero lo recomendable es trabajar con lo nuevo que es el contenedor flebox y Grid
Para los que no encuentren la opción de **SECCION INTERIOR**, seleccionen la flexbox y elijan la siguiente opcion![]()![]()
Cada parte tiene sus propiedades de sí misma, pero en general las propiedades son:
* Contenido: Acá se define con que contenido se va a llenar, por ejemplo si es una imagen se carga la imagen, si es un texto se escribe el texto.
* Estilo: Ya son como las propiedades visuales de lo que se haya arrastrado, por ejemplo, si es una imagen, va a aparecer tamaño como el ancho y el alto, si es un texto va a aperecer propiedades como tipografia, color y alineación.
Asi como cada **Elemento** tiene estas propiedades de arriba, los contenedores tambien se les puede editar en su apartado de propiedades las suyas tambien. Es decir cada cosa en sí tiene las mismas propiedades como objeto solo que hay que verlo como una especie de matrioska donde una va metida dentro de la otra, bueno pues:
> Acá metemos en una seccion, un contenedor, y en cada contenedor los elementos.
No es obligatorio seguir siempre este orden, si durante el transcurso vemos que necesitamos agregar otro elemento en el proceso solo lo agregamos y ya.
ya no pude seguir haciendo el curso ya que no explicaron alguna manera de hacer esto sin comprar nada… intente algunas opciones de los comentarios pero no pude ni con xampp, ni con local, ni con devkinsta ni con docker ni con nada…
Detall, (18/11/2023) ya no sale como elemento canvas, o o podrán ser ajustes del idioma, si a ustedes les aparece “Lienzo de Elementor”, ese es.
Pues muy bonito. Muy practico.
Interesante
Uno puede usar Wordpress para crear Blogs y para hacer páginas web al tiempo?
Para crear tu primera página web con Elementor:
- Elementor es un plugin de WordPress que permite diseñar páginas web de forma visual e intuitiva, utilizando una interfaz drag&drop que permite arrastrar y soltar elementos y editar sus estilos fácilmente.
- Para utilizar Elementor, se recomienda instalar un plugin de tema como “Hello”, ya que ayuda a mejorar la interactividad y proporciona una base sólida para el diseño de páginas web.
- Algunas de las ventajas de Elementor incluyen:
- Interfaz drag&drop intuitiva para añadir elementos a la página en creación.
- Plantillas y widgets prediseñados para ahorrar tiempo y diseñar como un profesional.
- Gestión completa de los estilos de diferentes bloques y secciones de diseño.
- Guardado de bloques, secciones o elementos globales para usar en otras partes de la web o incluso exportarlos a otra web diferente.
- Fácil manejo del modo adaptable para conseguir un diseño responsive de cada una de las páginas que creas.
- Compatibilidad con WooCommerce, el plugin de ecommerce más utilizado en el mundo.
- Un theme builder que te permite hacer modificaciones globales del header (encabezado), el footer (pie de página) o hacer plantillas prácticamente de lo que quieras.
- Extensiones o AddOns de otros desarrolladores para multiplicar los elementos y widgets del constructor.
- Comunidad amplia y activa a la que poder consultar en línea.
- Algunas de las desventajas de Elementor incluyen:
- El precio de su versión premium, aunque se considera un gasto razonable considerando la cantidad de funcionalidades que proporciona.
- Las mejores plantillas de Elementor están disponibles solo en la versión Premium, aunque las plantillas que vienen con la versión gratuita también son de calidad.
- El soporte oficial puede tardar en responder, pero existen otras vías para obtener ayuda.
- Algunos conflictos al usar plugins de terceros menos conocidos, aunque estos problemas suelen tener fácil solución.
Yo me negaba a usar este tipo de sitios dónde solo arrastras y sueltas, pero tiene mucha razón el profe, en ocasiones no te dará el tiempo para crear uno o varios sitios web y sobre todo por los comentarios de la bandita, en la práctica los empleadores te lo piden, por lo que no resta más que seguir aprendiendo.
No encuentro la opcion de "Sección interior" para dividir el contenedor
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?