Cómo modificar los banners de la página de inicio de mi tienda

Cómo modificar los banners de la página de inicio de mi tienda - BigBuy Academy | Documentación y ayuda técnica gratuita para clientes de BigBuy
Skip to content Skip to sidebar Skip to footer

Cómo modificar los banners de la página de inicio de mi tienda

En el siguiente artículo se explica, de manera detallada, cómo editar los banners que aparecen en la portada de su tienda de comercio electrónico.

Según cuál sea su plantilla, tendrá que seguir un proceso u otro.

Valencia

Valencia-banners

Valencia-banners-2

1- Entre en Módulos (1) -> Módulos instalados (2) y en la búsqueda escriba builder (3), haga clic en Configurar (4) del módulo Ps Page Builder.

2- Una vez haya accedido al módulo, necesitará seleccionar el perfil “default” dentro del botón “LAYOUT PROFILES”, para así poder hacer modificaciones en la estructura de la página.

NOTA: Debe tener en cuenta que si ya ha seleccionado el perfil “default”, si sale y vuelve a entrar en el módulo Page Builder, el perfil “default” cargará de forma automática.

3- Haremos clic en Editar la sección Banner (1).

4- En el bloque WIDGET FORM, seleccione una imagen (1) para cada idioma para que el que desea modificar los banners (2). Haga click sobre el botón Guardar (3).

 

5- Por último, haremos clic en Save Layout Profile (1).

 

Ibiza

1. En primer lugar, vaya a la sección Módulos > Módulos y servicios. Vaya al buscador, y busque el módulo “OWL Static Block”. Clique Configure.

gallery-ibiza

2. A continuación verá tres bloques. Clique Edit en el primero de ellos, “Top Banner”.

gallery-ibiza-2

3. Se abrirá un editor en el que aparecen las imágenes que forman esta galería. Veamos cómo modificarlas.

gallery-ibiza-3

Pongamos que quiere cambiar la primera imagen. Actualmente es un banner que llega a la sección de Hogar | Jardín. En este ejemplo, la cambiaremos por un banner que lleve a la sección de tecnología.

  • Vaya al editor. Sitúe el cursor delante de la imagen que quiere modificar, como si fuera a escribir. Clique el botón de Insert/Edit image.

gallery-ibiza-4

 

  • Se abrirá una ventana con varios campos. Clique en el icono del ojo situado a la derecha del campo “Source”. Seleccione “Upload” y escoja la imagen que quiere utilizar. Las dimensiones deben ser 410 x 575px. Clique OK.

gallery-ibiza-5

  • Una vez que ha insertado el nuevo banner, deberá enlazarlo a la URL deseada. Para ello, clique en la nueva imagen y, a continuación, clique el botón de Insert/Edit link.

gallery-ibiza-6

Se abrirá una ventana. Copie la URL deseada en el campo “Source”. clique OK.

¡Una vez introducida la nueva imagen, borre la anterior!

 

  • Por último, deberá cambiar el texto que aparece debajo del banner y modificar la URL a la que dirige. En este caso, el texto a cambiar “Hogar | Jardín”. Puede hacerlo desde el editor, pero a veces es más sencillo cambiarlo desde el código HTML (para asegurarnos de que el enlace queda bien insertado).Si quiere hacerlo desde el editor, cambia el texto y, de nuevo, clique en el botón de Insert/Edit link e introduzca la URL deseada.Si prefiere hacerlo desde el código HTML, clique en el botón Source Code.

gallery-ibiza-7

Verá una ventana como la siguiente:

gallery-ibiza-8

 

Antes de hacer cambios en el código, le recomendamos copiarlo en un bloc de notas para poder reponerlo en caso de que, sin querer, cambie algo que no deba.

Busque en el código el texto que quiere cambiar, en este caso “Hogar | Jardín” (marcado en rojo a continuación). Modifíquelo por el texto que quiere que aparezca, teniendo cuidado de no tocar ningún símbolo <>. En el caso de que se equivoque, clique en Cancelar y vuelva a empezar.

Una vez cambiado el texto, deberá modificar la URL a la que lleva. Verá que, antes de ese texto, aparece el código <a class=”toge-link” href=”https://ibiza.dropshippershop.com/es/443-hogar-jardin”>. Tendrá que cambiar el enlace (marcado en azul) por el nuevo enlace. Fíjese que el enlace va entrecomillado. Tenga cuidado de no borrar estas comillas al insertar la nueva URL.


<div class=”owl-top-banner”>
<ul class=”row”>
<li class=”col-sm-4″>
<div class=”bn-top-content”><a href=”https://ibiza.dropshippershop.com/es/443-hogar-jardin”><img src=”https://ibiza.dropshippershop.com/modules/owlcustomhtml/views/img/cms/ibiza_hogar_jardin_portrait_es.jpg” alt=”” /> </a><a class=”toge-link” href=”https://ibiza.dropshippershop.com/es/443-hogar-jardin“>Hogar | Jardín</a></div>
</li>
<li class=”col-sm-4″>
<div class=”bn-top-content”><a href=”https://ibiza.dropshippershop.com/es/482-informatica-electronica”><img src=”https://ibiza.dropshippershop.com/modules/owlcustomhtml/views/img/cms/ibiza_informatica_electronica_portrait_es.jpg” alt=”” /> </a><a class=”toge-link” href=”https://ibiza.dropshippershop.com/es/482-informatica-electronica”>Informática | Electrónica</a></div>
</li>
<li class=”col-sm-4″>
<div class=”bn-top-content”><a href=”https://ibiza.dropshippershop.com/es/454-perfumeria-cosmetica”><img src=”https://ibiza.dropshippershop.com/modules/owlcustomhtml/views/img/cms/ibiza_perfumeria_cosmetica_portrait_es.jpg” alt=”” /> </a><a class=”toge-link” href=”https://ibiza.dropshippershop.com/es/454-perfumeria-cosmetica”>Perfumería | Cosmética</a></div>
</li>
</ul>
</div>

Una vez que ha hecho estos cambios, clique en OK. Los verá reflejados en el Editor.

A continuación, clique “Save” y habrá terminado.