Spring til indhold
NanoHost

Web og drift

Page Builder by SiteOrigin

Lær hvordan du bruger Page Builder by SiteOrigin til at skabe responsive WordPress-layouts uden at kode. Læs den tekniske guide og tips til pluginnet.

Af Kasper Stück 8 min. læsetid

Page Builder by SiteOrigin er et anerkendt og gratis WordPress-plugin, der gør det muligt at opbygge komplekse og responsive sidelayouts uden at skulle skrive kode. I stedet for at være bundet af dit temas standardopsætning, kan du med SiteOrigin placere indhold, widgets og rækker præcis, som du ønsker det, via en intuitiv drag-and-drop-grænseflade.

Denne guide gennemgår funktionerne i Page Builder by SiteOrigin, hvordan pluginnet integreres med både klassiske temaer og WordPress Block Editor, samt hvilke tekniske overvejelser du bør gøre dig, før du ændrer layoutet på din hjemmeside.

Hvad er Page Builder by SiteOrigin?

SiteOrigin Page Builder adskiller sig fra mange moderne visuelle builders ved primært at arbejde i et struktureret backend-grid (eller som en blok i Gutenberg), frem for en ren frontend-redigering. Dette grid-baserede system er opdelt i rækker (rows) og kolonner (columns), hvori du placerer klassiske WordPress widgets.

Dette modulære system betyder, at du ikke er låst fast til propitære byggeklodser. Du benytter de funktionaliteter (widgets), som WordPress allerede kender, og kombinerer dem i et unikt grid.

Kernefunktioner

  • Grid-baseret layout: Opbyg sider i et række- og kolonneformat, hvilket sikrer fuld kontrol over proportioner og inddeling.
  • Drag-and-drop: Træk nemt elementer, kolonner og rækker rundt for at omstrukturere siden lynhurtigt.
  • Integration med standard widgets: Pluginnet fungerer perfekt med alle standard WordPress widgets (som Tekst, Billede, Seneste indlæg) og dem, der tilføjes af tredjeparts-plugins.
  • SiteOrigin Widgets Bundle: En valgfri, men stærkt anbefalet tilføjelse, der udvider mulighederne markant med knapper, billedkarruseller, pristabeller, kontaktformularer og call-to-actions.
  • Historik-funktion: En indbygget versionsstyring lader dig spole tilbage og fortryde layout-ændringer. Systemet gemmer en historik over dine ændringer i sessionen, hvilket giver enorm tryghed i designfasen.

Tip: Før du implementerer en ny page builder eller foretager større strukturelle ændringer på dit live site, bør du altid tage en fuld backup af din database og dine filer. Har du en kompleks opsætning, anbefales det stærkt at teste det nye layout på et staging-miljø først.

Sådan arbejder pluginnet med WordPress-temaer

En af de primære fordele ved SiteOrigin Page Builder er dets fleksibilitet og kompatibilitet. Hvor nogle nyere page builders kaprer hele designoplevelsen og kræver specifikke tema-frameworks (eller ligefrem fungerer som deres eget tema), er SiteOrigin udviklet til at spille gnidningsfrit sammen med stort set alle eksisterende WordPress-temaer.

Når du opretter rækker og kolonner, tilpasser Page Builder-strukturen sig automatisk dit temas underliggende CSS. Det betyder, at dine H1-, H2- og H3-overskrifter, farvepaletter og skrifttyper automatisk respekterer de globale designregler, du har konfigureret i temaet via WordPress Customizer.

Resultatet er en ren og ensartet kode, der komplementerer i stedet for at overskrive. Skulle du senere vælge at skifte tema, bevares din SiteOrigin-struktur, omend den nu naturligvis vil afspejle det nye temas grafiske stilart.

Har du brug for hjælp til at finde det rette tema eller opsætte dit layout fra bunden, kan du med fordel tage en snak med en professionel hjemmeside designer.

Performance og kodestruktur

I modsætning til visse tunge page builders, der tilføjer unødig kode (“div-soup”) til din hjemmeside for at muliggøre komplekse visuelle effekter, fokuserer SiteOrigin på at generere en relativt letvægts og semantisk HTML-struktur.

