In diesem Beitrag erfährst du, wie du mit dem Oxygen Builder einen Slide In Button erstellen kannst.
Ein Slide in Button fährt in das Bild rein, sobald du mit der Maus über diesen fährst (hoverst). Dadurch kannst du deinen Kunden eine schnelle Möglichkeit geben, mit dir Kontakt aufzunehmen.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Slide-In-Button in Oxygen Builder entwickeln
Als erstes erstellst du einen Div-Container.
In diesem Container werden unsere gewünschten Elemente eingefügt.
Dieser Div-Container muss nicht in einer Section platziert werden.
Als nächstes gibst du dem Div eine Breite von 140 Pixeln.
Achte auch darauf, dass das Layout des Divs auf “Horizontal” und das Vertical Item Alignment auf “Middle” gestellt ist.
Ansonsten werden die Elemente, welche sich in dem Div befinden untereinander angezeigt.
Klicke dann mit ausgewähltem Div auf den Reiter “Advanced” und scrolle bis zum Ende.
Unter “Position” klickst du auf fixed. Außerdem gibst du oben 200px und rechts -86px ein.
Achte auch darauf, dass du bei Bedarf den z-index anpasst. Das Div muss sich über allen anderen Elementen bewegen. Ist der z-index zu niedrig, kann es passieren, dass Elemente mit einem höheren z-index das Div überlagern.
Klicke dann oben auf den Zustand “:hover” und gehe wieder in den Reiter “Advanced”.
Dort vergibst du wieder den gleichen z-index und gibst oben 200px und rechts 0px ein.
Nun funktioniert der Slide In Button schon, allerdings reagiert er noch ziemlich steif.
Hierfür nutzen wir ein wenig CSS.
Klick wieder auf den Reiter Advanced, nachdem du in den “state”-Zustand gewechselt hast.
Dort gibst du unter “Custom CSS” folgendes ein:
CSS für den Slide In Button
transition-timing-function: ease-in-out;
transition: 0.5s;Dein Button ist fertig und du siehst, dass er nun smooth ins Bild gescrollt wird, sobald du mit der Maus über den Button fährst.
Fazit
Mit einem Slide In Button kannst du deinen Interessenten die Möglichkeit geben, schnell mit dir in Kontakt zu treten.
Dieser Slide In Button ist ein kleiner Button, der vom Seitenrand herausfährt, sobald du mit der Maus darüber fährst.
Bitte beachte, dass diese Funktion auf mobilen Geräten keinen Nutzen bringt, da du auf Handys nicht hovern, sondern nur klicken kannst.
Daher empfehlen wir dir, den Button auf mobilen Geräten auszublenden oder eine andere Möglichkeit zur Verfügung zu stellen.
