ACF, Elementor eller Gutenberg?

Custom WordPress-utveckling har länge präglats av en kombination av Advanced Custom Fields (ACF) och av inläggstyper (Custom Post Types, ”CPT”), men på senare tid har sidbyggare som Elementor, Divi, Beaver Builder m.m. blivit allt mer populära. Oavsett om du väljer att utveckla ett egenkodat tema eller utgå från ett premiumtema, behöver du som WordPress-utvecklare bestämma hur webbplatsen ska byggas.

Om du är van att arbeta i WordPress och haft privilegiet att se över flertalet WordPress-installationer, har du troligen märkt att WordPress kan konfigureras på ett flertal sätt och uppsättningar. För att inte göra det allt för rörigt förhåller vi oss i denna artikel till 3 vanliga metoder när det kommer till att bygga WordPress-sidor och särskilt hur CMS:et konfigureras – en sidbyggare (i artikeln använder vi Elementor), ACF och Gutenberg.

Vad är Elementor

En sidbyggare som Elementor tillåter dig att skapa, redigera och anpassa en webbplatsdesign och layout utan att behöva koda. Många av sidbyggarna har en inbyggd drag-and-drop funktion, där du helt enkelt drar in de sektioner och element som sedan bygger upp webbplatsen.

Varför är Elementor användbart?

Elementor är en populär sidbyggare och som fortsätter att växa i popularitet. Elementor ser sig själva som webbplatsbyggare, vilket vi tycker är en sanning med modifikation. Elementor behöver WordPress för att kunna bygga webbplatser. Utan WordPress, är Elementor endast en sidbyggare. Med det sagt gör Elementor livet enklare för många WordPress-användare, eftersom att sidbyggaren gör det möjligt att bygga webbplatser utan att behöva koda.

Varför är Elementor bra för er byrå?

Att använda Elementor eller en annan sidbyggare kan föra med sig många fördelar för er som byrå. Utnyttjar ni färdiga mallar kan ni snabba på er utveckling med färdiga sektioner där ni helt enkelt använder drag-and-drop för att möta kundens krav.

Det kan också vara fördelaktigt för er byrå att specialisera er inom en specifik sidbyggare. På så sätt kan ni möta kunders krav utan att behöva seniora WordPress-utvecklare inom byrån. En sidbyggare som Elementor tillåter även era kunder att göra ändringar själva efter att ni lanserat webbplatsen. Era kunder kan exempelvis skapa nya sidor genom att kopiera sidor som ni byggt åt dem och anpassa sidorna enligt behov. För Elementor finns det mycket dokumenterat och på YouTube kan man hitta många gör-det-själv lösningar.

Med Elementor och andra sidbyggare kommer mycket frihet men då finns också ökad risk att som slutanvändare göra misstag och potentiellt förstöra designen. På lite större bolag kan det vara väldigt viktigt att hålla sig till en grafisk profil, där man bör använda färdigbestämda färgkoder, fonter, avstånd, moduler m.m. Det ska helt enkelt inte gå att förstöra eller avvika från den grafiska profilen i något avseende.

Vad är Advanced Custom Fields

Custom fields (anpassade fält) är en form av metadata som kan användas för att utöka WordPress sidor och inlägg. På så sätt är de alltså ganska lika annan WordPress-data som exempelvis publiceringsdatum, författare, kategori, tagg eller annan data som är vanlig för många WordPress typer.

Anpassade fält tillåter användare att anpassa informationen för sidor och inlägg och bygga skräddarsydda lösningar för olika typer av webbplatser.

Anpassade fält kan t.ex. användas för att skapa ett nytt menyalternativ i WordPress-admin. Kortfattat tillåter anpassade fält dig att ge ytterligare information (av vilken typ som helst) till ditt innehåll. Det kanske inte låter så spännande att prata om på en abstrakt nivå, men när vi kikar på konkreta exempel förstår vi kraften bakom denna funktion. Med metadata från anpassade fält kan du exempelvis:

• Sätta start och sluttider för ett event, som vi gjorde för Lundsbrunn.nu
• Lägga till en länk för pressmeddelanden, som vi gjorde för Yabie.com
• Sätta upp kontaktuppgifter och titlar för medarbetare, som vi gjorde för Parameterrevision.se

Varför är Advanced Custom Fields användbart?

Det ACF tillåter dig att göra är att skapa anpassade fält och publicera inlägg, poster eller något annat på ett smidigt och flexibelt sätt. Om du till exempel skapar en webbplats för en enklare bilhandel, kan du skapa en inläggstyp där slutanvändaren i samband med publicering av en ny bil kan:

• Välja bilmärke
• Fylla i modell
• Beskrivning av bilen
• Färg etc.

För Universalmotors.se har vi skapat en inläggstyp för bilar som ni kan se här: https://universalmotors.se/kopbil/

Med ACF kan vi skapa en mall som vi kan tillämpa på nya inlägg. Om en användare nu vill lägga till en ny bil till sin bilhandel, behöver de endast fylla i de fält som du redan har förberett. Bilarna kommer att se likadana ut och det finns ingen risk att någon förstör formateringen/designen.

ACF kompletterar WordPress grundfunktionalitet och tillåter dig att ta kontroll över innehållet och bestämma vilka fält som visas och hur det kommer se ut rent designmässigt. ACF ger dig bland annat följande fält:

Foto/video, text, email, checkboxar, rullgardinsmenyer osv. Pro­-versionen ger dig tillgång till ännu fler fält. I våra projekt ingår alltid Advanced Custom Fields Pro kostnadsfritt med vår licens.

Det finns en till fördel med att använda ACF. Säg att du senare skulle vilja designa om webbplatsen och sidan som visar bilar. Genom att använda ACF, räcker det att du redigerar mallen för en bil. Om du hade byggt bilhandeln enbart med Elementor (och därmed sparat informationen direkt i inläggen) och sedan bestämde dig för att redigera om designen, så skulle du behöva ändra design på alla dina bilsidor.

Att använda AFC är bekvämare och ett mer professionellt verktyg när du bygger webbplatser för dina kunder. Istället för att be dina kunder spara all information i ett inlägg och sedan formatera sidan manuellt, kan du istället skapa en anpassad adminpanel som är helt anpassad för deras behov och verksamhet.

Elementor tillsammans med ACF

Går det att använda möjligheterna som ACF erbjuder tillsammans med en sidbyggare som Elementor för att förenkla webbutvecklingen? Svaret är ja och det är många gånger en ganska bra lösning. Om vi exempelvis har en webbplats där en löpare vill dela med sig av sina löptider, så kanske löparen behöver fält för distans, starttid, sluttid, plats. ACF gör det enkelt för löparen att skriva in allt detta i form av ett formulär. Med Elementors integration till ACF kan vi sedan designa sidan där en löprunda visas, utan att behöva koda.

Kan ACF Flexible Content ersätta Elementor eller andra sidbyggare?

Det är också möjligt att skapa sidmallar med ACF som ger en form av modulär flexibilitet. Eftersom att många webbplatser är ganska konsekventa i sin design, är det troligt att helt nya sidor på webbplatsen kommer att återanvända sektioner/moduler som vi redan använt tidigare.

Enligt oss är en av ACF:s kraftigaste funktioner Flexible Content – en simpel, strukturerad och anpassad sidbyggare. Flexible Content kan användas för att lägga till existerande moduler och byta plats med dem via drag-and-drop. Det tillåter användare som inte är utvecklare att gå in och modifiera eller skapa sidor, med full kontroll över innehållet och visningsordningen av sektioner, men där de inte kan påverka designen.

Faktorer som styr när du ska välja mellan Flexible Content eller sidbyggare

1. Graden av flexibilitet för slutanvändaren

Den kanske mest betydande faktorn handlar kanske om hur mycket kontroll du vill ge slutanvändaren i administrationsgränssnittet. En sidbyggare som Elementor skulle ge kunden möjlighet att själv kunna ändra webbplatsens design via sidbyggarens drag-and-drop funktionalitet. Med ACF är användaren låst till att endast editera innehåll med den struktur som utvecklaren har satt upp.

