👉 Basic WordPress Image Alignments Explained - WinningWP

Alexa Rank – Screenshot

Het onderwerp van het uitlijnen van afbeeldingen is er een die vaak verkeerd begrepen wordt door WordPress nieuwkomers. Wanneer u een afbeelding toevoegt aan uw inhoud (binnen berichten of pagina's) WordPress biedt u vier standaardmanieren om de afbeelding uit te lijnen: lijn 'Links' uit, lijn 'Midden' uit, lijn 'Rechts' uit en lijn 'Geen' in *.

Laten we een voor een elk van deze bekijken:

1. Links uitlijnen

Een afbeelding waaraan een linker uitlijning is toegewezen, wordt effectief naar links geduwd van het gedeelte van de pagina waar deze in zit (zoals de linkerrand van uw WordPress-bericht voor pagina-inhoud) en alle andere inhoud (zoals tekst) zal wikkel rond de andere drie randen – vul het gebied rechts van waar het beeld zich bevindt.

Voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Centreer uitlijnen

Als u wilt dat uw afbeelding gecentraliseerd wordt binnen het gedeelte van de pagina waar deze zich bevindt (dat wil zeggen met een gelijke afstand tussen de rand van het inhoudsgebied en de linker- en rechterrand ervan), kiest u een 'Centrale' uitlijning. In tegenstelling tot de hierboven genoemde 'Left'-uitlijning, zal eventuele naburige inhoud (zoals tekst) niet rond de afbeelding wikkelen – hij zal in plaats daarvan boven of onder de afbeelding worden geplaatst (afhankelijk van waar in de tekst die je hebt gekozen om in te voegen bovengenoemde afbeelding).

Voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Rechts uitlijnen

Het recht uitlijnen van een afbeelding is, zoals je zou verwachten, min of meer de exacte keerzijde links om een ​​afbeelding uit te lijnen – de afbeelding wordt rechts van het gedeelte van de pagina waar hij in zit gepusht (dwz de rechterrand van je afbeelding) WordPress-bericht van pagina-inhoud) en andere inhoud (zoals tekst, enz.) Wikkelen zich rond de andere drie randen ervan: hierdoor vult u het gebied links ervan in.

Voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Lijn niets uit

Beelden waaraan geen uitlijning is toegewezen (door ze een uitlijning van 'Geen' toe te wijzen), zullen exact op de plaats zitten waar je ze vindt – dwz als je ervoor kiest om een ​​afbeelding te positioneren waaraan een uitlijning van 'Geen' is toegewezen binnen een alinea van de tekst (zie het onderstaande voorbeeld hieronder), het wordt in lijn met die tekst geplaatst, wat betekent dat er zowel links als rechts van de afbeelding tekst is (ervan uitgaande dat de afbeelding niet dezelfde breedte heeft – of breder is) dan het gebied waarin het zit **). Het is echter verwarrend dat een afbeelding die BEIDE is toegewezen aan een uitlijning van 'None' EN binnen zijn eigen paragraaf (dus op een nieuwe regel in de WordPress-editor en / of specifiek in HTML 'p'-tags) wordt geplaatst aan de linkerkant van het gebied waarbinnen het zich bevindt (op dezelfde manier als het zou zijn als het links uitgelijnd was) maar zonder enige tekst rechts ervan. Waarom? Omdat een afbeelding geen specifieke uitlijning heeft (of, in technische termen: geen specifieke links-of-rechts 'zweven') die binnen zijn eigen alinea (zonder andere elementen in dezelfde alinea) zal worden gescheiden van beide voorgaande en het volgen van inhoud door lijnen van voorgedefinieerde witruimte – op vrijwel dezelfde manier als elke andere alinea!

Voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dus wat is hier eigenlijk aan de hand?

Waarom gebeurt dit allemaal? Het komt eigenlijk allemaal door een computertaal die wordt gebruikt om de presentatie (lay-out, afmetingen, kleuren, enzovoort) van webelementen weer te geven, kortweg Cascading Style Sheets of kortweg 'CSS' genoemd. In essentie voegt WordPress elke keer dat u bijvoorbeeld een linkse uitlijning toewijst aan een afbeelding in een post of pagina, een HTML-klassennaam van "alignleft" toe aan de afbeelding, die vervolgens de afbeelding effectief dwingt om naar een specifieke set te verwijzen van voorgedefinieerde CSS-commando's die het vertellen waar het op de pagina moet komen – eenvoudig! Evenzo wijst WordPress voor elk van de andere genoemde alignementen verschillende klassenamen toe – zoals 'aligncenter' (voor afbeeldingen die centraal moeten worden uitgelijnd), 'alignright' (voor rechts uitgelijnde afbeeldingen) en 'alignnone' (voor afbeeldingen die zijn om geen specifieke uitlijning toegewezen te krijgen) – dat elke referentie verschillende sets van CSS-commando's bevat.

Toegegeven (helaas), het idee om je hoofd om de wereld van CSS-commando's te wikkelen kan meer dan een beetje intimiderend zijn voor de gemiddelde WordPress-gebruiker; Als u echter de interesse heeft om meer over hen te weten te komen, zullen ze u snel in staat stellen om een ​​geheel nieuwe mate van vrijheid te krijgen als het gaat om het stylen van uw inhoud – of zelfs uw hele website! Als je geïnteresseerd bent om iets te leren, bekijk dan ons eerdere bericht over waar je het beste kunt leren over het online leren van CSS – of, als alternatief, ga gewoon lekker naar good ol 'Google en ga wild! ;)

Overzicht

Dus daar heb je het: beelduitlijningen uitgelegd! In het kort: gebruik een linkse uitlijning als u wilt dat een afbeelding links zit en andere elementen (zoals tekst enz.) Er omheen naar rechts wikkelen; gebruik een centrale uitlijning wanneer u wilt dat een afbeelding in het midden / midden van uw inhoud zit zonder andere elementen aan beide zijden ervan; gebruik een juiste uitlijning als u wilt dat een afbeelding rechts naast u komt te liggen en andere aangrenzende webelementen er omheen naar links; en gebruik een uitlijning van 'none' als je wilt dat je afbeelding precies zit waar je hem wilt plaatsen ten opzichte van zijn naburige elementen (dwz tekst, enz.) – EN als laatste, als je wilt dat een afbeelding zich links van de inhoud bevindt -gebied waarbinnen het zich bevindt, MAAR wil je niet dat er een tekst enz. rechts ervan verschijnt, wijs je het beeld toe als een alignement van 'None' en zorg je ervoor dat het in zijn eigen privé-paragraaf zit!

* via een vervolgkeuzemenu in de rechterbenedenhoek van het WordPress 'Media Library' venster, onder de subkop 'Attachment Display Settings'.

** in welk geval de tekst die normaal aan elke kant van de afbeelding zit, nergens anders heen kan gaan dan boven of onder de afbeelding – merk op dat dergelijke gevallen vaak tot verwarring tussen alle vier de uitlijningen kunnen leiden, omdat er geen ruimte is voor andere tekst / elementen aan elke kant van de afbeelding maakt het in wezen niet uit welke uitlijning je kiest te gebruiken!

Nuttig?

Bekijk de video: Hoe lang het duurt om te rangschikken in Google (het echte antwoord)

Like this post? Please share to your friends:
Geef een reactie

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: