ACF, Page Builder & Co — Wie baut man eine Webseite mit WordPress?

Lese­dau­er: ca. 6–7 Minuten

Sie woll­ten schon immer mal genau­er ver­ste­hen, wie eine Web­sei­te eigent­lich ent­steht und wel­che Tools dabei ver­wen­det werden? In die­sem Arti­kel erklä­ren wir die wich­tigs­ten Begrif­fe  — von CMS bis ACF — beim Auf­bau einer Web­sei­te mit WordPress. 

Mit einem Markt­an­teil von gut 65 Pro­zent werden die meis­ten Web­sei­ten welt­weit mit dem Con­tent-Manage­ment-Sys­tem (CMS) Word­Press erstellt. Ein CMS ist eine Soft­ware, mit der digi­ta­le Inhal­te erstellt, bear­bei­tet, orga­ni­siert und dar­ge­stellt werden kön­nen. Sie bil­den das tech­ni­sche Grund­kon­strukt ab. Auch die Web­sei­ten von Lichtblick basie­ren auf Word­Press. Wei­te­re Con­tent Manage­ment Sys­te­me für Web­sei­ten — mit einem deut­lich gerin­ge­ren Markt­an­teil — sind zum Bei­spiel Typo3, Joom­la oder Con­tao. Inner­halb die­ser Soft­ware gibt es wie­der­um ver­schie­de­ne Mög­lich­kei­ten, Web Lay­outs zu erstel­len und zu bear­bei­ten. Die meis­ten pro­fes­sio­nel­len Ent­wick­ler, die mit Word­Press arbei­ten, wie auch wir bei Lichtblick, bevor­zu­gen bei der Erstel­lung von Web­sei­ten das Tool Advan­ced Cus­tom Fields (ACF). Was ACF genau ist und wie es ver­wen­det wird, erklä­ren wir in die­sem Arti­kel. Sobald die Web­sei­te gebaut wurde, kön­nen Ände­run­gen am Lay­out einer Word­Press-Web­sei­te mit ACF Fle­xi­ble Con­tent oder Page Buil­dern wie WP Bak­ery oder Ele­men­tor vor­ge­nom­men werden. Die Unter­schie­de die­ser Plug­ins sowie ihre Vor- und Nach­tei­le stel­len wir eben­falls im Fol­gen­den vor. 

 

Eine Webseite aufbauen — verschiedene Wege 

Mit einer lee­ren Word­Press-Instal­la­ti­on kön­nen Sie gera­de mal einen Blog ein­rich­ten, aber nicht viel mehr. Um mehr Funk­tio­nen zu erhal­ten, müs­sen soge­nann­te Plug-ins instal­liert werden. Das sind klei­ne Zusatz­pro­gram­me, die die Funk­tio­nen von Web­an­wen­dun­gen und Desk­top-Pro­gram­men erwei­tern. Diese Plug-ins werden von einer rie­si­gen Com­mu­ni­ty von Ent­wick­lern bereit­ge­stellt bzw. ver­kauft und bie­ten zahl­rei­che Mög­lich­kei­ten, das CMS zu erweitern. 

Die Grund­la­ge jeder Web­sei­te bil­det ein aus­ge­wähl­tes Word­Press Theme, wel­ches das Design der Seite bestimmt. Damit sind neben dem Aus­se­hen auch Anzei­ge-Mög­lich­kei­ten und funk­tio­na­le Aspek­te gemeint. Für Word­Press gibt es Tau­sen­de kos­ten­lo­se und kos­ten­pflich­ti­ge The­mes, auf deren Grund­la­ge eine Web­sei­te erstellt werden kann. Um aber eine stark benut­zer­de­fi­nier­te Web­sei­te mit vie­len indi­vi­du­el­len Funk­tio­nen und einem ein­zig­ar­ti­gen Design zu erstel­len, müs­sen The­mes selbst pro­gram­miert oder stark modi­fi­ziert werden.

 

