Un sitio web de una sola página es aquel en el que todo el contenido reside en una única página y el menú no dirige a otras URL: al hacer clic, la página se desplaza suavemente hasta el bloque correspondiente. Sin recargas, sin visitantes perdidos. Suena como lo que necesita para una página de aterrizaje, un portafolio o una tarjeta de presentación, ¿verdad?

Pero a la hora de la verdad, un principiante choca con dos muros. El primero: «No sé programar». El segundo: «Seguramente necesito plugins caros». Ambos muros se derrumban en menos de una hora.

Usted creará un sitio web completo de una sola página en WordPress con desplazamiento suave, secciones con anclaje y todo con herramientas gratuitas. Ni una sola línea de código.

Si prefiere ver en lugar de leer, aquí tiene un recorrido visual desde la instalación hasta la publicación:

💡 Resumen rápido:

• Instalar XAMPP, un servidor local para probar WordPress en su computadora
• Desplegar WordPress en una máquina local mediante phpMyAdmin y editando wp-config.php
• Elegir un tema compatible con la estructura de una sola página (usaremos SiteOrigin North)
• Instalar dos plugins gratuitos de SiteOrigin: Page Builder y Widgets Bundle
• Armar una página a partir de diseños prediseñados, asignar IDs de anclaje y vincularlos a los elementos del menú

Por qué un sitio de una sola página

Un sitio de una sola página supera a un sitio web clásico de múltiples páginas en escenarios específicos. Usted controla el orden en que el visitante consume la información: primero el valor, luego el precio, y no al revés. Sin tener que buscar enlaces en el menú.

Cuándo funciona

El portafolio de un fotógrafo, una página de aterrizaje de servicios, una página de promoción de producto, la tarjeta de presentación de una empresa con cinco secciones: todo esto cabe en una sola pantalla de desplazamiento. Seis bloques de dos o tres párrafos en una página se ven sólidos. Esos mismos seis bloques en seis páginas diferentes parecen un sitio vacío.

Móvil y velocidad

Un sitio de una sola página carga una vez. Después, solo desplazamiento. Un visitante puede perder la conexión a internet a mitad de la lectura y aun así desplazarse hasta el final: la página ya está en la memoria. En una pantalla móvil, esto se siente como una aplicación, no como un sitio web. Google confirmó hace tiempo: la indexación mobile-first es el estándar desde 2018.

Cuándo no

Cien artículos de blog, una tienda en línea compleja, una estructura de varios niveles: un sitio de una sola página no lo soportará. El desplazamiento se vuelve interminable y el SEO se resiente: los motores de búsqueda adoran las URL separadas para cada grupo de significados.

Paso 1: Instalar XAMPP en Windows

XAMPP es un paquete gratuito multiplataforma: Apache (servidor web), MariaDB (base de datos), PHP y Perl. En pocas palabras, convierte su computadora en un alojamiento local donde WordPress funciona sin internet y sin costo. Ideal para probar y aprender a construir.

Procedimiento de instalación en Windows:

• Vaya al sitio web de Apache Friends y descargue la última versión de XAMPP para su sistema.
• Ejecute el instalador. En la pantalla de bienvenida, haga clic en Siguiente.
• En la etapa de selección de componentes, deje las marcas en MySQL y phpMyAdmin; esto es suficiente para WordPress. El resto puede desmarcarlo: puede añadirlos más tarde desde el panel de control si los necesita.

• Elija una carpeta de instalación (la predeterminada es C:\xampp, puede dejarla así).
• En la pantalla de Bitnami, desmarque «Learn more about Bitnami for XAMPP»; instalaremos WordPress manualmente. Haga clic en Siguiente.
• Espere a que se descompriman los archivos. Deje marcada la casilla «Launch control panel» y haga clic en Finalizar.

Si el panel de control se abrió sin errores en rojo y Apache y MySQL están resaltados en verde, el servidor está funcionando. Abra un navegador y vaya a http://localhost/. Si ve la página de bienvenida de XAMPP, todo está configurado correctamente.

