Hoe tekst toe te voegen bovenop een afbeelding in WordPress (3 methoden)

Tekst toevoegen bovenop een afbeelding is een populaire techniek om de visuele aantrekkingskracht van hun inhoud of website te vergroten. Het is ook een geweldige manier om uw afbeeldingen informatiever en boeiender te maken.

In dit artikel hebben we drie eenvoudige manieren gevonden om tekst bovenop een afbeelding in WordPress toe te voegen. Of je nu de voorkeur geeft aan het gebruik van de Block Editor, een plugin of aangepaste code. Laten we het ontdekken!

Waarom het belangrijk is om tekst bovenaan afbeeldingen toe te voegen

Voordat u verder gaat met de methoden, moet u de reden kennen waarom het toevoegen van tekst bovenop afbeeldingen belangrijk is.

1. Trek de aandacht

Als gebruikers snel door de inhoud scrollen, is het toevoegen van alleen afbeeldingen mogelijk niet genoeg om hun aandacht te trekken. Daarom moet je tekst bovenop een afbeelding toevoegen om de aandacht van gebruikers te trekken en je boodschap effectiever over te brengen.

2. Verbeter de gebruikerservaring

Het is waar dat afbeeldingen op zichzelf veel waarde kunnen bieden, maar door tekst toe te voegen bovenop de afbeeldingen, zoals bijschriften, citaten of andere op tekst gebaseerde inhoud, kunnen ze nog nuttiger worden gemaakt. Bovendien kunnen gebruikers de context van de afbeelding begrijpen en hoe deze zich verhoudt tot uw inhoud.

3. Toegankelijkheid verbeteren

U kunt ook helpen om de toegankelijkheid te verbeteren voor gebruikers die mogelijk moeite hebben met het bekijken van de afbeelding zelf. Door een tekstalternatief te bieden, kunt u ervoor zorgen dat uw inhoud toegankelijk is voor een groter aantal gebruikers.

4. SEO verbeteren

Het toevoegen van relevante sleutelwoorden aan de bijschriften of alt-tekst van uw afbeeldingen kan helpen om de zoekmachinepositie van uw website te verbeteren. Dit komt doordat zoekmachines deze informatie gebruiken om de inhoud van uw website te begrijpen en te bepalen hoe relevant deze is voor de zoekopdrachten van gebruikers.

3 Methoden Hoe tekst bovenop een afbeelding toe te voegen in WordPress

1. Gebruik de WordPress-blokeditor

Ga eerst naar de pagina of het bericht waarop u tekst over de afbeelding gaat toevoegen.

Kies Omslag om de tekst over de afbeelding te schrijven.

Daarna zal het op uw scherm verschijnen. Het toont u de standaardafbeelding, maar u kunt de afbeelding naar wens wijzigen.

Je kan ook de standaard afbeelding vervangen door je eigen afbeelding. Klik op de vervangknop en upload vervolgens de afbeelding of kies eenvoudig uit de mediabibliotheek.

Het zal er zo uitzien, dan kan je de tekst over de afbeelding schrijven zoals je wilt.

Dubbelklik op de tekst en je krijgt de bewerkingsoptie voor de tekst. Je kunt de grootte, kleur en nog veel meer aanpassen aan je behoeften.

Tot slot, klik op de updateknop, of als u de nieuwe post of pagina heeft toegevoegd, klik dan op de publicatieknop.

2. Gebruik CSS

Open de WordPress Block Editor en selecteer het afbeeldingsblok waar u tekst wilt toevoegen. In de zijbalk rechts, klik op het Geavanceerd tabblad.

In het Aanvullende CSS-klasse veld, voeg een aangepaste klasse toe voor het afbeeldingsblok.

Save de wijzigingen en publiceer of update de pagina of het bericht.

