bei fast jedem Element hast Du unterhalb der elementeinstellungen noch weitere Tabs wo du weitere Styling Option und Features freischalten kannst wir nehmen jetzt hier als Beispiel einmal den CTA Button weil hier deutlich mehr Tabs sind als bei anderen Elementen damit wir hier einmal im Schnelldurchgang alle einzelnen Funktionen besprechen können wir finden jetzt hier im er ersten Tab Button finden wir jetzt hier Styling Möglichkeiten was die was den Text angeht und den Button als solches äh wir können jetzt hier eine optional andere Schriftart auswählen als die die letztendlich als Standardschriftart für diese Seite definiert wurde wir können z. B sagen okay wir hätten jetzt hier gerne diese Schriftart ja und wenn du sagst okay nee die möchte ich doch nicht haben ich möchte doch diese Standardschriftart behalten die wir letztendlich unter Styling definiert haben dann klickst du einfach auf X und die Schriftart ist wieder auf Standard definiert im nächsten Fenster bzw im nächsten Feld können wir die Schriftgröße einstellen das heißt wir können hier über die Taste Tastatur wenn wir einmal hier in das Feld reingeklickt haben nach oben und nach unten gehen können dann quasi die Schriftgröße des Buttons verändern das ganze geht auch über Plus und Minus oder du kannst das ganze markieren und schreibst dir beispielsweise 60 rein dann ist das natürlich deutlich zu groß wie man sieht ja tragen wir jetzt mal 20 ein und lassen das mal so als nächstes können wir die Button Ausrichtung definieren bedeutet möchtest du das gerne in voller Breite haben linksbündig ne wie jetzt hier beispielsweise wenn wir das auswählen oder rechtsbündig oder zentriert ja oder halt wie es Hal vorher war in der vollen Breite als nächstes können wir hier noch den Hintergrund des Buttons definieren auch hier stehen uns viele Möglichkeiten zur Verfügung wir können einmal selber aus diesem kalorpicker eine Farbe auswählen oder wir wählen eine Branding palettenfarbe aus eine der vier Stück oder eine intern gespeicherte Farbe können wir auswählen und zusätzlich können wir natürlich auch hier e RGB oder Hexcodes einbauen das Weiteren können wir hier die Button Textfarbe editieren auch hier gleiches Spiel wie bei der Hintergrundfarbe hier können wir sämtliche Farbcodes oder auch Farben übernehmen die wir schon vordefiniert haben gehen wir zum nächsten Tab Beschreibung hier können wir letztendlich Änderungen vornehmen was die Beschreibung angeht also die Beschreibung entspricht beispielsweise den Bereich hier nur für kurze Zeit verfüg ich mich jetzt gerade verschrieben für kurze Zeit verfügbar können das ganze kursiv machen können z. hingehen und sagen okay wir machen das mal was kleiner so hier können wir noch die Schriftgröße mobil einstellen wenn wir das ganze mobil dann eventuell noch kleiner haben wollen oder noch größer wir können Abstand nach oben und nach unten definieren Kön Z sagen okay da soll ein bisschen mehr Abstand oder ein bisschen weniger und wir können zusätzlich noch sagen okay diese Beschreibung soll jetzt nur auf dem Desktop angezeigt werden aber nicht auf Mobilgeräten dann Deak aktiviert man quasi einfach diese Funktion und deaktiviert quasi sozusagen die Beschreibung auf Mobilgeräten ja als nächstes gehen wir zum nächsten Tab Rahmen hier können wir einen Rahmen definieren wir können z.
B sagen okay wie soll der Rahmen dieses Buttons sein aktuell ist hier kein rahmenstil definiert das heißt wir können z. B sagen okay wir hätten gerne einen massiven Rahmen und den wollen wir z. B in die im Gold haben und dann stellen wir noch ein die Rahmenbreite machen wir mal auf sech ja einfach nur damit man das jetzt optisch besser sehen kann das sieht natürlich nach nichts aus hier kann man den rahmenradius einstellen das bedeutet wie stark sind die Kanten abgerundet ne das sieht man wenn man jetzt auf Null geht dann hat man quasi gar keine Abrundung an den Kanten und wenn wir jetzt hochgen z.
B auf 6 dann haben wir relativ runde Kanten das ganze kann man natürlich deutlich noch in die in die Höhe treiben und sagen hier ne da hat man fast kompletten Kreis als Button ja natürlich auch immer abhängig davon wie breit der ist denn sonst hätte man natürlich ein relativ hohen Button aber hier können wir wie gesagt dann entsprechend den rahmenradius definieren wir können zusätzlich noch ein Button Schatten hinzufügen ne das wäre dann quasi der Schatten unterhalb des des Buttons das würde quasi bedeuten dass man als einziges unten einen anderen Rahmen hat als oben ja das kann man z. B so machen indem man hier eventuell ein bisschen weniger Deckkraft rein macht dann wirkt das schattig ja also man kann z. B das so machen und dann so ne das wird häufig genutzt oder man nimmt eine ähnliche Farbe wie dieses Blau und macht das dann bisschen heller genaus so ne dann hat man da quasi so ein anderen Schatten den man dann quasi noch mal so ein bisschen hervorheben kann als nächst gehen wir zum nächsten Tab hier haben wir die Möglichkeit Button hintergrundverlauf einzurichten hier können wir dann die startfarbe und die endfarbe auswählen bedeutet okay wenn wir ein Verlauf haben wollen keine normale füllende Farbe sondern ein Verlauf wo wir sagen okay von rot nach sieht jetzt natürlich nach nichts aus aber von rot nach grün ja dann hätte man hier quasi so ein Verlauf drin das ganze kann man auch wieder deaktivieren müsste man halt dann aber noch mal wie man sieht weil man es ja einmal definiert hat dann hier bei button noch mal aktivieren aber das geht gerade anscheinend nicht ansonsten müsste ich gerade mal schauen wenn wir das hier rausmachen und dann [Musik] deaktivieren nee das hat jetzt nicht geklappt das scheint dann aktueller Bug zu sein der wird aber dann spätestens dann wenn du das Video siehst wieder behoben sein genau gehen wir weiter ich lösche das mal eben das wird wahrscheinlich im CSS Code irgendwo drin stehen genau hier genau also da war im Prinzip nur dieses kann ich no mal rückgängig machen dieser Code der quasi noch drin war der nicht drin bleiben darf so aber wie gesagt der Bug wird dann behoben sein sobald du das Video hier siehst als nächstes bleiben wir hier beim Tab Extras können wir mobil priorisieren bedeutet dass dieses Element und das passiert mit jedem Element wo man diese Funktion aktiviert quasi ein Element hochrutscht das heißt mobil zu priorisieren bedeutet dass dieses Element mobil nicht wie auf dem Desktop unterhalb dieser benefitliste ist sondern da drüber ja und das kannst du dann quasi genauso dann einstellen und definieren wie du selber gerne möchtest so kannst du quasi die Anordnung auf Mobilgeräten etwas editieren wenn du sagst okay es ist wi wichtig dass der Button weiter oben ist dann priorisiere ich den und schick den quasi ein Element nach vorne oder in dem Fall nach oben als nächstes haben wir hier auch die Möglichkeit ein scroll Effekt zu implementieren wir haben die Element Freigabe bedeutet man kann dieses Element dann einmal hier auf dieser funnelseite erstellen und kann sagen okay man möchte dieses Element auch auf anderen funnelseiten implementieren man kann z.
B sagen jetzt hier C Button oder einfach nur nennt man das CTA ja dann wird quasi jetzt intern im System ein sogenanntes geteiltes Element erstellt und jetzt kannst du auf einer anderen funnelseite im gleichen Funnel quasi dieses geteilte Element auswählen wenn du auf kann ich dir mal eben zeigen wenn du auf Element hinter hinzufügen klickst dann gibt es hier oben hier unten einen ein einen Button wo steht freigegebenes Element einfügen und dann das zeigt jetzt hier nicht an weil das natürlich hier schon implementiert ist aber aber dann kannst du das entsprechende Element auswählen das würde dann in dem Fall CTA heißen der Vorteil dabei ist dass es dann ausreicht wenn du dieses Element auf einer funnelseite bearbeitest und dann wird es quasi sofort auch bei anderen funnelseiten bearbeitet ja ist eine kleine Spielerei die sich einige Funnel Cockpit User gewünscht haben und ein einigermaßen oft auch genutzt wird aber ist auch selbstverständlich nur eine optionale Möglichkeit dann haben wir noch die möglich hier eine html Aktion quasi ausführen zu lassen das bedeutet dieser HTML Code wird beim Klick auf den Button ausgespielt und kann z. B für Facebook PI Pixel genutzt werden ja du aktivierst die Funktion und kannst dann hier entsprechend einen HTML Code einbauen so gehen wir zum nächsten Tab das ist der Tab Abstände hier können wir den Innenabstand links rechts oben unten einstellen und selbstverständlich auch den Außenabstand links rechts oben und unten das heißt hier entweder über Plus oder über die Tastatur mit hoch und runter kann man entsprechend die Abstände der jeweiligen Elemente editieren als nächstes haben wir jetzt hier die Funktion Animation wir können z. B sagen okay dieser Button der soll bitte bouncen dann sieht man hier in der Vorschau wie das dann letztendlich aussieht man kann auch sagen das soll sich die ganze Zeit wiederholen dann sieht man hier entsprechend wie letztendlich der Button später aussehen wird auf der Seite also welche Animation dann die ganze Zeit stattfindet wird ja das ganze kann man auch mit Puls machen dann pulsiert das quasi die ganze Zeit und das kann man auch wieder ja hier gibt's eine Menge Möglichkeiten dann sieht man es an der Vorschau und kann auch natürlich auch noch hingehen und sagen okay wie lange soll man warten bis zu der ersten Animation also soll das vielleicht erst nach 10 Sekunden passieren oder sofort soll es eine andere Animation geben wenn man mit der Maus da drüber geht z.
B dass das ganze dann entsprechend größer wird wie jetzt hier ne also grow dass wenn man mit der Maus drüber geht das ganze größer wird ähm oder hat man hier noch eine pulsierende Animation die sieht man dann hier auch direkt das ist auch eine neue Funktion die wir implementiert haben sieht auch sehr schick aus ähnlich wie bei unserem Play bututton von unserem Videoplayer und sorgt auch für eine hohe Aufmerksamkeit das ganze kann man dann hier auch mit einem Klick aktivieren oder wieder deaktivieren als nächstes haben wir dann hier entsprechend auch wieder äh was wir schon kennen die C SS Codes die wir dann zum einen sehen können was wir bislang definiert haben durch diese Funktion hier und natürlich können hier für einzelne Bereiche dann entsprechend auch eigene CSS Codes noch mit zusätzlich eingebaut werden also jetzt einfach mal als Beispiel na gut da haben wir ja jetzt wenn wir jetzt hier z. B mal den Text ändern und das ganze nicht groß schreiben sondern tatsächlich in Kleinbuchstaben jetzt Zugang Zugang sichern ja können wir z. B hier hingehen ich nehme jetzt einfach mal Text transform und dann uppercase und dann wird das Ganze groß geschrieben ja also das sind dann quasi einzelne wenn wir das wieder rausmachen dann ist das wieder klein geschrieben das sind quasi einzelne CSS Codes die man dann ja nach Laune sage ich mal implementieren kann es gibt natürlich zahlreiche weitere ja CSS Codes die implementieren kann die findet man auch entsprechend hier über diese integrierte CSS Datenbank also z.
B alles was mit Text zu tun hat also hatten wir jetzt gerade z. B [Musik] schriftvariante Text aus Text texttransformation ne also da hatten wir dieses Text transform und dann haben wir auch dieses uppercase gehabt das sieht man dann hier entsprechend also hier steht auch als Beispiel wir können jetzt auch hingehen und sagen okay wir fügen das jetzt ein und dann wählen wir aus okay okay wo wollen wir das Einfügen genau hier und dann wird das hier entsprechend wie wir hier sehen können dann eingebaut ja und dann haben wir das wenn wir schauen auch groß geschrieben das ist entsprechend sage ich mal auch sehr Nut nützliche Funktion wie ihr seht wir haben eine Menge Möglichkeiten was man hier einbauen kann und hier kann man dann mit einem Klick diese CSS Codes sozusagen dann entsprechend sofort in den ausgewählten Bereich einbauen als nächstes haben wir jetzt hier in dem Fall noch Attribute hier können noch weitere HTML Attribute hinzugefügt werden das ist beispielsweise für upsells von ccard notwendig dass wir hier dann entsprechend ne wie das hier auch erklärt wird data Attribute ohne data z. B ccard- yes oder ccard- no um da entsprechend dann weitere Aktionen durchzuführen wenn jemand auf diesen Button klickt dann weiter unten noch unterhalb der Tabs findet man noch weitere icons und Einstellmöglichkeiten wir haben hier einmal ein Icon von einem Smartphone wenn man da drüber geht dann sieht man anhand des Tooltipps auch schon was passiert wenn man drauf klickt auf Smartphone ausblenden das bedeutet wenn das hier rot markiert ist dann wird dieses Element auf mobilen Geräten gar nicht erst angezeigt ja und das Gleiche kann man dann auch für desktopgäte machen also wenn man jetzt hier drauf klickt dann sieht man auch im Hintergrund verschwindet dieses Element wenn man das jetzt quasi wieder aktiviert ist das Element wieder da und wird das dann wird das quasi nur auf desktopgäten no angezeigt hier kannst du das Element quasi unsichtbar machen nicht im funnelbilder sondern tatsächlich nur später auf der Live Funnel Seite bedeutet du sagst okay ich hätte diesen Button eigentlich schon gerne auf der Seite aber jetzt gerade brauche ich den nicht oder möchte den gerade nicht drin haben für die Webseitenbesucher dann klickst du einfach auf unsichtbar und dann siehst quasi nur du diesen Button im funnelbilder und ansonsten an keiner anderen Stelle und auch kein anderer Besucher seiner Seite ja das ganze sieht man anhand dessen dann immer dass es aktiviert ist wenn es rot hinterlegt ist und wenn es hier dann entsprechend auch noch durchgestrichen ist so ein weiter eine weitere Funktion die wir haben ist einblenden nach man kann z.