Si Apache no arranca, compruebe si el puerto 80 está ocupado por otro programa. Skype e IIS son culpables comunes. En la configuración de Apache (Config → Apache → httpd.conf), puede cambiar el puerto de 80 a 8080.

Paso 2: Crear una base de datos e instalar WordPress

WordPress almacena todo, páginas, configuraciones, usuarios, en una base de datos MySQL. Vamos a crearla mediante phpMyAdmin.

• En el panel de control de XAMPP, haga clic en el botón Admin de la fila de MySQL. Se abrirá phpMyAdmin.
• Vaya a la pestaña Databases en el menú superior izquierdo.
• Introduzca un nombre para la base de datos, por ejemplo wordpress, y haga clic en Create.

La base de datos está lista. Ahora, el propio WordPress:

• Descargue la última versión de WordPress y extraiga el archivo en la carpeta C:\xampp\htdocs\wordpress (puede nombrar la carpeta de otra forma, esto será parte de la URL local).
• En la carpeta, busque wp-config-sample.php y renómbrelo como wp-config.php.
• Abra el archivo en cualquier editor de texto y localice el bloque de configuración de MySQL:

1
define('DB_NAME', 'wordpress');
2
define('DB_USER', 'root');
3
define('DB_PASSWORD', '');
4
define('DB_HOST', 'localhost');

• Guarde el archivo y cierre el editor.
• En el navegador, abra http://localhost/wordpress/. Elija un idioma, cree un nombre de usuario y una contraseña, y haga clic en Instalar WordPress.

Listo. Ya está conectado al panel de administración de WordPress en su equipo local. Primer hito conseguido.

Paso 3: Elegir un tema

Casi cualquier tema funciona para un sitio web de una sola página, pero usaremos SiteOrigin North: es gratuito, adaptable y está diseñado para trabajar con el constructor de páginas SiteOrigin, que entra en juego en el siguiente paso. El tema admite un menú fijo, para que los visitantes no tengan que volver a desplazarse hacia arriba para navegar a otra sección.

Instalación: Apariencia → Temas → Añadir nuevo → escriba SiteOrigin North → Instalar → Activar. El tema está desarrollado por el equipo de SiteOrigin, las mismas personas que crean el plugin Page Builder. No habrá conflictos.

Paso 4: Plugins de SiteOrigin, Page Builder y Widgets Bundle

El núcleo de nuestra construcción: dos plugins gratuitos del repositorio de WordPress:

• SiteOrigin Page Builder (siteorigin-panels), un constructor de arrastrar y soltar con cuadrícula, diseños y funcionalidad integrada de desplazamiento en una sola página (desde la versión 2.3). Previsualizaciones en vivo, salida HTML limpia, más de 500 000 instalaciones activas.
• SiteOrigin Widgets Bundle (so-widgets-bundle), un conjunto de widgets: botones, imágenes, deslizadores, mapas, precios y otra veintena de elementos. Todo lo que llena los diseños.

Instalación: Plugins → Añadir nuevo → busque SiteOrigin Page Builder y SiteOrigin Widgets Bundle uno por uno → Instalar → Activar ambos. Es precisamente la combinación de estos dos plugins lo que le proporcionará tanto el constructor como el contenido para las maquetaciones. La funcionalidad de desplazamiento por anclas está integrada en Page Builder, no necesita plugins adicionales para la funcionalidad de página única.

Paso 5: Construir una página en SiteOrigin Page Builder

Cree una nueva página (Páginas → Añadir nueva). Sobre el editor estándar aparecerán pestañas, cambie a Page Builder.

SiteOrigin Page Builder incluye una biblioteca de maquetaciones prediseñadas. Haga clic en el botón Layouts situado sobre el editor.

Se abrirá un catálogo de preajustes, desde Fitness Gym hasta Agencia. Elija uno adecuado (nosotros elegimos Fitness Gym), haga clic en Insertar. Si ya había contenido en la página, el plugin le preguntará: insertar antes, después o reemplazar. Para una página en blanco, no hay diferencia.

