Redacteur vs. Componist! Eenvoudige WYSIWYG tekstverwerker vs. drag’n’drop plugin

Visuele componisten’ zijn een van de trends in WordPress. Iedereen die pagina’s en artikelen wil maken in het WordPress content management systeem is aangewezen op de geïntegreerde WP editor. De WP-Editor is, in het kort, een WYSIWYG editor, met andere woorden een “wat je ziet is wat je krijgt” editor. Dat wil zeggen, net als bij de bekende kantoorsoftware Word van Microsoft, ziet u wijzigingen altijd live. Maak een woord vet is vet. Onderstreep een woord en het is onderstreept. Dit is precies hoe de WordPress editor werkt, wat je doet is wat je ziet. Voor kleinere online projecten, websites en blogs volstaat deze functie perfect. Naarmate WordPress populairder is geworden, zijn er echter steeds grotere sites met het systeem geïmplementeerd. Veel van de webontwerpers en mediabeheerders wilden echter geen genoegen nemen met eenvoudige tekstvelden en wilden de individuele lay-out van de pagina’s verfraaien. Door middel van individuele pictogrammen, individuele achtergronden, sliders, grote afbeeldingen en nog veel meer.

Klassieke WordPress Editor of Composer?

Voor een professional is dit geen enkel probleem, hij schrijft een paar regels code met HTML en CSS en het is klaar. Het principe van een content management systeem is echter om grote hoeveelheden gegevens te beheren en, idealiter, deze gemakkelijk toegankelijk, bewerkbaar en verwijderbaar te maken voor de gebruikers. Daarom is het raadzaam een mooie gebruikersvriendelijke interface te hebben waarmee ook zonder veel technische kennis gemakkelijk kan worden gewerkt.

Principe, ontwerp met shortcodes

Om pagina’s op een relatief eenvoudige manier te stijlen, ontstond het idee om shortcodes te gebruiken. Deze shortcodes combineren meer ingewikkelde code tot eenvoudige tags die dan door de gebruiker kunnen worden gebruikt. Een eenvoudig voorbeeld zou zijn om een mooie koptekst in een shortcode te verpakken:

