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á preparado para comprometerse con el mantenimiento del sitio web a largo plazo?

Entonces deberías 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 sólo aprenderás cómo crear un sitio web de una sola página con navegación de una página en WordPress pero también cómo agregar un formulario de contacto en una ventana emergente como beneficio adicional.

La mayoría de las personas abandonan el sitio web si no encuentran una forma adecuada de contactar al 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 crear un sitio web atractivo con una Navegación de una página con Elementor. Puede consultar el aspecto final del sitio desde el botón a continuación:

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

La navegación de una página, como su nombre indica, 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 amigable para el usuario.

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

Y esta simplicidad brinda 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 organizadores de bodas, fotografía, pequeños salones, 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 amplia, 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 navegación de una sola página?

No debería pensar en obtener un sitio web de una página para su empresa solo porque su empresa es pequeña. Hay muchos otros beneficios de tener un sitio web de una página, especialmente un sitio web de WordPress de una sola página. Echemos un vistazo a algunas de las ventajas:

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

• La mayoría de la gente Prefiero un sitio web que sea sencillo, bonito y directo. en lugar de uno innecesariamente largo. 
• Google cuenta Dominio y nivel de página autoridad de enlace hasta un grado de 40%. Esta es otra área en la que su sitio de una página tendrá 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 que hoy en día la gente tiene opciones ilimitadas, tener un sitio de carga rápida realmente 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 sola 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, de hecho puede hacerse grande. Grandes beneficios usando el sitio web pequeño. con navegación de una página. 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 el creador de sitios web populares WordPress (¡sé que dice en el título!)

 Entonces empecemos…

Paso #1: instale los complementos de WordPress necesarios para crear Elementor One Page Scroll

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

un sitio web Elementor desplazamiento de una página:

• Elementor (Versión gratuita)
• Kit de elementos (Versión gratuita y Pro ambas)
• MetForm (Versión gratuita)

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

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

ElementsKit proporciona muchos páginas y plantillas prefabricadas y secciones para que las personas puedan crear un sitio web con cualquier diseño, disposición y estilo que deseen y sin necesidad de codificar. Para este blog, voy a utilizar el Página de inicio del planificador de bodas por ElementsKit.

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

• Dar un título como Inicio, elija Elementor ancho completo desde 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 de Elementor Builder

• Ve a la Página pestaña, Buscar Boda Página y haga clic en insertar

Ahora hacer clic en la actualización para guardar

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

Ahora que tenemos nuestro sitio web, es hora de la parte divertida que es agregar la navegación de desplazamiento de una página de Elementor. La navegación de desplazamiento de ElementsKit Onepage es más fácil de usar y le da a su sitio un aspecto impresionante. Es muy poco probable que encuentre otro complemento Elementor de desplazamiento 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 una 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 Onepage.

• Ir a: Panel de WordPress ⇒ ElementsKit ⇒ Módulos 
• Encender Desplazamiento de una página
• Haga clic en Guardar cambios actualizar

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

• Haga clic en el ícono de Configuración en la esquina inferior izquierda del Panel 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 la haya activó su ElementsKit Pro

3.3 Elija el estilo de navegación

Ahora es el momento de elegir el estilo de navegación. ElementsKit le ofrece múltiples opciones de navegación. Por ejemplo, debajo del círculo, obtienes Ampliar, rellenar, rellenar, etc. Para el patrón cuadrado, tendrás opciones como ampliar y, como parte de Línea, obtendrás opciones como la línea para crecer, rellenar línea. , reducción de línea, etc.

Puedes elegir el estilo que quieras, para este blog voy a elegir el ícono 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 desde el biblioteca de iconos o subir un personalizado icono SVG. 

Para elegir un icono personalizado

• Elija un icono personalizado opción del menú desplegable de estilo de navegación
• Flotar en el icono de navegación y hacer clic en la biblioteca de iconos
• Buscar e Insertar el icono que te gusta

3.4 Configurar otras configuraciones de navegación

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

• Posición de navegación: Puede configurar 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 compensación de la posición de navegación.
• Espaciado de navegación: Elige el espacio que desees 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 la familia, el tamaño de fuente, la transformación de peso, el estilo, la decoración y la altura de la 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

• Flotar en la sección y haga clic en el Editar sección icono
• Ve a la Lengüeta avanzada
• Expandir Opción de desplazamiento en la página de ElementsKit
• Activar habilitar la sección para hacer visible la sección
• Activar habilitar hacerOpción 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 pase el cursor sobre el enlace.
• Finalmente, haga clic en actualizar para guardar.

Puedes repetir el mismo proceso mencionado anteriormente para agregar todas las secciones que desees 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 página de ElementsKit en la pestaña avanzada de la sección interior ni en ningún otro widget.

Después de realizar toda la navegación, actualizar y hacer clic ver el avance de navegación de una página en WordPress y también para comprobar los enlaces del menú de navegación.

Paso #4: agregue el pie de página del encabezado usando la sección de pie de página del encabezado prefabricada de ElementsKit

Bueno, ahora tienes un sitio web de navegación de una página en WordPress, pero aún necesitas un encabezado y pie de página para completar tu 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 muchos encabezado prefabricado y Secciones de pie de página Para escoger de. Para utilizar el encabezado y pie de página de ElementsKit:

• Ir a ElementsKit ⇒ Encabezado Pie de página ⇒ Haga clic en Agregar nuevo

• Elija tipo como Encabezamiento, Condiciones como Todo el sitio, Encender la opción Activar/Desactivar y finalmente hacer clic en Guardar cambios.

• Ahora, para agregar la 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 le guste y haga clic en insertar 

Puede seguir el vídeo 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 las secciones prefabricadas de ElementsKit.

Paso #5: Agregar formulario de contacto como ventana emergente modal (PRIMA)

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 mediante una ventana emergente le daría a su sitio web de una página un aspecto más atractivo junto con el formulario que tanto necesita.

Para agregar una ventana emergente modal, voy a reemplazar el Confirmar asistencia botón con un modal emergente y agregarle un formulario de contacto.

• Vaya a ElementsKit ⇒ Widgets ⇒ Active el modo emergente ⇒ Haga clic en guardar cambios

• Vaya a su página Todas ⇒ página de inicio (o como le haya puesto el nombre a su página) y haga clic en Editar con Elementor

• En el modo de edición, desplácese hasta la sección RSVP y elimine el botón RSVP.
• Ventana emergente modal de arrastrar y soltar 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 quiera)

• 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 ícono de edición en el cuerpo para abrir el editor Elementor.

• Busque Metform, arrastre y suelte el widget
• Haga clic en Editar formulario 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 confirmación de asistencia usando Metform y también cambié un poco el color y el estilo para que coincida con la plantilla de página de destino que estamos usando. Puedes consultar el blog en cómo crear y diseñar formularios de contacto usando Metform. 

También puedes consultar el vídeo a continuación para obtener instrucciones sobre cómo crear un formulario de contacto personalizado usando Metform.

Paso #6: actualice y vea la vista previa del 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 de actualización para guardar todo y haga clic en el Botón de 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:

Palabras finales sobre el sitio web de desplazamiento de una página de Elementor

¡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. Al utilizar un sitio web de una sola página, los clientes pueden navegar fácilmente a diferentes secciones de su sitio web para conocer su negocio. ¡Y esa ventana emergente modal de un solo clic con formulario de contacto hace que la comunicación esté realmente a 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 creen un sitio web de apariencia increíble. Entonces, tómate el 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.