Tekstvak over je foto heen, zoals bekende bedrijven ook wel eens doen? Dat kan in Reloadify! Ik laat je zien hoe.
Onze drag and drop editor werkt met rijen. In principe zou je dus een rij over een rij heenzetten. Dat kan niet. Daarom knip je je afbeeldingen als het ware op in twee stukken.
Stap 1: Knip je afbeelding in twee delen
Onze drag & drop editor werkt met rijen. Je kunt daarbij een afbeelding als achtergrond instellen. Maar, wanneer je een (wit) tekstvak over je afbeelding wilt zoals in bovenstaand voorbeeld, loop je al gauw tegen een probleem aan. Om een tekstvak met achtergrondkleur over je afbeelding te plaatsen dien je een omweg te nemen.
Het begint met stap 1: je afbeelding in twee delen knippen. Aan de hand van bovenstaand voorbeeld heb ik dit als volgt gedaan:
Ik heb nu een hoofdafbeelding (het bovenste gedeelte) en een tweede afbeelding: de onderste strook van de afbeelding.
Stap 2: Voeg 2 losse rijen toe aan je nieuwsbrief
Vervolgens voeg je twee lege rijen toe aan je nieuwsbrief. Zorg ervoor dat deze onder elkaar staan.
Stap 3: Voeg de afbeeldingen toe als achtergrondafbeelding
Selecteer de bovenste rij. Klik in het rechtermenu onder "Rij eigenschappen" op "Rij achtergrond afbeelding". Klik het schuifje aan. Je kunt nu een afbeelding uploaden. Upload hier de bovenkant van je afbeelding. Let op: kies voor de optie "Apply image to: row" en zet het vinkje bij "Centreren" aan.
Op dit moment zie je het volgende voor je: twee rijen, met daarin op de achtergrond de twee afbeeldingen. Nu moet je de afbeeldingen nog passend maken, zodat ze goed op elkaar aansluiten.
Stap 4: Maak je afbeeldingen passend met een spacer
Voeg een spacer toe aan je bovenste en onderste rij.
Je ziet nu het volgende voor je:
De afbeeldingen moeten nu nog uitgerekt worden. Selecteer de spacer en pas de hoogte aan (aan de rechterzijde onder eigenschappen).
Verhoog de hoogte van de spacer totdat de twee afbeeldingen weer aan elkaar passen.
Stap 5: Voeg een tekstblok toe
Sleep nu een tekstvak onder een spacer, zoals het voorbeeld:
Om het vak wit te maken, ga je op de rij staan, en via inhoud maak je de 'inhoud achtergrond kleur' wit:
Je tekstblok groter maken? Ook dat kan! Ga op het tekstblok staan en ga naar 'blok opties'. Hier is de padding aan te passen van je tekstblok:
Ik heb die van mij al aangepast. Mijn eindresultaat is als volgt:
En klaar ben je! Tof, hè! 😎
Houd er rekening mee dat niet elke e-mailclient achtergrondafbeeldingen op de juiste manier toont op de mobiele versie. Hier hebben wij geen invloed op.