Se næste videoguide
Sådan redigerer du HTML i din splittest
—
Transskribering
Hej, Mit navn er Mogens Møller,
Jeg vil i denne video vise dig, hvordan du redigerer CCS i din splittest med splittestværktøjet Visual Website Optimizer.
CSS står for Cascading Style Sheets. Den helt korte version, det CSS gør, er, at det ligesom styrer layoutet på websites. Siden du ser denne her video, ved du sikkert en masse om det i forvejen.
Når man skal gå ind og rette i CSS’en, er det en rigtig god idé, at have lidt viden om hvordan du arbejder med CSS. Det er på ingen måde avanceret. CSS er – i hvert tilfælde hvad de grundlæggende ting angår – ret simpelt. Så inden du begynder at rode en masser med det, kan det være, at du måske lige går på Google og søger på CSS schools, så kommer der noget, der hedder V3 Schools frem. Der kan du finde en masse gode guides til hvordan du arbejder med CMS.
Jeg skal ind på CSS og rette på en hjemmeside i Visual Website Optimizer. Og jeg har lige fundet en side frem her, som de fleste kender: Wupti.com.
Jeg vil ikke lave en voldsom masse avancerede ting. Men bare en rimelig simpel ting, hvor jeg vil prøve at gøre det her skarpe tilbud, som der står her, lidt mere tydeligt. Eventuelt med en baggrund bag, måske en anden tekstfarve og ellers lidt simpel CSS.
Jeg tager lige og kopierer URL’en her, går ind i mit splittestværktøj og siger ”A/B Test”.
Vi tester på forsiden her, og får så siden frem. Det var det her element vi ville rette i, så jeg prøver at trykke på det engang. Og så er der noget her der hedder ”Change CSS”.
Det klikker vi på. Så har vi faktisk en rigtig fin menu her med en masse ting i det her CSS som er defineret på forhånd, som vi går ind og retter i. Hvis vi vil lave vores eget, kan vi endda gå ind og tilføje nogle ekstra ting her.
Nu prøver jeg bare lige og lege her. Jeg prøver at se, om vi kan få understreget lidt mere de her skarpe tilbud. Så lad os sige til at starte med, at vi skal have rettet lidt i baggrunden. Det kan være en anden baggrundsfarve. Grøn.
Ja, der er jo lidt forskellige farver her. Nu skal det jo gerne med resten af layoutet, så det kunne være fint at ramme den blå farve vi har her oppe. Den har jeg faktisk gemt koden på. Så den taster jeg ind lige her ved den blå farve, som også er i deres topmenu.
Så lad os starte ud med den. Det ser ikke superskarpt ud. Vi prøver lige at lege lidt mere.
Det kunne måske være, at vi skulle centrere teksten lidt mere. Så kan vi gå herind. ”Text-align”. Skriv ”center”. Så får vi den til at stå her.
Det kunne måske være at farven skulle gøres lidt anderledes. Det ser ikke så godt ud med denne der sorte på blå baggrund. Vi kan prøve at tage en hvid tekst, så bliver den da lidt tydeligere. Lad os lige prøve at kigge på det engang.
Nu er det i hvert tilfælde blevet understreget lidt. Lad os prøve at lege lidt mere med det, og sige at vi skal have noget luft ind. Det står som lidt lukket inde her. Så der kan vi hive i de her paddings og sige 6 padding-top? 8 måske. Og padding-bottom kan vi også tage 8. Det ser fint ud.
Så har vi faktisk en rimelig tydelig bjælke nu, hvor vi har gjort opmærksom på de her tilbud.
Hvis vi skulle lave noget der er rigtig skarpt, skulle vi måske gå hen og bruge den samme gradient de har her i toppen. Hvor den går fra en lyseblå til en mørkeblå. Det kan man faktisk også gøre – nu har jeg ikke rigtig et billede klart – Der kan man faktisk gå hen og sige baggrundsbilledet her. Baggrunden, hvor vi har sat farven ind, kan vi også sætte image på. Og på den måde, hvis vi har uploaded et billede, lægge det ind, og så faktisk få den rigtige gradient på. Så vil det være rigtig skarpt.
Men nu har du i hvert tilfælde set her, hvordan man kan rode med CSS’en, og forholdsvis simpelt pege nogle elementer ud. Og så ellers sidde med den her CSS-editor her, og så ellers bare lege med de her ting. Kender du ikke så meget til CSS, så siger mange ting herinde forholdsvis sig selv.
Vi er inde på noget ”border” her, som er kant. Her kan vi sætte noget kantfarve, noget kantbredde. Hvis vi for eksempel vil have en kant hele vejen rundt, kan vi for eksempel skrive ”2px” her. Så kan man for eksempel ændre farven på det. Lad os sige, at den skal være sort. Så kan man på den måde ændre kanten; lave en kant på hele vejen rundt. Hvis det er dét man vil.
På den måde er der rigtig mange elementer man kan gå ind og hive i som faktisk siger ret meget sig selv.
Jeg håber, at dette her gav dig lyst til at gå ind og arbejde med CSS’en her. Det er altså forholdsvis simpelt i Visual Website Optimizer at arbejde med.
God fornøjelse med det!
Sådan redigerer du CSS i din splittest,