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:

  • 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:

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

Navegue al elemento de navegación de una página de Nueva página de WordPress o
  • 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
Crear página con Elementor page builder elemento de navegación de una página
  • Haga clic en el botón ElementsKit (EK) una vez que se abra la ventana de Elementor Builder
Haga clic en el botón ElementsKit
  • Ve a la Página pestaña, Buscar Boda Página y haga clic en insertar
Busque e inserte la página de inicio de bodas mediante ElementsKit Navegación de una página en WordPress

Ahora hacer clic en la actualización para guardar

Haga clic en Actualizar para guardar cambios Elementor navegación de una página

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
Activar desplazamiento de una página por ElementsKit elemento de navegación de una página Elementor desplazamiento de una página elemento de desplazamiento de una página

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
Habilite el desplazamiento de una página desde la configuración Navegación de una página de Elementor en WordPress

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.

Opción de estilo de navegación con desplazamiento de una página

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
Elija un icono de navegación personalizado Navegación de una página en WordPress

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.
Otras configuraciones del estilo de navegación elemento de desplazamiento de una página o navegación de una página

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.
Agregar sección de página al desplazamiento de navegación de una página

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.

Navegación de una página en WordPress usando elementor navegación de una página

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
Agregar nuevo encabezado Navegación de una página de ElementsKit en WordPress
  • Elija tipo como Encabezamiento, Condiciones como Todo el sitio, Encender la opción Activar/Desactivar y finalmente hacer clic en Guardar cambios.
Crear encabezado usando ElementsKit
  • 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 
Insertar sección de encabezado por ElementsKit

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.

Descargar gif 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
Activar y guardar el widget modal emergente de ElementsKit
  • 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
Editar la página de inicio 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
Arrastre y suelte la ventana emergente modal de ElementsKit y elimine el botón Navegación de una página en WordPress
  • 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)
Cambiar el texto del botón modal emergente
  • 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.
Cambiar el estilo del botón modal emergente mediante ElementsKit Elementor desplazamiento de una página elemento de desplazamiento de una página
  • 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.
Habilite la plantilla y haga clic para abrir el panel de 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.
Agregue Metform en una ventana emergente modal en un sitio web de Elementor con desplazamiento de una página y elemento de desplazamiento de una página

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:

Sitio web de una sola página con elemento de navegación de una página o elemento de navegación de una página o elemento de desplazamiento de una página o elemento de desplazamiento de una página
Avance

¿Quieres saber más sobre ElementsKit? Consulte la última actualización de ElementsKit para saber mas sobre este increíble complemento de Elementor.

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.


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *