Cree un sitio web de una sola página con navegación de una página en WordPress (con bonificación)

¿Está buscando crear un sitio web para su negocio pero no tiene tiempo para crear uno grande? ¿O no está listo para comprometerse con el mantenimiento del sitio web a largo plazo?

Entonces debería optar por un sitio web de una sola página con navegación de una sola página. El sitio web de una sola página brinda toda la información de una manera atractiva y le da a su sitio web una apariencia impresionante para que sus usuarios puedan participar más.

En este blog, no solo aprenderá cómo crear un sitio web de una sola página con una página de navegación en WordPress , sino también cómo agregar un formulario de contacto en una ventana emergente como bonificación.

La mayoría de las personas abandonan el sitio web si no encuentran una forma adecuada de comunicarse con el propietario, por lo que este consejo adicional realmente agregará un valor extraordinario a su sitio web.

No perdamos más tiempo y comencemos el proceso de creación de un sitio web de aspecto impresionante con una navegación de una página de Elementor . Puede ver el aspecto final del sitio desde el siguiente botón:

¿Qué es la navegación de una página?

La navegación de una página, como sugiere el nombre, es un menú de navegación especialmente diseñado para navegar a diferentes partes de un sitio web de una sola página. La navegación de una página con un efecto de desplazamiento suave hace que navegar a diferentes secciones sea una experiencia fácil y fácil de usar.

"Simplicidad es la máxima sofisticación." —Leonardo da Vinci

Y esta simplicidad le da a los sitios web de una sola página la ventaja que necesitan sobre los demás. Un sitio web de una página es ideal para pequeñas empresas como planificadores de bodas, fotografía, salones pequeños, restaurantes, etc.

Sin embargo, si tiene un gran negocio de comercio electrónico que vende demasiados productos o brinda múltiples servicios y necesita atender a una audiencia más grande, entonces el sitio web de una sola página no es para usted.

¿Cuáles son los beneficios del sitio web de una sola página con One Page Navigation?

No debe pensar en obtener un sitio web de una página para su negocio solo porque su negocio es pequeño. Hay muchos otros beneficios de tener un sitio web de una página, especialmente un sitio web de WordPress de una página. Echemos un vistazo a algunos de los pros:

• En primer lugar, es compatible con dispositivos móviles. Eso es algo crucial a tener en cuenta cuando se trata del SEO del sitio web (optimización de motores de búsqueda). A partir de 2021, el 70 % de los ciudadanos estadounidenses utiliza un dispositivo móvil para realizar búsquedas en Internet. Datos como estos son la razón por la que Google prioriza un sitio web optimizado para dispositivos móviles. Con el diseño de una sola página, su sitio web se ubica en los buenos libros de Google desde el principio.

• La mayoría de las personas prefieren un sitio web que sea simple, hermoso y directo en lugar de uno innecesariamente largo.
• Google cuenta la autoridad de enlace a nivel de dominio y página en un grado del 40%. Esta es otra área donde su sitio de una página tendrá una ventaja.
• Los sitios web de una sola página se cargan más rápido que los sitios web con toneladas de páginas. Teniendo en cuenta el hecho de que la gente hoy en día tiene opciones ilimitadas, tener un sitio de carga rápida no es negociable.
• Los sitios de una página son fáciles de mantener.
• Dado que un sitio web de una sola página tiene toda la información en una página, la navegación con desplazamiento hace que sea mucho más fácil navegar y un efecto de desplazamiento suave hace que la experiencia del usuario sea relajante.

Puedo continuar un poco más, pero creo que la información anterior transmite el mensaje de que si su empresa es pequeña, entonces puede obtener grandes beneficios, de hecho, realmente grandes utilizando el sitio web pequeño con una página de navegación. Entonces, saltemos al proceso principal sin perder tiempo.

Cómo crear un sitio web único con navegación de una página en WordPress

En este blog, le mostraré no solo cómo crear un sitio web, sino también una navegación de una página de aspecto moderno en WordPress que impresionará a sus clientes potenciales. Para este tutorial, voy a utilizar WordPress para crear sitios web populares (¡sé que lo dice en el título!)

Entonces empecemos…

Paso #1: Instale los complementos de WordPress requeridos

Una vez que tenga WordPress instalado en su sistema. Necesita instalar los siguientes complementos de WordPress:

• Elementor (versión gratuita)
• ElementsKit (versión gratuita y Pro ambas)
• MetForm (versión gratuita)

Una vez que haya terminado de instalar y activar los complementos de WordPress requeridos, es hora de construir el sitio.

Paso #2: Cree un sitio web utilizando la página prefabricada de ElementsKit

ElementsKit proporciona muchas páginas, plantillas y secciones prefabricadas para que las personas puedan crear un sitio web con cualquier diseño, presentación y estilo que deseen sin tener que programar. Para este blog, voy a utilizar la página de inicio del planificador de bodas de ElementsKit.

