Cómo agregar una barra superior en WordPress con Elementor

Una barra superior proporciona una forma efectiva de resaltar mensajes importantes, promociones y llamar a la acción en WordPress. Se coloca en la parte superior de la página web con el objetivo de captar la atención de los visitantes sin obstaculizar la experiencia de navegación de los usuarios.

Una barra superior bien diseñada puede aumentar significativamente las conversiones, ya que puede captar instantáneamente la atención de los visitantes y guiarlos hacia acciones como registrarse en boletines, obtener ofertas por tiempo limitado y explorar contenido nuevo. Funciona como un recordatorio persistente sin molestar a los usuarios.

Agregar barras superiores a WordPress es muy simple con Elementor. En este artículo, cubriremos una guía paso a paso sobre cómo agregar una barra superior en WordPress con Elementor. Quédate con nosotros hasta el final.

¿Qué es una barra superior?

Una barra superior es una sección horizontal estrecha que se muestra en la parte superior de un sitio web sobre el encabezado principal. A diferencia de las ventanas emergentes o pancartas, se utiliza para exhibir datos de contacto, descripciones de enlaces, anuncios importantes, ofertas promocionales y mensajes. Puede mejorar la participación del usuario mediante extensas personalizaciones, como colores, fuentes y botones específicos de la marca.

La barra superior no siempre se muestra en la parte superior de un sitio web 24/7. En cambio, generalmente se muestra durante los períodos de campaña con fines promocionales. Se define por diferentes nombres dependiendo de sus casos de uso. Lo discutiremos en la siguiente sección. Sigue leyendo.

¿Cómo se llama la barra superior en un sitio web?

Como se dijo hace solo un minuto, la barra superior en un sitio web está definida por diferentes nombres basados ​​en su propósito y funcionalidad. Eche un vistazo a algunos términos comunes utilizados para la barra superior, que se enumeran a continuación.

• Barra de anuncios: se utiliza para compartir anuncios, notificaciones de eventos y actualizaciones importantes.

• Barra de notificación: muestra ofertas de tiempo limitado, noticias de mantenimiento del sistema y mensajes urgentes.

• Barra de promoción: destaca promociones especiales, descuentos exclusivos y campañas para impulsar las ventas.

• Barra de información: exhibe números de contacto, detalles de compras, direcciones locales y horario comercial.

• Sticky Bar: permanece arreglado en la parte superior del sitio web incluso cuando los usuarios desplazan las publicaciones y las páginas.

• Barra flotante: se mueve cuando se desplaza de postes y páginas para garantizar una presencia notable.

Cómo agregar una barra superior en WordPress con Elementor

La parte teórica ha terminado. Ahora, cubriremos la parte del tutorial en esta sección, explicando una guía paso a paso sobre cómo agregar una barra superior en WordPress usando Elementor.

Requisito previo: instalar Elementor o HappyAddons

Para crear una barra superior en todo el sitio web, debe tener acceso al Temo Builder de Elementor, que es una característica premium. Si desea utilizar la versión premium del complemento y está buscando una opción gratuita, debe probar el complemento HappyAddons.

HappyAddons es en realidad un complemento para el complemento Elementor con muchas características gratuitas que normalmente son premium en Elementor. Por ejemplo, HappyAddons también tiene un constructor de temas, que es bastante similar a Elementor, pero es completamente gratuito.

Entonces, en esta sección, utilizaremos el complemento Happyaddons para explicar el tutorial. Instale y active los siguientes complementos en su sitio.

• Elemento
• Happyaddons

Una vez que se instalen y activen en su sitio, comience a seguir el tutorial explicado a continuación. Le mostraremos cómo crear una barra superior en WordPress como la que puede ver en la imagen a continuación.

Paso 01: Vaya a Happyaddons Theme Builder

Navegue a HappyAddons> Temor Builder . Al igual que el complemento Elementor, puede crear un encabezado, un pie de página, una plantilla de publicación de blog y una página de archivo con el constructor de temas del complemento HappyAddons.

Paso 02: Vaya a la sección del encabezado

Como se muestra la barra superior en la parte superior del encabezado web, debe personalizarla desde la sección del encabezado. Entonces, abra el encabezado con la opción Editar con Elementor.

Aprenda a crear contenido fuera de canvas en Elementor.

Paso 03: Agregue un nuevo contenedor sobre el encabezado

Rovering tu cursor en el encabezado mostrará el icono más (+) . Al hacer clic en este icono, le permitirá agregar un nuevo contenedor al encabezado anterior. Hazlo.

Paso 04: personalice la barra superior y agregue contenido

Debe agregar un color contrastante al fondo de la barra superior. Para hacer esto, haga clic en el icono de seis puntos en el contenedor> Vaya a la pestaña Estilo > Encuentre la opción Color > Seleccione un color.