Vissa byråer utnyttjar sidbyggarens flexibiliteten som en säljpunkt och för kunder som är något vana med WordPress kanske det kan komma till användning. Men andra byråer önskar att deras kunder inte kan påverka designen, och värderar istället en begränsad flexibilitet.

För att uppnå flexibilitet i följande exempel med Flexible Content, måste modulerna vara förbyggda av utvecklaren. Men när det är färdigt, kan användaren använda dessa hur många gånger som helst, var som helst på en sida. Här är ett exempel:

2. Utvecklarens preferenser

För en utvecklare kan det vara relativt enkelt att sätta upp en webbplats med en sidbyggare genom att använda byggarens drag-and-drop funktioner. Utvecklaren tittar på designen och drar in rätt moduler, t.ex. gallerier, textrutor och formulär. Det funkar om webbplatsens design inte är för komplex.

Många utvecklare tycker däremot att sidbyggare för med sig vissa begränsningar. Vissa anpassningar som sidbyggarna inte är förberedda för kan ta väldigt lång tid att implementera. Tidsmässigt kan det ibland därför ta oss längre tid att bygga en sida med en sidbyggare om vi jämför med ACF och Flexible Content. Därför kan vi många gånger få färre projekttimmar, speciellt om designern ser till att återanvända moduler.

3. Page speed

Ett vanligt argument för varför sidbyggare bör undvikas är för att de leder till längre laddningstider då sidbyggare genererar mer kod för att visa samma resultat. Länge laddningstider på en webbplats är inte bara dåligt sett ur ett användarperspektiv, det är också en betydande faktor för SEO och Google-placeringar. Generellt sett är det därför bäst att undvika sidbyggare och istället bygga med ACF (och en anpassad/nedbantad sidbyggare med Flexible Content).

Kan jag använda Gutenberg?

Gutenberg lanserade 2018 och är numera WordPress standard block-editor. Det nya systemet skapades för att förenkla utvecklingen av WordPress webbplatser. Istället för att skriva HTML och CSS kod manuellt, designades Gutenberg för förenkla arbetet, även för personer som inte kan kod.

För att skapa en sida i Gutenberg, använder du helt enkelt drag-and-drop för de block som du vill att sidan ska bestå av. Dra in blocken i editorn och anpassa de enligt krav. Jämfört med en sidbyggare som skapar en hel sida, kan du med blockeditorn lägga till saker på en sida med ett existerande tema. Med block editorn är sidorna alltså styrda av det övergripande WordPress-temat. Med en sidbyggare kan du ändra färger, typsnitt och andra designelement på en sida – helt oberoende av det aktuella WordPress-temat.

För en ny användare kan det vara svårt att bemästra block-utveckling. Exempelvis är varje stycke (paragraph) i Gutenberg ett block. Det innebär att formattering och HTML-editering behöver appliceras på varje enskilt block och du behöver ändra läge för varje stycke du vill ändra.

Gutenberg förbättras dock ständigt och kommer så småningom att inkludera fler funktioner som liknar en traditionell sidbyggare. På Gutenbergs roadmap har man t.ex. full site editing, bättre sätt att samarbeta och flerspråkighet.

Sammanfattning

För att sammanfatta och ganska förenklat kan vi gruppera in alternativen för WordPress-utveckling enligt följande:

ACF Flexible Content, Sidbyggare, Teman med inbyggda sidbyggare, Gutenberg.

För personer som inte vill eller kan koda, är ACF inget alternativ och Gutenberg blir ganska begränsat. I de fallen skulle vi säga att sidbyggare, eller teman med inbyggda sidbyggare, är det bästa alternativet.

Men om ni har budget för en unik och anpassad webbdesign, tror vi att en lösning med ACF och Flexible Content är smidigare. Att använda sidbyggare i dessa fall hade varit mer komplext för utvecklaren och webbplatsen skulle troligen uppvisa längre laddningstider.

Flexible Content kräver dock mer planering. Alla moduler och valmöjligheterna som ska finnas behöver byggas in i temat av utvecklaren, vilket leder till ett stabilt tema med en begränsad mängd val. På så sätt får slutanvändaren den flexibilitet som temat erbjuder, men håller sig inom ramen för designen.