Wilt u een zwevende knop maken met de Z-index aan? Elementor ?
We zijn er zeker van dat je bekend bent met de knop die voor alle scherminhoud verschijnt en meestal met een ronde vorm en een pictogram in het midden. Nou, dat is de zwevende actieknop.
De zwevende actieknop kan een actie activeren of je ergens heen sturen. Zoals triggers voor e-mails, sociale netwerken, oriëntatie van bezoekers om je te abonneren op een kanaal, en vele anderen.
In Elementor, zijn er twee methoden om een zwevende actieknop te maken, deze zijn als volgt:
- Door Z-Index in te stellen
- Door een pop-upvenster te maken -Popup-
In deze zelfstudie laten we u alleen zien hoe u een zwevende actieknop kunt maken door de Z-index in te stellen. En we zullen de pro-versie gebruiken om dit mogelijk te maken.
Maar ontdek eerst: Hoe Elementor op WordPress te installeren
Hoe de zwevende actieknop te maken in Elementor
U kunt de gratis versie vanElementor om met deze methode de zwevende actieknop te maken. Maar u moet de door u ontworpen knop op elke pagina plakken waar u de knop op uw pagina wilt weergeven website.
met Elementor Pro, hebt u ook toegang tot de functie Aangepaste CSS, die we in deze zelfstudie zullen gebruiken.
Ga naar je Elementor-editor; u kunt uw bestaande inhoud (pagina's, artikelen, enz...) wijzigen of een nieuwe maken. In deze tutorial gaan we een pagina aanpassen.
Maak eerst een nieuwe sectie met een enkele kolom. Selecteer de knop-widget en sleep het vanuit het widgetpaneel naar het bewerkingsgebied. Verander dan de knop Teksten en link.
In deze zelfstudie gebruiken we de knop als een trigger om de bezoekers om te navigeren Site web Elementor. Dan, op de optie alignement, zet het op de Droite et, Verander ten slotte de grootte van de Aan-knop Erg groot.
Zoals je kunt zien in de GIF hierboven, staat deze knop stil in de sectie. Vervolgens laten we het bewegen terwijl we scrollen terwijl we het in dezelfde positie houden.
Ga naar het tabblad vergevorderd. In de parameter Lay-out, stel de breedte in op Inline (auto), definieer de positie op Vast, definieer horizontale oriëntatie op Droite en pas het aan Tijdsverschil zoals u wenst.
Vervolgens zullen we de essentie van deze methode definiëren. In het veld Z-Index, voer het nummer 9999 . in ; het zal de knop altijd vooraan maken (zwevend).
Nu is het tijd om de zwevende actieknop te draaien. Altijd onder het tabblad vergevorderd, Toegang krijgen tot css klassen van het blok lay-out, Schrijf dan rotate binnen.
Zie ook: Elementor: introductie van de beste WordPress Page Builder
Ga daarna naar het blok Aangepaste CSS en plak de volgende code in het veld:
.rotate.rotate
{transform: rotate(90deg);}Je kunt zien dat de knop net is gedraaid, maar er is een rare opening tussen de zijkant van het scherm. Laten we het dus oplossen door de aan te passen Tijdsverschil bij -92
Ten slotte gaan we nog een laatste kleine aanraking doen voor deze zwevende actieknop. Toegang tot het blok Transformator, selecteer het OVERZICHT, toegang tot de optie verschuiving en stel elke optie in op 7.
Er zijn verschillende opties om een bepaald ding in Elementor te bereiken. Als het gaat om de zwevende knop, zijn er twee opties die u kunt gebruiken. Hier hebben we slechts één methode behandeld, de andere methode zal een andere zelfstudie zijn.
Lees ook: Elementor: een WordPress-website migreren
Als je meer stijlopties wilt hebben, is het maken van een zwevende actieknop met behulp van Popup's builder een beter alternatief, omdat je opties hebt om zowel de knop als het gedrag aan te passen, zoals sluitingstijd van de knop, duur, animatie voor in- of uitstappen, enz. .
U hebt zojuist deze taak gemakkelijk voltooid. Bekijk een voorbeeld van uw tablet- en smartphonewerk en probeer de marges aan te passen aan elk apparaat.
Download Elementor Pro nu!
Conclusie
Alstublieft ! Dat was het voor dit artikel dat u laat zien hoe u een zoomeffect op een profielkaart toepast. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