Dette tekniske fokus har flere konkrete fordele:

  1. Hurtigere indlæsningstid: Mindre overhead-kode betyder hurtigere rendering i browseren, hvilket er et afgørende parameter for konverteringsrater og overordnet brugeroplevelse.
  2. SEO-fordele: Søgemaskiner har lettere ved at crawle og forstå en ren sidestruktur, hvor indholdet ikke er begravet i unødvendige elementer.
  3. Responsivt design: Koden er bygget til automatisk at tilpasse sig forskellige skærmstørrelser, uden at du skal tilføje tunge JavaScript-biblioteker for at håndtere visningen.

Avanceret responsiv kontrol

Selvom nettet i dag er ‘mobile-first’, kræver komplekse layouts ofte manuel tilpasning for at fungere optimalt på små skærme. SiteOrigin giver dig detaljerede indstillinger for hver række og kolonne.

Under indstillingerne for en række kan du for eksempel angive den specifikke padding for mobile enheder, kollapse rækkefølgen af kolonner (så højre kolonne vises over venstre på mobilen), eller du kan vælge helt at skjule specifikke widgets på mobilenheder, hvis de optager for meget plads. Dette er en utrolig kraftfuld funktion til at finpudse brugeroplevelsen.

SiteOrigin vs. WordPress Block Editor (Gutenberg)

Efter introduktionen af den indbyggede Block Editor (ofte kaldet Gutenberg) i WordPress, opstod der en debat om, hvorvidt eksterne page builders var blevet overflødige. SiteOrigin har imidlertid formået at tilpasse sig denne nye arkitektur med stor succes.

I stedet for at tvinge dig til at vælge mellem blokke eller page builder, integrerer SiteOrigin gnidningsfrit med Block Editor via deres specifikke “SiteOrigin Layout Block”. Du kan dermed benytte Gutenberg til dit standardindhold (tekst, billeder, citater), og blot indsætte en SiteOrigin-blok præcis dér, hvor du har brug for et avanceret, multi-kolonne layout med komplekse widgets, som Block Editoren ikke selv kan håndtere elegant.

Dette giver en hybrid tilgang, hvor du lader WordPress håndtere det, det er bedst til, og lader SiteOrigin tage over ved avancerede layout-behov.

Avancerede tilpasninger for udviklere

For brugere med kendskab til CSS og PHP tilbyder SiteOrigin stor frihed. Hver række, kolonne og widget kan tildeles egne CSS-klasser og ID’er direkte fra grænsefladen.

Endnu vigtigere er det, at pluginnet leverer en lang række action- og filter-hooks, der lader WordPress-udviklere manipulere adfærden. Du kan registrere dine egne brugerdefinerede widgets og lade dem indgå i SiteOrigins grid-system. Der findes en omfattende officiel dokumentation tilgængelig online for dem, der ønsker at integrere deres egne tema-specifikke widgets med pluginnet.

Premium-versionen: SiteOrigin Premium

Basisversionen af SiteOrigin er gratis, robust og tilstrækkelig for mange brugere. De tilbyder dog også SiteOrigin Premium, som er en betalt opgradering designet til udviklere, bureauer og virksomheder, der har brug for endnu mere dybdegående funktionalitet.

Premium-tilføjelserne inkluderer blandt andet:

  • Custom Post Type Builder: Skab egne posttyper direkte i grænsefladen og tilpas deres layout.
  • WooCommerce-skabeloner: Udvidede muligheder for at style produkt- og arkivsider for dig, der driver en webshop med WooCommerce.
  • Flere animationer: Avancerede animationer til widgets, der lader indhold fade eller glide ind, når brugeren scroller.
  • Prioriteret support: Direkte adgang til teknisk hjælp fra SiteOrigins udviklerteam.

Hvis du driver en kritisk webshop og oplever tekniske udfordringer med komplicerede layouts, afhængigheder eller plugin-konflikter, kan en WooCommerce serviceaftale sikre, at din shop altid holdes opdateret og optimeret af eksperter.

Sådan kommer du i gang (Teknisk opsætning)

For at få det maksimale udbytte af systemet, anbefales det altid at installere både selve page builderen og den tilhørende widget-pakke fra start. Følg disse trin:

  1. Log ind i dit WordPress-kontrolpanel.
  2. Naviger til Plugins > Tilføj nyt plugin.
  3. Søg efter Page Builder by SiteOrigin og klik Installer nu, efterfulgt af Aktiver.
  4. Gentag processen; søg efter SiteOrigin Widgets Bundle og aktiver ligeledes denne.
  5. Gå nu til Sider > Tilføj ny (eller rediger en eksisterende side).
  6. Hvis du stadig benytter Classic Editor, vil du bemærke en ny fane kaldet “Page Builder” oppe ved siden af “Visuel” og “Tekst”. Benytter du Block Editor, skal du søge efter og tilføje blokken “SiteOrigin Layout”.
  7. Klik på “Tilføj række” for at skabe dit overordnede layout, og benyt derefter “Tilføj widget” for at fylde de enkelte rækker og kolonner med indhold.

