Het ontwerpen van hoogtepunten voor afbeeldingen en tekst is een klassieke ontwerptechniek die kan worden gebruikt om de sfeer op te fleuren inhoud van een webpagina. Bovendien maakt Divi het gemakkelijk om deze reflecties rechtstreeks vanuit Divi Builder te maken zonder dat u een foto-editor hoeft te gebruiken.
In deze tutorial laat ik je zien hoe je reflecties ontwerpt voor afbeeldingen op Divi. De sleutel tot het doen van reflecties is om de transformatie-optie van Divi te gebruiken om een spiegelversie van een item te maken. Daarna kunt u een aangepaste overlay toevoegen die ik u zal laten zien hoe u deze gebruikt met een tekstmodule.
Laten we beginnen!
overzicht
Hier is een overzicht van de ontwerpen die we in deze tutorial zullen bouwen.
Wat je nodig hebt om te beginnen
Om te beginnen, heb je alleen Divi nodig. Zorg ervoor dat de Divi-thema is geïnstalleerd en actief. We zullen onze ontwerpen helemaal opnieuw maken met behulp van de Divi Builder aan de voorkant (visual builder). Je hebt ook enkele dummy-afbeeldingen nodig voor deze tutorial (een achtergrondafbeelding van ongeveer 1920px x 600px en een andere afbeelding van ongeveer 500px x 350px).
Als je klaar bent, ga je naar je WordPress-dashboard en ga je naar Pagina's> Toevoegen. Geef uw nieuwe pagina een titel en implementeer Divi Builder op de front-end. Selecteer de "Build from Scratch" optie. Nu ben je klaar om te gaan!
Het basisidee achter het creëren van een beeld- en tekstreflectie in Divi
Het basisidee van het creëren van reflectiepatronen in Divi omvat drie stappen:
- Maak een module met uw afbeelding of tekst
- Dupliceer de module en gebruik de transformatieschaal om het spiegelbeeld of de tekst te maken
- Voeg een verloopoverlay toe aan het gespiegelde element met behulp van een scheidingslijn of een absoluut gepositioneerde tekstmodule.
Deze ontwerptechniek is niet beperkt tot individuele modules. U kunt met deze methode reflecties toevoegen aan hele rijen in Divi, wat handig is voor het maken van unieke koptekstontwerpen. We zullen later in deze tutorial reflectie toevoegen aan een rij van ons tekstreflectieontwerp. Maar laten we voor nu beginnen met het creëren van een beeldreflectie.
Hoe een beeldreflectie te creëren
Om een beeldreflectie te maken, beginnen we met het maken van een nieuwe reguliere sectie met een rij van één kolom.
Voeg vervolgens een afbeeldingsmodule toe aan de lijn.
Download de gewenste afbeelding van de mediabibliotheek naar de afbeeldingsmodule. Werk vervolgens de volgende beeldinstellingen bij:
Maximale breedte: 600px
Uitlijning van de module: midden
Aangepaste marge: 0px onderaan
Creëer het spiegelbeeld
Om het reflectie-effect te creëren, moeten we eerst een kopie van de afbeelding direct onder de afbeelding maken.
Dupliceer hiervoor de afbeeldingsmodule. Werk vervolgens de dubbele afbeeldingsinstellingen als volgt bij:
Dekking: 40%
X-as van transformatieschaal: -100%
De eigenschap Transform scale is wat de afbeelding op magische wijze verticaal en horizontaal omdraait om een gespiegelde versie van de afbeelding te maken.
Dit ondersteunt basisreflectieontwerp. We kunnen echter een extra verloopoverlay aan onze onderste afbeelding toevoegen voor een realistischer reflectieontwerp.
Voeg een verloopoverlay toe met een tekstmodule
Om een verloopoverlay aan onze onderste afbeelding toe te voegen, kunnen we een tekstmodule gebruiken. We kunnen de tekstmodule een absolute positie geven, zodat deze boven de onderste afbeelding staat. Vervolgens kunnen we een verloopachtergrond aan de tekstmodule toevoegen. Het gebruik van een tekstmodule (in plaats van een scheidingsteken) geeft u de extra mogelijkheid om toe te voegen inhoud desgewenst later over het reflectiebeeld.
Ga je gang en maak een tekstmodule onder de onderste afbeelding.
Verwijder het inhoud standaard zodat de tekstmodule leeg is.
Werk vervolgens de instellingen van de tekstmodule als volgt bij:
Linker achtergrondverloop Kleur: rgba (255,255,255,0)
Achtergrondverloop rechts Kleur: #ffffff
Breedte: 100%
Hoogte: 50%
Voeg vervolgens de volgende aangepaste CSS-code toe aan het hoofdelement:
positie: absoluut! belangrijk; boven: 50%;
Deze absolute positionering van de tekstmodule legt de tekstmodule op de onderste helft van de regel.
Een achtergrondkleur toevoegen
Als u geen witte achtergrond wilt, kunt u andere achtergrondkleuren gebruiken om een reflectiepatroon over de hele breedte te maken.
Hiertoe opent u de lijninstellingen en werkt u het volgende bij:
Achtergrondkleur: #000000
Breedte: 100%:
Max. Breedte: 100%;
Aangepaste opvulling: 0px hoog, 0px omlaag
Laten we het resultaat nu bekijken.
Reflecties kunnen er heel cool uitzien als je de tijd neemt om ze goed te ontwerpen. Gelukkig heeft Divi de outils slagen. Er zijn andere methoden om CSS-reflecties uit te voeren, maar helaas hebben ze de neiging om ondersteuning van browsers te missen. De ontwerpen in deze tutorial zien er geweldig uit in alle browsers.
Ik heb gemerkt dat reflecties er geweldig uitzien in paginakopteksten en het presenteren van afbeeldingen voor een portfolio-item. En ik weet zeker dat er nog veel andere implementaties zijn.
Dat is het voor deze tutorial, ik hoop dat je hiermee reflecties op je WordPress-site kunt toevoegen met behulp van de interne functies van Divi.
