Widgets plaatsen

Deze les gaat over het plaatsen van Widgets

Zoals in een eerdere les te zien was

kunnen we in een website extra informatie plaatsen

boven en onder en links en rechts van de Pages en de Posts.

We kunnen daarvoor de zogenaamde Widget-posities gebruiken

en in die posities kunnen we natuurlijk Widgets plaatsen.

Dat geeft veel mogelijkheden om je website

met interessante toepassingen uit te breiden.

Om dit te dien log ik in op de achterkant van de website.

en daar kies ik Appearance > Widgets.

In dit gedeelte van de achterkant van de website

kan ik zien welke Widget-posities dit thema allemaal in de aanbieding heeft.

We hebben deze posities eerder in beeld gezien

in een vorige les.

Nu ga ik werkelijk informatie toevoegen aan de website

Ik begin met het toevoegen van een stuk inleidende tekst

aan de linker bovenkant van mijn website.

aan de linker bovenkant van mijn website.

ik kies de positie Top Widget Left

en ik klik dit deelvenster open.

Het soort informatie

dat ik in deze Widget-positie wil plaatsen

kan ik kiezen in de linkerhelft van dit venster.

Ik kies ervoor om tekst te plaatsen.

Daartoe sleep ik de tekstbalk in de Widget-positie

en de gearceerde lijn zegt me

dat als ik het balkje hier loslaat

de Widget wordt toegevoegd.

Ik kan de Widget een titel geven

ik zal de titel 'inleidende tekst' kiezen.

en ik kan tekst typen in het content-veld.

Zoals je ziet

biedt een kleine Editor ook nog mogelijkheden

om de tekst bijvoorbeeld cursief of bold te laten zijn.

en is er de gelegenheid

om deze tekst via het tabblad Visual

in zijn normale staat te zien, maar het tabblad Text

geeft me het codevenster in beeld

waar ik zelf met HTML- en CSS-instructies terecht kan.

Ik houd het bij de Visual-editor.

en ik Save deze Widget

om te kijken wat het resultaat is, switch ik naar de voorkant van de website.

en ik Refresh.

Ik zie dat het gelukt is, er is een stuk informatie terecht gekomen

linksboven mijn Page.

De titel is al geformatteerd op een bepaalde grootte,

en de inleidende tekst is ,zoals ik dat wenste, cursief

Een volgende stap is dat ik nu ook aan de onderkant van de website

in de Bottom-posities, drie foto's ga toevoegen.

ik kan natuurlijk ook foto's

aan de Page toevoegen,

maar ik kan ze er ook onder plaatsen, en in dat geval kies ik voor Widgets.

Ik log weer in op de achterkant van de website.

Daar sluit ik het deelvenster Top Widget Left

en ik ga naar Bottom Widget Left

dat is de positie aan de onderkant van mijn Page

waar ik een foto wil toevoegen

zowel aan de linker- als aan de middel- als aan de rechterkant.

Daarvoor kies ik de standaard-widget Image

De procedure is hetzelfde

ik sleep het balkje

naar mijn Widget-positie en laat hem vallen zodra ik de gearceerde lijnen zie.

Hier zie ik dat ik een titel mag kiezen

ik kies de titel 'foto '

en ik mag een foto selecteren

dat kan ik doen door op de button te klikken, Add Image,

of door een foto te slepen

naar het gearceerde gebied

No Image Selected.

Ik kies voor de button Add Image.

en ik kom in de Media Library terecht.

daar zien we tot nu toe één foto,

een logo die ik in een vorige les heb toegevoegd,

maar ik zou graag wat andere foto's willen toevoegen.

Bij dit lesmateriaal heb ik een mapje gevoegd met de naam

Images, en daarin zitten vier landschapsfoto's.

Een daarvan zou ik graag willen gebruiken in de positie

Widget Bottom Left.

Ik kies het tabblad Upload Files,

en daar kies ik de button Select Files.

op het bureaublad heb ik in mijn geval het mapje Images neergelegd

en in dat mapje vind ik img.jpg

Dat is het plaatje dat ik zou willen uploaden.

Ik kies het uit

en het verschijnt in mijn Media Library

Zoals je kan zien in de rechterhelft van dit venster

kan ik ook nog wat Meta-informatie toevoegen aan de foto

ik kies ervoor om die informatie niet in te vullen

en om de foto toe te voegen aan de Widget. Add to Widget.

Daar is hij. Ik Save.

en ik zal dezelfde procedure herhalen voor de Bottom Widget Middle-positie.

Ook daar sleep ik het Image-balkje naartoe,

ik laat het vallen

voeg een Title toe

ik gebruik de knop Add Image

om een foto toe te voegen

ik kies voor Upload File, ik kies voor Select Files

en ik kies foto uit het mapje uit.

Ook deze foto voeg ik toe aan zijn Widget

en ik Save nogmaals.

Tenslotte kies ik Bottom Widget Right

en ik herhaal nog een keer de procedure.

Ik sleep het balkje Image naar de Widget-positie

ik kies de titel Foto

ik klik Add Image,

ik kies

Upload Files, ik kies Select Files

en ik kies de derde foto uit mijn images-map.

en ik kies de derde foto uit mijn images-map.

en die voeg ik toe

aan de Widget.

en ik Save.

Om het resultaat te bekijken kijk ik nu naar de voorkant van de website

en ik Refresh.

en om de Widgets te zien

scroll ik naar de positie Bottom

dat is deze positie

en daar staan mijn foto's toegevoegd inclusief de titels

Zoals je ziet is het eenvoudig om informatie in Widgets toe te voegen aan een website.

Meer informatie, zoals het toevoegen van Video

of het maken van Fotogalleries volgt in een latere les.