ACF: Advanced Custom Fields

Advan­ced Cus­tom Fields ist ein sol­ches Plug-in, mit dem Lay­outs für eine Word­Press-Web­sei­te erstellt werden kön­nen. Es wird von vie­len pro­fes­sio­nel­len Deve­l­o­pern und Agen­tu­ren für die Web­sei­ten­er­stel­lung genutzt und kann mit ande­ren Anwen­dun­gen wie z.B. Woo­Com­mer­ce kom­bi­niert werden. Eine kos­ten­lo­se Ver­si­on kann über das Word­Press Repo­si­to­ry her­un­ter­ge­la­den werden. Für mehr Funk­tio­nen benö­tigt man jedoch eine kos­ten­pflich­ti­ge Pro-Ver­si­on. Für ACF benö­tigt man Pro­gram­mier­kennt­nis­se, da z.B. das Front­end sepa­rat kodiert werden muss. Dadurch haben die Ent­wick­ler aber auch die voll­stän­di­ge Kon­trol­le dar­über, wo die Daten im Front­end der Web­site erschei­nen. Als Agen­tur kann so ver­mie­den werden, dass die inhalt­li­chen Ände­run­gen des Kun­den nach dem Live­gang das Erschei­nungs­bild der Seite zerstören.

Die Vor­tei­le von ACF gegen­über Page Buil­dern sind vor allem Schnel­lig­keit bei den Lade­zei­ten. Page Buil­der ver­wen­den für das glei­che Ergeb­nis erheb­lich mehr Code, was die Geschwin­dig­keit der Web­sei­te deut­lich ver­rin­gert. Da Lade­zei­ten heut­zu­ta­ge einen gro­ßen Ein­fluss auf die Such­ma­schi­nen­op­ti­mie­rung haben, ist dies kein zu unter­schät­zen­der Fak­tor. Web­ent­wick­ler haben mehr Frei­hei­ten in der Anord­nung und Ände­rung von Inhal­ten auf der Web­sei­te und müs­sen sich nicht an vor­ge­fer­tig­te Struk­tu­ren halten. 

 

ACF Flexible Content

Es ist auch mög­lich, mit ACF Sei­ten­vor­la­gen zu erstel­len, die eine “modu­la­re Fle­xi­bi­li­tät” auf­wei­sen. Da viele Web­sites sei­ten­über­grei­fend ein­heit­lich gestal­tet sind, ist es wahr­schein­lich, dass neue Sei­ten auf einer Web­site Lay­outs wie­der­ver­wen­den, die bereits auf ähn­li­chen Sei­ten vor­han­den sind.

In ACF kann der Ent­wick­ler einen “fle­xi­ble con­tent” auf einer Sei­ten­vor­la­ge ein­rich­ten, der es erlaubt, alle (oder eini­ge) Abschnit­te hin­zu­zu­fü­gen und per Drag and Drop zu ver­schie­ben. So kann ein Benut­zer, der kein Ent­wick­ler ist, Sei­ten ändern oder erstel­len, bei denen er den Inhalt und die Rei­hen­fol­ge der Abschnit­te kon­trol­liert, aber nicht das eigent­li­che Design.

Vor­tei­le von ACF und ACF Fle­xi­ble Content:

• ACF ermög­licht gerin­ge­re Lade­zei­ten als Page Builder
• Mit ACF kön­nen Deve­lo­per fle­xi­bel hoch­wer­ti­ge Web­sei­ten bauen 
• Mög­lich­keit, die Web­sei­te mit Fle­xi­ble Con­tent per Drag and Drop zu bearbeiten 
• Erhöh­te Kom­pa­ti­bi­li­tät mit ande­ren Anwendungen 

Nach­tei­le von ACF und ACF Fle­xi­ble Content:

• Pro­gram­mier­kennt­nis­se sind erforderlich
• In Folge ggf. höhe­rer Anschaffungspreis 

