Jak na to: Úprava widgetů pomocí vlastního CSS

20.3.2024 | Přemysl Donát | Doba čtení: 2 min | Jak na to

Každý widget je možné přizpůsobit pomocí různých nastavení přímo v našem editoru. Nebojte se vše prozkoumat a různá nastavení proklikat. Pokud ale potřebujete upravit vzhled nad rámec nabízených možností, je možné sáhnout k úpravě pomocí vlastního CSS kódu. K těmto úpravám je sice potřeba znát alespoň základy kódování, flexibilita je pak ale obrovská.

Celý obsah pole Vlastní CSS bude vložen do hlavičky generovaného widgetu. Vaše CSS pravidla tedy musí být obalena <style>...</style> tagem.

Pro úpravy pomocí vlastních CSS se doporučujeme obrátit na kodéra nebo správce vašich stránek.

Příklady

Změna písma

Jiný font a velikost písma u názvu produktu
<style>
  .title {
    font-family: Arial;
    font-size: 20px;
  }
</style>

Pokud chcete upravit písmo nebo jiné atributy u dalších elementů, je potřeba na ně vždy cílit dle jejich CSS tříd. Vetšinou používáme následující třídy.

  • title pro název produktu
  • price pro cenu produktu
  • original-price pro původní cenu produktu, pokud je v akci
  • action-price pro akční cenu produktu, pokud je v akci
  • description pro popis produktu
Font z Google Fonts

Následující část kódu musí být vložena do hlavičky samotné stránky, na kterou widget vkládáte:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Goldman&display=swap" rel="stylesheet">
    

Tento kód potom ve vlastních kódech u widgetu:

<style>
  .pwjs {
    font-family: 'Goldman', cursive;
  }
</style>

Pozor, úspěšnou změnu fontu je potřeba kontrolovat až na vaší cílové stránce s vloženým widgetem. U nás v editoru nebo náhledu widgetu nemusí být změna fontu vidět.

Změna barvy tlačítka při najetí myší(hover efekt)

<style>
  .btn:hover {
    background-color: darkgreen;
  }
</style>

Přiveďte horu k Mohamedovi

Dostaňte potenciální zákazníky přímo na svůj e-shop. Proměňte zájem na reálný prodej.
S widgety své produkty prezentujete a zároveň obohacujete zážitek čtenářů.

Zkušební verze zdarma