.custom-class { positie: relatief; } .custom-class p { positie: absoluut; boven: 50%; links: 50%; transform: translate(-50%, -50%); lettergrootte: 24px; kleur: #ffffff; tekstschaduw: 2px 2px 2px #000000; } 

In de bovenstaande code, vervang "aangepaste-klasse" door de aangepaste klasse die u aan het afbeeldingsblok hebt toegevoegd. U kunt ook de lettergrootte, kleur en andere stijlopties aanpassen aan uw voorkeuren.

3. Gebruik WordPress-plug-in

Als je de vrijheid wilt om volledig aangepaste paginaontwerpen te maken, heb je een pagina builder-plug-in nodig. Een van de WordPress-pagina builder-plug-ins is SeedProd, waarmee je tekst op elke afbeelding op je hele website kunt toevoegen.

Installeer en activeer eerst de SeedProd-plug-in. Na activering moet je een licentiesleutel invoeren. Log in op je SeedProd-account en klik op het Download-tabblad.

Als dat klaar is, kopieer je de sleutel in het Licentie-sleutelveld.

U kunt deze sleutel nu in uw WordPress-beheergedeelte plakken door naar de SeedProd » instellingenpagina te gaan.

Zodra u hier bent, gaat u verder en plakt u uw sleutel in het veld Licentiesleutel. Dan moet u eenvoudig op Verifiëren sleutel klikken.

Ga vervolgens naar SeedProd » Landingspagina's en klik op Nieuwe landingspagina toevoegen.

Daarna kiest u een sjabloon. Ongeacht welk SeedProd-sjabloon u kiest, u kunt elk deel van de sjabloon aanpassen om perfect aan te sluiten bij uw website en merk.

Als u echter liever begint met een leeg canvas, klik dan op de Lege Sjabloon.

Zodra u een sjabloon heeft gevonden, beweegt u uw muis erover. U kunt dan klikken op het voorbeeldpictogram.

Als u tevreden bent met hoe deze sjabloon eruitziet, klik dan op de Knop 'Dit sjabloon kiezen'

In het Paginanaam-veld typt u een naam voor de pagina.

Als u de automatisch gemaakte URL wilt wijzigen, bewerkt u de tekst in het Pagina-URL

Klik op de knop Opslaan en starten met het bewerken van de pagina. Hierdoor wordt de sjabloon geopend in SeedProd's drag-and-drop-editor.

In de linker zijbalk ziet u alle blokken en secties die u met drag-and-drop aan uw pagina kunt toevoegen.

Tenzij je de Blank Template gebruikt, zal je SeedProd-pagina al enkele blokken en secties bevatten. Om deze inhoud te bewerken, klik je om het blok of de sectie te selecteren.

Het linker menu van SeedProd toont nu alle instellingen die je kunt gebruiken om dit blok of deze sectie aan te passen.

De eenvoudigste manier om tekst toe te voegen bovenop een afbeelding is door gebruik te maken van één van SeedProd's kant-en-klare Hero-secties.

Deze secties hebben een tijdelijke afbeelding op volledige breedte als achtergrond, met daar bovenop wat tijdelijke tekst. U kunt eenvoudig de standaard achtergrondafbeelding en tekst vervangen door uw eigen inhoud.

Klik op de Sectie tab in het linker menu.

Vervolgens klik op Hero om alle kant-en-klare hero-secties te zien die u aan uw pagina kunt toevoegen.

Om deze heldensectie aan uw ontwerp toe te voegen, klikt u gewoon op Deze sectie kiezen.

Klik op de stock afbeelding om deze te selecteren als u de stock afbeelding van de sjabloon wilt vervangen door uw eigen afbeelding.

Beweeg Achtergrondafbeelding voorbeeld totdat er een prullenbakpictogram verschijnt. U kunt vervolgens op dit pictogram klikken

Klik vervolgens op Gebruik uw eigen afbeelding. U kunt vervolgens een afbeelding kiezen uit de WordPress-mediabibliotheek of een stockafbeelding gebruiken.

Zodra u een afbeelding heeft toegevoegd, bent u klaar om de tijdelijke tekst te vervangen.

Klik om het tekstblok te selecteren. Typ vervolgens in het tekstveld gewoon de tekst die u wilt gebruiken.

Sommige held-sjablonen van SeedProd hebben extra inhoud, zoals call-to-action-knoppen.

Als u deze inhoud wilt wijzigen, klik dan om het blok te selecteren

Een andere optie is om het blok uit de held-sjabloon te verwijderen.

Om dit te doen, klik dan om het blok te selecteren en klik vervolgens op het prullenbakpictogram

Als u tevreden bent met uw pagina-ontwerp, klik dan op de knop Opslaan.

Van hieruit kunt u ervoor kiezen om de pagina te publiceren of deze op te slaan als sjabloon.

Conclusie

Dat zijn drie methoden om tekst toe te voegen bovenop een afbeelding in WordPress. Makkelijk toch? Kies de aanpak die het beste bij uw vaardigheidsniveau en ontwerpvoorkeuren past.

Bovendien organiseert, optimaliseert en beheert u uw mediabestanden als een professional met WP Media Folder. Het is tijd om afscheid te nemen van rommelige bibliotheken!