Vill du skapa en flytande knapp med Z-index på Elementor ?
Vi är säkra på att du är bekant med knappen som visas framför allt innehåll på skärmen och vanligtvis med en cirkulär form och en ikon i mitten. Tja, det är den flytande åtgärdsknappen.
Den flytande åtgärdsknappen kan utlösa en åtgärd eller skicka dig att segla någonstans. Såsom triggers för e-post, sociala nätverk, orientering av besökare att prenumerera på en kanal och många andra.
Dans Elementor, det finns två metoder för att skapa en flytande åtgärdsknapp, de är följande:
- Genom att ställa in Z-index
- Genom att skapa ett popup-fönster -Popup-
I den här handledningen kommer vi bara att visa dig hur du skapar en flytande åtgärdsknapp genom att ställa in Z-indexet. Och vi kommer att använda proversionen för att få det att hända.
Men först ta reda på: Hur man installerar Elementor på WordPress
Hur man skapar den flytande åtgärdsknappen i Elementor
Du kan använda gratisversionen avElementor för att skapa den flytande åtgärdsknappen med den här metoden. Men du måste klistra in knappen du designade på varje sida där du vill att knappen ska visas på din webbplats.
med Elementor Pro, kan du också komma åt funktionen Anpassad CSS, som vi kommer att använda i den här handledningen.
Gå till din Elementor-redigerare; du kan ändra ditt befintliga innehåll (sidor, artiklar, etc...) eller skapa ett nytt. I den här handledningen kommer vi att ändra en sida.
Skapa först ett nytt avsnitt med en enda kolumn. Välj knappwidgeten och dra och släpp den i redigeringsområdet från widgetpanelen. Ändra sedan knappen Texte och länken.
I den här handledningen kommer vi att använda knappen som en utlösare för att trycka på besökare för att navigera i webbplats Elementor. Sedan, på alternativet uppriktning, ställ in den på Droite et, Ändra slutligen Taille av På-knappen Väldigt stor.
Som du kan se i GIF-bilden ovan är den här knappen stationär i avsnittet. Därefter kommer vi att få den att röra sig medan vi rullar medan vi håller den i samma position.
Gå till fliken advanced. I parametern Layout, ställ in bredden på Inline (bil), definiera position på Fast, uppsättning horisontell orientering på Droite och justera det decalage såsom önskas.
Därefter kommer vi att definiera det väsentliga i denna metod. På fältet Z-index, ange numret 9999 ; det gör att knappen alltid är framme (svävande).
Nu är det dags att vrida den flytande åtgärdsknappen. Alltid under fliken advanced, få tillgång till css-klasser från blocket Layout, Skriv sedan rotate inuti.
Se även: Elementor: Introduktion av den bästa WordPress-sidbyggaren
Gå sedan till blocket Anpassad CSS , klistra sedan in följande kod i fältet:
.rotate.rotate
{transform: rotate(90deg);}Du kan se att vredet precis har vridits, men det finns ett konstigt mellanrum mellan sidan av skärmen. Så låt oss fixa det genom att justera decalage vid -92
Slutligen ska vi göra en sista liten touch för den här flytande åtgärdsknappen. Gå till blocket Transformator, välj det ÖVERSIKT, komma åt alternativet shift och ställ in varje alternativ till 7.
Det finns flera alternativ för att uppnå en viss sak i Elementor. När det kommer till den flytande knappen finns det två alternativ du kan använda. Här har vi bara täckt en metod, den andra metoden kommer att vara en annan handledning.
Läs också: Elementor: Hur man migrerar en WordPress-webbplats
Om du vill ha fler stilalternativ kommer att skapa en flytande åtgärdsknapp med Popups byggare vara ett bättre alternativ eftersom du kommer att ha alternativ för att anpassa knappen såväl som beteendet, som knappstängningstid, varaktighet, ingångs- eller utgångsanimering, etc. .
Du har precis slutfört denna uppgift enkelt. Förhandsgranska bara din surfplatta och smartphone och försök ändra marginalerna så att de matchar varje enhet.
Skaffa Elementor Pro nu!
Slutsats
Så ! Det var allt för den här artikeln som visar hur du använder en zoomeffekt på ett profilkort. Om du har några funderingar kring hur du tar dig dit låt oss veta inom commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