Oplever du mærkelig adfærd, hvor widgets pludselig ændres udefra, eller er din side blevet langsom og mistænkelig? Hvis uheldet er ude, og du har mistanke om ondsindet kode, kan du læse vores vejledning om, hvad du bør gøre, hvis dit WordPress er hacket.

Ofte stillede spørgsmål om SiteOrigin Page Builder

Hvordan adskiller Page Builder by SiteOrigin sig fra Elementor?

Mens Elementor primært er en frontend-fokuseret visual builder (du arbejder direkte på sitet), arbejder SiteOrigin typisk i backend med et klart adskilt grid-system af rækker og widgets. SiteOrigin genererer generelt lettere kode og er bygget op omkring traditionelle WordPress-widgets, hvor Elementor byder på sit eget proprietære miljø. Valget afhænger ofte af dine præferencer for workflow og krav til performance.

Kræver det et specielt og dyrt tema for at fungere?

Nej, absolut ikke. SiteOrigin er kendt for at fungere problemfrit med næsten alle WordPress-temaer, forudsat at temaet overholder Codex-standarderne for kodning. Page builderen lægger blot sit grid ind i sidens standardindhold. Hvis du leder efter en stærk serverløsning, der er skræddersyet til at trække tunge plugins og sikre hurtige responstider, vil et WordPress webhotel forbedre indlæsningstiden og sidens score mærkbart.

Hvad sker der med mit indhold, hvis jeg deaktiverer pluginnet en dag?

Dette er et vigtigt spørgsmål, når man vælger page builder. Hvis du deaktiverer Page Builder by SiteOrigin, vil dit indhold typisk forblive i databasen, men det vil naturligvis miste sin komplekse kolonnestruktur og specifikke layout-styling. Det vil fremover blive vist som lineær standard HTML og shortcodes i WordPress-editoren.

Man kalder dette for “lock-in effekten”. Derfor er det vigtigt at overveje langsigtede konsekvenser ved valg af ethvert design-plugin. Har du brug for hjælp til en struktureret migrering, bør du søge WordPress support, især hvis du planlægger at flytte et stort site væk fra én page builder til en anden.

Er Page Builder by SiteOrigin sikkert at bruge for en virksomhed?

Ja. SiteOrigin er et af de ældste, mest gennemtestede og stabile page builder-plugins på markedet. Udviklerteamet udsender regelmæssigt opdateringer, der lukker potentielle sikkerhedshuller og sikrer kompatibilitet med de nyeste kerne-opdateringer. Som med al software er det dog kritisk, at du sørger for at holde pluginnet opdateret. For virksomheder der ikke selv har tid eller teknisk indsigt til løbende vedligeholdelse, tilbyder vi dedikerede WordPress serviceaftaler, der netop håndterer opdateringer, overvågning og sikkerhed.

Kan jeg bruge SiteOrigin sammen med et CDN?

Sagtens. Layouts bygget i SiteOrigin cacher og minificerer CSS uden problemer, hvis du har en god cache-løsning. Billeder indsat i widgets bliver også serveret normalt, så har du konfigureret dine indstillinger korrekt – læs eventuelt mere i vores artikler om DNS og valg af domæne – vil dine SiteOrigin-sider fungere lynhurtigt bag ethvert anerkendt CDN.

Web og drift

Beaver Builder

Lær alt om Beaver Builder til WordPress. En stabil, hurtig og brugervenlig drag-and-drop page builder, der giver dig fuld kreativ kontrol uden at gå på kompromis med ydeevnen.

Læs mere

Web og drift

Brizy

Brizy er en intuitiv drag-and-drop page builder til WordPress. Lær, hvordan du skaber professionelle hjemmesider med global styling og smarte blokke.

Læs mere

Web og drift

Live Composer

Lær alt om Live Composer til WordPress. Vi gennemgår funktioner, fordele, ulemper og sammenligner den gratis page builder med alternativer som Elementor.

Læs mere