Gratis Elementor Glassmorphism Extension: Frosted Glass Effect i én Toggle
Glassmorphism er det frostede glas look: et semi-transparent panel, der slører, hvad der sidder bag det. Den gratis Glassmorphism udvidelse i Master Addons tilføjer det til Advanced fanen af enhver Elementor widget, kolonne, sektion eller beholder. Tænd for det, indstil sløringen og en gennemsigtig baggrundsfarve, rund hjørnerne, og elementet bliver et glaskort. Det passer til helten overlejringer, priskort, vidnesbyrd og klæbende overskrifter.
Slørings- og glasfarvekontroller
Blur Value løber fra 0 til 100px og starter ved 20px. Baggrundsfarve indstiller glassets farvetone: vælg en RGBA-farve, og sænk dens opacitet, så indholdet bag stadig viser igennem. Border Radius runder hjørnerne i px, % eller em, og Border Width tilføjer en tynd, halvgennemsigtig hvid kant på op til 10px.
- Sløringsværdi fra 0 til 100px, 20px som standard.
- RGBA baggrundsfarve for farvetonen. En HEX eller RGB farve konverteres til 30% opacitet for dig.
- Border Radius pr. hjørne, plus en 0 til 10px glaskant.
Fix Overløb, når sløringen ikke vises
Sløringen kommer fra egenskaben CSS-bagtæppefilter, og overløb: skjult er den mest almindelige årsag til, at den forsvinder. Kontakten Fix Overløb sætter elementets overløb til synligt, så du kan rette det uden at åbne et typografiark.
- Én kontakt i Glassmorphism-panelet, ingen brugerdefineret CSS.
- Brug den, når effekten er slået til men intet ser sløret ud.
- Kontroller også, at elementet sidder over et foto, gradient eller anden travl baggrund. Over almindelig hvid er der intet at sløre.
Glassmorphism CSS vs Glassmorphism extension
Elementors CSS Filtre slører selve elementet, tekst inkluderet. Et glaskort har brug for baggrundsfilter i stedet, hvilket kun slører det, der sidder bag elementet, og Elementor har ingen kontrol for det. Skrevet i hånden ser CSS sådan ud:
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}| Håndskrevet CSS | Glasmorfisme forlængelse | |
|---|---|---|
| Hvor du sætter den | Et brugerdefineret CSS-felt eller dit stylesheet | Kontrolelementer i fanen Avanceret |
| Safari-præfiks | Tilføj selv -webkit-bagtæppe-filter | Inkluderet |
| HEX eller RGB farver | Forbliv solid, medmindre du tilføjer opacitet | Konverteret til 30% opacitet |
| Sløring blokeret af overløb: skjult | Find og tilsidesæt det selv | Fix Overløbskontakt |
| Arbejder på | Uanset hvad din vælger mål | Widgets, kolonner, sektioner og containere |
baggrundsfilter fungerer i nuværende Chrome, Edge, Safari og Firefox. Ældre browsere viser den halvgennemsigtige baggrund uden sløringen. Glas ser bedst ud over bevægelse eller farve, så prøv det oven på Partikler eller en Animeret Gradient Baggrund (Pro). For effekter panelet ikke dækker, tilføj dine egne regler med Brugerdefineret CSS.
Ofte stillede spørgsmål til glassmorfisme
Hvorfor viser min sløringseffekt sig ikke?
Slå Fix Overflow til i Glassmorphism panelet. Det sætter elementets overløb til synligt så baggrundsfilter kan fungere. Sørg også for at der er et billede eller en farverig baggrund bag elementet.
Kan jeg bruge ensfarvede farver med glaseffekt?
Ja. En HEX- eller RGB-farve konverteres til RGBA ved 30% opacitet, så glasset forbliver gennemsigtigt. For nøjagtig kontrol skal du vælge en RGBA-farve og indstille opaciteten selv.
Virker det med noget tema?
Ja. Effekten er indstillet på Elementor elementer, så det virker med ethvert tema, der kører Elementor. Besøgende har brug for en browser, der understøtter baggrundsfilter, som dækker aktuelle versioner af Chrome, Edge, Safari og Firefox.
Er Glassmorphism-udvidelsen gratis?
Ja. Glassmorphism er en af de gratis udvidelser i Master Addons for Elementor. Slå det til i Master Addons instrumentbræt, og det vises på fanen Avanceret for hvert element.
Udforsk flere funktioner til at bygge hurtigere og designe smartere
Hvorfor stoppe ved én effekt? Master Addons-pakken giver alt andet, du har brug for: unikke widgets, dybere tilpasning og specialiserede værktøjer, der fungerer problemfrit sammen. Gør Elementor til dit ultimative designkraftværk.
Container ekstraudstyr
Mønstre
Post/Page Duplicator
Læsning Progress Bar
