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

Relevante trefwoorden toevoegen aan uw afbeeldingstitels of alt-tekst kan helpen de zoekmachinepositie van de website verbeteren. Dit komt omdat 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 "custom-class" met de aangepaste klasse die je aan het afbeeldingsblok hebt toegevoegd. Je kunt ook de lettergrootte, kleur en andere stijlopties aanpassen om aan je voorkeuren te voldoen.

3. Gebruik WordPress-plug-in

Als je de vrijheid wilt om volledig aangepaste paginadesigns te maken, heb je een page builder-plugin nodig. Een van de WordPress page builder-plugins is SeedProd, die je in staat stelt tekst boven elke afbeelding op je hele website toe te voegen.

Eerst, installeren en activeren de SeedProd-plugin. Na activering moet je een licentiesleutel invoeren. Log in op je SeedProd-account, vervolgens klik op de Download tab.

Eenmaal gedaan, kopieer de sleutel in de Licentie sleutelsectie.

U kunt deze sleutel nu plakken in uw WordPress-beheergebied door naar de SeedProd » Instellingenpagina.

Eenmaal hier, ga door en plak uw sleutel in het Licentiesleutel veld. Vervolgens hoeft u alleen nog maar klik op Verifieer sleutel.

Vervolgens, ga 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 hebt gevonden, beweeg uw muis erover. U kunt dan klik op het Voorbeeld‑icoon.

Als je tevreden bent met hoe dit sjabloon eruitziet, ga dan verder en klik op de Kies deze sjabloonknop.

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 -veld.

Klik op de Opslaan en begin met bewerken van de pagina knop. Dit opent het sjabloon in SeedProd's drag-and-drop editor.

In de linkerzijbalk zie je alle blokken en secties die je kunt toevoegen aan je pagina met slepen en neerzetten.

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

SeedProd's linkermenu zal nu alle instellingen tonen die je kunt gebruiken om dit blok of deze sectie aan te passen.

De gemakkelijkste manier om tekst bovenop een afbeelding toe te voegen is door een van SeedProd's kant-klare Hero-secties te gebruiken.

Deze secties hebben een tijdelijke aanduiding, een achtergrondafbeelding op volledige breedte, met wat tijdelijke tekst erboven. Je kunt eenvoudig de standaard achtergrondafbeelding en tekst vervangen door je eigen inhoud.

Klik op de Sectie tab in het linkermenu.

Vervolgens, klik op Hero om alle kant-klare hero-secties te zien die je aan je pagina kunt toevoegen.

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

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

Beweeg de muis over Achtergrondafbeelding voorbeeld totdat een prullenbakpictogram verschijnt. Je kunt dan doorgaan en klik op dit pictogram om de tijdelijke afbeelding te verwijderen.

Klik vervolgens op Gebruik je eigen afbeelding. Je kunt dan een afbeelding kiezen uit de WordPress mediabibliotheek of een stockafbeelding gebruiken.

Zodra je een afbeelding hebt toegevoegd, ben je klaar om de tijdelijke tekst te vervangen.

Klik om het Tekstblok te selecteren. Vervolgens in de Tekstvak, typ eenvoudig de tekst die je wilt gebruiken.

Sommige hero‑templates van SeedProd's bevatten extra inhoud, zoals call‑to‑action‑knoppen.

Als je deze inhoud wilt wijzigen, klik om het blok te selecteren en maak vervolgens je wijzigingen in SeedProd's left-hand menu.

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 je're tevreden bent met het ontwerp van je pagina, klik op de Save button.

Vanaf hier kun je ervoor kiezen de pagina te publiceren of op te slaan als een sjabloon.

Conclusie

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

Bovendien organiseer, optimaliseer en beheer je mediabestanden als een pro met WP Media FolderHet's het juiste moment om afscheid te nemen van rommelige bibliotheken!