Back to Top Button Generator.
Konfiguriere Farben, Position und Größe deines Scroll-Buttons, sieh die Vorschau live und lade fertigen Code oder ein installierbares WordPress-Plugin herunter – kostenlos und ohne Programmierkenntnisse.
Einstellungen
Passe Aussehen und Position an. Die Vorschau rechts aktualisiert sich sofort.
Dein generierter Code.
HTML-Code
Diesen HTML-Code fügst du im Body-Bereich deiner Seite ein, z. B. in eine Template-Datei oder im Content-Editor.
CSS-Code
Diesen CSS-Code solltest du im Header laden, z. B. in der style.css deines Themes oder per Customizer-CSS.
JavaScript-Code
Den JavaScript-Code bitte am Ende im Footer deiner Seite einfügen, z. B. via enqueue_script oder direkt vor dem </body>-Tag.
Plugin in WordPress installieren
- Melde dich im WordPress-Adminbereich deiner Webseite an.
- Gehe im Menü zu Plugins → Installieren → Plugin hochladen.
- Klicke auf „Datei auswählen“ und wähle die heruntergeladene ZIP-Datei
back-to-top-button-weddesign.zipaus. - Klicke auf „Jetzt installieren“ und anschließend auf „Aktivieren“.
- Ab sofort erscheint dein individueller Back-to-Top-Button automatisch im Footer deiner Webseite.
- Für eine gezielte Platzierung kannst du stattdessen den Shortcode
[back_to_top]in Seiten, Beiträgen oder Widgets verwenden. - Wenn du weitere Anpassungen vornehmen möchtest, erstelle das Plugin mit dem Generator erneut und installiere die neue ZIP-Datei.
Das Plugin ist responsive und SEO-freundlich entwickelt – der Button funktioniert auf Desktop und Mobilgeräten. Du benötigst keine Programmierkenntnisse, die Konfiguration erfolgt bequem im Generator.
Weiterlernen
Wie der Button technisch funktioniert, zeige ich im Tutorial Back to Top Button mit JavaScript erstellen. Gut kombinieren lässt er sich mit einem Sticky Header, und ein passendes Pfeilzeichen findest du in der HTML Sonderzeichen Liste. Eigene Anpassungen am Theme machst du update-sicher mit einem WordPress Child Theme.
Du brauchst ein individuelles Plugin für deine Webseite? Ich biete WordPress-Plugin-Programmierung nach deinen Vorgaben.
Häufig gestellte Fragen
Alles zum Back to Top Button Generator
Was ist der Back to Top Button Generator?
Der Back to Top Button Generator ist ein kostenloses Online-Tool, mit dem Sie per visueller Oberfläche einen individuellen „Nach oben“-Scroll-Button erstellen können. Sie konfigurieren Aussehen, Position und Beschriftung, sehen eine Vorschau und erhalten fertige Code-Snippets oder ein komplettes ZIP-Plugin für WordPress.
Ist das Tool wirklich kostenlos?
Ja. Die Nutzung des Generators, das Erzeugen von Code und der Download des erzeugten WordPress-Plugins sind kostenlos. Bei größeren Integrations- oder Anpassungswünschen biete ich optional kostenpflichtigen Support an.
Wie funktioniert der Generator technisch?
Sie wählen Ihre Einstellungen (Farben, Hover-Farben, Border, Radius, Padding, Position, Abstände). Das Tool erstellt drei Snippets: HTML, CSS und JavaScript. Alternativ erstellt der Generator eine ZIP-Datei mit einem einfachen WordPress-Plugin.
Wie installiere ich das erzeugte Plugin in WordPress?
Adminbereich → Plugins → Installieren → Plugin hochladen → ZIP-Datei auswählen → „Jetzt installieren“ → Aktivieren. Der Button wird danach im Footer eingebunden, wahlweise per Shortcode gezielt platziert.
Gibt es einen Shortcode für die gezielte Platzierung?
Ja. Das erzeugte Plugin stellt den Shortcode [back_to_top] bereit, den Sie in Beiträgen, Seiten oder Text-Widgets einfügen können.
Funktioniert der Button mit jedem Theme und Page-Builder?
In den meisten Fällen ja, auch mit Elementor oder Gutenberg. Bei sehr individuellen Themes kann es vereinzelt zu Konflikten bei z-Index oder CSS-Spezifizität kommen.
Was kann ich tun, wenn die Höhe des Buttons nicht zu meiner Webseite passt?
Passen Sie in der generierten CSS-Regel .wdp-back-to-top den Wert für line-height an. Testen Sie zum Beispiel line-height: 0.8; oder line-height: 1.1; und prüfen Sie, welcher Wert zur jeweiligen Webseite und zum verwendeten Theme passt.
Ist der Button responsive und mobil-optimiert?
Ja, der Generator erzeugt responsive CSS-Werte, sodass der Button auf Desktop wie Mobil gut aussieht. Bei Bedarf lassen sich separate CSS-Regeln für kleine Viewports ergänzen.
Werden Accessibility-Anforderungen berücksichtigt?
Ja. Der Button erhält ein aria-label, ist per Tastatur erreichbar und für Screenreader nutzbar. Achten Sie bei der Farbwahl auf ausreichenden Kontrast.
Beeinträchtigt der Button die Seiten-Performance oder SEO?
In der Regel nein, der generierte Code ist sehr leichtgewichtig. Bei aggressiven Optimierungsplugins sollten Inline-Skripte ggf. von Minify-Regeln ausgenommen werden.
Mit welchen WordPress- und PHP-Versionen ist das Plugin kompatibel?
Entwickelt für aktuelle WordPress-Versionen und PHP 8.x. Testen Sie vor dem Einsatz in Produktivumgebungen und führen Sie vorher ein Backup durch.
Kann ich das Design nachträglich ändern?
Ja. Erzeugen Sie eine neue Konfiguration und laden die aktualisierte ZIP hoch, oder passen Sie die generierten CSS-Werte direkt in Ihrem Theme bzw. Child-Theme an.
Der Button erscheint nicht – wie behebe ich das?
Cache leeren, Browser-Konsole auf JS-Fehler prüfen, z-Index erhöhen, Minifier testweise deaktivieren oder prüfen, ob das Theme Standard-Hooks nutzt. Gern sende ich Ihnen bei Bedarf Unterstützung.
Kann ich den Button nur auf bestimmten Seiten anzeigen?
Ja, über den gezielten Einsatz des Shortcodes oder per CSS/JS-Bedingung, gekoppelt an URLs, Post-Typen, Benutzerrollen oder Device-Typen.
Werden personenbezogene Daten an Dritte übertragen?
Nein. Der Generator erstellt Konfigurationen clientseitig und stellt Code bzw. Plugin nur zum Download bereit, es werden keine Nutzerdaten für die Erstellung gesammelt.
Kann ich das Plugin später neu erstellen oder aktualisieren?
Ja, jederzeit. Updates erfolgen durch erneutes Hochladen und Aktivieren der neu erzeugten ZIP-Version.
Kann ich den Button auch manuell ohne Plugin einbinden?
Ja. Der Generator liefert vollständige HTML-, CSS- und JavaScript-Snippets mit Hinweisen, wo diese einzufügen sind – praktisch, wenn Sie kein Plugin nutzen möchten.
Gibt es bekannte Einschränkungen oder Inkompatibilitäten?
In den meisten Installationen läuft das Plugin problemlos. Einschränkungen können durch aggressive Asset-Optimierer, Security-Plugins oder sehr alte WordPress/PHP-Versionen entstehen.
Bieten Sie Support oder individuelle Anpassungen an?
Ja, bei Integration, Konfliktbehebung oder maßgeschneiderten Anpassungen erreichen Sie mich über das Kontaktformular oder per E-Mail. Support-Leistungen sind je nach Umfang kostenpflichtig.