Agregue el widget del editor de texto a la sección de la barra superior. Esto le permitirá agregar contenido de texto a la sección.

En el editor de texto en la barra lateral derecha, puede escribir el contenido de texto deseado que se mostrará en la barra superior en tiempo real.

Desde la opción marcada a continuación en la sección Editor de texto, puede cambiar el color y la audacia del texto que ha agregado a la barra superior.

Incluso puede agregar espacios entre las palabras y subrayar ciertas palabras. Hemos hecho esto a nuestro texto para este tutorial. Puedes verlos a continuación.

HappyAddons le permite agregar efectos de partículas al fondo de la barra superior. El efecto de partículas Happy es una técnica de animación visual donde las partículas pequeñas y brillantes se mueven dinámicamente en una página web, creando una experiencia de usuario animada y atractiva.

Para agregar esto, navegue al estilo> Efectos de partículas felices . Después de eso, active para habilitar el fondo de partículas .

A continuación, puede elegir un estilo de partículas, color de partículas, opacidad, número de partículas, tamaño de partícula y velocidad de movimiento . Espero que puedas hacerlos tú mismo.

Hemos agregado un clip corto para que pueda verificar cómo funciona la función de partícula feliz. Esto realmente hace que la barra superior sea tan buena para ver.

Expandir la sección fronteriza . Puede establecer un ancho de borde y un color como desee. Sin embargo, creemos que agregar un borde no es importante para la barra superior. Entonces, puedes evitarlo.

Ahora, expanda la sección Divisor de forma . La opción de divisor de forma le permite agregar formas personalizables y dinámicas en la parte superior o inferior de las secciones.

Sin embargo, esta opción tampoco es importante para la barra superior. Entonces, es mejor que lo evites. Pero si tiene ganas de agregar esta función a la barra superior, puede hacerlo.

Aquí hay una guía sobre cómo crear una página web infografía con Elementor.

Paso 05: Configurar configuraciones avanzadas para la barra superior

Finalmente, ven a la pestaña avanzada . Obtendrá numerosas opciones aquí para personalizar el margen, el relleno, la alineación, el orden, la posición, la altura, el efecto de movimiento, receptivo y más. Haga las personalizaciones necesarias usted mismo.

Paso 06: esconde la barra superior en un tipo de dispositivo

Puede ocultar la barra superior en cualquier dispositivo respectivo que desee. Por ejemplo, queremos ocultar la barra superior de los dispositivos de la tableta. Para hacer esto, expanda la sección receptiva. Luego, desactive la opción del modo de dispositivo en el que desea ocultar la barra superior.

Paso 07: Haga que la barra superior sea receptiva móvil

Haga clic en la opción Modo de respuesta en el pie de página del panel Elementor. Luego, seleccione el modo de retrato móvil .

Puede ver que el contenido de la barra superior aparece en tres líneas y no está perfectamente alineado, a diferencia de cómo lo ve en el modo de escritorio.

Para que el texto se vea bien para el tamaño de la pantalla, realice las personalizaciones que necesita al permanecer en el modo de retrato móvil.

Hemos alineado los textos centralmente. ¿No se ve mejor ahora? Puede personalizarlo aún más de la manera que desee.

Paso 08: publicar/actualizar los cambios

Cuando se realicen todas las personalizaciones, haga clic en el botón Publicar/actualizar en la parte inferior del panel Elementor para preservar todos los cambios.

Explore cómo crear una caja de luz en WordPress con Elementor.

Paso 09: Vista previa de la barra superior en el sitio web

Ahora, ven a la interfaz de su sitio web. Verá que la barra superior se muestra bien en la parte superior de su sitio.

Por lo tanto, puede crear fácilmente una barra superior en WordPress usando el complemento Elementer de forma gratuita.

Pensamientos finales

Espero que hayas disfrutado de este tutorial. Pero para obtener lo mejor de la barra superior, hay varias cosas clave que debe seguir con cuidado. Concéntrese en mantener un diseño limpio y visualmente atractivo que se alinee con la marca de su sitio web. Elija colores contrastantes para la legibilidad, use texto claro y conciso, y mantenga el mensaje relevante para su audiencia.

Además, optimice la capacidad de respuesta móvil para que la barra superior permanezca funcional en todos los dispositivos sin obstruir la experiencia del usuario. Evite sobrecargar la barra superior con demasiada información, ya que puede abrumar a los visitantes. Si usa animaciones o efectos, manténgalos sutiles para mantener la profesionalidad.

Si aún tiene alguna confusión o consulta en mente, háganos saber sobre ellas a través del cuadro de comentarios a continuación.