CSS-filters gebruiken met Elementor - DeLaatbusiness
facebook chatbots

CSS-filters gebruiken met Elementor

2 min


92

Het bewerken van afbeeldingen met fotobewerkingssoftware zoals Photoshop kan een vervelend proces zijn, vooral als u aan talloze bestanden werkt. Als zodanig is het beter om een ​​enkele afbeelding te hebben en daar waar mogelijk “filters” op toe te passen.

Zoals je in deze GIF ziet, is dat wat we in deze tutorial gaan laten zien!

grow_on_hover_tutorial_0

U zult in staat zijn om CSS-filters te gebruiken en beeldoverlays in realtime op uw foto’s toe te passen zonder dat u afbeeldingen overbodig hoeft te uploaden.

Laten we beginnen!

Stap 1: Sleep op je Elementor-ontwerper de “afbeeldingswidget” naar het gebied “teken widget hier”.

css-filters-tutorial-1

Stap 2: Klik op de afbeeldingswidget die u zojuist hebt gesleept en kies uw afbeeldingsbestand in de linkerzijbalk.

css-filters-tutorial-2

Stap 3: Ga opnieuw in de linkerzijbalk naar het tabblad Stijl en klik op de optie “CSS-filters”.

css-filters-tutorial-3
css-filters-tutorial-4

Stap 4: Er wordt een pop-upvenster geopend waarin u het afbeeldingsfilter kunt toevoegen / bewerken op de manier die u wilt! Klik vervolgens op “Update” als u klaar bent!

css-filters-tutorial-5

Stap 5: Nadat u een afbeelding heeft gekozen, gaat u eerst naar het tabblad “Normaal”. Pas het afbeeldingsfilter aan zoals u dat wilt als het niet zweeft.

css-filters-tutorial-6

Stap 6: Voor dit voorbeeld wil ik de helderheid van het beeld terugbrengen naar de oorspronkelijke waarde (die “100” is) wanneer ik de muisaanwijzer bewoog, dus in de normale toestand heb ik de waarde gewijzigd in “30”.

css-filters-tutorial-7

Stap 7: Ga vervolgens naar het zweeftabblad, klik op de CSS-filters en stel de helderheid van de afbeelding terug naar de oorspronkelijke waarde, namelijk “100”. U kunt de waarde van de “Overgangsduur” manipuleren zodat het een “vertraging” -effect heeft wanneer de afbeelding zijn helderheid verandert van 30 naar 100. Klik vervolgens op “Update” en u bent klaar !!

css-filters-tutorial-8
css-filters-tutorial-9

Nu zijn we klaar! Herhaal gewoon dezelfde procedure naar uw secties en u zou ontwerpen als de beste!


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format