All One Webtools
Website- & Funnel-Builder
Website Builder
– Drag & Drop Aufbau, Design-Templates, SEO-Grundlagen, Hosting über ALL ONE
Funnel Builder
– Landingpages, Checkout-Seiten, One-Click-Upsells, A/B-Tests
Blog-Funktion
– Artikel veröffentlichen, Kategorien, Import aus WordPress
SEO-Optionen
– Meta-Tags, URLs, On-Page-Optimierung, Yext-Integration für lokale Sichtbarkeit
Individuelle Kopf- und Fußzeilen in All One-Webtools erstellen
Im Folgenden findest du eine ausführliche Schritt-für-Schritt-Anleitung, wie du in den All One-Webtools (ehemals „Sites“) eigene Kopf- und Fußzeilen für deine Webseiten anlegst und diese global für alle Seiten nutzen kannst.
1. Vorbereitung deiner Webseiten-Struktur
Webseiten anlegen
Öffne in All One im linken Hauptmenü den Bereich Webtools.
Erstelle oder importiere alle Seiten, die du für deine Webseite benötigst (z. B. „Startseite“, „Über uns“, „Leistungen“, „Produkte“, „Podcast“, „Kontakt“, „AGB/Terms & Conditions“, „Datenschutz/Privacy Policy“).
Achte darauf, dass jede Seite mindestens als Platzhalter angelegt ist, damit du sie später im Navigationsmenü verlinken kannst.
Auswahl einer Seite zum Bearbeiten
Klicke in der Übersicht deiner Webtools auf die Seite, die als erstes die neue Kopfzeile und Fußzeile erhalten soll (z. B. deine Startseite oder Homepage).
Öffne diese Seite im Editor (falls verfügbar: gern in einem neuen Tab, damit du schnell zwischen Überblick und Editor wechseln kannst).
2. Kopfzeile (Header) erstellen
2.1 Neue Sektion und Zeilen hinzufügen
Obere Sektion einfügen
Zeile für Logo, Menü und Button
In dieser neuen Sektion erstellst du eine Zeile (Row) mit zwei oder drei Spalten, je nachdem, wie du deine Kopfzeile gestalten möchtest.
Beispiel: Zwei Spalten – links Logo und Menü, rechts ein Button („Kontakt“ oder „Jetzt buchen“ o. Ä.).
Breite und Abstände anpassen
Klicke auf den grünen Rand (die Sektion) und aktiviere gegebenenfalls die Option, dass die Zeilen die gesamte Bildschirmbreite nutzen dürfen („Allow full width“ o. Ä.).
Passe im blauen Bereich (Zeile) ggf. Innenabstände (Padding) an, damit dein Inhalt nicht zu nah am Seitenrand klebt (z. B. 40 px links und rechts).
2.2 Logo und Button hinzufügen
Logo
Klicke in der gewünschten Spalte (z. B. linke Spalte) auf Element hinzufügen und suche nach „Menu“ oder „Navigation Menu“.
Im Navigationsmenü-Element kannst du ein Bild als Logo hochladen oder ersetzen.
Klicke dazu auf das Logo-Platzhalter-Bild im Menü.
Lade dein Logo hoch und passe die Breite (Width) und Höhe (Height) an (z. B. Breite 300 px, Höhe leer lassen).
Falls du zusätzlich einen Text (z. B. Unternehmensname) im Menü verwenden möchtest, kannst du diesen im Feld „Business Name“ pflegen oder löschen.
Button (z. B. „Kontaktieren“)
Füge in einer weiteren Spalte (rechts) ein Button-Element hinzu.
Ändere den Text (z. B. „Kontaktieren“ oder „Kontakt aufnehmen“).
Verknüpfe den Button mit einer Seite:
Wähle „Go to Page“ aus und suche aus der Liste deine Kontaktseite.
Passe Farbe und Schriftart des Buttons an dein Design an.
2.3 Navigationslinks einrichten
Menülinks bearbeiten
Klicke erneut auf dein Navigationsmenü (im Bereich, wo deine Seitenlinks angezeigt werden).
Scrolle in den Einstellungen zu „Menu Items“ o. Ä.
Hier siehst du eine Liste mit Links, die du beliebig hinzufügen, umbenennen oder löschen kannst.
Seitenlink hinzufügen: Wähle „Go to Page“ und dann eine deiner bestehenden Seiten.
Externe URL: Wähle „Go to URL“ und trage die externe Webadresse ein.
Reihenfolge / Dropdown-Menü:
Um einen Menüpunkt zu einem Unterpunkt zu machen, ziehe ihn leicht nach rechts unter einen anderen Eintrag. Dann entsteht ein Dropdown-Menü.
Zum Entfernen aus dem Dropdown-Menü ziehst du ihn wieder zurück nach links.
Farben und Textformat
Unter „General“ oder „Design“ kannst du den Text (Farbe, Größe, Schriftart) sowie den Hintergrund der Menüleiste anpassen.
Achte auch auf das Mobile-Menü (meist über eine „Hamburger“-Icon-Auswahl gesteuert). Wähle das gewünschte Symbol und überprüfe die Darstellung in der mobilen Vorschau.
Abstände einstellen
Im Bereich „Horizontal Spacing“ oder „Spacing“ kannst du den Abstand zwischen den einzelnen Menülinks erhöhen oder verringern (z. B. auf 20 px), damit die Links nicht zu dicht nebeneinander stehen.
2.4 Kopfzeile als globale Sektion speichern
Als Global Section sichern
Wenn dein Header fertig ist, klicke auf den grünen Rahmen der Sektion (ganz oben) und wähle „Save Section“.
Vergib einen eindeutigen Namen (z. B. „Header_Global“) und wähle „Global Section“ aus.
Bestätige das Speichern.
Auf anderen Seiten einsetzen
Öffne eine weitere Seite (z. B. „Kontakt“).
Klicke dort oben auf Plus → Global Sections und wähle deine gespeicherte Kopfzeile (z. B. „Header_Global“) aus.
Ziehe sie an die gewünschte Position (ganz nach oben) und speichere.
Änderungen in einer globalen Sektion wirken sich ab sofort automatisch auf allen Seiten aus, die diese Sektion nutzen.
3. Fußzeile (Footer) erstellen
3.1 Neue Sektion und Grundaufbau
Sektion für den Footer
Scrolle auf deiner Seite ganz nach unten.
Füge eine weitere Vollbreite-Sektion hinzu.
Hintergrundfarbe
Klicke auf den grünen Rahmen (Sektion) und wähle im Bereich Background eine dunkle Farbe (z. B. Schwarz oder Dunkelblau), um einen Kontrast zum Seiteninhalt zu erzeugen.
Zeilen einfügen
Erstelle zunächst eine Zeile (Row), um das Logo oder andere Elemente zu platzieren.
Füge ggf. weitere Zeilen hinzu, wenn du mehrere Bereiche im Footer brauchst (z. B. Spalten für Menülinks, Social Media, Copyright-Hinweis).
3.2 Logo, Menü und Social Media im Footer
Logo (weiße Version)
Lade ggf. eine weiße oder andersfarbige Version deines Logos hoch, die auf dunklem Hintergrund gut sichtbar ist.
Footer-Menü
Füge ein Navigationsmenü-Element unter oder neben das Logo ein.
Deaktiviere ggf. das Logo und die Headline im Menü, damit nur die Textlinks angezeigt werden.
Stelle unter „Design“ sicher, dass der Text in einer passenden Farbe (z. B. Weiß) erscheint.
Falls gewünscht, kannst du hier andere Seiten verlinken als im Header (z. B. AGB, Datenschutz).
Social-Media-Icons
Klicke auf Element hinzufügen → „Social Media Icons“.
Wähle ein Design aus (z. B. helle oder dunkle Icons).
Passe die Links zu deinen Social-Media-Profilen an.
3.3 Copyright und rechtliche Links
Copyright-Text
Füge unterhalb deiner Menü- und Icon-Elemente eine neue Zeile (Row) mit einem Paragraph-Element ein.
Trage dort deinen Copyright-Text ein (z. B. „© 2025 Beispiel GmbH“).
Um das Copyright-Symbol „©“ einzufügen, kannst du bei vielen Systemen per Rechtsklick „Emoji & Symbole“ auswählen und dort das Zeichen suchen.
AGB/Datenschutz verlinken
Markiere die Worte „AGB“ oder „Datenschutz“.
Klicke auf das Link-Symbol und wähle die entsprechende Seite aus (falls intern vorhanden) oder gib die externe URL an.
3.4 Footer als globale Sektion speichern
Global Section
Klicke auf den grünen Rahmen deiner Footer-Sektion.
Wähle „Save Section“, vergebe einen eindeutigen Namen (z. B. „Footer_Global“) und wähle „Global Section“.
Bestätige das Speichern.
Auf anderen Seiten hinzufügen
4. Test und Feinschliff
Seiten veröffentlichen
Nach dem Speichern und Anpassen jeder Seite kannst du sie veröffentlichen (oder erneut speichern, falls dir im Editor diese Option angeboten wird).
Vorschau und Responsivität prüfen
Wechsle in die Vorschau und kontrolliere, ob Kopf- und Fußzeile auf allen Geräten (Desktop, Tablet, Smartphone) gut dargestellt werden.
Achte auf die Button-Funktionen und Menü-Links. Teste alle Verlinkungen, damit keine fehlerhaften URLs hinterlegt sind.
Finale Korrekturen
Passe bei Bedarf Farben, Schriften und Abstände an, bis alles stimmig wirkt.
Dank der globalen Abspeicherung verändern sich deine Kopf- und Fußzeilen auf allen betroffenen Seiten automatisch, sobald du sie einmal anpasst.
Zusammenfassung
Mit den All One-Webtools kannst du ganz leicht individuelle Kopf- und Fußzeilen erstellen und global auf allen Seiten einsetzen. So sparst du Zeit und stellst gleichzeitig sicher, dass Menüführung, Logo und rechtliche Hinweise konsistent dargestellt werden. Sobald du einmal deinen Header und Footer gespeichert hast, genügt ein einfacher Klick, um sie auf andere Seiten zu übertragen. Änderungen aktualisieren sich dank „Global Sections“ für alle Seiten automatisch.
Viel Erfolg beim Gestalten deiner einheitlichen Kopf- und Fußzeilen in All One!
Animierte Texte, Buttons und Bilder in All One-Webtools
Im Folgenden erfährst du Schritt für Schritt, wie du in den All One-Webtools (ehemals „Sites“) Texte, Bilder und Buttons animieren kannst. Damit sorgst du für einen aufmerksamkeitsstarken und modernen Look deiner Landingpages und Webseiten.
1. Allgemeiner Überblick über Animationen
In All One kannst du bestimmte Elemente mit Animationen versehen. Dazu gehören:
Text-Elemente (z. B. Überschriften, Absätze)
Bilder
Buttons
Animationen können unterschiedliche Zwecke erfüllen:
Visuell ansprechende Effekte schaffen.
Wichtige Elemente hervorheben, z. B. einen Call-to-Action-Button.
Blickführung: Besucherinnen und Besucher sollen genau dort hinschauen, wo du es möchtest.
2. Einstieg in den Editor (Webtools)
Öffne All One und wähle links im Menü den Bereich Webtools aus.
Suche dir die Seite (Landingpage, Website, Funnel-Seite etc.) aus, auf der du Animationen einsetzen möchtest.
Klicke auf „Bearbeiten“ (Editor öffnen), damit du in den Page-Builder gelangst.
3. Text-Animationen hinzufügen
Text-Elemente eignen sich besonders gut, um beim Laden der Seite (oder beim Scrollen) sofort Aufmerksamkeit zu erzeugen.
Text-Element auswählen
Klicke auf den gewünschten Text (z. B. Überschrift oder Absatz).
Ein Einstellungsmenü erscheint meist rechts oder oben (je nach Editor-Ansicht).
Animations-Menü öffnen
Suche in den Eigenschaften / Einstellungen des Elements nach „Animation“.
Klicke darauf, um die Animationsoptionen zu sehen.
Animationsart auswählen
Du kannst u. a. folgende Varianten für den Eingangs-Effekt (Entrance) wählen:
Fade in (Einblenden aus dem Nichts; von links, rechts, oben, unten)
Slide in (Hereinschieben)
Bounce (Hüpfen)
Flip (Umdrehen)
Rotate (Rotieren)
Zoom (Hinein-/Herauszoomen)
Light Speed (Schnelles Einfliegen, leicht schräg)
Klicke nacheinander auf verschiedene Effekte, um eine Vorschau zu sehen.
Timing, Verzögerung und Richtung
Speichern und Vorschau
Klicke auf Speichern.
Öffne die Vorschau, um zu sehen, wie der Text beim Laden oder Scrollen animiert erscheint.
4. Bilder animieren
Bilder können die gleichen Animationsstile wie Text-Elemente haben und dir so zusätzlich helfen, den Fokus auf bestimmte Bereiche zu lenken.
Bild-Element auswählen
Klicke auf das Bild, das du animieren möchtest.
Gehe zum Animations-Menü in den Einstellungen.
Geeigneten Effekt wählen
Fade / Slide / Bounce / Flip / Rotate / Zoom / Light Speed usw.
Überlege, ob das Bild eher subtil (z. B. „Fade in“) oder auffällig (z. B. „Flip“) animiert werden soll.
Speichern und testen
Wieder Speichern.
Vorschau aufrufen, um die Wirkung zu prüfen.
5. Buttons animieren
Buttons sind oft die wichtigsten Handlungsaufforderungen (Call to Action) auf einer Seite. Mit einer Animation stellst du sicher, dass sie richtig ins Auge fallen.
5.1 Eingangseffekte (Entrance Animations)
Wie bei Text und Bildern kannst du auch einen Button beim Seitenladen oder Scrollen einblenden lassen (Fade, Slide, Bounce etc.).
Wähle den gewünschten Button und öffne die Animation-Einstellungen.
5.2 Endlos-Schleifen (Infinite Loop)
Viele Tools bieten Daueranimationen, bei denen ein Element dauerhaft pulsiert, wackelt oder leuchtet.
In All One findest du zum Beispiel Effekte wie Glow, Bounce oder Rock, die sich unendlich wiederholen, bis der Nutzer scrollt oder klickt.
Wähle ein Infinite Loop-Animation, wenn du möchtest, dass der Button dauerhaft Aufmerksamkeit erzeugt (z. B. ein blinkendes „Jetzt buchen!“).
5.3 Hover-Animation (Mauszeiger-Effekt)
Ein Hover-Effekt tritt erst ein, wenn jemand mit der Maus über den Button fährt.
Beispiele:
Elevate (der Button hebt sich leicht)
Wobble (leichtes Wackeln)
Pulse (pulsierender Effekt bei Hover)
Aktiviere diese Hover-Animation unter den Button-Einstellungen → „Hover Animation“.
Prüfe in der Vorschau, ob die Animation passend und nicht zu aufdringlich wirkt.
6. Tipps für den sinnvollen Einsatz von Animationen
Nicht übertreiben: Viele Animationen auf einmal können die Seite unruhig wirken lassen und den Besucher überfordern.
Konsistenz: Verwende ähnliche Animationsstile für ähnliche Zwecke (z. B. Buttons immer „Bounce“, Headlines immer „Fade in“).
Ladezeit beachten: Animationen sollten deine Seite nicht verlangsamen. Achte auf optimierte Bilder und einen schlanken Seitenaufbau.
Mobile Ansicht testen: Prüfe, ob deine Animationen auf dem Smartphone oder Tablet weiterhin sinnvoll und gut sichtbar sind.
7. Finale Schritte
Speichern und Veröffentlichen
Klicke oben rechts oder unten (je nach Editor-Ansicht) auf Speichern.
Veröffentliche (falls nötig) die Seite, wenn sie live gehen soll.
Seite in der Vorschau oder auf der Live-URL testen
Rufe die Seite auf, scrolle und klicke auf animierte Elemente.
Achte auf Ladezeiten und darauf, ob die Animationen flüssig ablaufen.
Feinschliff
Ändere bei Bedarf Animationseinstellungen (Stil, Richtung, Dauer, Verzögerung).
Passe Farben und Layout an, wenn Texte oder Buttons durch die Animation verrutschen.
Zusammenfassung
Mit den Animationen in All One-Webtools kannst du gezielt Aufmerksamkeit auf Text, Bilder und Buttons lenken. Die wichtigsten Effekte sind Fade, Slide, Bounce, Flip, Rotate, Zoom und Light Speed. Für permanente Hervorhebungen stehen Infinite Loop-Effekte wie Glow, Rock oder Bounce zur Verfügung. Buttons profitieren besonders von Hover-Animationen, die bei Mausberührung aktiv werden.
Achte stets darauf, Animationen nur unterstützend einzusetzen und nicht übermäßig viele Effekte zu kombinieren. So erhalten deine Seiten einen professionellen, ansprechenden Look, ohne Besucherinnen und Besucher zu überfordern.
