Podem anunciar alt i clar que ja han començat les rebaixes! No cal anar gaire lluny per trobar botigues pel carrer que ho posen de manifest als seus aparadors: grans cartells vermells amb la paraula “REBAIXES” en majúscules acompanyada de percentatges de descompte. Cal aprofitar al màxim aquestes ocasions en què la predisposició dels compradors a adquirir els nostres productes o serveis és més gran per augmentar el volum de vendes del negoci. En conseqüència, hem de prestar atenció a totes les vies de venda amb què es compten, i com a tal no ens podem oblidar de la botiga online del nostre lloc web.
Avui compartim amb vosaltres algunes idees perquè els vostres aparadors online no siguin menys que els de la vostra botiga física i pugueu maximitzar les vostres vendes online. En aquest article i videotutorial us expliquem i us mostrem com podeu adaptar el disseny de la home de la vostra botiga en línia o lloc web al període de rebaixes.
Què necessiteu per fer-ho? Nosaltres hem utilitzat Elementor en la seva versió PRO. Aquest plugin de WordPress us facilitarà en gran mesura les tasques de maquetació i personalització de la vostra web. A Dimoteca confiem en Elementor i el recomanem 100%.
Contingut
1. Categoria de productes rebaixats
Per començar, crearem una categoria de productes rebaixats i la inclourem i destacarem al menú principal. Amb tots els productes rebaixats agrupats sota una mateixa pàgina i estant ressaltada al menú principal, hi haurà més possibilitats d’augmentar la venda online.
- Creem una nova categoria des de “Productes” > “Categories”: inserim el nom (“Rebaixes -35%”) i el slug que es mostrarà a la URL de la pàgina de la categoria (“rebaixes”).
- Afegim alguns productes a la nova categoria, que són els que trobareu a la pàgina de productes rebaixats. Des de “Productes” > “Tots els productes”, marquem la categoria “Rebaixes -35%” en aquells productes rebaixats que desitgem.
- A continuació incorporem la nova categoria al menú principal del lloc web, i per això ens dirigim a “Apariència” > “Menús”. Primer de tot, hem de canviar les opcions de pantalla (Molt important! Sense aquest pas no podrem realitzar els següents): obrim el panell “Opcions de pantalla” a la cantonada superior dreta i activem les caselles de “Categories del producte” i “ Classes CSS”. Un cop activades, anem a “Categories del producte”, seleccionem “Rebaixes -35%” i l’afegim al menú. Després arrosseguem aquesta categoria fins a dalt del tot perquè sigui la primera que aparegui al menú principal.
- Obrim la pestanya de la nova categoria per editar-la i li donem una classe CSS que després ens serà necessària per modificar l’estil d’aquest ítem en concret. En aquest cas nosaltres li donem la classe “destacar-categoria”.
- Ara editem el header del lloc web, i per això anem a “Plantilles” > “Maquetador de temes” > “Header” > “Editar”. D’entrada, veiem que ja ha aparegut el nou ítem al menú principal, i el que farem és destacar-lo perquè sobresurti respecte a la resta d’ítems. Per això, seleccionem el contenidor del menú de navegació i ens dirigim a “Avançat” > “CSS personalitzat”. Un cop allà, s’obre l’editor per inserir codi CSS manualment. En aquest moment és quan toca utilitzar la classe CSS que hem donat prèviament a l’ítem del menú “Rebaixes -35%”, que en aquest cas ha estat “destacar-categoria”. Introduïm la classe al costat del tipus d’element en qüestió per seleccionar-lo i tot seguit escrivim entre claus les instruccions perquè aparegui l’ítem destacat en negreta. El codi a introduir seria el següent:
.destacar-categoria a {
font-weight: bold !important;
}
*Hem afegit “!important” perquè aquesta regla se sobrescrigui a d’altres prèviament establertes. No sol ser necessari, però en aquest cas ho ha estat perquè sense aquesta especificació Elementor ignorava el codi manualment afegit.
2. Barra superior que cridi l'atenció
A continuació, inserirem una barra damunt del header del lloc web que enllaci la pàgina de productes rebaixats i modificarem el seu estil perquè no passi desapercebuda per a cap usuari que visiti la nostra botiga online.
- Creem una nova secció i l’arrosseguem fins a dalt de tot.
- Li afegim un widget tipus “Editor de text” i inserim el text: “REBAIXES D’ESTIU 35% DTE: COMPRAR”. Ressaltem la xifra del descompte seleccionant aquesta part del text al mateix editor i activant l’opció d’aplicar negreta.
- Convertirem la paraula “COMPRAR” en un enllaç que dirigeixi a la pàgina de productes rebaixats. Per fer-ho seleccionem la paraula i fem clic a l’opció de l’editor “Inserir/editar un enllaç”. Aleshores s’obre una pestanya on poder introduir-lo. Per fer-ho fàcilment, podem seleccionar l’URL de la home a la barra superior del navegador (en aquest cas: http://tuweben4dias.dimoteca.com/), l’enganxem a la pestanya i després afegim el slug corresponent a la pàgina del lloc web que volem enllaçar. En aquest cas hi afegirem “rebaixes”, que és el slug que hem assignat a la categoria de productes rebaixats en crear-la. Seleccionem la paraula “COMPRAR” i la subratllem amb l’opció de l’editor de text perquè es pugui identificar fàcilment com a enllaç.
- Canviem els estils per aconseguir una barra que cridi més l’atenció: seleccionem un vermell intens com a color de fons de la secció, canviem el color de text a blanc, l’alineem al centre i pugem el pes de la tipografia a 500.
- Reduirem l’amplada de la secció per fer-la més prima. Com el que li dóna la mida que té és la mesura del widget que conté, reduirem el marge de l’editor de text, establint un marge inferior de -15px.
3. Banner principal
L’últim pas serà actualitzar el missatge del banner de la pàgina d’inici i dirigir el botó de crida a l’acció cap als productes rebaixats, una vegada més amb la intenció de cridar l’atenció i intentar maximitzar la venda en línia del nostre negoci.
- Anem a la pàgina principal del lloc web i veiem que ja s’han aplicat els canvis duts a terme fins ara. Des d’aquí veiem la barra superior i fem clic a “Edita amb Elementor” > “Fitxer de productes” per editar la pàgina d’inici, que en el cas d’aquest lloc web coincideix amb el fitxer de productes.
- Un cop obert l’editor d’Elementor, seleccionem el giny de diapositives i editem el text de la diapositiva actual. Com a títol posem “REBAIXES”, i com a descripció escrivim “Fins al -35% online i en botigues”.
- Pel que fa al botó, el que farem serà modificar també el text (posem “VEURE DESCOMPTES”) i l’enllaç (procedim de la mateixa manera que anteriorment: seleccionem l’URL de la home, l’enganxem i afegim el slug de la pàgina de productes rebaixats ).
- Finalment, canviem els estils perquè sigui més atractiu. Posem el títol de color vermell, n’augmentem la mida i ampliem l’espaiat entre lletres perquè aparegui de forma prominent. Augmentem també la mida de la descripció per realçar el missatge i substituïm el verd de WhatsApp que hi havia al botó pel negre perquè l’estil quedi unificat.
4. Resultat
Si analitzem el resultat obtingut i el comparem amb l’estat previ de la home, constatem a primera vista que després dels canvis el lloc web està molt més ben adaptat per a l’època de rebaixes. En crear una nova categoria s’aconsegueix que tots els productes rebaixats es presentin unificats sota una mateixa pàgina. El fet d’enllaçar aquesta pàgina a diferents punts de la web (el menú principal, la barra superior i el botó call to action del bàner principal) permet que l’usuari hi pugui accedir amb gran facilitat. A nivell estètic, l’ús del color vermell característic de les rebaixes i l’ús de negretes per destacar alguns aspectes són grans aliats per cridar l’atenció i dirigir-la cap a on ens interessa. Després de realitzar tots aquests canvis serà molt més probable que puguem aprofitar la gran oportunitat que brinden les rebaixes per augmentar la venda en línia del nostre e-commerce.
ABANS
DESPRÉS
Necessites ajuda amb el teu projecte web? Et donem un cop de mà!
