{"id":368948,"date":"2023-01-31T13:18:00","date_gmt":"2023-01-31T10:18:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368948"},"modified":"2023-01-31T13:27:05","modified_gmt":"2023-01-31T10:27:05","slug":"como-configurar-una-barra-de-notificaciones-de-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-configurar-una-barra-de-notificaciones-de-wordpress\/","title":{"rendered":"C\u00f3mo configurar una barra de notificaciones de WordPress"},"content":{"rendered":"\n

Hay muchos tipos diferentes de mensajes que puede querer transmitir en su sitio web. Cada uno de ellos requiere un canal apropiado. Grandes cuadros emergentes, pancartas promocionales y similares son muy convenientes, pero a veces pueden parecer demasiado agresivos. Adem\u00e1s, los visitantes del sitio se cansan f\u00e1cilmente de ellos, lo que puede conducir a altas tasas de rebote. Si est\u00e1 pensando en una forma elegante, discreta pero efectiva de captar la atenci\u00f3n de sus visitantes y transmitir un mensaje<\/strong>, una barra de notificaciones de WordPress podr\u00eda ser justo lo que est\u00e1 buscando.<\/p>\n

Barra de notificaciones: para qu\u00e9 se utiliza<\/h2>\n

La barra de notificaciones se puede utilizar para una variedad de prop\u00f3sitos. Sin duda, puede ayudarle a dirigir m\u00e1s tr\u00e1fico a p\u00e1ginas dedicadas<\/strong>. Puede usarlo para hacer crecer su lista de correo electr\u00f3nico al ofrecer una suscripci\u00f3n a un bolet\u00edn informativo o compartir informaci\u00f3n en todo el sitio<\/strong>.<\/p>\n

Puede ser muy beneficioso si, por ejemplo, tiene un tema WP de comercio electr\u00f3nico<\/a>. Puede mostrar la informaci\u00f3n de env\u00edo<\/strong> all\u00ed, ya que este es el tipo de informaci\u00f3n que todos los visitantes de su sitio ciertamente quieren saber. Tambi\u00e9n le resultar\u00e1 muy conveniente anunciar una venta o un nuevo producto<\/strong>. Mostrar un c\u00f3digo de promoci\u00f3n<\/strong> en una barra de notificaciones tambi\u00e9n es una gran idea.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Adem\u00e1s, puede usarlo para compartir su informaci\u00f3n de contacto<\/strong>. De esta manera, est\u00e1 mejorando la comunicaci\u00f3n con los visitantes del sitio, ya que no tienen que abrir otra p\u00e1gina solo para encontrarlo. Y si agrega \u00edconos sociales en la barra<\/strong>, es una receta comprobada para hacer crecer sus conexiones de redes sociales.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Cualquier tipo de sitio web puede beneficiarse de una barra de notificaciones bien dise\u00f1ada. Solo piensa en las posibilidades. Puede usarlo como un banner de CTA para invitar a los visitantes del sitio a suscribirse, registrarse, hacer clic para descargar cierto material, hacer un pedido especial<\/strong> y similares.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Ahora, si su tema de WP a\u00fan no tiene una barra de notificaciones, puede configurar una f\u00e1cilmente con uno de los complementos de la barra de notificaciones de WordPress.<\/p>\n

Establecer una barra de notificaci\u00f3n usando el complemento de la barra de notificaci\u00f3n de WPFront<\/h2>\n

\"C\u00f3mo<\/a><\/p>\n

WPFront<\/a> es un complemento de barra de notificaciones confiable y pr\u00e1ctico. Es muy popular entre los usuarios de WordPress gracias a su sencillez y eficacia. Es bastante f\u00e1cil de configurar y ofrece la cantidad justa de opciones de personalizaci\u00f3n<\/strong>. Como es muy ligero, puede estar seguro de que no ralentizar\u00e1 su sitio web ni afectar\u00e1 su rendimiento de forma negativa. Ahora le mostraremos c\u00f3mo configurarlo en solo unos pocos pasos<\/strong> y crear la barra de notificaciones perfecta para su sitio web.<\/p>\n

PASO 1: Activar el complemento de la barra de notificaciones de WPFront<\/h3>\n

Una vez que haya instalado el complemento, haga clic en Configuraci\u00f3n y luego en la Barra de notificaciones en el men\u00fa desplegable.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Al hacer clic en \u00e9l, se abrir\u00e1n todas las configuraciones disponibles para la barra de notificaciones. Lo primero que hay que hacer es, l\u00f3gicamente, marcar la casilla que dice Habilitado.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Despu\u00e9s de habilitar la barra de notificaciones aqu\u00ed, estar\u00e1 visible en todas las p\u00e1ginas y podr\u00e1 continuar personaliz\u00e1ndola<\/strong>. Todas las opciones de personalizaci\u00f3n se muestran en esta p\u00e1gina.<\/p>\n

Notar\u00e1 que la barra de notificaciones aparece como una vista previa en el backend de la p\u00e1gina de configuraci\u00f3n de la barra de notificaciones<\/strong>, lo cual es muy conveniente ya que no tiene que ir y venir para ver c\u00f3mo se ve en la p\u00e1gina en vivo. Puede ver sus personalizaciones en vivo y, una vez que est\u00e9 satisfecho con lo que ve, haga clic en Guardar.<\/p>\n

PASO 2: Configuraci\u00f3n de la posici\u00f3n de la barra de notificaciones<\/h3>\n

\"C\u00f3mo<\/a><\/p>\n

Este complemento le permite elegir la ubicaci\u00f3n donde desea mostrar su barra de notificaciones<\/strong> ; puede ser la parte superior o inferior de la p\u00e1gina<\/strong>. En caso de que opte por la posici\u00f3n superior, tambi\u00e9n puede decidir qu\u00e9 tan cerca del borde superior de la pantalla desea que aparezca la barra<\/strong> utilizando la opci\u00f3n Desplazamiento de posici\u00f3n. Sin embargo, esto no es posible para la posici\u00f3n inferior.<\/p>\n

En cuanto al comportamiento de la barra, puede elegir entre Fijo en la posici\u00f3n<\/strong> y Mostrar en el desplazamiento<\/strong>. Si eliges la primera opci\u00f3n, la barra no se ver\u00e1 influenciada por el desplazamiento de la p\u00e1gina, permanecer\u00e1 en la misma posici\u00f3n en todo momento<\/strong>. Si eliges la segunda opci\u00f3n, la barra aparecer\u00e1 cuando te desplaces por la p\u00e1gina<\/strong>. No ser\u00e1 visible de inmediato y, en Desplazamiento<\/strong> de desplazamiento, puede elegir cu\u00e1ntos p\u00edxeles desea que aparezca<\/strong>. Para que la opci\u00f3n Mostrar en desplazamiento funcione, primero debe desmarcar Fijo en la posici\u00f3n<\/strong>.<\/p>\n

PASO 3: Personalizaci\u00f3n de la barra de notificaciones<\/h3>\n

\"C\u00f3mo<\/a><\/p>\n

Puedes hacer que tu barra de notificaciones sea est\u00e1tica o animada<\/strong>. Usted elige esto configurando la Duraci\u00f3n de la Animaci\u00f3n<\/strong>. Si lo establece en 0, la animaci\u00f3n se apagar\u00e1 y la barra ser\u00e1 est\u00e1tica<\/strong>. Para animar la barra, ingrese cu\u00e1nto tiempo tomar\u00e1 la animaci\u00f3n<\/strong>. Por ejemplo, si lo establece en 3 segundos, la barra aparecer\u00e1 gradualmente durante los 3 segundos. La animaci\u00f3n es una buena manera de enfatizar la barra, ya que hace que aparezca gradualmente y, por lo tanto, dirige la atenci\u00f3n hacia ella.<\/p>\n

Si no desea que su barra de notificaciones se muestre inmediatamente despu\u00e9s de que se cargue la p\u00e1gina, existe la opci\u00f3n Mostrar despu\u00e9s .<\/strong> Le permite establecer cu\u00e1nto tiempo despu\u00e9s de cargar la p\u00e1gina desea que aparezca la barra<\/strong>.<\/p>\n

La opci\u00f3n Cerrar autom\u00e1ticamente despu\u00e9s<\/strong> de le permite hacer que la barra desaparezca despu\u00e9s de un per\u00edodo de tiempo determinado. Si la barra est\u00e1 animada, se cerrar\u00e1 de la misma manera que se abri\u00f3, gradualmente.<\/p>\n

Cuando se trata de las opciones que puede mostrar en la barra de navegaci\u00f3n, tiene el bot\u00f3n Cerrar pantalla que<\/strong> permite al visitante cerrar la barra<\/strong> y el bot\u00f3n Reabrir pantalla<\/strong> que le da al visitante la oportunidad de volver a abrir la barra si es necesario<\/strong>. Si esta opci\u00f3n est\u00e1 deshabilitada, la barra no aparecer\u00e1 hasta que se vuelva a cargar la p\u00e1gina o no aparecer\u00e1 en absoluto en caso de que la opci\u00f3n Mantener cerrado<\/strong> est\u00e9 habilitada. La opci\u00f3n Mantener cerrado por<\/strong> le permite establecer el tiempo despu\u00e9s del cual la barra volver\u00e1 a aparecer.<\/p>\n

Para definir el contenido de texto de la barra<\/strong>, utilice el campo Texto del mensaje<\/strong> donde ingresa el texto que desea que se muestre en la barra. Adem\u00e1s, puede dise\u00f1arlo usando HTML. Ni siquiera tiene que ser particularmente h\u00e1bil en HTML.<\/p>\n

Si, por ejemplo, desea cambiar el tama\u00f1o de la fuente, simplemente lo ajustar\u00e1 ingresando el tama\u00f1o deseado en el campo Texto del mensaje<\/strong>. Agregar\u00e1 este texto en el campo:<\/p>\n

<span style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span>.<\/code><\/pre>\n
y lo \u00fanico que debe cambiar aqu\u00ed es el n\u00famero<\/strong>, que representa el tama\u00f1o de fuente.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Ahora, si deseas que se muestre un bot\u00f3n junto al texto en la barra<\/strong>, marca la opci\u00f3n Mostrar Bot\u00f3n<\/strong>. A continuaci\u00f3n, introduzca el texto que desea que se muestre en el campo Texto del bot\u00f3n<\/strong>. En cuanto a las funciones del bot\u00f3n, puedes elegir entre las siguientes opciones:<\/strong><\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Si desea que la barra deje de mostrarse despu\u00e9s de que el visitante haya hecho clic en ella<\/strong>, puede configurarlo f\u00e1cilmente marcando la opci\u00f3n Cerrar barra al hacer clic en el bot\u00f3n<\/strong>. Esto tiene sentido particularmente si la notificaci\u00f3n es un bot\u00f3n CTA. Por ejemplo, una vez que el visitante hace clic en el bot\u00f3n Suscr\u00edbete a nuestro bolet\u00edn en la barra de notificaciones, es redirigido a la p\u00e1gina con los detalles sobre la suscripci\u00f3n y la barra de notificaciones ya no se muestra porque se cumpli\u00f3 su prop\u00f3sito.<\/p>\n
Si no desea que su barra de navegaci\u00f3n est\u00e9 visible para todos todo el tiempo, puede utilizar una de las varias opciones de filtrado<\/strong>. Puede establecer cu\u00e1nto tiempo desea que se muestre la barra configurando las fechas en los campos Fecha<\/strong> y hora de inicio y Fecha y hora de finalizaci\u00f3n.<\/strong> Tambi\u00e9n puede seleccionar en qu\u00e9 p\u00e1ginas desea que se muestre la barra<\/strong> marcando algunas de las opciones de la configuraci\u00f3n Mostrar en p\u00e1ginas<\/strong>.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Cuando se trata de qui\u00e9n puede ver la barra de navegaci\u00f3n, puede hacerla visible solo para ciertos usuarios simplemente marcando las casillas en el campo Mostrar para roles de usuario<\/strong>.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Dise\u00f1o y Colores<\/h4>\n
El complemento tambi\u00e9n ofrece algunas caracter\u00edsticas interesantes para dise\u00f1ar el aspecto de la barra. Puede ajustar la altura de la barra<\/strong> configurando el n\u00famero de p\u00edxeles. Dado que esta barra debe ser atractiva pero no grande<\/strong>, tenga cuidado de no exagerar. Otra caracter\u00edstica interesante es que puede agregar una sombra a la barra<\/strong>, marcando la opci\u00f3n Mostrar sombra .<\/strong><\/p>\n
Es interesante que no tengas que hacer que la barra sea unicolor: tienes la opci\u00f3n de establecer dos colores y crear degradados<\/strong>. Adem\u00e1s, puede configurar el color del texto y los colores para todos los botones tambi\u00e9n.<\/strong><\/p>\n
\"C\u00f3mo<\/a><\/p>\n
El complemento WPFront Notification Bar tambi\u00e9n le permite escribir CSS adicional para ajustar el estilo a\u00fan m\u00e1s<\/strong>.<\/p>\n
Mencionemos ahora un par de personalizaciones de CSS que se usan con bastante frecuencia, como el cambio de tama\u00f1o de fuente, por ejemplo. Lo que podr\u00eda desconcertarte al respecto es que, cuando cambias el tama\u00f1o de fuente del texto del mensaje, puede quedar fuera de l\u00ednea con el bot\u00f3n al lado. Esto se puede arreglar f\u00e1cilmente. Cuando cambie el tama\u00f1o de la fuente, es recomendable definir la clase del elemento al que le asignaremos ciertos valores<\/strong> :<\/p>\n
<span class=\"text-bar\" style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/code><\/pre>\n
En nuestro ejemplo, la clase es una barra de texto, puede hacer lo mismo para alguna otra clase.<\/p>\n
Lo describiremos as\u00ed en CSS:<\/p>\n
.text-bar {margin-bottom: 0px;}<\/code><\/pre>\n
De esta forma alinearemos el texto y el bot\u00f3n<\/strong>. Por supuesto, es posible que deba usar un valor diferente. Lo mejor es inspeccionar el elemento deseado<\/a> para averiguar el valor que necesita. Puede asignar cualquier otra caracter\u00edstica a la clase seg\u00fan lo que desee cambiar.<\/p>\n
Otra caracter\u00edstica interesante es que tambi\u00e9n puedes ajustar la sombra, que por defecto es bastante oscura. Puedes, por ejemplo, ajustarlo as\u00ed y hacerlo m\u00e1s claro:<\/p>\n
wpfront-bottom-shadow {box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);}<\/code><\/pre>\n
Y no lo olvide: debe hacer clic en Guardar despu\u00e9s de cada cambio que realice para que surta efecto.<\/p>\n
En conclusi\u00f3n<\/h2>\n
Cuando se usa correctamente, la barra de navegaci\u00f3n puede brindarle muchos beneficios. Si\u00e9ntase libre de probarlo para diferentes prop\u00f3sitos. Enumeramos solo algunas de las ideas para inspirarte, pero estamos seguros de que puedes pensar en muchas otras razones para usarlo. \u00a1Dis\u00e9\u00f1alo, personal\u00edzalo y comparte tu experiencia con nosotros!<\/p>\n
Fuente de grabaci\u00f3n:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre qu\u00e9 es una barra de notificaciones de WordPress y aprende a configurarla de forma r\u00e1pida y sencilla.<\/p>\n","protected":false},"author":1,"featured_media":363820,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[566],"tags":[849],"class_list":["post-368948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conceptos-basicos-de-wordpress","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/368948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=368948"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/368948\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/363820"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=368948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=368948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=368948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}