Guarde la página y ábrala. Cambie a **Live **Editor, el enlace aparecerá en la barra de administración superior de WordPress.

En el Live Editor, al pasar el cursor sobre cualquier elemento verá inmediatamente qué widget es responsable de él. Puede editar texto, cambiar imágenes y arrastrar bloques, todo en tiempo real.

Paso 6: IDs de anclaje y menú de navegación

El último paso es vincular los elementos del menú con las secciones de la página. Sin esto, el desplazamiento no funcionará.

En Live Editor, pase el cursor sobre la primera fila después del bloque Hero, haga clic en el icono de la llave inglesa y seleccione Editar fila. Vaya a la pestaña Atributos y en el campo ID de fila, ingrese un identificador, por ejemplo activities. Haga clic en Listo.

Repita el proceso para cada fila con un ID único: services, luego pricing, después contact, y así sucesivamente. Guarde la página.

Ahora el menú: Apariencia → Menús. Cree un nuevo menú. Añada elementos mediante Enlaces personalizados: en el campo URL, ingrese #activities; en el campo de nombre, «Activities». Repita para cada ID.

Un matiz importante: el símbolo de numeral # es obligatorio en la URL del elemento del menú (es el formato de anclaje HTML), pero en el ID de fila dentro de Page Builder, no necesita poner el numeral; el constructor entiende por sí mismo que se trata de un identificador.

En nuestra guía sobre configuración de la navegación encontrará más detalles sobre cómo crear menús en WordPress.

Guarde el menú, asígnelo a un área de visualización del tema y abra el sitio. Haga clic en un elemento del menú y la página se desplazará suavemente hasta la sección deseada.

⁉️🤔 Preguntas frecuentes

¿Es obligatorio usar XAMPP o puedo ir directo a un hosting?

XAMPP es necesario para pruebas locales. Si ya tiene un hosting con WordPress, omita los pasos 1 y 2 y vaya directamente al tema y los plugins. La lógica de los anclajes funciona igual tanto en local como en un servidor en vivo.

¿Puedo usar otro tema en lugar de SiteOrigin North?

Sí, prácticamente cualquier tema moderno de WordPress admite la estructura de página única. Lo principal es que el tema no entre en conflicto con SiteOrigin Page Builder. Los desarrolladores de Page Builder garantizan la compatibilidad con la mayoría de los temas del repositorio de WordPress.

¿Funciona esta configuración en Mac o Linux?

XAMPP es multiplataforma; existen versiones para Windows, macOS y Linux. En Mac, también puede usar MAMP (versión gratuita). La instalación de WordPress y los plugins tras configurar un servidor local es idéntica en todos los sistemas operativos.

¿Qué hacer si Apache no arranca?

Las dos razones más comunes: el puerto 80 está ocupado por otro programa (Skype, IIS, otro servidor web) o el antivirus está bloqueando la actividad de red. Solución: cambie el puerto de Apache a 8080 en httpd.conf o finalice el proceso conflictivo mediante netstat -ano | findstr :80 en la línea de comandos.

¿Puedo añadir más secciones más adelante?

Sí. En cualquier momento, entre en Page Builder, añada una nueva fila, asígnele un ID de fila y cree un elemento de menú con el mismo anclaje. El constructor no limita el número de secciones.

Lo que consiguió en una hora

Un sitio web de página única funcional en WordPress. Con un menú de anclajes, desplazamiento suave, editor visual y completamente con herramientas gratuitas. La misma configuración de XAMPP + SiteOrigin funciona también para proyectos comerciales: construya una página de aterrizaje en local, pruébela y transfiérala a un hosting en vivo mediante cualquier plugin de migración.

Adopte esta regla: primero construcción local, luego producción. Esto le ahorra dinero en hosting durante las pruebas y le evita disgustos cuando algo sale mal.

Si el material le resultó útil, intente construir hoy su primer sitio de página única. XAMPP y WordPress se descargan en cinco minutos, y el constructor SiteOrigin se encarga de toda la maquetación.