FunnelCockpit Logo

TUTORIALS

FunnelBuilder / PageBuilder Funktionen



Der PageBuilder von FunnelCockpit ist gehört zum Herzstück unseres Systems. Damit kannst du Landingpages, Funnelseiten und jegliche Art von Webseiten erstellen. Die Bedienung ist einfach, intuitiv und übersichtlich aber dennoch sehr umfangreich. Um Inhalte hinzuzufügen, gibt es in unserem PageBuilder ein intuitives Sektionen & Element Prinzip. Sektionen geben das Layout vor, zum Beispiel die Anzahl der Spalten und die entsprechenden Größen. Innerhalb dieser Sektionen kannst du beliebig viele Elemente per Drag & Drop hineinziehen und nach deinen Wünschen bearbeiten.

Sektionen hinzufügen und bearbeiten


Über die linke Sidebar kannst du ganz einfach via Drag & Drop oder durch einmaliges anklicken einer Sektions-Vorlage oder Wireframe eine Sektion hinzufügen. Wenn du die Sektion via Drag & Drop hinzufügst, kannst du sie an eine beliebige Stelle auf der Webseite platzieren. Wenn du nur einmal auf die Sektions-Vorlage oder das Wireframe klickst, wird sie ganz unten hinzugefügt.

 

Sektions-Vorlagen

 

Damit du weniger Aufwand hast, bieten wir dir zahlreiche Sektions-Vorlagen, die du Klick für Klick hinzufügen kannst und dir in wenigen Minuten eine vollständige Webseite kreiert. Die Inhalte bzw. Elemente lassen sich zu 100% ohne Coding ganz einfach editieren. Navigiere dich durch die einzelnen Kategorien, um die für dich passenden Sektionsvorlagen zu verwenden.

 

Sektions-Wireframes

 

Mit Sektions-Wireframes kannst du leere Sektionen in dein Webseiten-Layout integrieren, um sie mit Elementen deiner Wahl zu füllen und so deine komplett eigene Webseite von 0 an aufzubauen. Dir stehen zahlreiche Wireframes zur Verfügung und selbstverständlich kannst du die einzelnen Spaltenbreiten durch einfach ziehen der Regler (siehe Animation unten) so einstellen, wie du es möchtest.

 

 

 

Am oberen rechten Rand jeder Sektion erscheint beim MouseOver diese dunkelgraue Sektions-Toolbar. Dir stehen über die Icons diverse Funktionen zur Verfügung. Das 6-Punkte Icon ist unsere Drag & Drop Funktion, ziehe diese Sektion an eine beliebige Stelle auf deiner Webseite. Mit dem 2-Blatt Icon kannst du diese Sektion mit nur einem Klick duplizieren. Über das 3-Punkte Icon erhältst du weitere Funktionen wie Sektions-ID kopieren, Sektion speichern und Sektion löschen. Über das Zahnrad Icon gelangst du zu den Sektions-Einstellungen. Dabei öffnet sich immer rechts eine Sidebar, in der du tiefgehende Einstellungen für die Sektion definieren kannst.

 

 

 

Elemente hinzufügen und bearbeiten


Du kannst ganz einfach per Drag & Drop Elemente aus der linken Sidebar an die gewünschte Stelle auf deine Webseite ziehen. Dir stehen zahlreiche Elemente zur Verfügung, mit denen du vollständige und vor allem hochkonvertierende Seiten erstellen kannst. Wir werden regelmäßig neue innovative Elemente für dich bereitstellen.

 

Formatierungsleiste für jedes einzelne Element

Jedes Element verfügt über eine eigene Formatierungsleiste, die du durch Klick auf das Element anzeigen lassen kannst. In den individuellen Formatierungsleisten stehen dir alle notwendigen Einstellungen zur Verfügung, um das jeweilige Element auf deine Bedürfnisse anzupassen. Jede Funktion ist intuitiv bedienbar und logisch durchdacht, für bestmögliche und schnelle Ergebnisse.

 

Jedes Element hat hat außerdem eine eigene Toolbar. Dir stehen über die Icons diverse Funktionen zur Verfügung. Das 6-Punkte Icon ist unsere Drag & Drop Funktion, ziehe dieses Element an eine beliebige Stelle auf deiner Webseite. Über das 3-Punkte Icon erhältst du weitere Funktionen wie Element-ID kopieren, Element klonen und Element löschen. Über das Zahnrad Icon gelangst du zu den Element-Einstellungen. Dabei öffnet sich immer rechts eine Sidebar, in der du tiefgehende Einstellungen für das Element definieren kannst.

 

