Vil du lage en flytende knapp med Z-indeksen på Elementor ?
Vi er sikre på at du er kjent med knappen som vises foran alt skjerminnhold og vanligvis med en sirkulær form og et ikon i midten. Vel, det er den flytende handlingsknappen.
Den flytende handlingsknappen kan utløse en handling eller sende deg seiler et sted. Slik som triggere for e-post, sosiale nettverk, orientering av Besøkende for å abonnere på en kanal og mange andre.
dans Elementor, det er to metoder for å lage en flytende handlingsknapp, de er som følger:
- Ved å sette Z-indeks
- Ved å lage et popup-vindu -Popup-
I denne opplæringen vil vi bare vise deg hvordan du lager en flytende handlingsknapp ved å sette Z-indeksen. Og vi vil bruke pro-versjonen for å få det til.
Men først, finn ut: Hvordan installere Elementor på WordPress
Hvordan lage den flytende handlingsknappen i Elementor
Du kan bruke gratisversjonen avElementor for å lage den flytende handlingsknappen med denne metoden. Men du må lime inn knappen du designet på hver side der du vil at knappen skal vises på din nettside.
med Elementor Pro, kan du også få tilgang til funksjonen Tilpasset CSS, som vi skal bruke i denne opplæringen.
Gå til Elementor-redigeringsprogrammet; du kan endre det eksisterende innholdet ditt (sider, artikler osv.) eller lage et nytt. I denne opplæringen skal vi endre en side.
Først oppretter du en ny seksjon med en enkelt kolonne. Velg knapp-widgeten og dra og slipp den inn i redigeringsområdet fra widgetpanelet. Bytt deretter knappen Texte og lenke.
I denne opplæringen vil vi bruke knappen som en utløser for å trykke på Besøkende for å navigere i nettstedet Web Elementor. Deretter på alternativet justering, sett den til Droite et, Til slutt, endre taille av På-knappen Veldig stor.
Som du kan se i GIF-en ovenfor, er denne knappen stasjonær i seksjonen. Deretter får vi den til å bevege seg mens vi ruller mens vi holder den i samme posisjon.
Gå til fanen avansert. I parameteren Oppsett, still inn bredden på Inline (bil), definere posisjon på Fast, sett horisontal orientering på Droite og justere den décalage som ønsket.
Deretter vil vi definere det vesentlige i denne metoden. I felten Z-Index, skriv inn nummeret 9999 ; det vil gjøre at knappen alltid er foran (svevende).
Nå er det på tide å rotere den flytende handlingsknappen. Alltid under fanen avansert, få tilgang til css-klasser Fra blokken layout, så skriv rotate innsiden.
Se også: Elementor: Introduserer den beste WordPress-sidebyggeren
Gå deretter til blokken Custom CSS , lim deretter inn følgende kode i feltet:
.rotate.rotate
{transform: rotate(90deg);}Du kan se at knotten nettopp har rotert, men det er et merkelig gap mellom siden av skjermen. Så la oss fikse det ved å justere décalage på -92
Til slutt skal vi gjøre en siste liten berøring for denne flytende handlingsknappen. Få tilgang til blokken Transformator, velg det OVERSIKT, få tilgang til alternativet Offset og sett hvert alternativ til 7.
Det er flere alternativer for å oppnå en bestemt ting i Elementor. Når det kommer til den flytende knappen, er det to alternativer du kan bruke. Her har vi bare dekket én metode, den andre metoden vil være en annen veiledning.
Les også: Elementor: Hvordan migrere et WordPress-nettsted
Hvis du ønsker å ha flere stilalternativer, vil det å lage en flytende handlingsknapp ved hjelp av Popups byggmester være et bedre alternativ, da du vil ha alternativer for å tilpasse knappen så vel som oppførselen, som knappelukketid, varighet, inngangs- eller utgangsanimasjon osv. .
Du har nettopp fullført denne oppgaven enkelt. Bare forhåndsvis nettbrettet og smarttelefonen, og prøv å endre marginene for å matche hver enhet.
Få Elementor Pro nå!
konklusjonen
Så! Det er det for denne artikkelen som viser deg hvordan du bruker en Zoom-effekt på et profilkort. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed innen commentaires.
Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