[Hier is de kop.

… het element krijgt dan een speciale kleur, een speciale positie, misschien een ander lettertype, lettersterkte en nog veel meer. Voordat we ingewikkelde HTML en CSS eigenschappen gaan typen, zou het slim zijn om gewoon de term kop te gebruiken. En dit is precies hoe het principe van shortcodes werkt: je verpakt ingewikkelder, lange codes in eenvoudige kleine snippets. Het probleem met dit principe is dat je veel visuele verbeelding nodig hebt, want de gebruiker ziet code en geen mooi opgemaakte kop. En stel nu dat we de complexiteit nog een beetje opvoeren en tabellen opnemen, met precies dezelfde spatiëring, die dan ook nog eens op de achtergrond gekleurd worden, afzonderlijk, eenmaal blauw, eenmaal geel en eenmaal oranje. Dit is waar shortcodes hun grenzen bereiken, althans voor de niet-technicus.

Nieuw: Componeren in de WordPress editor

Opdat inhoud zeer gemakkelijk kan worden geplaatst en ook direct visueel zichtbaar is, bij benadering op de juiste plaats, in de juiste vorm, zijn er al enige tijd diverse alternatieven voor de standaard WP-editor: Composer. U kunt deze meestal downloaden, installeren in uw WordPress systeem en u kunt aan de slag. U vindt alle belangrijke downloads hier en nogmaals aan het eind van het artikel.

In de eerste stap installeert u de composer van uw keuze als een normale plugin in uw WordPress dashboard. In een volgende stap, activeer je de plugin zoals gewoonlijk. Wat is er nu veranderd? Pagina’s en berichten. Laten we eerst nog eens kijken naar uw WordPress dashboard, hier vindt u alle belangrijke punten weer in één oogopslag, van de blog posts tot de media tot commentaren en extensies. Relevant voor onze taak vandaag zijn pagina’s en berichten. In principe verschillen pagina’s en posts alleen in het feit dat je posts categoriseert en timet zoals in een klassieke blog. Pagina’s zijn alle statische pagina’s zoals uw algemene voorwaarden, contactpagina’s of “Over ons” maar ook de startpagina enzovoort.

Het belangrijkste WP dashboard element voor uw website:

Activeer WP Composer

In het volgende voorbeeld gebruiken we de lay-out editor in het WordPress thema Enfold (kan hier gevonden worden). Ongeacht of u de Layout Editor of de Visual Composer van de WP Bakkerij gebruikt, vindt u nu een blauwe knop in elke afzonderlijke pagina of post die u naar de Composer leidt of de modus wijzigt van de WP-editor naar de Composer.

Veel voordelen, veel flexibiliteit

Laten we eerst eens kijken naar de talloze voordelen die de Composer u biedt. Ten eerste hebben we de responsieve samenstelling van inhoud voor computers en mobiele apparaten. Met de Composer kunnen kolommen en rijen als afzonderlijke elementen worden bekeken en zich aanpassen aan de schermgrootte, d.w.z. desktop, tablet of smartphone. Bovendien hebt u een visuele interface, u hebt geen HTML, CSS of shortcodes nodig om sterke elementen zoals video-achtergronden te maken. Alle elementen binnen de pagina’s of berichten kunnen gemakkelijk en intuïtief worden verplaatst via slepen en neerzetten. De structuur van de afzonderlijke elementen is gedefinieerd en altijd hetzelfde, dit geeft uw website een uniform uiterlijk en de gebruikersoriëntatie en dus minder storingen tijdens het bezoek.

Andere voordelen:

• Elementen zijn vrij positioneerbaar – zelfs zonder kennis van HTML, CSS
• Media, afbeeldingen, enz. zijn gemakkelijk te integreren
• We kunnen lay-outs maken als sjablonen
• …

Kolommen, cellen en structuur

Laten we nu eens kijken naar afbeelding 4. Daar vindt u de conclusie van de kleine inleiding tot het werken met visuele editors in WordPress. Dit is ook de laatste stap in mijn workshops, omdat het werken met een componist heel intuïtief is en het best kan worden geleerd met vallen en opstaan. Het kost ook niet veel tijd, want de elementen zijn meestal beperkt tot twintig. Met zelfstandige training is het gebruik van de componist gemakkelijker en sneller te begrijpen. De resultaten zullen snel zeer goed zijn, want de toepassing is echt eenvoudig met een beetje begeleiding en fantasie:

Mijn tip: hou het simpel

Kijk naar de structuur in afbeelding 4, vaak hoeven er geen speciale rubrieken te zijn, een tekstveld is voldoende. Stel jezelf een sectie in, of werk met een kolom, plaats hier een tekstelement en kijk wat er gebeurt. Met de preview (rechtsboven op uw bewerkingspagina) kunt u het resultaat in een nieuw browsertabblad zien. Ga nu een beetje verder en plaats een lijn in ons eerste tekstveld. Maak een kop van het tekstveld en plaats een nieuw tekstveld helemaal aan het eind. Gedaan. U kunt deze velden gewoon kopiëren in een composer en direct drie of vier of vijf paragrafen maken. Op deze manier kunt u snel een lay-out maken en ook snel nieuwe medewerkers opleiden en hen laten zien hoe effectief content management werkt.

Als u vragen heeft over content management, content marketing, WordPress of workshops voor het trainen van uw medewerkers, bel ons dan. Wij hebben efficiënte en sterke workshopconcepten die we vele malen hebben getest in nauwe samenwerking met onze klanten en opdrachtgevers. U kunt ook profiteren van onze ervaring en knowhow als online ondernemers en consultants.

• Download: Visueel componist
  van CodeCanyon

Op dit punt wil ik u echter waarschuwen om Composer alleen te gebruiken voor een handvol pagina’s op een zeer gerichte manier, om de laadsnelheid niet onnodig te verlengen.

[shortcode-variabelen slug=”adsense-content”]