Vil du lave en flydende knap med Z-indekset tændt Elementor ?
Vi er sikre på, at du er bekendt med knappen, der vises foran alt skærmindhold og normalt har en cirkulær form og et ikon i midten. Nå, det er den flydende handlingsknap.
Den flydende handlingsknap kan udløse en handling eller sende dig til at sejle et sted hen. Såsom triggere til e-mails, sociale netværk, orientering af besøgende at abonnere på en kanal og mange andre.
dans Elementor, der er to metoder til at oprette en flydende handlingsknap, de er som følger:
- Ved at indstille Z-indeks
- Ved at oprette et popup-vindue -Popup-
I denne tutorial vil vi kun vise dig, hvordan du opretter en flydende handlingsknap ved at indstille Z-indekset. Og vi vil bruge pro-versionen til at få det til at ske.
Men først, find ud af: Sådan installeres Elementor på WordPress
Sådan opretter du den flydende handlingsknap i Elementor
Du kan bruge den gratis version afElementor for at oprette den flydende handlingsknap med denne metode. Men du skal indsætte den knap, du har designet, på hver side, hvor du ønsker, at knappen skal vises på din websted.
Ved Elementor Pro, kan du også få adgang til funktionen Brugerdefineret CSS, som vi vil bruge i denne tutorial.
Gå til din Elementor-editor; du kan ændre dit eksisterende indhold (sider, artikler osv...) eller oprette et nyt. I denne tutorial skal vi ændre en side.
Først skal du oprette en ny sektion med en enkelt kolonne. Vælg knap-widgetten og træk og slip det i redigeringsområdet fra widgetpanelet. Skift derefter knappen Tekster og link.
I denne vejledning vil vi bruge knappen som en udløser til at trykke på besøgende at navigere i Websted Elementor. Så på muligheden tilpasning, indstil den til Droite et, Til sidst skal du ændre taille på On-knappen Meget store.
Som du kan se i GIF'en ovenfor, er denne knap stationær i sektionen. Dernæst får vi den til at bevæge sig, mens vi ruller, mens vi holder den i samme position.
Gå til fanen avanceret. I parameteren Layout, indstil bredden på Inline (bil), definere position på Fast, sæt vandret orientering på Droite og justere det décalage som du ønsker.
Dernæst vil vi definere det væsentlige i denne metode. I marken Z-Index, indtast nummeret 9999 ; det vil gøre, at knappen altid er foran (svævende).
Nu er det tid til at dreje den flydende handlingsknap. Altid under fanen avanceret, få adgang til css klasser fra blokken layout, så skriv rotate inde.
Se også: Elementor: Introduktion af den bedste WordPress-sidebygger
Gå derefter til blokken Brugerdefineret CSS , og indsæt derefter følgende kode i feltet:
.rotate.rotate
{transform: rotate(90deg);}Man kan se, at knappen lige har drejet, men der er et underligt mellemrum mellem siden af skærmen. Så lad os rette det ved at justere décalage ved -92
Til sidst vil vi lave et sidste lille tryk på denne flydende handlingsknap. Få adgang til blokken Transformer, vælg det OVERSIGT, få adgang til muligheden skift og indstil hver indstilling til 7.
Der er flere muligheder for at opnå en bestemt ting i Elementor. Når det kommer til den flydende knap, er der to muligheder, du kan bruge. Her har vi kun dækket én metode, den anden metode vil være en anden tutorial.
Læs også: Elementor: Sådan migrerer du et WordPress-websted
Hvis du ønsker at have flere stylingmuligheder, vil oprettelse af en flydende handlingsknap ved hjælp af Popups builder være et bedre alternativ, da du vil have muligheder for at tilpasse knappen såvel som adfærden, såsom knappernes lukketid, varighed, ind- eller udgangsanimation osv. .
Du har lige fuldført denne opgave nemt. Bare se en forhåndsvisning af din tablets og smartphones arbejde, og prøv at ændre margener, så de passer til hver enhed.
Hent Elementor Pro nu!
Konklusion
Så! Det er det for denne artikel, der viser dig, hvordan du anvender en Zoom-effekt på et profilkort. Hvis du har nogen bekymringer om, hvordan du kommer dertil, så lad os det vide inden for kommentarer.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
