Glassmorphism er det frostede glas look: et semi-transparent kort, der slører, hvad der sidder bag det, den stil Apple og Windows lænede sig ind på tværs af deres grænseflader. At bygge det i hånden i Elementor betyder brugerdefineret CSS med baggrundsfilter og et par browser finurligheder. Den gratis Glasmorfisme forlængelse i Master Addons til Elementor gør det til en skift på fanen Avanceret for ethvert element.
Du tænder for den, indstiller en sløringsværdi og en halvgennemsigtig baggrundsfarve, runder hjørnerne, og elementet bliver til et glaskort. Her er hele opsætningen.
Hvad Glassmorphism-udvidelsen gør #
Udvidelsen tilføjer en Glasmorfisme afsnit til fremskreden fane af hvert Elementor-element, fra hele sektioner ned til enkelte widgets. Aktiver det, og elementet får en baggrundssløring, så baggrundsbilledet eller indholdet bag det smører ind i matteret glas, mens elementets egen tekst forbliver skarp.
Udseendet fungerer bedst, når elementet sidder oven på noget visuelt travlt, som en fotobaggrund eller en gradient. Over en almindelig hvid sektion er der intet at sløre, så effekten har intet at vise.
Før du starter #
- WordPress med elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning først.
- Glassmorphism er en gratis udvidelse, så ingen Pro licens er påkrævet.
- Et element placeret over et billede eller farverig baggrund, så sløringen har noget at arbejde med.
Sådan aktiveres Glassmorphism-udvidelsen #
Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Glassmorfisme sidder i vise widgets gruppe med et Populært badge, ved siden af Mønstre og Gitterlinje. Klik på dens toggle, så den bliver lilla, og derefter slå Gem ændringer øverst på siden og vent på den grønne “Indstillinger gemt med succes”-meddelelse.
Hvor finder man det i Elementor editoren #
Åbn din side med Elementor, og vælg det element, du vil forvandle til glas. I videoeksemplet er det en Dual Heading-widget, der sidder på en fotobaggrund. Gå til fremskreden fane, og du finder Glasmorfisme sektion med det lilla MA-badge sammen med de andre Master Addons-udvidelser som Display Conditions og Floating Effects.
Glasmorfisme indstillinger forklaret #
flip Aktiver glassmorfisme til Ja, og kontrollerne vises.
- Sløringsværdi: hvor kraftigt baggrunden bag elementet udtværer, fra 0 til 100px (20px som standard). Sløringen gælder for hele beholderen, og selv en lille værdi som 2 læser tydeligt over et foto.
- Baggrundsfarve: glassets farvetone. Panelspidsen siger det tydeligt: Brug RGBA-farver for at få den bedste kontrol. En almindelig HEX-farve bliver automatisk konverteret til RGBA ved 30 procent opacitet, så glasset aldrig bliver solidt.
- Grænseradius: runder hjørnerne af glaskortet, pr. side eller sammenkædet.
- Border Bredde: tilføjer en semi-transparent hvid kontur fra 0 til 10px, som lyder som kanten af en glasrude. Kantfarven er ikke justerbar her.
- Fix Overløb (hvis sløring ikke virker): en redningsafbryder. Nogle layouts bærer overløb:skjult, som blokerer baggrundsfilteret, der driver sløringen. Slå dette til, hvis du aktiverede alt og stadig ikke ser nogen effekt.
Vælg glasfarven med en RGBA-farve #
Klik på den brugerdefinerede farveprøve ud for Baggrundsfarve og vælg en farve, og træk derefter alfa-skyderen ned. I demoen er værdien en semi-transparent rød (#DC4C4C8C), som toner kortet, mens sæderne på billedet bagved forbliver synlige gennem sløringen.
Rund hjørnerne og red en manglende sløring #
Indstil en Grænseradius for at blødgøre kortet. Et par pixels er nok til glaslooket. Og hvis sløringen nægter at vise, så vend Fix Overflow til Ja: det fjerner overløb:skjult regel, der blokerer baggrund-filter i nogle beholdere.
Den færdige effekt #
Her er resultatet på forenden: et afrundet glaskort med en rød farvetone, billedet sløret bagved, og overskriften og teksten skarp på toppen.
Hvor glasmorfisme fungerer godt #
- Helteoverlejringer. Et glaspanel til overskriften og CTA oven på et foto i fuld bredde.
- Priser og funktionskort. Glaskort over en gradientsektionsbaggrund.
- Vidnesbyrdsblokke. Citater, der flyder over billeder uden at skjule det.
- Klæbende overskrifter. En subtil sløring holder menuen læsbar, når indholdet ruller under den.
- Login eller tilmeldingsbokse. Det klassiske frostede panel over et brandimage.
Ofte stillede spørgsmål #
Hvad er Glassmorphism-udvidelsen i Master Addons?
Det er en gratis udvidelse, der tilføjer en frostet glaseffekt til ethvert Elementor-element fra fanen Avanceret. Du får kontrolelementer til sløringsstyrke, en semi-transparent baggrundsfarve, grænseradius og kantbredde, og du behøver aldrig selv at skrive CSS.
Hvorfor vises glasmorfi-sløringen ikke?
Normalt bærer en overordnet beholder overløb:skjult, som blokerer baggrundsfilteret bag effekten. Tænd for Fix Overflow-skift i bunden af Glassmorphism-sektionen. Kontroller også, at elementet sidder over et billede eller en farvet baggrund, da sløring over almindelig hvid er usynlig.
Hvilke elementer kan bruge glasmorfi-effekten?
Ethvert Elementor-element med en Avanceret fane: sektioner, kolonner, beholdere og individuelle widgets. Aktivér udvidelsen én gang i Master Addons-dashboardet, og Glassmorphism-sektionen vises på fanen Avanceret for hvert element i editoren.
Hvilken baggrundsfarve skal jeg bruge til glasmorfi?
En semi-transparent RGBA-farve. Vælg en hvilken som helst nuance og sænk alfakanalen, så baggrunden forbliver synlig gennem farvetonen. Hvis du indtaster en solid HEX-farve, konverterer udvidelsen den til RGBA ved 30 procent opacitet, så glaseffekten stadig virker.
Er Glassmorphism-udvidelsen gratis?
Ja. Det leveres med den gratis version af Master Addons for Elementor, i gruppen Display Widgets under fanen Extensions. Den prissætning side viser, hvad Pro-planerne tilføjer ud over de gratis funktioner.
Indpakning #
Glassmorphism-udvidelsen forvandler et besværligt CSS-trick til et par kontrolelementer på fanen Avanceret: aktiver, slør, farvetone, radius og kant. Sæt en widget over et foto, hold baggrundsfarven semi-transparent, og ræk ud efter Fix Overflow, hvis sløringen nogensinde skjuler sig. Den Glassmorphism udvidelsesside sammenligner det med at skrive CSS selv. For flere editor opgraderinger som denne, gennemse den Master Addons widgets og udvidelser, eller få fat i et færdigt design fra skabelonsæt og tilsæt glasset ovenpå.
