Pogu Stili Jūsu Shopify Veikalam: Iesācējiem Draudzīgs Ceļvedis
Mēs esam izmēģinājuši simtiem dažādu pogu stilu, un esam atraduši 10 visbiežāk sastopamos un vislabāk strādājošos pogu stilus, ko izmantojam ikdienā mūsu klientu tīmekļa dizainā. Šajā bloga ierakstā jūs varat kopēt un ielīmēt kodus un izmantot tos savā veikalā mazāk nekā 60 sekunžu laikā.
Lieliski, Sāksim.
Vispirms veiciet šīs darbības, lai pievienotu pogu stilus savam Shopify veikalam vai jebkurai citai platformai, piemēram, Mozello un WooCommerce, kur atļauts pielāgot CSS.
- Atrodiet Sava Poga Div Nosaukumu:
- Atveriet tīmekļa inspektoru. Lūk, kā to izdarīt:
- Mac: Nospiediet Cmd + Option + I.
- Windows: Nospiediet Ctrl + Shift + I.
- Izpētiet pogas elementu, lai iegūtu tā klasi vai ID.
- Atveriet tīmekļa inspektoru. Lūk, kā to izdarīt:
2. Atveriet Tēmu Redaktoru un Klikšķiniet uz Sekcijas, Kur Atrodas Poga:
- No Shopify admin paneļa, dodieties uz Online Store > Themes > Klikšķiniet uz Sekcijas, kur atrodas poga un ielīmējiet kodu Custom CSS laukā.
Tagad aplūkosim 10 Shopify pogu tipus, kurus varat viegli ievietot savā veikalā, lai padarītu dizainu labāku.
1. Vienkārša Plakana Poga
Ieguvums: Tīrs un moderns dizains, kas labi sader ar minimālisma tēmām.
.button {
background-color: #94e786;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
2. Poga ar Apaļiem Stūriem
Ieguvums: Draudzīgs un pievilcīgs izskats, kas var padarīt jūsu tīmekļa vietni pievilcīgāku.
.button {
background-color: #2ecc71;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 25px;
}
3. Kontūras Poga
Ieguvums: Elegants un daudzpusīgs, ideāli piemērots izsmalcinātam izskatam vai sekundārajām aicinājuma darbībām.
.button {
background-color: white;
color: #3c9342;
border: 2px solid #3c9342;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
4. Gradienta Poga
Ieguvums: Pievilcīgs un spilgts, ideāli piemērots, lai pievērstu uzmanību svarīgām darbībām.
.button {
background: linear-gradient(to right, #3c9342, #94e786);
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
5. Ēnu Poga
Ieguvums: Pievieno dziļumu un dimensiju, padarot pogas izskatīgākas un interaktīvākas.
.button {
background-color: #8e44ad;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
6. Poga ar Pāreju
Ieguvums: Pievieno dinamisku un iesaistošu efektu, veicinot lietotāju mijiedarbību.
.button {
background-color: #c0392b;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #e74c3c;
}