Ist ein indi­vi­du­el­les Web­site-Design gewünscht, lässt sich eine ACF-basier­te Lösung mit fle­xi­blen Inhal­ten emp­feh­len. Die Page Buil­der wären für den Ent­wick­ler unfle­xi­bler in der Umset­zung und wür­den die Web­site für die Besu­cher deut­lich lang­sa­mer machen. Auch wenn ACF Fle­xi­ble Con­tent die Bear­bei­tung im Nach­hin­ein erleich­tert, muss bedacht werden, dass bei der Ver­wen­dung von Fle­xi­ble Con­tent im Vor­aus fest­ge­legt wird, wel­che Art von Fle­xi­bi­li­tät mög­lich ist. Alle Abschnit­te und Gestal­tungs­op­tio­nen werden vom Ent­wick­ler in das Theme ein­ge­baut, so dass ein sta­bi­les Theme ent­steht — jedoch mit einer begrenz­ten Anzahl von Optionen. 

 

Page Builder: Per Drag and Drop eine Webseite bauen

Eine viel genutz­te Alter­na­ti­ve zu ACF und der Fle­xi­ble Con­tent Mög­lich­keit sind Page Buil­der. Ein Page Buil­der ist im Prin­zip ein Bau­kas­ten für Web­sei­ten-Inhal­te wie z.B. Text­blö­cke, Bil­der oder But­tons. Mit der Anwen­dung kön­nen die ein­zel­nen Ele­men­te per Drag and Drop wie gewünscht plat­ziert und mit Inhalt befüllt werden. Bei­spie­le hier­für sind Ele­men­tor, WPBak­ery oder Visu­al Com­po­ser. Mit die­sen Tools soll der Web­sei­ten-Auf­bau ohne detail­lier­te Pro­gram­mier­kennt­nis­se erleich­tert werden. Doch wie vor­teil­haft sind Page Buil­der in der Pra­xis im Ver­gleich zu ACF? Und wann kön­nen sie sogar hin­der­lich sein? Im Fol­gen­den stel­len wir zwei bekann­te Page Buil­der vor.

 

1. WPBak­ery Page Builder

Der WPBak­ery Page Buil­der ist der­zeit das meist­ge­nutz­te Word­Press Page Buil­der Plug­in. WPBak­ery ermög­licht als Front­end und Backend Page­buil­der die Erstel­lung von respon­si­ven Designs. Es kann schnell zwi­schen ver­schie­de­nen Device-Ansich­ten gewech­selt werden, um sicher­zu­ge­hen, dass der Con­tent in jeder Form passt. Als Nutzer benö­tigt man für die Bedie­nung keine Pro­gram­mier­kennt­nis­se, son­dern kann aus ver­schie­de­nen Tem­pla­tes aus­wäh­len und Ele­ment für Ele­ment eine Web­sei­te aufbauen. 

Da es WPBak­ery schon län­ger gibt, exis­tie­ren bereits viele inte­grier­te Lay­outs und Bau­stei­ne wie Boxen, Icons, Text­blö­cke und Dia­gram­me, mit denen die Web­sei­te erstellt werden kann. Außer­dem gibt es eine Viel­zahl wei­te­rer Ele­men­te und Erwei­te­run­gen von Dritt­an­bie­tern und Hun­der­te Inte­gra­tio­nen mit ande­ren wich­ti­gen Plug­ins wie WooCommerce.

WPBak­ery soll mit jedem Word­Press Theme nutz­bar sein. Dar­über hin­aus erkennt das Plug­in bis­he­ri­ge Inhal­te und wickelt sie in WPBak­ery freund­li­ches For­mat. Auch benut­zer­de­fi­nier­te Short­codes sind inte­grier­bar, zum Bei­spiel mit dem Short­code Map­per, mit dem sie wie jedes ande­re Build-in Con­tent-Ele­ment ver­wen­det werden kön­nen. Alter­na­tiv kön­nen ver­schie­de­ne Addons Abhil­fe schaffen. 

