Todas las colecciones
Plantillas
Modificar los iconos en la "Barra Superior"
Modificar los iconos en la "Barra Superior"

La "Barra Superior" puede contener información de contacto o un mensaje de bienvenida, aqui aprenderemos como cambiar los iconos.

R
Escrito por Rodrigo García
Actualizado hace más de una semana

Primero debemos ir al menú principal y dar click en la opción de "Ajustes de Sitio Web"

Aparecerá la ventana de "Website Settings" donde debemos dar click en la opción de "Estilo"

Se desplegará la ventana de "Ajustes de Sitio" y debemos dar click en el apartado de "Cabecera" para que aparezcan sus herramientas de edición.

Una vez que le dimos click aparecerá la opción de "MOSTRAR BARRA SUPERIOR" la activaremos colocando el slider en "On" y el circulo se volverá azul indicando que esta activa.

Debemos ubicar la opción de "Mensaje de Barra Superior" y copiar el código que se despliega en la casilla y pegarlo en cualquier editor de texto.

"NOTA IMPORTANTE"

Este es el código actual del mensaje de la "Barra Superior", lo incluimos aquí para que en el caso de que estemos haciendo las pruebas y borremos algo lo podamos volver a ingresar sin problemas.

<a href="/"><i class="fa fa-thumbs-up" aria-hidden="true"></i>¡Hola! Bienvenidos</a> <a href="/"><i class="fa fa-phone-square" aria-hidden="true"></i> +359 000</a> <a href="/"><i class="fa fa-envelope-square" aria-hidden="true"></i>contacto@furni.com</a>

Muy bien entonces vamos a comparar el código vs la imagen para poder interpretarlo mejor:

En la imagen están resaltadas con color las partes del código que podemos editar para cambiar los datos que se despliegan y en la parte superior tenemos una vista de nuestro mensaje de la "Barra Superior" indicando con color la parte que le corresponde del código.

Para que nuestro código siga funcionando y apareciendo tal cual lo tenemos actualmente, debemos modificar solo las partes que se muestran en color en la imagen pasada.

Los iconos podemos identificarlos ya que vienen escritos de esta manera:

"fa fa-thumbs-up"

y el texto viene escrito de esta manera:

>¡Hola! Bienvenidos<

Vamos a comenzar con los iconos.

Los iconos que utilizamos se llaman "Iconos de Aplicación Web" y ya vienen cargados dentro del código general de nuestro sitio, lo único que debemos hacer para cambiarlo es borrar el nombre del icono actual y colocar el nuevo en su lugar dentro del código del mensaje.

NOTA:

Les recomendamos visitar la siguiente página:

para que puedan visualizar los iconos que podemos integrar a nuestro mensaje.

Si revisamos con detenimiento los iconos, nos daremos cuenta que en cada uno se muestra su imagen y en la parte de abajo se muestra su nombre (.fa-music por mencionar un ejemplo). 

Y es ese nombre el que debemos de apuntar en nuestro código para que despliegue el icono que hayamos escogido.

Entonces para cambiar el icono, debemos identificar esta parte del código: 

"fa fa-thumbs-o-up" 

En este caso estamos llamando el icono llamado thumbs-up (como lo vemos en el siguiente ejemplo).

Código:

<a href="/"><i class="fa fa-thumbs-up" aria-hidden="true"></i>¡Hola! Bienvenidos</a> <a href="/"><i class="fa fa-phone-square" aria-hidden="true"></i> +359 000</a> <a href="/"><i class="fa fa-envelope-square" aria-hidden="true"></i>contacto@furni.com</a>

Si queremos modificarlo solo tenemos que ubicar el nombre del nuevo icono en la página que recomendamos, y ajustarlo en el código

"fa fa-smile-o" 

Código:

<a href="/"><i class="fa fa-smile-o" aria-hidden="true"></i>¡Hola! Bienvenidos</a> <a href="/"><i class="fa fa-phone-square" aria-hidden="true"></i> +359 000</a> <a href="/"><i class="fa fa-envelope-square" aria-hidden="true"></i>contacto@furni.com</a>

y entonces ya teniendo listo el código con el ajuste procederemos a copiarlo de nuestro editor de texto y pegarlo de nuevo en la casilla de "Mensaje de Barra Superior"

Recuerden que es muy importante dar click en el botón de "Guardar" para que los cambios se apliquen, una vez realizada esta acción podemos dar click en el botón de "Vista Previa" y aparecerá nuestro ajuste en la "Barra Superior".

¿Ha quedado contestada tu pregunta?