Tilbake til toppen knapp

Nettside, Tips

- STYLE “TILBAKE TIL TOPPEN” KNAPPEN –

 

På alle Divi sider så spretter det frem en pil på høyre, siden så snart du begynner å scrolle nedover. Dette for å gjøre det enklere å komme tilbake til toppen, når du har scrollet nedover på siden. Det lille ikonet som dukker opp gjør jobben sin og vipps så er du øverst på siden igjen. Hva med å gjøre denne fiffige lille saken til prikken over i’en? Et lite blikkfang, og det “ekstra lille” for å få nettsiden til å skille seg ut. Gi leserne dine en liten overraskelse. Jeg har valgt en blomst på min nettside og resultatet kan du se her www.carol.no PS: Dersom “tilbake til toppen” knappen ikke dukker opp på nettsiden, må du aktivere denne i temaalternativer.

BYTTE PILEN MED DITT EGET BILDE

Du tenker kanskje at dette er komplisert å få til, men det er enklere enn det ser ut. Disse to stegene må gjøres: Bytte ut standard bilde av pilen med et bilde etter eget ønske Fjerne bakgrunnen på ikonet. Dette gjør du i Divi ved å klippe ut og lime inn følgende kode i temaalternativer under egendefinert CSS:

.et_pb_scroll_top::before { content: url (https://dittbilde.png); padding: 10px; } .et_pb_scroll_top.et-pb-icon { background: none; }

I koden legger du så inn din egen url (bilde-adressen) for det bilde som du ønsker å erstatte pilen med.

KUN ENDRE FARGE/BAKGRUNN PÅ PILEN

Dersom du ikke ønsker å bytte ut pilen med et annet bilde, men kun vil fiffe den opp med en farge som passer til nettsiden din, så er dette fremgangsmåten:

Lim inn følgende kode på samme måten som forklart over:

.et_pb_scroll_top.et-pb-icon { color: #fff; background: rgba(99,200,205,0.81); }

I koden endrer du så hex koden for fagen du vil ha på pilen og fargen du vil ha på bakgrunnen. Har du noen spørsmål, eller ønsker du å dele din kule,  nye “tilbake til toppen” knapp, så har jeg veldig lyst til å se. Gjør det i facebook gruppen min Websalongen, hvor du også får flere gode tips.

Kanskje du også vil like disse

INNLEGGENE

Bli synlig på nett