Cómo crear un sitio web de una página con Elementor (método gratuito)

Los sitios web de una página hacen bien un trabajo específico: colocan cada información que un visitante necesita en un solo pergamino. Sin hacer clic. Sin segunda página. Solo héroe, acerca de, servicios, contacto, hecho.

Esta guía explica cómo crear un sitio web de una página con Elementor usando el complemento gratuito, un tema liviano y un puñado de widgets de complementos maestros donde se agota el conjunto gratuito de Elementor. Al final, tendrás un sitio que se desplaza limpiamente de arriba a abajo, con enlaces de navegación que saltan a cada sección en lugar de cargar una nueva página.

Si tienes prisa, salta al acceso directo del kit de plantillas cerca de la parte inferior. Si realmente quieres entender lo que estás construyendo, comienza desde arriba.

¿Qué es un sitio web de una página y cuándo funciona realmente

Un sitio web de una página coloca todo su contenido en una sola URL. En lugar de navegar a /about o /services, el menú salta a secciones ancladas en la misma página.

Funciona bien para:

• Autónomos mostrando un pequeño portafolio
• Páginas de destino del evento (boda, conferencia, lanzamiento de producto)
• Pequeñas empresas de servicios (consultores, barberos, diseñadores)
• Próximamente páginas o anuncios de MVP
• Currículums y portafolios personales

Funciona peor para:

• Blogs, que necesitan URL de publicación separadas para SEO
• Tiendas online con más de un puñado de productos
• Sitios dirigidos a múltiples palabras clave de cola larga

Si su contenido puede caber en aproximadamente 7 a 12 secciones sin sentirse abarrotado, un buscapersonas probablemente sea el formato correcto.

Lo que necesitas antes de comenzar

Trei ingrediente:

1. Una instalación de WordPress (autohospedada o en su host favorito).
2. Gratis Elementor y el libre Hola tema Elementor. Hola, se envía sin ningún estilo, que es exactamente lo que quieres cuando Elementor dibuja todo.
3. El libre Complemento de complementos maestros para los widgets Elementor no incluye (galerías filtrables, tablas de precios, cuadros de información, carruseles de equipo, estilo del formulario de contacto 7).

Puedes crear la mayor parte de esto solo con Elementor gratis, pero algunas secciones se vuelven incómodas sin widgets adicionales. Los marcaré a medida que avancemos.

Elija el tema y la plantilla de página correctos

Instale Hola Elementor desde Apariencia > Temas > Agregar nuevo. Es una pizarra en blanco: sin barras laterales, sin estilos predeterminados, sin opiniones. Elementor dibuja la página completa.

Una vez que esté activo:

1. Crea una nueva página (Páginas > Agregar nuevo).
2. Ábrelo en Elementor.
3. Haga clic en el engranaje de configuración en la parte inferior izquierda, vaya a Diseño de páginași elige Lienzo elemental.

Canvas elimina el encabezado y el pie de página de WordPress. Su único buscapersonas se convierte en la página completa.

Si desea comparar opciones temáticas, el los mejores temas ligeros de WordPress para Elementor el resumen cubre alternativas, pero Hola es el valor predeterminado por una razón.

Las 11 secciones de un diseño de elementor de una página

Los buscapersonas más decentes siguen el mismo ritmo. Aquí está la pila que uso:

1. Menú de navegación (pegajoso)
2. Sección de héroes
3. Acerca de
4. Servicios o características
5. Equipo
6. Portafolio o Estudios de Casos
7. Precios
8. Testimonios
9. Formulario de contacto
10. Iconos sociales
11. Pie de página

No todos los sitios necesitan los once. Un autónomo en solitario probablemente se salte el equipo. Un consultor B2B podría saltarse los precios. Elija los que realmente acerquen a su visitante a contactarlo y deje el resto.

Cree el menú de navegación

Primero, cree el menú en WordPress: Apariencia > Menús > Crea un nuevo menú.