Die Benut­zer­ober­flä­che ist weit­ge­hend intui­tiv, aber nicht mehr auf dem neu­es­ten Stand, erfor­dert manu­el­les Spei­chern und ist deut­lich lang­sa­mer als bei der Kon­kur­renz. Trotz­dem bie­tet WPBak­ery eini­ge Vor­tei­le und ist nicht umsonst das meist­ge­nutz­te Page Buil­der Plugin. 

Vor­tei­le des WPBak­ery Page Builder:

• Große Anzahl von Con­tent-Ele­men­ten verfügbar
• Über 250 ver­schie­de­ne Plug­ins integrierbar 
• Aus­wahl vie­ler ver­schie­de­ner Design-Templates 

Nach­tei­le des WPBak­ery Page Builder:

• ver­al­te­te Benutzeroberfläche
• lange Lade- und Speicherzeiten 
• keine auto­ma­ti­sche Spei­che­rung möglich 

Ins­ge­samt ist der WPBak­ery Page Buil­der ein gut aus­ge­stat­te­tes Plug­in und kann auch von Anfän­gern schnell gelernt und bedient werden. Ein Make­over der Ober­flä­che würde dem Page Buil­der den­noch guttun. 

 

2. Visu­al Com­po­ser Web­site Builder

Als der WPBak­ery Page Buil­der ein­ge­führt wurde, wurde es zunächst leise um den Visu­al Com­po­ser. Tat­säch­lich wurde das Plug­in jedoch wei­ter­ent­wi­ckelt und kam eini­ge Zeit spä­ter als neuer Site Buil­der wie­der auf den Markt. Mit einem Site Buil­der lassen sich neben Web­site-Inhal­ten auch ande­re Lay­out-Berei­che edi­tie­ren, wie z.B. Foo­ter oder Header-Bereich. 

Inhal­te und Design kön­nen mit dem Visu­al Com­po­ser direkt im Front­end auf einer moder­nen Benut­zer­ober­flä­che bear­bei­tet werden. Im soge­nann­ten Visu­al Com­po­ser Hub gibt es über 500 nutz­ba­re Con­tent-Ele­men­te und The­mes, die zum Down­load bereit­ste­hen und genutzt werden kön­nen. Im Ver­gleich sind sol­che Ele­men­te bei WPBak­ery bereits in der Anwen­dung inte­griert und müs­sen nicht extra her­un­ter­ge­la­den werden. 

Vor­tei­le von Visu­al Composer:

• Inhal­te sind direkt auf der Seite im Front­end bearbeitbar
• keine Pro­gram­mier­kennt­nis­se erforderlich
• Visu­al Com­po­ser Hub mit vie­len Erweiterungen
• Ele­men­te lassen sich ver­ber­gen und spä­ter wie­der anzeigen
• Unter­stützt CSS- und JavaScript-Bearbeitung

Nach­tei­le von Visu­al Composer:

• oft Pro­ble­me bei den Funk­tio­nen “Rück­gän­gig” und “Wie­der­her­stel­len” 
• zum Teil ist die Benut­zer­ober­flä­che ver­al­tet, z.B. muss die Bild­grö­ße als Wort ein­ge­ge­ben werden

Der Visu­al Com­po­ser ist im Ver­gleich zum WPBak­ery Page Buil­der etwas schnel­ler und intui­ti­ver zu bedie­nen, doch bie­tet er nicht viel mehr Vor­tei­le. Das Visu­al Com­po­ser Hub ist inso­fern prak­tisch, dass keine zusätz­li­chen Plug-ins instal­liert werden müs­sen, son­dern zusätz­li­che Funk­tio­nen und Anwen­dun­gen dort gebün­delt zur Ver­fü­gung stehen. 