Para crear su sitio web, desde el Panel de WordPress, vaya a Páginas ⇒ Agregar nuevo

• Dé un título como Inicio, elija Elementor Ancho completo de las opciones de Plantilla
• Haga clic para publicar y después de publicar, haga clic en Editar con Elementor

• Haga clic en el botón ElementsKit (EK) una vez que se abra la ventana Elementor Builder

• Vaya a la pestaña Página , busque Página de boda y haga clic en insertar

Ahora haga clic en actualizar para guardar

Paso n.º 3: Cómo agregar la navegación de una página de Elementor usando ElementsKit

Ahora que tenemos nuestro sitio web, es hora de la parte divertida que es agregar navegación de desplazamiento de una página. ElementosKit La navegación de desplazamiento de una página es más fácil de usar y le da a su sitio una apariencia impresionante. Es muy poco probable que encuentre otro complemento Elementor de navegación de una página tan bueno como ElementsKit.

Ahora, veamos el proceso paso a paso para agregar un enlace de navegación de desplazamiento de página a su sitio de WordPress:

3.1 Activar el módulo de desplazamiento de una página

Para agregar navegación de desplazamiento a su sitio de WordPress, primero, debemos activar el Módulo de desplazamiento de una página.

• Vaya a: Tablero de WordPress ⇒ ElementsKit ⇒ Módulos
• Activar Desplazamiento de una página
• Haga clic en Guardar cambios para actualizar

3.2 Habilitar el desplazamiento de una página desde la configuración de la página

• Haga clic en el ícono de Configuración en la esquina inferior izquierda del Panel de Elementor
• Abra la pestaña Configuración de ElementsKit
• Habilitar la opción de desplazamiento de una página

Nota: Si no puede encontrar la opción Configuración de desplazamiento de una página, probablemente no haya activado su ElementsKit Pro

3.3 Elija el estilo de navegación

Ahora es el momento de elegir el estilo de navegación. ElementsKit le brinda múltiples opciones para la navegación. Por ejemplo, debajo del círculo, obtiene Ampliación, relleno, relleno, etc. Para el patrón cuadrado, tendrá opciones como ampliación y como parte de Línea obtendrá opciones como la línea para crecer, relleno de línea , encogimiento de línea, etc.

Puede elegir cualquier estilo que desee, para este blog voy a elegir el icono personalizado. Una vez que elija un ícono personalizado, tendrá la opción de elegir un ícono para la opción Estilo de navegación de desplazamiento de una página. Puede elegir un icono de la biblioteca de iconos o cargar un icono SVG personalizado.

Para elegir un icono personalizado

• Elija la opción Icono personalizado del menú desplegable de estilo de navegación
• Pase el cursor sobre el ícono de navegación y haga clic en la biblioteca de íconos
• Busca e inserta el icono que te gusta

3.4 Configurar otros ajustes de navegación

Una vez que elija un estilo de navegación, obtendrá acceso a las siguientes configuraciones:

• Posición de navegación: puede establecer la posición de navegación como superior, derecha, inferior o izquierda.
• Desplazamiento de la posición de navegación: aquí puede elegir el valor de desplazamiento de la posición de navegación.
• Espaciado de navegación: elija el espacio que desee entre cada icono de navegación.
• Color de navegación: elija un color para el icono de navegación.
• Tipografía de información sobre herramientas: aquí puede elegir familia, tamaño de fuente, transformación de peso, estilo, decoración y altura de línea para la información sobre herramientas.

3.5 Agregar secciones de página a los enlaces de navegación

Ahora que todas las configuraciones están hechas, es hora de agregar las secciones que desea que aparezcan en la navegación. para hacerlo

• Pase el cursor sobre la sección y haga clic en el icono Editar sección
• Ir a la pestaña Avanzado
• Expanda la opción de desplazamiento en la página de ElementsKit
• Active Habilitar la sección para que la sección sea visible.
• Active la opción habilitar do t para agregar esta sección como uno de los enlaces de navegación
• Proporcione un nombre para el texto de información sobre herramientas . El texto de información sobre herramientas aparecerá cuando alguien se desplace sobre el enlace
• Finalmente, haga clic en actualizar para guardar

Puede repetir el mismo proceso mencionado anteriormente para agregar todas las secciones que desee a la navegación.

Nota: Puede agregar una sección a la navegación, no la sección interna. Por lo tanto, no encontrará la opción Desplazamiento en la página de ElementsKit en la pestaña avanzada para la sección interna o cualquier otro widget.

Después de realizar toda la navegación, actualice y haga clic para ver la vista previa de la navegación de una página en WordPress y también para verificar los enlaces del menú de navegación.

Paso n.º 4: Agregue el pie de página del encabezado usando la sección de pie de página del encabezado prefabricado de ElementsKit