Agregue enlaces personalizados con URL de marcador de posición. Por ahora, use un hash (#) seguido del nombre de la sección: #about, #services, #pricing. Los conectarás correctamente al final, una vez que cada sección tenga una identificación coincidente.

Guarda el menú.

Ahora, dentro de Elementor, deja caer una sección en la parte superior con dos columnas. Coloque su logotipo en la columna de la izquierda. Para la columna de la derecha, tienes dos opciones:

• Elementor liber: Utilice el widget del menú WP.
• Addonuri maestru: Utilice el Widget de meni de navigație. Admite megamenú, efectos de desplazamiento, estilo de alternancia móvil y retoma el menú que acaba de crear sin configuración adicional.

Haga que la sección quede pegajosa Configuración de sección > Avanzado > Efectos de movimiento > Pegajoso: Arriba. Si desea un tutorial completo, el encabezado adhesivo en la guía Elementor lo descompone.

Diseñe la sección Hero

El héroe marca la pauta. Mantenlo breve: una promesa, una línea de apoyo, un botón.

Agregue una nueva sección justo debajo del menú. Abra Configuración de sección y establezca:

• Ancho del contenido: Ancho completo
• Altura: Encajar en la pantalla
• Alineare verticala: Medio

Coloque un encabezado grande, una línea de texto descriptivo y un botón. Utilice una imagen de fondo o un color sólido en el estilo de sección. Una superposición oscura ayuda a la legibilidad del texto cuando la foto de fondo está ocupada.

Si desea una ventaja, Master Addons envía plantillas de sección de héroe en el Biblioteca de plantillas. Importa uno, intercambia la copia y la imagen y listo en unos minutos.

Agregue la sección Acerca de

Aquí no hay nada elegante. Una sección estándar con dos columnas:

• Columna izquierda: una foto (tuya, la de tu equipo o tu espacio de trabajo)
• Columna derecha: Encabezado + Editor de texto + Botón

Apunte el enlace de anclaje del botón en la sección Servicios a continuación (“Ver lo que hago”) para que los visitantes que pasan por Acerca de todavía tengan un camino claro hacia adelante.

Construya la Sección de Servicios

Aquí es donde el widget Infobox gana su lugar. Free Elementor tiene un cuadro de iconos, pero es limitado. Los complementos maestros Widget de cuadro de información le brinda múltiples diseños, posicionamiento de íconos, estados de desplazamiento y un campo de URL en todo el cuadro para que se pueda hacer clic en toda la tarjeta.

Cree una sección, agregue un encabezado (“Servicios” o “Qué hago”), luego una sección interna dividida en tres o cuatro columnas. Deje caer un cuadro de información por columna.

Cada cuadro debe responder una pregunta: cuál es el servicio, para quién es y qué resultado ofrece. No descargue listas de funciones aquí. Para eso está una página de servicios dedicada y no tiene una en un buscapersonas.

Agregue una sección de equipo

Salta esta sección si estás solo.

Para 1-4 personas: utilice el widget Miembro del equipo. Cada miembro recibe una tarjeta con foto, nombre, rol, biografía breve e íconos sociales.

Para equipos más grandes: utilice el carrusel de miembros del equipo. Muestra tres o cuatro miembros a la vez y se desplaza horizontalmente, lo que mantiene la sección visualmente contenida.

Mantenga todas las fotografías del equipo con la misma relación de cultivo y aspecto. Los tamaños de cabeza no coincidentes en una cuadrícula parecen más descuidados de lo que cabría esperar. Documentación: Widget de miembro del equipo y Carrusel de miembros del equipo. Para obtener una guía independiente, consulte cómo crear una sección de miembros del equipo.

Agregue una cartera filtrable

La galería de imágenes de Free Elementor está bien para una cuadrícula estática, pero no filtra por categoría.

Si desea que los visitantes hagan clic en “Marca” o “Web” y reorganicen la cuadrícula, necesita una galería filtrable. Master Addons tiene uno. Admite pestañas de categorías, caja de luz emergente, cintas (como insignias “NUEVAS” o “CON CARACTERÍSTICAS”) y una superposición de metadatos al pasar el cursor.

Configuración: soltar el Widget de galería filtrable, subir imágenes, etiquetar cada una con una categoría y estilo. Más contexto en el Resumen de complementos de galería filtrables de Elementor si desea ver cómo se compara con las alternativas.

Agregar tablas de precios

Si vende servicios o suscripciones productizados, una sección de precios se convierte mejor que un vago “contacto para cotización”

Free Elementor no tiene un widget de precios, por lo que este es el territorio de complementos maestros. El Widget de tabla de precios está en la versión gratuita y le brinda encabezados, precio, lista de funciones con íconos de verificación o cruz, una insignia para el plan recomendado y un botón CTA.

Tres columnas es el punto ideal para un buscapersonas. Los visitantes escanean de izquierda a derecha, y la columna del medio es donde pones el plan que realmente quieres que elijan. Márcalo como “Más popular” con una cinta y peínalo de manera ligeramente diferente (borde más atornillado, botón lleno). Más consejos de patrones en el Widget de tabla de precios de Elementor publicar.

Agregar testimonios de clientes

Dos o tres testimonios reales golpearon una pared de falsos.

El carrusel testimonial de Free Elementor maneja el diseño básico. Si desea una versión más limpia de una sola columna (una gran cotización que gira), el carrusel de miembros del equipo en complementos maestros, curiosamente, también funciona bien aquí: coloque fotos de clientes en las ranuras para miembros y coloque la cotización en el campo de biografía.

Solicite testimonios que mencionen un resultado específico (“tengo 3 clientes en el primer mes”) en lugar de elogios genéricos (“es fantástico trabajar con ellos”). Los detalles son convincentes. Los adjetivos vagos son rellenos.

Agregue un formulario de contacto

Instale el gratis Complemento del formulario de contacto 7 del directorio del complemento. Cree un formulario, tome el código corto.

En Elementor, suelte un widget de Editor de texto y pegue el código corto. El formulario se renderizará, pero se verá sencillo.

Ahí es donde toma el control el widget Master Addons Contact Form 7. En lugar de pegar un código corto, le permite diseñar etiquetas, campos, bordes, mensajes de error y el botón de envío desde el panel Elementor. Sin CSS personalizado.

Tutorial completo en el Formulario de contacto 7 documento de personalización. Si desea un ícono de Font Awesome dentro del botón de envío, hay una publicación separada en aplicación de iconos de Font Awesome a los botones CF7.

Agregar iconos sociales

Elementor gratuito incluye un widget de iconos sociales. Cubre Facebook, X (anteriormente Twitter), LinkedIn, Instagram, YouTube y algunos otros. Controlas el color (marca o personalizado), el tamaño, la forma (cuadrado redondeado o círculo) y el espaciado.

Ponlos encima o dentro de tu pie de página. Mantén la cuenta en tres o cuatro plataformas donde realmente estás activo. Doce iconos, la mitad de ellos cuentas muertas, lucen peores que tres sanos.

Organice el pie de página

En un buscapersonas, el pie de página puede ser una sola línea.

Agregue una sección debajo del formulario de contacto, columna única, centrada. Una breve línea de derechos de autor (© 2026 Su nombre. Todos los derechos reservados) hace el trabajo. Si necesita enlaces de términos o políticas de privacidad, colóquelos aquí también. Nada más pertenece a un pie de página de un solo buscapersonas.

Vincula el menú a cada sección (la parte en la que la mayoría de la gente se equivoca)

Este es el paso que hace tropezar a los principiantes. Los elementos del menú que configuraste al principio (#about, #services, etc.) no hagas nada todavía, porque las secciones no tienen ID coincidentes.

Aquí está la solución, hecha una vez por sección:

1. Pase el cursor sobre una sección, haga clic en el identificador de seis puntos en el medio para seleccionarla.
2. Ir al Avanzado pestaña en el panel izquierdo.
3. Desplácese hasta ID CSS.
4. Escriba la identificación sin el hash. Entonces about, nu #about.

Guardar. Repita para cada sección a la que desee saltar el menú. Si prefiere no conectar los anclajes a mano, diga en publicaciones largas de blog en lugar de en una página de destino, a complemento de índice crea estos enlaces de salto para usted automáticamente.

Luego vuelve a Apariencia > Menús y confirme que el enlace de cada elemento del menú sea la versión hash (#about, #services, #pricing). Guardar el menú.

Vuelva a cargar la interfaz, haga clic en un elemento del menú y la página debería desplazarse sin problemas hasta la sección correspondiente. Si salta abruptamente en lugar de desplazarse, al tema le falta la regla CSS de desplazamiento fluido. Agregue esto a Personalizar > CSS adicional:

html { scroll-behavior: smooth; }

Hecho.

Omita el trabajo manual: comience desde un kit de plantillas

Si no tiene ganas de construir once secciones desde cero, Master Addons envía más de 30 unidades completas Kits de plantillas, muchos de ellos buscapersonas para industrias específicas (agencia, restaurante, cartera, SaaS, consultor).

Importa un kit, intercambia las imágenes y copia, ajusta los colores para que coincidan con tu marca y estarás en vivo en una tarde en lugar de una semana. El cómo importar plantillas de Elementor la publicación cubre el paso de importación si nunca lo has hecho.

Así es también como recomiendo que comiencen los principiantes. Construya a partir de una plantilla de trabajo, aprenda cómo está estructurada cada sección y luego modifique a partir de ahí.

Consejos de velocidad y rendimiento para sitios de una página

Dado que todo el sitio vive en una URL, esa URL debe cargar cada imagen, fuente y script para cada visitante. Un buscapersonas inflado es un asesino de conversiones.

Victorias rápidas:

• Comprima cada imagen antes de cargarla (TinyPNG, Squoosh o un complemento como Imagify).
• Utilice el formato WebP siempre que sea posible. El los mejores complementos de optimización de imágenes de WordPress opciones de cubiertas redondas.
• Cargue imágenes por debajo de la página (Elementor maneja esto de forma predeterminada en las versiones modernas).
• Limite las fuentes web a dos familias, máx.
• Minify CSS y JS con un complemento de almacenamiento en caché (LiteSpeed Cache, WP Rocket o Autoptimize).

Más adentro cómo acelerar los sitios web de Elementor. Master Addons v3 es tres veces más rápido que v2 y solo carga el widget CSS y JS para los widgets realmente en uso, lo cual importa más en un sitio de URL única que en uno de varias páginas.

Preguntas frecuentes

Envolviendo

Un sitio web de una página con Elementor no es difícil. Elija Hola Elementor, configure la página en Canvas, cree once secciones (o menos), asigne ID de CSS y conecte el menú a enlaces hash. Listo.

Donde Master Addons acelera las cosas:

• Widget del menú de navegación con mega menú y alternancia móvil
• Widget Infobox para servicios
• Galería filtrable para portafolios
• Tabla de precios (gratis) con cinta incorporada y lista de funciones
• Formulario de contacto 7 estilismo sin escribir CSS
• Miembros del equipo y miembros del equipo Carrusel
• Más de 30 kits de plantillas completos cuando quieras omitir la compilación manual

Descargar el complemento de complementos maestros gratuito y comience con cualquier sección en la que tenga menos confianza construyendo desde cero. Trabaja desde allí.

Lectura relacionada: Los 100 mejores complementos de Elementor · Cómo importar plantillas de Elementor · Widgets y extensiones · Precios de complementos maestros