Ins­ge­samt haben Page Buil­der den Vor­teil, dass sie  ohne Pro­gram­mier­kennt­nis­se bedien­bar sind, über viele Funk­tio­nen ver­fü­gen und im Ver­gleich einen güns­ti­gen Preis haben. 

 

Die Nachteile von Page Buildern

Page Buil­der klin­gen erst­mal gut — ein­fach zu bedie­nen, güns­tig und trotz­dem viele Mög­lich­kei­ten. Sie haben aber einen sehr ent­schei­den­den Nach­teil: Ist eine Web­sei­te ein­mal mit einem Page Buil­der auf­ge­baut, lässt sich der dahin­ter ste­hen­de Auf­bau  nicht mehr ändern. Die Inhal­te sind an die Struk­tur und Logik des Page Buil­ders gebun­den und kön­nen nicht in einem ande­ren Sys­tem wei­ter­ver­wen­det werden. Die gesam­te Web­sei­te müss­te neu gebaut und die Inhal­te manu­ell migriert werden. Dazu kommt, dass die Bedie­nung erst­mal intui­tiv und ein­fach erscheint, doch genau so schnell lässt sich eine Page Buil­der Web­sei­te mit weni­gen “fal­schen Klicks” für den Besuch­bar unnutz­bar machen. Ins­be­son­de­re aber bestehen hohe Sicher­heits­ri­si­ken, wenn Updates nicht recht­zei­tig gela­den und Plug-ins nicht aktua­li­siert oder aus­ge­tauscht werden — was auf­grund des “eier­le­gen­den Woll­milch­sau — Ansat­zes” bei Page Buil­dern — häu­fig not­wen­dig ist. Auch die lan­gen Lade­zei­ten und die schlech­te Per­for­mance von Web­sei­ten spre­chen klar gegen den Ein­satz von Page Buildern. 

 

Unser Fazit

Kun­den wün­schen sich immer wie­der eine Web­sei­te auf Basis eines Page Buil­ders, weil ihnen eine selbst­stän­di­ge, ein­fa­che Wei­ter­ent­wick­lung der Web­sei­te wich­tig ist. Meis­tens raten wir jedoch auf­grund der vie­len Nach­tei­le von Page Buil­dern davon ab. Vor allem, weil bei einer nach­träg­li­chen Ände­rung des Web­sei­ten-Designs immer noch Grund­kennt­nis­se aus der Pro­gram­mie­rung not­wen­dig sind. Geht es um die Ände­rung von Inhal­ten, zum Bei­spiel den Aus­tausch von Tex­ten oder Bil­dern, so ist dies auch ohne Pro­ble­me mit einer ACF-Web­sei­te mög­lich. Auch die Nut­zung von ACF Fle­xi­ble Con­tent hat in die­sem Fall viele Vor­tei­le. Zur­zeit bauen wir als Agen­tur daher auf ACF um für unse­re Kun­den indi­vi­du­el­le, fle­xi­ble, schnel­le und siche­re Web­sei­ten zu bauen. In der Welt der Web­ent­wick­lung gibt es jedoch immer wie­der Neue­run­gen und inno­va­ti­ve Anwen­dun­gen, die wir beob­ach­ten und aus­pro­bie­ren, um tech­nisch stets auf dem neu­es­ten Stand zu sein. 

Quel­len:

• https://wordpress.com
• https://raidboxes.io/blog/wordpress/wordpress-page-builder/
• https://raidboxes.io/blog/webdesign-development/wordpress-pagebuilder-nachteile/ 
• ​​https://www.ionos.de/digitalguide/hosting/blogs/wordpress-page-builder/
• https://kinsta.com/de/blog/wordpress-page-builders/ 
• https://de.statista.com/themen/3086/wordpress/#dossierKeyfigures 
• https://visualcomposer.com 
• https://www.advancedcustomfields.com 
• https://www.lapero.io/blog/lapero/2022/03/16/advanced-custom-fields-and-your-website