Figma-design til WordPress med tilpassede Gutenberg-blokker og animasjoner

Fjellvann AS leverte svært detaljerte mockups i Figma med nyttige kommentarer, noe som sparte tid på oppfølgingsspørsmål og kommunikasjon frem og tilbake. Takket være dette klarte vi å programmere et helt nytt WordPress-tema, inkludert Custom Post Types og flere forskjellige undersider, på kun to uker, med en ekstra uke for finjustering med fokus på nettsidens tilgjengelighet (accessibility).

Gutenberg, en blokkbasert editor innebygd i WordPress, gjør redigering av undersider enkel for nettsidens administratorer etter prosjekt-leveringen. Innholdet på nettsiden er delt inn i blokker som kan velges og brukes fritt. Vi har programmert alle de ønskede blokkene inn i det nye temaet, slik at Klimastiftelsen Umoe selv kan bygge undersider ved hjelp av byggeblokker som de kan arrangere og modifisere. Gutenbergs brukergrensesnitt er også svært brukervennlig; blokkinnstillinger ligger på høyresiden av adminpanelet, mens sanntidsvisning av nettsiden ligger på venstresiden. Dette gjør at brukeren umiddelbart kan se endringer.

For å bygge dette brukte vi ACF-Blocks (Advanced Custom Fields), et PHP-basert framework for å utvikle skreddersydde blokker for Gutenberg. Denne løsningen passer godt inn i ACF-metodikken, noe som gjør programmeringen raskere og utnytter vår erfaring maksimalt.

Den leverte nettsiden bruker kun to WordPress plugins: Advanced Custom Fields PRO og Contact Form 7. Vi trenger ikke flere, på grunn av funksjoner vi har programmert inn i temaet. Temaet er programmert etter WordPress'  beste praksis, noe som gjør at det også støtter andre WordPress-plugins som kunden kan installere i fremtiden. Vi har deaktivert unødvendige funksjoner som ikke kommer til å bli brukt, inkludert kommentarer, Application Passwords, Attachment Pages, Gutenberg Patterns og innebygde Gutenberg-blokker som ikke brukes av temaet. Dette resulterer i et ryddig adminpanel, og gjør at nettsidens administrator ikke oversvømmes av valgmuligheter som uansett ikke brukes. Dette bidrar også til å hindre spam og forebygge potensielle hackingforsøk.

Til slutt har vi tilført nettsiden noen få effekter og GSAP-animasjoner. Man kan finne dem i bildeseksjonen i alle enkeltprosjekter, samt en scrollanimasjon på en av seksjonene på hovedsiden.

Vi er svært fornøyde med prosjektet og stolte av resultatet. Fjellvann har gjort en enestående bra jobb med design og spesifikasjoner, og samarbeidet har vært en fornøyelse. Vi ser frem til flere prosjekter sammen og anbefaler Fjellvann på det sterkeste til andre som er ute etter en dyktig og pålitelig designpartner.