Voor een bepaald type bedrijf, zoals een fotobewerkingsservice, kan het toevoegen van een afbeeldingsvergelijking een handig hulpmiddel zijn om uw service te beschrijven. U kunt de afbeeldingsvergelijking toevoegen aan de startpagina, bestemmingspagina of elke pagina waar u praat over de service die u aanbiedt.
Elementor biedt inderdaad geen widget of functionaliteit om afbeeldingsvergelijking toe te voegen, maar je kunt het krijgen met een add-on. Er zijn extra modules Elementor die een widget bieden om een ​​afbeeldingsvergelijking toe te voegen. Drie daarvan zijn: Essentiële add-ons, Gelukkig addonsen JetElements.
In dit artikel laten we u zien hoe u afbeeldingsvergelijking toevoegt Elementor met behulp van JetElements.
JetElements zelf is een premium add-on voor Elementor, ontwikkeld door Crocoblock. Het maakt deel uit van de JetPlugins-familie. De add-on wordt geleverd met een widget genaamd Vergelijkende foto's die u kunt gebruiken om een ​​afbeeldingsvergelijking toe te voegen aan de Elementor-pagina.
Afbeeldingsvergelijking toevoegen in Elementor
Zorg ervoor dat de JetElements-add-on is geïnstalleerd en geactiveerd voordat u begint. Als Elementor nieuw voor je is, kun je ons vorige artikel lezen om te leren hoe gebruik je Elementor.
We zullen de widget direct toevoegen Vergelijkende foto's in dit artikel.
Voordat u begint, kunt u twee afbeeldingen voorbereiden om te vergelijken. U kunt bijvoorbeeld een voor- en een na-afbeelding maken. Als je klaar bent, sleep je de widget gewoon Vergelijkende foto's in het Elementor-bewerkingsvak.
De JetElements Image Compare-widget maakt standaard twee afbeeldingsvergelijkingen. Als u alleen een afbeeldingsvergelijking wilt maken (twee afbeeldingen om te vergelijken), kunt u een van de bestaande afbeeldingsvergelijkingen verwijderen.
Lees ook: Elementor: Lottie-animatie toevoegen
Om de voor- en na-afbeelding toe te voegen, opent u de bestaande afbeeldingsvergelijking (door erop te klikken) om de afbeelding te bewerken inhoud. Selecteer eenvoudigweg de vorige afbeelding op het voor foto sectie en selecteer de afbeelding na op de na foto sectie. Zoals u kunt zien, kunt u ook de labels voor elke sectie overschrijven.
Zodra de selectie van afbeeldingen is voltooid, kunt u het blok openen Instellingen om de startpositie van de separator in te stellen. Als u meer dan één afbeeldingsvergelijking wilt toevoegen, kunt u de Carrousel-instellingen instellen.
Vervolgens kunt u uw afbeeldingsvergelijking opmaken door over te schakelen naar het tabblad Style . U kunt vijf aanpassingsblokken openen om uw afbeeldingsvergelijking op te maken. Maar als u alleen een afbeeldingsvergelijking hoeft toe te voegen, hoeft u alleen de eerste drie blokken te openen.
- General
U kunt dit blok openen om opvulling, kaderschaduw, randtype en randradius in te stellen.
- label
U kunt dit blok openen om vergelijkingslabels op te maken (het label "voor" en "na"). U kunt zaken instellen als horizontale uitlijning, verticale uitlijning, tekstkleur, achtergrondkleur, typografie (lettertypefamilie, letterstijl, lettergrootte), enz...
- Handle
Je kunt dit blok openen om het handvat te stylen. U kunt zaken instellen zoals de uitlijning van de handgreep, de breedte van de besturingselementen, de hoogte van de besturingselementen, de kleur van de handgreep (normale status of zwevend), enzovoort.
Als u meer dan één afbeeldingsvergelijking toevoegt, kunt u ook de blokken openen Carrouselpijlen et Carrousel stippen om pijlen en navigatiepunten op te maken.
Dat is het. U kunt op de knop klikken pUBLICEREN / BIJWERKEN voor publiceren /edit je pagina als je klaar bent met bewerken.
Koop Elementor Pro nu!!!
Conclusie
Alstublieft ! Dat is het voor dit artikel dat je laat zien hoe voeg afbeeldingsvergelijking toe in Elementor. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
