Blog

  • Wat zijn shortcodes in hemelsnaam eigenlijk?

    What-Are-Shortcodes-AnywayAls het je is opgevallen, is een van de vuistregels van WordPress om dingen altijd, maar dan ook altijd een beetje makkelijker te maken voor iedereen – zowel nieuwkomers als ervaren ontwikkelaars. Een van de manieren waarop ze dit doel bereiken, is door het gebruik van shortcodes.

    De WordPress.com-ondersteuningspagina definieert ze als volgt:

    shtKlinkt vrij eenvoudig. Als je vóór dit artikel nog nooit van shortcodes had gehoord en je niet weet hoe ze eruitzien: het is die archaïsche code-achtige tekst tussen vierkante haken.

    Vergeleken met normale code, wat er doorgaans zo uitziet:

    HTML5-video-tag-sample-code
    (Ehm. Wat?)

    Shortcodes zien er over het algemeen ongeveer zo uit:

    embed_shortcode
    (Appeltje-eitje.)

    …en als je een ontwikkelaar bent (of vooruit, zelfs iemand die minstens twee keer achter een computer heeft gezeten), ben je het er waarschijnlijk mee eens dat alleen al de handeling van typen en klikken om één miezerige taak gedaan te krijgen veel van je tijd kan opslokken. Om dezelfde reden dat we sneltoetsen hebben, bestaan shortcodes om dingen voor ons allemaal makkelijker te maken, zodat we tijd besparen om betere dingen te doen en te creëren; ze lijken erg veel op sneltoetsen omdat ze precies hetzelfde doel dienen.

    Laten we nu teruggaan naar dit specifieke stukje shortcode, hetzelfde als hierboven:

    embed-shortcode Deze specifieke shortcode heet de embed shortcode en is standaard ingebouwd in WordPress. Het sluit de video van de URL in je inhoud in. Als je nu in WordPress zit, kun je de bovenstaande shortcode naar je site kopiëren en plakken als je het eens wilt uitproberen.

    Shortcodes zijn echter niet de perfecte oplossing om tijd te besparen. In ons vorige artikel gaan we dieper in op waarom shortcodes ook nadelen hebben, en wat het Sandwich-team aan het bekokstoven is om ze op te lossen.

    Voor nu kun je echter gerust experimenteren met shortcodes en zien wat ze voor jou kunnen doen.

    Veel plezier met het bouwen van je site!

  • Het onbesproken probleem van shortcodes

    The-Unspoken-Problem-of-Shortcodes

    Shortcodes zijn een van de kroonjuwelen van WordPress. Shortcodes vormen de brug tussen ontwikkelaars en websitemakers, waardoor mensen vrijwel overal waar ze maar willen uitgebreide stukken inhoud kunnen plaatsen. Plugin-makers zijn dol op shortcodes, omdat dit meer flexibiliteit biedt in hoe en waar hun gebruikers hun inhoud weergeven.

    Als je niet weet wat shortcodes zijn en hoe ze eruitzien: het is die archaïsche code-achtige tekst tussen vierkante haken. Ze zien er ongeveer zo uit:

    Deze specifieke shortcode heet de embed-shortcode en is standaard ingebouwd in WordPress. Deze specifieke shortcode sluit de video van de URL in je inhoud in. Kopieer en plak de bovenstaande shortcode gewoon op je site als je het eens wilt uitproberen.

    Wat er achter de schermen gebeurt, is dat wanneer WordPress een shortcode in je inhoud tegenkomt, deze wordt verwerkt en omgezet in iets anders. In ons bovenstaande geval, telkens wanneer een

    shortcode wordt gedetecteerd, neemt WordPress de URL in de shortcode en controleert deze aan de hand van een aantal beschikbare contentproviders. Wanneer het er een vindt, haalt het de juiste iframe-insluitcode op en geeft het die in plaats daarvan weer.

    Dus wat is hier het probleem? Het klinkt eenvoudig genoeg: je voert gewoon een korte tekst met haken in en je bent klaar.

    Maak kennis met de Shortcode API..

    Shortcodes in overvloed

    De Shortcode API maakt het maken van shortcodes mogelijk voor ontwikkelaars. Hierdoor kunnen ontwikkelaars hun eigen shortcodes toevoegen aan hun plugins.

    Dit is geweldig: met slechts een kort code-achtig fragment (vandaar de naam “shortcode”) kunnen zowel beginners als gevorderde gebruikers vrijwel elk gewenst type inhoud overal plaatsen.

    WordPress heeft standaard slechts een handvol shortcodes. Het is gemakkelijk om ze uit het hoofd te typen omdat het er maar een paar zijn. Maar als je een paar plugins installeert, loopt het aantal shortcodes al snel op tot een dozijn of meer, en in sommige gevallen zelfs meer dan honderd. Elke shortcode heeft zijn eigen set attributen en instructies over hoe je ze moet gebruiken. Elke plugin heeft waarschijnlijk wel een vorm van documentatie over hoe al hun shortcodes werken en vermeldt alle beschikbare parameters voor elke shortcode. Maar je zou gek zijn als je probeert alle shortcodes en hun attributen uit je hoofd te leren.

    Het probleem is dat er geen centrale plek is waar je alle beschikbare shortcodes op je site kunt vinden en hoe je ze moet gebruiken.

    Sommigen proberen het probleem op te lossen

    Sommige plugins proberen dit probleem op te lossen door al hun eigen shortcodes in een gemakkelijk toegankelijke dropdown te presenteren. Als je er vervolgens op klikt, wordt de shortcode weergegeven, compleet met alle mogelijke attributen daarvoor. Het is niet meer nodig om het uit het hoofd te leren, en dat is een goede zaak.

    Screen-Shot-2016-06-22-at-11.27.09-AM

    Sommigen gaan verder en voegen een instellingen-pop-upformulier toe met selectievakjes en kleurkiezers om de attributen van de shortcode in te vullen.

    Screen-Shot-2016-06-22-at-11.28.54-AM

    Deze oplossing werkt min of meer. Elke plugin somt echter alleen zijn eigen shortcodes op. Dus als elke plugin zijn eigen vorm van shortcode-kiezer maakt, zul je ongetwijfeld momenten meemaken waarop je meerdere shortcode-kiezers op je scherm hebt (dit is mij al eens overkomen).

    Screen-Shot-2016-06-22-at-11.22.41-AM

    Met andere woorden: elke plugin doet zijn eigen ding en implementeert zijn eigen oplossing voor zijn eigen shortcodes. Sommige plugins voegen een nieuwe knop toe naast de knop “Media toevoegen”, of een nieuwe knop binnen TinyMCE.

    Dus nu denk je misschien: “Waarom verzamel je niet ook gewoon de shortcodes van andere plugins en neem je die ook op in je dropdown / shortcode-kiezer?” Nou, dat is precies wat ik dacht. Maar dit is gemakkelijker gezegd dan gedaan. Ik zal zo uitleggen waarom, maar laten we eerst eens kijken hoe een ideale oplossing eruit zou zien.

    De ideale oplossing

    Het perfecte plan zou zijn om een plugin te maken die alle beschikbare shortcodes op je site verzamelt, je vervolgens de lijst presenteert en je ook helpt bij het invullen van alle attributen. En telkens wanneer je een nieuwe plugin installeert, worden al die nieuw geïntroduceerde shortcodes ook aan je gepresenteerd.

    Stel je een centrale plek voor waar al je shortcodes worden geplaatst voor gemakkelijke toegang. Bij elke shortcode zou worden beschreven wat deze doet en bij welke plugin deze hoort. Stel je vervolgens voor dat voor elk beschikbaar attribuut er een label, een geschikte manier om er een waarde voor te selecteren en een beschrijving zou zijn. Je krijgt dropdowns, kleurkiezers, keuzerondjes, schakelaars en van alles te zien.

    Zoiets zou ons leven als website- en contentmakers gemakkelijker maken. Niet langer verschillende documentaties of verschillende delen van je beheeromgeving raadplegen om een gegenereerde shortcode te kopiëren voor een slider die je wilt gebruiken.

    De kanttekening

    Helaas is het op dit moment vrij moeilijk om zoiets te doen. Er is geen waterdichte manier om alle details van een shortcode te achterhalen. Je kunt een lijst krijgen van alle shortcodes, maar alleen van hun daadwerkelijke tags/namen; je kunt geen aanvullende details over hen krijgen, zoals een lijst van attributen, wat ze doen en hun types – zoals een string, een kleur of een nummer. Evenmin kun je ook maar iets van een beschrijving voor elk attribuut krijgen.

    Opmerking voor de ontwikkelaars: ja, er is een nieuw toegevoegd derde argument voor de functie shortcode_atts, maar het is geen verplicht argument. Dus tenzij elke plugin-ontwikkelaar ter wereld dit implementeert, hebben we nog steeds geen betrouwbare manier om alle attributen van een shortcode te bepalen.

    De Shortcode API biedt geen mogelijkheden voor het toevoegen van shortcode-beschrijvingen, typecasting van attributen of attribuutbeschrijvingen. En tenzij WordPress zelf een centrale plek toevoegt voor toegang tot shortcodes, betwijfel ik of deze mogelijkheid er ooit zal komen.

    Conclusie

    Op dit moment wordt de taak van het organiseren van shortcodes overgelaten aan elke afzonderlijke ontwikkelaar. Tenzij er binnen WordPress een centrale methode wordt ontwikkeld, kun je verwachten dat je meerdere “Shortcode toevoegen”-knoppen in je backend blijft zien. Of zoiets al dan niet aan de WordPress Core moet worden toegevoegd, is op zichzelf al een enorme discussie.

    Een alternatief

    Er zijn pagebuilder-plugins die dit anders aanpakken. In plaats van shortcodes programmatisch te detecteren, hebben ze shortcode-mappers waarin gebruikers elk detail van een shortcode handmatig kunnen invoeren. Zodra dat is gedaan, wordt deze beschikbaar binnen de pagebuilder. Hoewel  dit werkt, zijn deze alleen beschikbaar op je eigen site.

    Wij hier bij Page Builder Sandwich zijn bezig met het ontwikkelen van iets dat dit shortcode-raadsel hopelijk kan oplossen. Meld je hieronder aan voor onze nieuwsbrief om op de hoogte te blijven van onze voortgang.

  • Stijlvolle kaarten toevoegen aan je pagina is een interactieve ervaring

    Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2Je kunt nu kaarten in je pagina-ontwerpen plaatsen met Page Builder Sandwich!

    Het is vreemd om enthousiast te zijn over kaarten. Je pakt de Google Maps-URL en sluit deze in. Of je downloadt online een kaartplugin en plaatst een shortcode. Of misschien heeft je andere page builder er al een en kun je er altijd een toevoegen wanneer je wilt. Maar de reden waarom we zo enthousiast zijn, is dat we het toevoegen van kaarten naar een heel nieuw niveau hebben getild.

    Hier is een voorvertoning:

    De oude, saaie manier om een kaart toe te voegen

    Zo voeg je een kaart toe met een typische page builder:

    1. Je sleept een nieuw kaartelement,
    2. Je vult de breedtegraad en lengtegraad in de velden in,
    3. Je vult andere waarden in de velden in zoals kaarthoogte, kaartbreedte, vinkt het selectievakje voor wegstijl aan, enz.,
    4. Klikt op voorvertoning, bekijkt hoe het eruitziet en besluit dat je iets moet veranderen om het er cooler uit te laten zien,
    5. Gaat terug naar de page builder en wijzigt de waarden, en herhaalt vervolgens stap 4 hierboven.

    De Page Builder Sandwich-manier om een kaart toe te voegen

    Kaarten op websites zijn interactief – je kunt over de kaart bewegen en in- en uitzoomen. Daarom dachten we: waarom halen we niet al het giswerk weg en stellen we mensen in staat om direct met de kaart te interageren tijdens het bouwen van de pagina?

    Hier zie je hoe je een kaart toevoegt met Page Builder Sandwich:

    1. Je voegt een kaartelement toe,
    2. Je typt de breedtegraad en lengtegraad of het adres in waarop je de kaart wilt centreren,
    3. Je beweegt over de kaart en zoomt in of uit om het gewenste uiterlijk te krijgen,
    4. Voeg toffe kleuren toe aan je kaarten die bij jouw stijl passen,
    5. Klik op opslaan.

    Onze manier is veel leuker en intuïtiever. Je communiceert in feite met de kaart zoals je dat met een normale Google Map zou doen.

    Gekleurde kaarten of stijl ze met SnazzyMaps

    Een geweldige functie die we hebben toegevoegd, is de mogelijkheid om je kaarten te tinten en van kleur te voorzien, en het is supereenvoudig om te doen. (Dit is alleen voor de premiumversie). Als je je kaart wilt inkleuren, klik je gewoon op onze kleurkiezer en kies je een kleur, waarna je kaart meteen verandert.

    Hier is er een die we roze hebben getint:

    Page Builder Sandwich ondersteunt ook uitgebreidere kleurenschema’s via SnazzyMaps. Ze hebben een enorme lijst met door gebruikers bijgedragen kleurenschema’s, en je kunt je eigen schema maken als je meer controle over de kleuren wilt.

    Zoek gewoon het gewenste kleurenschema, kopieer de code en plak deze in Page Builder Sandwich. Het kleurenschema wordt meteen op je kaart toegepast.

    Hier is een cool kleurenschema genaamd papuportal dark van SnazzyMaps:

    Plaats kaarten waar je maar wilt

    Er zijn nog veel meer toffe dingen die je met kaarten kunt doen – zoals ze toevoegen in rijen over de volledige breedte voor een dramatischer effect. Je kunt ze desgewenst ook toevoegen in een carrousel of binnen tabbladen (een functie die binnenkort beschikbaar is).

    Als je Page Builder Sandwich nog niet hebt, kun je de premiumversie uitproberen door hierboven op de link “Live Demo”.

  • 5 redenen waarom witruimte belangrijk is

    Reasons-Why-Whitespace-MattersIn feite is witruimte, in de meest basale definitie, de ruimte rond en tussen alle elementen van een compositie die onbenut blijft. Het is niet zomaar een verspilling van schermruimte, zoals de meeste website-eigenaren denken. Wanneer het goed wordt gebruikt, kan witruimte juist voordelen bieden om een product beter te promoten. Het is een belangrijke sleutel tot het creëren van een goed ontwerp en het maakt een website in elk opzicht beter.

    Hoewel de naam witruimte suggereert dat de ruimte wit is, hoeft het niet altijd letterlijk wit te zijn. Witruimte kan in feite elke kleur hebben—het kan zelfs een subtiel patroon of textuur bevatten. Het is een gebied waarop je niet wilt dat het oog zich richt. Het wordt ook wel negatieve ruimte genoemd.

    Dus, waarom is witruimte belangrijk?

    newsfeed
    Afbeeldingsbron: News Feed

    Reden #1: Verbetert de leesbaarheid

    Witruimte tussen basislijnen en alinea’s helpt mensen daadwerkelijk om alle inhoud op de site comfortabel te lezen. Het aanpassen van kleine details van je site (zoals regelafstand of letterafstand) kan een enorm verschil maken om het lezen gemakkelijker te maken.

    Het doel is om mensen te stimuleren om verder te lezen door lay-outs te ontwerpen die prettig zijn voor de ogen.

    hpmagicwords
    Afbeeldingsbron: HP Magic Words

    Reden #2: Versnelt de interactie

    Laten we eerlijk zijn: de meeste van je bezoekers hebben niet genoeg geduld om grondig te kijken wanneer ze door websites bladeren. Wanneer een website er rommelig uitziet, leidt dit gebruikers af van het vinden van wat ze zoeken.

    Witruimte moet helpen om de kijker over de pagina te leiden. Minder elementen die strijden om aandacht plus een juist gebruik van witruimte kunnen afleidingen voorkomen die bezoekers vertragen.

    google
    Afbeeldingsbron: Google

    Reden #3: Leid de aandacht naar de juiste elementen

    Witruimte kan gebruikers visuele aanwijzingen geven over waar ze moeten kijken. Bij juist gebruik helpt witruimte informatie te benadrukken en de aandacht te vestigen op een specifiek gebied op je website.

    Onthoud: als alles opvalt, valt niets op.

    Afbeeldingsbron: Pocket Penguins

    Reden #4: Eerste indrukken doen ertoe

    De look-and-feel van een website is de belangrijkste sleutel tot een goede eerste indruk. Een goede eerste indruk leidt vaak tot een langere bezoekduur. Te weinig witruimte kan ervoor zorgen dat je website er goedkoop en onbetrouwbaar uitziet. Bezoekers zullen de site of het merk niet geloofwaardig vinden, tenzij het er aantrekkelijk uitziet. Een goede hoeveelheid witruimte helpt de juiste toon voor je website te zetten. Witruimte kan een manier zijn om vindingrijkheid, frisheid en soms elegantie te communiceren.

    Tip: hier is een idee over hoe je je webdesign eenvoudig en vertrouwd.

    flockknitwear
    Afbeeldingsbron: Flock Knitwear

    Reden #5: Helpt ademruimte en balans te creëren

    Een evenwichtig ontwerp betekent niet per se symmetrisch. Een groot ontwerpelement kan in evenwicht worden gebracht door een paar kleinere. Het toevoegen van witruimte is een uitstekende manier om ontwerpelementen van verschillende afmetingen op je pagina in balans te brengen. Creëer een flow zodat de ogen van de gebruiker niet alle kanten op schieten. Een goed ontwerp moet in staat zijn de gebruiker van het ene naar het andere punt te leiden zonder de bezoeker in verwarring te brengen.

    Conclusie

    Denk de volgende keer dat je een website bezoekt en er even blijft hangen eens na over wat ervoor zorgde dat je bleef en las. Denk je dat de regelafstand een artikel gemakkelijker leesbaar maakt? Zorgt de ervaring ervoor dat je steeds weer wilt terugkomen voor meer? Had je moeite om de navigatie te vinden?

    Let op de goede toepassing van witruimte op de website. Als je denkt dat het ook kan werken op jouw website, leer dan toe te passen en te beheren hoeveel ruimte je moet toewijzen aan je elementen, totdat je denkt de juiste toon en leesbaarheid te hebben overgebracht zonder de gewenste “flow” van je website op te offeren.

    Het uiteindelijke doel van elke website is communicatie. Visuele aantrekkingskracht gaat hand in hand met het succes van je website.

  • WordPress.com VS WordPress.org

    Wordpress-Com-VS-Wordpress-OrgAls je relatief nieuw bent in het bouwen van websites, is de kans groot dat je waarschijnlijk nog niet bekend bent met het grote WordPress.com versus WordPress.org-debat. Misschien wist je zelfs niet dat de een of de ander bestond, en wat de verschillende voor- en nadelen van elk zijn. Dus wat is, vraag je je misschien af, dit grote debat tussen het gebruik van WordPress.com en WordPress.org? Is de een gewoon een goedkope rip-off die wacht om aangeklaagd te worden?

    Nou, nee.

    Het debat gaat, in een notendop, over welke van deze twee WordPress-diensten beter past bij de website die je probeert te bouwen. Geen van beide is een rip-off van de ander, en beide sites zijn eigendom van WordPress; het is gewoon zo dat de een (.com) een gebruiksvriendelijkere versie is voor niet-ontwikkelaars dan de ander, en .org heeft veel minder beperkingen wat betreft het bouwen van websites in vergelijking met .com.

    “Maar hoe weet ik welke ik nodig heb?”

    Het antwoord op deze vraag hangt helemaal af van de behoeften van je toekomstige website. Er is niet één WordPress-entiteit die objectief de “betere” of zelfs “beste” versie is om te gebruiken. De twee hebben hun eigen unieke functies en een gelijk aantal voor- en nadelen.

    WordPress.com: Waarom en wanneer zou ik hiervoor kiezen?

    WordPress.com zorgt voor de basisbenodigdheden voor jou, waardoor je je meer kunt richten op de content van je site. Het is een sitebuilder die volledig wordt beheerd en gehost door een bedrijf genaamd Automattic. Je krijgt premium hosting, back-ups, beveiliging en dergelijke. Dit betekent dat je je veel gemakkelijker op de content van je site kunt richten, vergeleken met urenlang bezig zijn om alles vanaf nul op te bouwen.

    Houd er echter rekening mee dat WordPress.com ook zijn eigen beperkingen heeft. Hoewel je je misschien minder zorgen hoeft te maken over het onderhoud van de technische werking van je site, moet je er rekening mee houden dat je waarschijnlijk niet zoveel vrijheid hebt als je zou willen. Hoewel het aanpassen van de interface van je site misschien geen probleem is (WordPress.com biedt bijvoorbeeld een heleboel thema’s), kan het toevoegen van bepaalde functies en elementen in de vorm van plug-ins een probleem worden, vooral als je site specifieke functionaliteiten nodig heeft die niet beschikbaar zijn op WordPress.com.

    Hoe je een website onderhoudt, is een heel ander verhaal. Het hangt er sterk van af of 1.) je geen WordPress-ontwikkelaar bent, 2.) je niet van plan bent om te leren programmeren, of 3.) weinig of geen tijd hebt om dat te doen.

    WordPress.org: Wanneer is het tijd om dit te overwegen?

    Een vuistregel bij het overwegen van WordPress.org is wanneer je op zijn minst een beetje bekend bent met hoe code werkt, of bereid bent wat tijd te investeren om het te leren. Aangezien WordPress.org een zelf-gehoste versie van WordPress is, kun je je handen zo vuil maken als je zelf wilt. Bovendien heb je de vrijheid om er zoveel of zo weinig aan te knutselen als je wilt. Je bent zelf verantwoordelijk voor het vinden van je eigen host, het instellen van je eigen beveiligingsback-ups en het algemene onderhoud van de website – en nog belangrijker, op je eigen voorwaarden.

    “Maar wacht eens, waarom zou ik dat willen? Is het niet juist het doel van WordPress om het bouwen van een site gemakkelijker te maken?”

    …Niet helemaal. Zie het zo: The Daily Post maakt een uitstekende vergelijking tussen WordPress.org en WordPress.com, op een manier waarop zelfs de grootste noob (zoals ikzelf) de essentie meteen begrijpt.

    Volgens hen moet je WordPress.com zien als iets waar je niet het volledige eigendom over hebt. Neem bijvoorbeeld je 15-jarige zelf, die nog bij je ouders woont. Als je je slaapkamer wilde schilderen, moest je eerst toestemming vragen aan je ouders (die natuurlijk de volledige eigenaar van het huis zijn, inclusief jouw kamer). Technisch gezien is de kamer van jou, maar aan het eind van de dag… eigenlijk ook weer niet.

    Dus als je drastische veranderingen moet of wilt aanbrengen (zoals je muren schilderen of de kamer laten uitbouwen), moet je nog steeds overleggen en/of een compromis sluiten met de werkelijke eigenaren van het huis, oftewel je vader en moeder. Een voordeel hiervan is echter dat wanneer de zekering in de kelder doorslaat of de airco stopt met werken, je ouders het regelen en jij je nergens zorgen over hoeft te maken.

    WordPress.org daarentegen is iets wat je uit eigen beweging vrij kunt aanpassen en naar je hand kunt zetten. Dit kan worden vergeleken met wanneer je op je 18e eindelijk uit huis gaat en een eigen appartement krijgt. Omdat je het volledige eigendom over je woning hebt, hoef je met niemand een compromis te sluiten om je muren te schilderen in die kleur waar je moeder altijd een hekel aan had; je hebt de vrijheid om zelf de beslissing te nemen en/of iemand in te huren die aan jouw eisen voldoet om het voor je te doen. Bovendien heb je ook de vrijheid om precies te kiezen welke airco je in je woonkamer wilt. Het is alleen zo dat als hij kapotgaat, je een monteur moet inhuren om hem te repareren, of zelf moet uitzoeken wat er mis is en hoe je het oplost (wat niet zo erg is, want hé, weer een les geleerd, en leren is goed).

    Inmiddels heb je hopelijk een duidelijker beeld gekregen van de grote verschillen tussen WordPress.com en WordPress.org. Maar in een notendop:

    installeer zoveel of zo weinig als je wilt thema’s zijn beperkt tot uitsluitend WordPress-thema’s, je moet een bepaald bedrag betalen om van advertenties af te komen.Je hebt bijna volledige controle over je site; je kunt je eigen thema’s toevoegen, aanpassen of zelfs bouwen.

    Controle over content is beperkt;

    WordPress.com WordPress.org
    Volledig gehost door WordPress; alle basisvoorzieningen zijn geregeld. Zelf-gehost; kies je eigen basisvoorzieningen, of kies betere.
    Functies zijn beperkt tot wat WordPress.com biedt Duizenden functies in de vorm van plug-ins;

    Dit zijn enkele vergelijkingen die komen kijken bij het afwegen van de verschillen tussen de twee. Kiezen tussen beide komt uiteindelijk neer op de hoeveelheid vrijheid die je wilt bij het maken van je site, en hoeveel middelen (tijd, moeite, geld, enz.) je bereid bent ervoor op te offeren. Onthoud dat dit allebei cruciale opties zijn om af te wegen voordat je beslist welk WordPress-platform het beste bij je past. Haast je dus niet bij het nemen van een beslissing!

    Veel succes met het bouwen van je website!

  • Waarom WordPress?

    Why-WordpressEen belangrijk ding om te overwegen bij het bouwen van je eerste website – of je nu een bedrijf bent, een freelancer, of eigenlijk wat of wie dan ook – is dat niet iedereen bedreven is in de taal van code en softwareontwikkeling. Je kunt bijvoorbeeld een chef-kok zijn die zijn recepten online wil publiceren. Je kunt ook een kunstacademiestudent zijn die een professioneel ogend portfolio nodig heeft, of een start-up die een eigen site nodig heeft. Wat het ook is, feit blijft dat hoewel sommigen van ons misschien bekend zijn met de basis van code, we niet allemaal fulltime ontwikkelaars zijn, en dat niet iedereen die een site nodig heeft of wil, weet hoe je er een vanaf de grond opbouwt. Dit is waar WordPress van pas kan komen. Dan komt de vraag: “Waarom WordPress?”

    REDEN #1

    WordPress is een contentmanagementsysteem, wat het volledig gebruiksvriendelijk maakt.

    Het eerste wat je moet weten is dat WordPress een Content Management System (of CMS) is. Eenvoudiger gezegd betekent dit dat WordPress zijn gebruikers in staat stelt websites te maken zonder dat ze code vanaf nul hoeven te schrijven. Het heeft een systematische, georganiseerde interface waarmee je constant alles onder controle kunt houden zonder af en toe met code te hoeven knutselen.

    Vergeleken met het bouwen van een website vanaf nul, wat er meestal zo uit zou zien:

    screenshot-1 Begin je met een Content Management System met zoiets als dit:

    WordPress
    De back-endinterface van WordPress. Beheren en maken van websites wordt eenvoudiger met een CMS.

    Je vraagt je misschien af: “WordPress lijkt geweldig, maar wat als het niet de functies heeft die ik voor mijn site wil?”, of “wat als ik een kaart, een muziekspeler, of een caching-engine wil, of een betrouwbaarder beveiligingssysteem?”

    …Technisch gezien heeft WordPress waarschijnlijk wel die functie die je wilt, en die komt dan in de vorm van een WordPress-plugin.

    REDEN #2

    Plugins: de kers op de WordPress-taart

    Als je bang bent dat WordPress die specifieke functie die je misschien op je site wilt niet bevat, geen zorgen: waarschijnlijk heeft het die wel.

    Plugins zijn “uitbreidingsfuncties” die bestaan om de functionaliteit van je WordPress-site te vergroten. Als je een ondernemer bent die een contactformulier nodig heeft voor je site, is het handig om te weten dat WordPress dat van zichzelf niet heeft, maar er zijn talloze plugins die dat wel hebben. En omdat WordPress open source is – wat betekent dat vrijwel iedereen kan bijdragen aan de ontwikkeling ervan – worden er regelmatig nieuwe plugins gemaakt. Je kunt dat contactformulier krijgen dat je wilt, en meer. Je krijgt de vrijheid om andere plugins toe te voegen, variërend van social-sharing-knoppen tot kaarten, en zelfs extra beveiligingsmaatregelen voor je site, naast vele, vele andere functies en uitbreidingen. Vertel me nu niet dat dat niet handig klinkt.

    Op dit moment heeft WordPress duizenden van deze plugins – en sommige zijn zelfs gratis beschikbaar en/of hebben gratis versies, waaronder PBS.

    REDEN #3

    Open source: de WordPress-community

    WordPress is open source. Dit betekent dat het iedereen vrij staat om bij te dragen aan de ontwikkeling ervan, en het iedereen vrij staat om de basiscode te bestuderen om meer te leren over softwareontwikkeling, en zelfs over WordPress zelf. Er zijn zelfs bedrijven die volledig gewijd zijn aan het maken en ontwikkelen van WordPress-gerelateerde producten, zoals de plugins en thema’s (zoals wij!)

    Omdat WordPress open source is, zijn er talloze gebruikers, ontwikkelaars en zelfs ontwerpers die voortdurend samenwerken en elkaar zelfs helpen met WordPress-gerelateerde problemen. Op deze manier krijg je echte hulp van echte mensen, en leer je tegelijkertijd van elkaar. Dit is iets wat je typische klantenservice bijna nooit voor elkaar krijgt.

    REDEN #4

    WordPress is betrouwbaar.

    CNN, het officiële Star Wars-blog, Time Magazine en zelfs (jawel!) Beyoncé hebben allemaal sites die op WordPress draaien, naast vele anderen. Deze grote namen zijn ook niet het enige dat de legitimiteit van WordPress ondersteunt – volgens Treehouse.com draait ongeveer 25% van alle sites op het web op WordPress. Gezien hoeveel miljoenen en duizenden websites er bestaan… nou, 25% is een behoorlijk groot aantal.

    REDEN #5

    Aanpassingen in overvloed!

    WordPress heeft enorm veel thema’s beschikbaar voor jou en je site. Je bent vrij om te kiezen uit gratis versies, betaalde versies, of er zelfs zelf een te bouwen (of iemand in te huren om het voor je te bouwen!).

    REDEN #6:

    Het is gratis.

    Ja, dat lees je goed. Met lokale ontwikkeling is WordPress helemaal gratis en je kunt het met één klik op de knop op je computer installeren. In plaats van een ontwikkelaar in te huren, kun je ook je bestaande codekennis gebruiken om meer te leren over hoe WordPress werkt (en leren is altijd goed).

    …en als je geen tijd hebt om je helemaal in WordPress en het bouwen van websites te verdiepen, kun je natuurlijk altijd een handige pagebuilder-plugin nemen en die van ons uitproberen.

    Onthoud dat de mogelijkheden met WordPress eindeloos zijn, en dat je echt geen genie hoeft te zijn om te snappen hoe het allemaal werkt!

    Het gebruik van WordPress kan je veel tijd, geld en moeite besparen. En in een tijd waarin die middelen schaars zijn, is het goed om te weten dat WordPress-sites, bijbehorende plugins (zoals PBS!), thema’s en vooral de community je enorm kunnen helpen en alles veel makkelijker voor je kunnen maken.

    Veel succes met het bouwen van je website!

  • Shortcode-koppeling: Hoe PBS meer dan 800 plug-ins en 2.000+ shortcodes gaat ondersteunen

    How-PBS-Supports-800-Plugins-2000-ShortcodesWhen I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

    Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

    I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

    I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

    I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

    De afgelopen weken heeft het PBS-team een kaartelement toegevoegd, en ook een tabbladen-element.

    Het zou nu overkomen als een vrij eenvoudige en gewone routine voor ons om elke paar dagen een nieuw element toe te blijven voegen.

    But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

    And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

    I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

    Well, the simple answer is yes. Yes it is.

    And we’ve managed to achieve this feat through shortcode mapping.

    What is Shortcode Mapping?

    Shortcode mapping
    Shortcode mapping makes building shortcodes more friendly.

    Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    De voordelen van een dergelijk systeem zijn aanzienlijk:

    1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

    2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

    3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

    4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

    5.) Overall faster page building time!

    Shortcode-mapping is echter niet nieuw, en een aantal pagebuilders heeft het al. Maar wat maakt de onze anders?

    Hoe shortcode-mapping werkt in andere pagebuilders

    Lonely times
    Each person/site does their own shortcode mapping.

    Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

    In dit scenario komt de last van shortcode-mapping bij jou, de gebruiker, te liggen. Als je wilt dat al je shortcodes volledig worden gekoppeld met alle attributen (en met de mooie kleurkiezers en andere dingen), moet je ervoor zorgen dat je elk afzonderlijk detail van werkelijk elke shortcode invoert.

    What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

    Hoe shortcode-mapping werkt in Page Builder Sandwich

    Shortcode mapping is centralized
    Shortcode mappings are shared across all users.

    Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

    Dit levert ons heel wat mooie voordelen op:

    1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
    2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
    3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
    4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
    5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
    6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!

    In case you’re interested in reading into how we made all of this possible,  we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

    Meld je aan voor onze nieuwsbrief!

    You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

    So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!

  • 3 dingen om te overwegen voordat je in pagebuilders duikt

    3-Things-to-Consider-Before-Diving-Into-Page-BuildersEr is een kleine kans dat je hier bent omdat je hebt gehoord dat PBS wellicht een van de snelste manieren is om een site te bouwen. Hoewel pagebuilders over het algemeen bestaan om dingen eenvoudiger te maken, zijn er toch een paar zaken waar je rekening mee wilt houden voordat je dieper in dit specifieke domein van WordPress-ontwikkeling duikt.

    WordPress leren: een cruciale voorwaarde voor pagebuilders

    Dit is waarschijnlijk het meest voor de hand liggende punt op deze lijst, maar nog steeds het belangrijkste. Pagebuilders zijn helaas niet echt los verkrijgbaar. Ze komen in de vorm van plugins in WordPress, die je moet installeren en leren kennen om ermee te kunnen werken. Wees gerust dat WordPress een van de eenvoudigste en meest legitieme manieren is om een website te maken. Je zult er geen spijt van krijgen om wat technische kennis op te doen, gezien het tijdperk waarin we nu leven. Er is een verschil tussen WordPress.com en WordPress.org, en weten welke aansluit op jouw behoeften bespaart ook tijd!

    Als je enigszins geïntimideerd bent door de hoeveelheid aan technische termen in dit artikel, wees dan niet bang. Er zijn een paar nuttige sites die je kunt bezoeken om je op weg te helpen. Enkele hiervan zijn WordPress Codex en Treehouse. Hier vind je WordPress-tips en informatie over het bouwen van websites, afhankelijk van je behoeften en kennisniveau.

    Misschien wil je eerst het water testen, gewoon voor de zekerheid

    Het is altijd een goed idee om gratis en/of proefversies uit te proberen voordat je grote aankopen doet waar je in de toekomst misschien spijt van krijgt . Gelukkig worden de meeste pagebuilders geleverd met gratis/demoversies. We kunnen natuurlijk ook kijken naar een heleboel betrouwbare recensies over pagebuilders terwijl andere bronnenpagebuilders vergelijken en tegenover elkaar zetten.  Zorg ervoor dat je je opties zorgvuldig afweegt!

    Naast het doornemen van artikelen en recensies is een van de dingen die we zo waarderen aan WordPress dat er een enorme community achter zit. Er zijn individuen, teams en zelfs bedrijven die bereid zijn hun mede-WordPress-gebruikers een helpende hand te bieden, vooral nieuwkomers zoals jij! De community werkt in feite meer volgens een pay-it-forward-principe dan op basis van voor-wat-hoort-wat.

    Ontwerp maakt een enorm verschil

    WordPress-liefhebber Donna Fontenot Cavalier maakt een heel goed punt over drag-and-drop-pagebuilders en het belang van een basisontwerp. Hoewel drag-and-drop-builders zoals PBS je veel tijd kunnen besparen, zijn basiskennis en ten minste enige affiniteit met esthetiek een ander cruciaal aspect om rekening mee te houden bij het maken van websites. Stel je een scenario voor: stel dat je een handige pagebuilder naar keuze bemachtigt: dat is geweldig! Maar stel dat je iemand bent die niet echt het beste oog heeft voor kunst, design en functionaliteit: oei.

    Maak je echter geen zorgen. Page Builder Sandwich is niet zomaar een pagebuilder; ons team zet zich er ook voor in om andere WordPress-gebruikers een handje te helpen. Dus als je wat problemen ondervindt met betrekking tot design, maak je geen zorgen: we hebben een heleboel artikelen hier op het PBS-blog met veel nuttige tips om je op weg te helpen. Zo kun je meer doen, meer leren en je minder zorgen maken.

    Onthoud: als je vragen of twijfels hebt over pagebuilders, of over iets anders dat met de bovenstaande punten te maken heeft, laat dan gerust een reactie achter in het commentaargedeelte hieronder. We helpen onze klanten altijd graag verder.

    Veel succes met het bouwen van je site!

  • 5 eenvoudige tips om je website er goed uit te laten zien

    5-Simple-Ways-To-Make-Your-Website-Look-GoodIn general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

    Hier zijn enkele basistips over wat u kunt doen om het ontwerp van uw website te verbeteren.

    Add high-quality images

    You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

    Kies de juiste kleuren

    booneselections
    Lawrence Boone Selections uses black to add a sense of luxury and value to their website
    juicebox
    Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

    Het kleurenschema van een website speelt een grote rol bij het creëren van de juiste toon en sfeer voor uw merk. Een mooie kleur kiezen betekent niet noodzakelijk dat het de juiste is. Elke kleur zendt een andere boodschap en reactie uit. Kleuren zijn een van de eerste dingen die sitebezoekers opmerken en het kan daadwerkelijk van invloed zijn op het succes van uw website.

    Kies hoogstens twee tot drie basiskleuren voor uw ontwerp. Als u de behoefte voelt om meer kleur toe te voegen, kunt u gebruikmaken van de tinten en schakeringen van uw basiskleuren. In de kleurentheorie is een tint (tint) de menging van een kleur met wit, wat de lichtheid verhoogt, terwijl een schaduw (shade) de menging van een kleur met wit is, wat de lichtheid vermindert.

    Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

    Gebruik contrasterende lettertypen

    Font Pairing There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

    Het combineren van twee lettertypen kan zelfs voor ontwerpers lastig zijn. U kunt het simpel houden door te experimenteren met twee verschillende fonts uit één lettertypefamilie. Als een tweede lettertype nodig is, kies dan iets dat goed contrasteert met uw eerste lettertype. Normaal gesproken werkt het combineren van een schreeflettertype (serif) en een schreefloos lettertype (sans-serif) goed samen. Een andere belangrijke tip is om lettertypen te kiezen die passen bij de stijl van uw bedrijf. U kunt het mooiste lettertype ter wereld hebben, maar wanneer het in de verkeerde context wordt gebruikt, kan het er nog steeds vreselijk uitzien.

    Houd het overzichtelijk met witruimte

    Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

    Maak het mobielvriendelijk

    People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

    Extra tip: Het gebruik van Page Builder Sandwich op uw website zorgt er automatisch voor dat mobiele weergave wordt ingeschakeld en aangepast voor het mobiele schermformaat.

    Conclusie

    Onthoud: Het onderschatten van de kracht van design is een van de ergste fouten die u kunt maken bij het bouwen van uw website. U hoeft natuurlijk niet overdreven veel moeite te doen bij het ontwerpen van uw website, maar ondertussen kan het simpelweg opvolgen van deze tips ervoor zorgen dat uw site geen gevoelens van afkeuring oproept bij uw publiek.

  • Hoe je eenvoudige hero headers maakt in 3 eenvoudige stappen

    How-to-Create-Basic-Hero-Headers-2

    061716_PBS_Jihan_How to Create Basic Hero Headers_Done

    When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

    Wat zijn Hero Headers?

    The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

    Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

    Volg de onderstaande snelle stappen om aan de slag te gaan met uw allereerste PBS hero header:

    Stap 1: Kolom invoegen en rijbreedte aanpassen

    061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

    What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

    Row Width-Normal

    Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

    Row Width-Full-Width

    Full-Width – Background, text and other elements fill the entire width of your browser window

    Row Width-Full-Width Retain

    Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

    In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

    Stap 2: Marge aanpassen om witruimte te creëren

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

    Stap 3: Achtergrond toevoegen met overlays van tekst en elementen

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

    061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

    061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

    Tip #2: Overweeg voor merkelementen een wit of zwart logo te gebruiken, zodat het niet vloekt met een kleurrijke achtergrondafbeelding.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

    Vergeet niet uw werk op te slaan en u bent helemaal klaar!

    Gefeliciteerd met het maken van uw eerste hero header met PBS! Mocht dat echter niet lukken, geen zorgen; vanaf nul beginnen is wellicht eenvoudiger met PBS, dus het zou niet veel moeite moeten kosten.

    Veel plezier met het bouwen van uw website!