Dir stehen 2 Wege zur Verfügung, um in die detaillierteren Element-Einstellungen zu gelangen. Entweder du klickst in der Formatierungsleiste auf das Zahnrad-Icon (ganz rechts) oder du klickst in der Element-Toolbar auf das Zahnrad-Icon. Beide Icons führen dich zur rechten detaillierteren Element-Sidebar mit noch mehr Einstellungen und Funktionen, für noch mehr Personalisierung.

 

 

 

 

 

Weiterführende Anleitungen:

  • Wenn du auf deiner Seite Buttons, Links oder anklickbare Elemente auf eine bestimmte Sektion oder Element verweisen möchtest, um einen automatischen Scroll zur bestimmten Stelle deiner Seite zu realisieren, geht das im FunnelBuilder ganz einfach. Neben jeder Sektion und jedem Element findest du in der Icon-Bar die Funktion "Sektions-/Element-ID kopieren. Wenn du dort einmal draufklickst, wird die ID des Elements bzw. der Sektion in die Zwischenablage kopiert. Beispiel: #element-kgBhKyJX


    Nun musst du lediglich diese ID (inklusive #) als Verlinkungsziel bzwl. Ziel-URL festlegen. Das geht wie angesprochen sowohl bei CTA-Buttons, Links und anderen anklickbaren Elementen wie Navigation und Bilder. Wichtig ist, dass du lediglich die ID als URL einträgst. Wenn du optional von einer Seite auf die gewünschte Stelle einer ganz anderen Seite verlinken möchtest, dann musst du ebenso die Element- oder Sektions-ID kopieren und als Verlinkungsziel eintragen. Hier ist es erforderlich vorher die Root-URL mit anzugeben. Dann lädt die Seite und springt automatisch zum Element bzw. zur Sektion. Beispiel: https://www.funnelcockpit.com/#row-Q9chfe6M 

  • Bei folgenden Elementen bieten wir dir die Möglichkeit URL-Parameter als Platzhalter in doppelten geschweiften Klammern zu benutzen: Text-Editor & CTA Button. Diese Platzhalter werden dann automatisch durch die URL-Parameter ersetzt.

    Das kann dann bspw. so aussehen:

    Text: Hallo {{firstname}} {{lastname}}, wie geht es dir?
    URL: https://dein-funnel.com/?firstname=Max&lastname=Mustermann

  • Wenn du ein Template aus dem Marktplatz oder von einem anderen FunnelCockpit User importiert hast, kann es sein, dass bestimmte CSS-Codes definiert wurden, die du selbst nicht nutzen möchtest. Um diese zu entfernen, musst du lediglich in das "Styling"-Menü gehen und unter "Eigene CSS Styles" sämtliche Codes entfernen.

 

Schriftliches Handbuch:

  • Seitenname

    Dies ist der Name deiner Funnelseite, der in deiner Funnel-Übersichtsseite angezeigt wird. Dieser Name wird deinen Besuchern nicht angezeigt, sondern nur für die interne Bezeichnung genutzt. 

     

    URL

    Hier hast du die Möglichkeit die URL deiner Seite anzupassen. Wenn du die jeweilige Funnelseite als Startseite nutzen möchtest, lasse das Feld leer, ansonsten trage eine Bezeichnung für die Unterseite ein. Achte bitte darauf nur Kleinbuchstaben zu nutzen. Ein Beispiel für eine Unterseite wäre www.deine-domain.de/webinar

     

     

    META-Angaben (SEO) 

    Die META Angaben sind für Google sehr wichtig, denn so kannst du das Erscheinungsbild deiner Seite in der Google-Suche anpassen. Denke dabei immer daran interessant zu wirken, damit Leute die dich finden auch gewollt sind, auf deine Webseite zu klicken.

     

    Titel: Im Titel benennst du deine Webseite, dies sollte die Überschrift für deine Seite sein. Sie ist auf deiner Seite nicht inhaltlich sichtbar sondern lediglich oben im Browserfenster und als Titel deiner Seite in der Google-Suche. Hier solltest du dein Keyword unbedingt einbinden, wenn du bei Google gefunden werden möchtest.

     

    Beschreibung: Die Beschreibung ist wie der Name schon sagt dazu da, deine Webseite zu beschreiben. Hier solltest du ebenfalls dein gewünschtes Keyword mit einbringen. Achte darauf nicht mehr als 71 Zeichen zu verwenden, da deine Beschreibung sonst von Google nicht übernommen wird.

     

    Facebook Thumbnail: Hier kannst du ein Bild hochladen, das in Facebook als Vorschaubild für deine Webseite angezeigt wird. Wir empfehlen dir eine Größe von 249px (Höhe) und 476px (Breite)

     

    Favicon: Hier kannst du ein kleines Icon hochladen, das im Browserfenster angezeigt wird. Wir empfehlen dir hier eine Größe von 16x16px

     

    Suchmaschinen (Indexierung): Wenn du möchtest, dass deine Seite bei Google und anderen Suchmaschinen gelistet wird, dann aktiviere diese Funktion. Solltest du die jeweilige Seite von Suchmaschinen ausgrenzen, so deaktiviere diese Funktion.

  • Bounce Tool

    Mit dem Bounce Tool kannst du deine Webseitenbesucher nach Klick auf den "Zurück-Button" auf eine von dir definierte Webseite leiten. Mit dieser Funktion kannst du deinen Umsatz um ein vielfaches steigern, weil du so Besucher auf ein spezielles Angebot leiten kannst, die deine Seite eigentlich verlassen wollten. Trage dazu einfach die entsprechende Ziel-URL in das Feld ein. Dieses Feature ist nur ab dem BUSINESS Paket verfügbar.

     

    Mobile Weiterleitungs-URL

    Auch wenn unsere Funnelseiten alle für mobile Geräte optimiert sind, kannst du individuell mobile Webseitenbesucher auf eine andere Webseite weiterleiten. Trage dazu einfach die entsprechende Ziel-URL in das Feld ein.

     

    Header

    Hier kannst du eigene Codes in den Header-Bereich einbinden. Beispielsweise FacebookPixel, Splittest-Pixel, Google-Verifizierung und vieles mehr.

     

    Template & Export

    Unter diesem Tab kannst du deine Funnelseite entweder als .Json-Datei oder Intern als Vorlage speichern und so jederzeit wieder für neue Seiten verwenden.

  • Inhaltsbreite (Desktop)

    Mit dieser Funktion kannst du die Breite deiner Webseite einstellen. Wir empfehlen dir einen Wert zwischen 800 - 1200px. Diese Funktion hat keinen Einfluss auf die Breite am Smartphone, da die mit FunnelCockpit erstellten Seiten sich automatisch an die Smartphone-Breite anpassen (Responsive).

    Hintergrundfarbe: Hier kannst du die Hintergrundfarbe deiner Seite einstellen.

    Hintergrundbild: Hier kannst du ein Hintergrundbild für deine Webseite festlegen.

    Bildposition: Hier kannst du einstellen, wie das Hintergrundbild eingebunden wird.

    Schriftgröße: Hier kannst du die Standard Schriftgröße für Texte deiner Seite festlegen.

    Schriftgröße Mobil: Hier kannst du die Standard Schriftgröße der Texte deiner Seite für Mobilgeräte festlegen.

    Textfarbe: Hier kannst du die Schriftfarbe der Texte auf deiner Seite festlegen.

    Standard Schriftart: Hier kannst du die Standard Schriftart für die Seite festlegen.

    Zeilenhöhe: Hier kannst du die Standard Zeilenhöhe für deine Texte festlegen.

    Zeilenhöhe Mobil: Hier kannst du die Standard Zeilenhöhe der Texte für Mobilgeräte festlegen.

    Linkfarbe: Hier kannst du die Standard-Farbe hervorgehobener Links auf deiner Seite festlegen.

    Hinweis: Du kannst die Schriftgröße, -Farbe, -Art und -Zeilenhöhe auch separat für einzelne Element festlegen.

     

    Eigene CSS Styles

    Hier kannst du (falls notwendig) eigene CSS Codes einbinden, um diverse Elemente per CSS umzugestalten. 
    Beispielcode: #element-JdNRSFwg { margin-top:-35px;}



  • Auf Smartphone ausblenden? Aktiviere diese Funktion, um die Sektion am Smartphone auszublenden.

    Auf Desktop ausblenden? Aktiviere diese Funktion, um die Sektion am Desktop auszublenden.

    Zeitgesteuert einblenden? Aktiviere diese Funktion, um die Sektion zeitgesteuert einblenden zu lassen.

    Zeitgesteuert ausblenden? Aktiviere diese Funktion, um die Sektion zeitgesteuert ausblenden zu lassen.

     

    Fertig-Schaltfläche: Klicke auf "Fertig", um die Einstellungen zu übernehmen und das Fenster zu schließen.

 

ODER

Noch kein FunnelCockpit? Jetzt informieren!

© FunnelCockpit