Story’s voor WordPress met Google Web Stories (1)

Story’s voor WordPress met Google Web Stories (1)

Story’s zijn super populair op sociale media. Het eerste deel van deze workshop laat zien hoe je professionele story’s kunt creëren met Google Web Stories en de bijbehorende WordPress-plug-in.

Wat zijn Web Stories?

Web Stories zijn slideshows met interactieve content zoals je die al kent van social media. Een typische story bestaat uit een combinatie van foto’s, video’s, geluid en tekst die je als slides kunt doorbladeren.

Een groot voordeel van Web Stories is dat je story’s kunt maken die onafhankelijk zijn van een social mediaplatform, zoals Instagram, Tik Tok of Facebook. Deze story’s blijven altijd toegankelijk, omdat je er zelf controle over hebt. Informatieve verhalen ranken bovendien goed op Google en andere zoekmachines.

Google Web Stories zijn gebaseerd op de AMP-standaard (Accelerated Mobile Pages) die Google zelf heeft geïntroduceerd. Dit is een HTML5-gebaseerde standaard die webcontent heel licht maakt, zodat het laden op mobiele apparaten als smartphones veel sneller plaatsvindt. De verhalen zijn bovendien handig te embedden en daardoor makkelijk op meerdere pagina’s in te zetten. Je kunt ook een speciale URL-sectie (mijn-website.nl/web-stories/mijn-story/) aanmaken voor je verhalen.

De WordPress-plug-in Web Stories stelt zelfs niet-technische bloggers in staat om Google Web Stories te ontwerpen en te publiceren. Wij lopen dit proces met je door.

Een web story met sjabloon aanmaken

Als je de Web Stories-plug-in hebt geïnstalleerd en geactiveerd, kun je meteen aan de slag. In het menu vind je het nieuwe item Stories.

Het is zinvol om onder Settings eerst je logo te uploaden. Dat is dan voor alle story’s beschikbaar als herkenningsteken. Het logo moet minstens 96×96 pixels groot zijn. Heb je nog geen logo? Dan kun je er eentje maken, bijvoorbeeld op de website canva.com.

Je eigen websitelogo maken met canva.com
Een merk voor je web story’s: upload je websitelogo

Via Explore Templates vind je een handvol professioneel ontworpen sjablonen waarin je alleen maar beelden en teksten hoeft te plaatsen om je eigen story’s te bouwen. Door op Use Template te klikken, kun je het betreffende ontwerp overnemen voor je eigen story. Vervolgens kun je het verder bewerken. De sjablonen zijn ook een goede manier om vertrouwd te raken met het maken van web story’s.

Google Web Stories: Om een nieuwe story aan te maken, kies je eerst een template.
Met de standaardsjablonen kun je snel en gemakkelijk professioneel ogende story’s maken.

Je kunt trouwens ook je eigen story’s gebruiken als sjabloon voor nieuwe story’s. Ga daarvoor naar het overzicht My Stories, klik op de drie stippen onder de titelafbeelding van het verhaal en kies de optie Duplicate. Overigens werkt dit ook met story’s die nog niet gepubliceerd zijn (Draft), dus je kunt je eigen kleine sjabloonbibliotheek maken. Dan hoef je niet telkens met een volledig witte pagina te beginnen als je een nieuwe story maakt.

Google Web Stories: bestaande stories kun je handig hergebruiken
Duplicate-functie: gebruik je eigen story’s als sjablonen voor nieuwe story’s.

Web Stories in WordPress met individueel design

Maar je kunt natuurlijk ook je eigen story’s maken zonder sjablonen te gebruiken, door de menuoptie Add New te gebruiken of de knop Create New Story. Denk er bij het maken van foto’s aan dat story’s meestal in staand formaat gemaakt worden, omdat ze bedoeld zijn om op een smartphone te bekijken.

Een story bestaat uit verschillende bladzijden, die elk verschillende lagen hebben. Elke laag bevat een inhoudselement, zoals beeld, video, tekst, of geometrische vormen. Je maakt dus elke pagina uit verschillende elementen, die je elk afzonderlijk kunt bewerken. Je vindt de juiste tools aan de rechterkant van de story-editor. Klik, houd vast en versleep elementen om de volgorde van de lagen te veranderen.

Er zijn vijf basiselementen waarmee je de pagina’s kunt vormgeven:

  • Zelf geüploade foto’s en video’s.
  • Een bibliotheek met kant-en-klare, vrij te gebruiken afbeeldingen, video’s en GIF-animaties.
  • Tekstvelden.
  • Geometrische vormen zoals cirkels, sterren en dergelijke.
  • Paginalay-outs.
Google Web Stories: vijf basiselementen waarmee je de pagina's kunt vormgeven
Vijf tabbladen voor de verschillende soorten content voor je story’s.

