En nedräknare kan användas för att exempelvis visa hur lång tid det är kvar på en kampanj eller räkna ned till en kampanj startar. Nedräknaren är mycket enkel att lägga in och kan visas antingen fristående eller på en bakgrundsbild.
Denna funktion kräver modulen "Nedräknare".
Gör så här i admin:
- Gå till Webbplats -> Sidor.
- Klicka på den sida där nedräknaren ska läggas in, t.ex. startsidan.
- Klicka på knappen Lägg till Widget.
- Under kategorin Allmänna välj widgeten Nedräknare och klicka på knappen Nästa.
- Byt till fliken Widgetinställningar.
- Ange Datum och tid som nedräknaren ska räkna ned mot. Här kan du även välja om rubriker ska visas ovanför siffrorna, om widgeten ska döljas när den räknat ned till 0, om antal dagar ska visas även om kvarvarande dagar är 0 och om nedräknaren ska vara klickbar till en viss sida i webbplatsen.
- Klicka sedan på knappen Lägg till.
Nedräknaren visas enligt följande:
Genom att lägga in en bakgrundsbild och ange en höjd för widgeten kan det se ut så här:
Tips! Nedräknarens utseende kan justeras med hjälp av CSS-kod som läggs in under fliken CSS.
Anpassat utseende
För att göra widgeten responsiv kan du klistra in följande kod i fliken CSS:
@media screen and (max-width: 600px) {
.flip-clock-wrapper ul {
width: 20px;
height: 30px;
font-size: 20px;
font-weight: 700;
line-height: 30px;
li a div div.inn {
font-size: 20px;
}
}
.flip-clock-divider {
width: 6px;
height: 35px;
.flip-clock-dot {
width: 4px;
height: 4px;
&.top {
top: 10px;
left: 0px;
}
&.bottom {
bottom: 10px;
left: 0px;
}
}
}
}
Exempel på hur nedräknaren kan anpassas till att visas på följande sätt:
Gör så här i admin:
- Gå till Webbplats -> Sidor
- Klicka på den sida där nedräknaren ska läggas in, t.ex. startsidan.
- Klicka på knappen Lägg till Widget.
- Välj widgeten Nedräknare och klicka på knappen Nästa.
- Ange en rubrik, t.ex. "KAMPANJEN SLUTAR OM:".
- Välj Rubrik H2 under Rubrikmall.
- Fyll i en bakgrundsfärg. I exemplet ovan används #c94452.
- Fyll i höjden 140.
- Bocka i Använd marginal på innehållsyta. Fyll i 0 i alla fyra fälten under samt bocka i Placera rubrik inuti innehållsyta.
Följande inställningar är nu gjorda:
- Byt till fliken Widgetinställningar.
- Ange Datum och tid som nedräknaren ska räkna ned mot.
- Bocka i Visa rubriker.
- Välj om antal dagar ska visas även om kvarvarande dagar är 0 under Visa alltid antal dagar.
- Välj URL vid länkning om nedräknaren ska vara klickbar och länka, lämna annars fältet tomt.
- Byt till fliken CSS.
- Kopiera och klistra in följande CSS-kod:
h2 {
color: #fff;
margin: 11px 0px 8px 0px;
text-align: center;
font-size: 24px;
letter-spacing: 1px;
}
a, a:hover {
text-decoration:none;
border:none;
}
.flip-clock-wrapper {
left:-10px;
}
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 2px;
width: 30px;
height: 55px;
font-size: 50px;
font-weight: bold;
line-height: 57px;
border-radius: 6px;
box-shadow: none;
}
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 49%;
overflow: hidden;
}
.flip-clock-wrapper ul li a div div.inn {
height: 200%;
color: #c94452;
text-shadow: none;
background-color: #fff;
border-radius: 4px;
font-size: 36px;
}
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 60px;
}
.flip-clock-dot.top {
top: 20px;
left: 8px;
}
.flip-clock-dot.bottom {
bottom: 20px;
left: 8px;
}
.flip-clock-dot {
display: block;
background-color: #fff;
width: 5px;
height: 5px;
position: absolute;
border-radius: 1000px;
box-shadow: none;
}
.flip-clock-divider .flip-clock-label {
position: absolute;
top: 60px;
left: 21px;
-webkit-text-shadow: none;
text-shadow: none;
color: #fff;
text-align: center;
width: 66px;
opacity: 0.7;
}
- Klicka på knappen Spara.
Widgeten visar nu rubriken och siffrorna i det typsnitt som används i er webbshop. Om du vill använda samma typsnitt som i exempelbilden ovan på siffrorna och de små texterna under ("Dagar", "Timmar" etc), kan du fortsätta enligt instruktionerna nedan:
- Lägg till följande CCS-kod under den som lades till ovan:
a {
font-family: 'Montserrat',sans-serif;
font-style: normal;
font-weight: 700;
}
.flip-clock-wrapper {
font-family: 'Montserrat',sans-serif;
font-style: normal;
font-weight: 400;
} - Lägg sedan till en ny widget längst ned på sidan av typen Fri HTML-kod, där du kopierar och klistrar in följande HTML-kod:
<link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>