Hostinger Svetainių Kūrimo Įrankis: Kaip Keisti Spalvas El. Parduotuvėje?

Sužinokite, kaip keisti spalvas el. parduotuvėje naudojant Hostinger svetainių kūrimo įrankį

Atnaujinta prieš 2 savaitės

Sužinokite, kaip keisti spalvas šiose el. parduotuvės vietose:

Produktų sąrašo skiltis

Spauskite ant produktų sąrašo skilties, pasirinkite Redaguoti skiltį ir poskiltyje Stilius atlikite norimus pakeitimus:

Skilties nustatymuose pažymėtas skilties spalvos pasirinkimas

Pakeitus teksto spalvą, ji bus pritaikyta produkto pavadinimui, kainai ir numeracijai. Jei prekėms nustatyta kaina su nuolaida, originali (didesnė) kaina automatiškai atvaizduojama blankesnė ir perbraukta.

Juostelių spalva

Spauskite ant produktų sąrašo skilties, pasirinkite Redaguoti skiltį ir poskiltyje Juostelės nustatykite norimą juostelės fono ir teksto spalvą:

Hostinger svetainių kūrimo įrankio skilties spalvų stiliai ir fono spalvos pasirinkimas

PASTABA: Juostelę pridėsite produkto redagavimo aplinkoje

Mygtukų „Pridėti į krepšelį“ spalva

Spauskite ant produktų sąrašo skilties, pasirinkite Redaguoti skiltį ir poskiltyje „Pridėti į krepšelįmygtukas atlikite norimus pakeitimus:

Hostinger svetainių kūrimo įrankio skilties nustatymai: „Pridėti į krepšelį“ mygtukas

Produktų pavadinimų spalva

Norėdami keisti tik produktų pavadinimų spalvą, nusikopijuokite žemiau pateiktą kodą, vietoje #FF0000 įrašykite norimos spalvos HEX koduką ir įklijuokite visą kodą svetainės integracijų nustatymų skiltyje Kodas:

<style>
/*Product list: Product title*/
.product-list-item__title {
color: #FF0000 !important;
}
</style>

Paryškintas „Handmade Vase Kairo“ prekės pavadinimas ir kaina €60.00

Numeracijos spalva

Norėdami keisti tik numeracijos spalvą, nusikopijuokite žemiau pateiktą kodą, vietoje #FF0000, #00FF00, #0000FF įrašykite norimų spalvų HEX kodukus ir įklijuokite visą kodą svetainės integracijų nustatymų skiltyje Kodas:

<style>
/*Product list: Pagination color*/
.pagination__button{
color: #FF0000 !important;
}
/*Product list: Current page number color*/
.pagination__trigger--current{
color: #00FF00 !important;
}
/*Product list: Pagination hover color*/
.pagination__button:hover, .pagination__button:active{
color: #0000FF !important;
}
</style>

E-komercijos numeracijos spalvos: raudona, žalia ir mėlyna užvedus pelę


Vieno produkto skiltis ir/ar produkto puslapis

Spauskite ant produkto skilties, pasirinkite Redaguoti skiltį ir poskiltyje Stilius keiskite:

  • Teksto spalvą

  • Galerijos rodyklių spalvą

  • Galerijos miniatiūrų rodyklių spalvą

  • Skilties foną (nustatykite norimą fono spalvą ar paveikslėlį)

Skilties nustatymuose pažymėta „Stilius“ dalis su spalvų parinktimis

Pakeitus teksto spalvą, ji bus pritaikyta produkto pavadinimui, paantraštei, kainai, parinktims ir aprašymui. Jei prekei nustatyta kaina su nuolaida, originali (didesnė) kaina automatiškai atvaizduojama blankesnė ir perbraukta.

Produkto aprašymo spalva

Produkto redagavimo aplinkoje raskite laukelį Aprašymas ir keiskite jo išvaizdą naudodami teksto redagavimo įrankius:

Paryškinta „Aprašymas“ teksto redaktoriaus įrankių juosta su H2, H3 ir formatavimo mygtukais

Mygtuko „Pridėti į krepšelį“ spalva

Spauskite ant produkto skilties, pasirinkite Redaguoti skiltį ir poskiltyje Mygtukas atlikite norimus pakeitimus:

Hostinger svetainės kūrimo įrankio „Mygtukas“ skiltyje paryškintas pagrindinis mygtuko stilius

Produkto pavadinimas

Norėdami keisti tik produkto pavadinimo spalvą, nusikopijuokite žemiau pateiktą kodą, vietoje #FF0000 įrašykite norimos spalvos HEX koduką ir įklijuokite visą kodą svetainės integracijų nustatymų skiltyje Kodas:

<style>
/*Single product: Product title*/
.block-product__title {
color: #FF0000 !important;
}
</style>

Hostinger el. parduotuvės prekės puslapis su paryškintu pavadinimu „Handmade Bowl “Ganbaru”“

Produkto paantraštė

Norėdami keisti tik produkto paantraštės spalvą, nusikopijuokite žemiau pateiktą kodą, vietoje #FF0000 įrašykite norimos spalvos HEX koduką ir įklijuokite visą kodą svetainės integracijų nustatymų skiltyje Kodas:

<style>
/*Single product: Product title*/
.block-product__subtitle {
color: #FF0000 !important;
}
</style>

Eco-friendly žyma rankų darbo dubeniui „Ganbaru“ ապրодуkto puslapyje