Se hvordan du nemt tilføjer julehygge på din hjemmeside på 10 minutter.

Det er nemmere end du tror.

Niclas johansen d. 23 december, 2017.

De fleste af os har brug for at komme lidt i julehumør, og nu hvor sneen ikke ser ud til at falde af sig selv, så kommer her et fif til hvordan du alligevel kan få en hvid jul. Det eneste du skal være i stand til er at tilføje et lille stykke CSS, også er du good to go.

Tilføjelsen af CSS sneeffekten kan jo have en positiv effekt på dit jule/nytårs salg. Plus det er sjovt, så hvorfor ikke bare gøre det?

Den eneste tekniske kunnen du skal have, er at du skal vide hvordan du tilføjer en class til din kolonne eller sektion, også er du egentligt klar.

Følg nedenstående trin for at tilføje sneeffekten til en hvilken som helst sektion, kolonne eller widget.

STEP 1 – Find din sides CSS-indstillinger

WordPress
Gå til tilpas →  CUSTOM CSS/JS → CSS-kode (Vær opmærksom på dette kommer til at være inline-css. Du kan også tilføje det til dit stylesheet style.css)
Hvis ikke WordPress
Så kan du tilføje det til dit stylesheet, som muligvis hedder style.css

Nu indsættes CSS-koden inde i Custom CSS/JS.

STEP 2 – Indsæt CSS-koden

Indsæt nedenstående CSS i enten din CUSTOM CSS/JS eller i dit stylesheet style.css:

.snow-bg {
   position: relative;
}

.snow-bg:after {
   content: '';
   display: block;
   position: absolute;
   z-index: 2;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background-image: url('https://coweb.io/wp-content/uploads/s1.png'), url('https://coweb.io/wp-content/uploads/s2.png'), url('https://coweb.io/wp-content/uploads/s1.png');
    animation: snow 10s linear infinite;
}

@keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

Nu indsættes CSS-koden inde i Custom CSS/JS.

STEP 3 – Tilføj CSS-klassen

Vælg det element, du vil anvende sneeffekten på, og indsæt snow-bg i CSS-klassefeltet. Hvis du bruger en Visuel Editor, så vil der til tider være et felt der hedder CSS-Class. I dette felt kan du give elementet en ekstra klasse. Det er heri du skal tilføje snow-bg. Det kan se ud, som nedenstående.

Sådan!
Kan du have en rigtig god jul og jeg håber du kunne bruge dekorationen af din hjemmeside til noget.

Skulle du have nogle spørgsmål eller ideer til at tilføje flere juledekorationer til en hjemmeside, så er du velkommen til at kommentere i bunden.

Kender du nogen der kunne have brug for dette, så del det endelig. :-)!

Facebook
Google+
Twitter
LinkedIn

Skriv et svar

Send en forespørgsel & bliv ringet op

Så har du et uforpligtende tilbud inden dagen er omme

Er du i tvivl om hvad du egentligt har brug for, så ring endelig til os på
tlf. +45 42 90 99 71

Vi ser frem til at give dig flere kunder online

Få et gratis forsideudkast

Det kan være svært at forestille sig hvordan en ny hjemmeside kan se ud.
Derfor giver vi dig et gratis bud på hvordan din nye forside kan se ud.

Vi ser frem til at give dig flere kunder digitalt