Bueno, ahora tiene un sitio web de navegación de una página en WordPress, pero aún necesita un pie de página de encabezado para completar su sitio web. Las secciones de encabezado y pie de página de un sitio web son muy importantes para mostrar su logotipo e información importante para que sus clientes puedan verlo fácilmente.

ElementsKit le proporciona muchas secciones prefabricadas de encabezado y pie de página para elegir. Para utilizar el pie de página de encabezado de ElementsKit:

• Vaya a ElementsKit ⇒ Encabezado de pie de página ⇒ Haga clic en Agregar nuevo

• Elija Tipo como encabezado , Condiciones como sitio completo , active la opción Activar /Desactivar y finalmente haga clic en Guardar cambios .

• Ahora, para agregar una sección de encabezado, haga clic en Editar en el menú que creó
• Haga clic en Editar contenido
• Haga clic en el botón EK y vaya a la pestaña Secciones
• Elija el diseño de encabezado que desee y haga clic en insertar

Puede seguir el video a continuación para crear un hermoso pie de página de encabezado para su sitio web.

Nota: puede seguir los mismos pasos que el encabezado para crear una sección de pie de página para su sitio web utilizando secciones prefabricadas de ElementsKit.

Paso #5: Agregar formulario de contacto como ventana emergente modal (BONIFICACIÓN)

Es hora de agregar un formulario de contacto a su sitio web para que sea más fácil para sus clientes potenciales comunicarse con usted. Agregar un formulario de contacto usando una ventana emergente le daría a su sitio web de una página un aspecto más atractivo junto con el formulario tan necesario que necesita.

Para agregar una ventana emergente modal, reemplazaré el botón RSVP con una ventana emergente modal y le agregaré un formulario de contacto.

• Vaya a ElementsKit ⇒ Widgets ⇒ Activar ventana emergente modal ⇒ Haga clic en guardar cambios

• Vaya a su página de inicio All Page ⇒ (o como sea que haya llamado su página) y haga clic en Editar con Elementor

• En el modo de edición, desplácese a la sección RSVP y elimine el botón RSVP
• Arrastre y suelte la ventana emergente modal en el lugar del botón RSVP

• Para cambiar el texto del botón modal, vaya a Contenido ⇒ Botón de alternancia ⇒ Etiqueta y cambie "Abrir modal" a Confirmar asistencia (o lo que desee)

• Vaya a la pestaña Estilo ⇒ Botón de alternancia para cambiar el color de fondo del botón, el color del texto, el radio del borde y otras configuraciones para la vista normal y flotante.

• Ahora vaya a Contenido y active el modo Habilitar plantilla para que podamos agregar nuestro formulario de contacto.
• Haga clic en el botón emergente. Una vez abierto, haga clic en el icono de edición en el cuerpo para abrir el editor de Elementor

• Busque Metform, arrastre y suelte el widget
• Haga clic en el formulario Editar para elegir el formulario de contacto
• Elija el formulario que desee de la lista y haga clic en guardar y cerrar
• Finalmente, haga clic en actualizar para guardar

Nota: Ya había creado el formulario de RSVP usando Metform y también cambié un poco el color y el estilo para que coincida con la plantilla de la página de destino que estamos usando. Puede consultar el blog sobre cómo crear y diseñar formularios de contacto utilizando Metform .

También puede ver el video a continuación para obtener instrucciones sobre cómo crear un formulario de contacto personalizado con Metform.

Paso #6: Actualice y vea la vista previa Sitio web único con navegación de una página

Bueno, todo está hecho. Ahora vamos al paso final, el más fácil y emocionante. Después de completar toda la personalización y los pasos mencionados anteriormente, haga clic en el botón Actualizar para guardar todo y haga clic en el botón Vista previa para ver su sitio.

Siempre que haya seguido todos los pasos correctamente, debería obtener un sitio web de una sola página con navegación de una página en WordPress como el que se muestra a continuación:

Envolver

¡Date una palmadita en la espalda! Porque ha creado con éxito un hermoso sitio web de aspecto moderno con navegación de una página utilizando Elementor y ElementsKit. Usando un sitio web de una sola página, los clientes pueden navegar fácilmente a diferentes secciones de su sitio web para obtener información sobre su negocio. ¡Y esa ventana emergente modal de un clic con formulario de contacto hace que la comunicación sea realmente solo un clic de distancia!

Si está impresionado con lo que ha creado, prepárese para sorprenderse aún más porque ElementsKit abre posibilidades ilimitadas para que los usuarios de WordPress y Elementor experimenten y construyan un sitio web de aspecto increíble. Por lo tanto, tómese un tiempo para ver otros widgets y módulos avanzados de ElementsKit.

Para obtener más información sobre la creación de sitios web con WordPress, Elementor y el mágico ElementsKit, síganos en nuestras cuentas de redes sociales.