Bij het gebruik van het materiaal uit de bibliotheek van visuals, video’s en animated GIFs moet je de gebruiksvoorwaarden van de respectievelijke leveranciers naleven: Unsplash, Coverr en Tenor. Maar in feite is het gebruik ervan gratis en ook vrijgegeven voor commerciële doeleinden. Je kunt de exacte voorwaarden nalezen op de hulppagina’s van Google.

Opmaaksjablonen voor pagina’s

In tegenstelling tot de complete verhaalsjablonen zijn de Page Layouts in Editor niet meer dan kant-en-klare, professioneel ogende vormgevingen voor afzonderlijke pagina’s binnen een story. Je gebruikt ze bijvoorbeeld voor tekst in een bepaalde opstelling met achtergrond, animatie en grafische vormgeving.

Google Web Stories: Page Layouts zijn kant-en-klare, aanpasbare designs voor afzonderlijke pagina's
Page Layouts: kant-en-klare, aanpasbare designs voor afzonderlijke pagina’s.

Page Layouts zijn het uitgangspunt voor een enkele pagina binnen je story. Je bouwt dan voort op dit basisontwerp met aangepaste elementen. Je voegt afbeeldingen toe, past tekst aan, enzovoort. Met deze page layouts kun je veel tijd besparen en een professioneel uitziende vormgeving voor je story’s bereiken, zelfs als je geen erg creatieve blogger bent.

Pagina-elementen invoegen en bewerken

De editor is vrij intuïtief in gebruik. Je uploadt bijvoorbeeld afbeeldingen en sleept ze dan eenvoudig naar de pagina. De plug-in maakt automatisch een laag voor het element. Hulplijnen helpen je om elementen bijvoorbeeld precies in het midden uit te lijnen.

Je moet trouwens schermvullende foto’s uploaden in een vrij hoge resolutie. Google raadt minstens 828×1792 pixels aan. Als je een afbeelding op een bestaande geometrische vorm sleept, wordt de afbeelding in die vorm ingevoegd. Zo maak je beelden in de vorm van een ster of een cirkel.

Google Web Stories: je kunt afbeeldingen ook in een geometrische vorm invoegen
Een afbeelding in een geometrische vorm invoegen

Om een element te veranderen, klik je erop. Je ziet dan ‘handvatten’ die je met de muis kunt verslepen, zodat je de grootte kunt instellen. In de rechtermarge in het tabblad Design vind je talloze opties, elk geselecteerd voor het juiste element.

Je kunt het beste een beetje experimenteren met de vele instellingen. Let ook op de Link-optie om een weblink aan een element toe te voegen. Een tweede optie, Layer, stelt je in staat om een willekeurige transparantie aan een laag toe te kennen.

Animaties

Een andere functie die je gemakkelijk over het hoofd ziet, is de mogelijkheid om elementen te animeren. Je animeert hiermee bijvoorbeeld een tekst, afbeelding of grafieken. Hiertoe selecteer je het element op de story-pagina en vervolgens verschijnen de bewerkingsmogelijkheden voor dit elementtype in de rechterkolom. Onderaan vind je de optie Animation.

Google Web Stories: animaties maken
Elk element op een storypagina kan geanimeerd worden.

Hier stel je in hoe lang de animatie moet duren, met welke vertraging de animatie start (dus de tijd nadat de pagina is opgeroepen) en natuurlijk wat voor soort animatie er plaatsvindt. Je hebt bijvoorbeeld keus uit pulserend, roterend, in elkaar overlopend en uit verschillende richtingen het beeld in vliegend.

Eigen standaardstijlen voor tekst

De rubriek Saved styles is erg interessant. Hier kun je tekstopmaak die je al eerder hebt ingevoerd, opslaan als sjabloon. Als je regelmatig terugkerende opmaak gebruikt, is dit een superhandige functie. Zo’n terugkerende opmaak verhoogt de herkenningswaarde van je story’s, je vormt er je eigen persoonlijke stijl mee. Ook bespaart de functie veel tijd.

Je gebruikt de functie door eerst een tekstelement naar wens op te maken, met lettertype, lettergrootte, kleur, enzovoort. Als je tevreden bent, klik je op het plusteken in de rechtermarge rechts van de optie Saved styles.

Google Web Stories: tekstopmaak bewaren als sjabloon
Saved styles: tekstopmaak bewaren als sjabloon.

In het vervolg kun je dit tekstontwerp nu op elk nieuw tekstelement toepassen door onder Saved style op het sjabloon te klikken.

Heb je nog geen WordPress-hosting voor je Web Story’s?

Naar onze WordPress-pakketten
Zoekwoorden:

Delen

Je kunt pas een reactie plaatsen nadat je ons privacybeleid en cookies hebt geaccepteerd. Om privacyredenen mogen wij jouw persoonsgegevens anders niet verwerken.

Klik onderaan de pagina op de blauwe button OK. Nadat je de pagina opnieuw hebt geladen, kun je een reactie achterlaten.

 

Deze website maakt gebruik van cookies voor onder andere Google Analytics. Deze melding verdwijnt zodra je de cookies hebt geaccepteerd. Meer informatie