Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

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-postmeddelanden, sociala nätverk, dirigera besökare att prenumerera på en kanal och många fler.

I Elementor finns det 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 den kostnadsfria versionen av Elementor 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.

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

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 trigger för att få besökare att surfa på Elementors webbplats. Sedan, på alternativet uppriktning, ställ in den på Droite et, Ändra slutligen Taille av På-knappen Väldigt stor.

skapa en flytande knapp med Z-index

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.

skapa en flytande knapp med Z-index

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).

skapa en flytande knapp med Z-index

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

skapa en flytande knapp med Z-index

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.

skapa en flytande knapp med Z-index

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.

.

0 aktier
del
tweet
Enregistrer