Zuletzt bearbeit am: Donnerstag, 23. Oktober 2025 - 15:16 

Wenn du beim Homepage erstellen nach einer eleganten Lösung suchst, um dein Team, deine Produkte oder Kundenstimmen zu präsentieren, dann ist das Card-Slider Widget genau das Richtige für dich. Mit einem modernen Homepage Baukasten wie page4 wird das Erstellen ansprechender Karten-Präsentationen ab jetzt zum Kinderspiel.

Stell dir vor, du besuchst eine Website und siehst sofort auf einen Blick alle wichtigen Informationen – übersichtlich, ansprechend und ohne endloses Scrollen. Genau das ermöglicht dir ein Card-Slider. Ob du nun deine Homepage erstellen und dabei Teammitglieder vorstellen möchtest, Produkte präsentieren oder Kundenbewertungen zeigen willst – dieses vielseitige Element macht alles möglich.

Das Schöne dabei: Du benötigst keinerlei Programmierkenntnisse. Ein guter Homepage Baukasten wie page4 bietet dir alle Tools, um professionelle Ergebnisse zu erzielen, ohne dass du dich mit komplizierter Technik herumschlagen musst.

Das Icon-System ist perfekt, wenn du Bewertungen oder andere Symbole in deine Karten integrieren möchtest. Du kannst die Position der Icons bestimmen – links, mittig oder rechts – und ihre Abstände nach oben und unten anpassen.

Das Bewertungssystem arbeitet mit verschiedenen Icon-Designs und unterstützt auch partielle Bewertungen. So kannst du problemlos 4,5 von 5 Sternen anzeigen lassen. Die Größe, der Abstand zwischen den Icons und sogar die Hintergrundfarbe lassen sich individuell anpassen.

Beim Homepage erstellen ist die richtige Proportion entscheidend für ein professionelles Aussehen. In diesem Bereich des Widgets (Karten Einstellungen - Bild weiter unten) kannst du die Höhe des gesamten Kartenbereichs sowie die Breite und Höhe jeder einzelnen Karte festlegen.

Ein wichtiger Tipp: Die Karten werden automatisch auf die gleiche Höhe angepasst, orientiert an der Karte mit dem meisten Inhalt. Du musst dir also keine Sorgen machen, dass unterschiedlich lange Texte zu einem unordentlichen Gesamtbild führen.

Der Abstand zwischen den Karten sowie die Hintergrundfarbe und Rahmengestaltung sind ebenfalls hier einstellbar. So fügst du das Widget nahtlos in dein bestehendes Website-Design ein.

So könnte dein fertiger Card-Slider aussehen – perfekt für die Vorstellung deines Teams auf deiner Homepage. Jede Karte zeigt ein Foto, den Namen, die Position und eine kurze Beschreibung der Person. Die Bewertungssterne am unteren Rand geben zusätzliche Glaubwürdigkeit. Der Text ist nur ein Beispieltext, in diesem Fall Texte für die Bewertung eines Shops. Die aktive Karte wird leicht vergrößert dargestellt. 

Das Besondere: Alle Karten haben die gleiche Höhe, obwohl die Textmengen unterschiedlich sind. Die Navigation erfolgt über die kleinen Punkte am unteren Rand, und auf mobilen Geräten können Besucher einfach durch die Karten wischen.

Hier siehst du, wie einfach die Bearbeitung mit einem modernen Homepage Baukasten wie page4 funktioniert.

Links siehst du den Dialog zum Bearbeiten eines Widgets. Dieser ist bei allen Inhaltselementen (Widgets) gleich aufgebaut. Im oberen Bereich sind alle Optionen, um die Inhalte für das Widget anzulegen. In diesem Fall hast du Optionen, um bestimmte Elemente für alle Karten aus- oder anzuschalten. Und darunter ist eine Liste aller Karten. Wenn du eine Karte bearbeiten willst, öffnet sich ein Fenster mit allen Möglichkeiten (Bild 2). Du kannst ein Bild hochladen oder aus der Bildverwaltung einbinden. Für SEO Optimierung kannst du dem Bild einen Titel und Alt-Text geben. Und den Bildauschnitt mit der Maus bestimmen. 

Wie du bei den Überschriften sieht, kannst du auswählen, welcher HTML-Tag benutzt werden soll. Das ist wichtig für Google und die Barrierefreiheit. Achte darauf, dass auf einer Seite alle Überschriften korrekt geordnet sind. Dazu dienen die HTML-Tags. Im Dialog gibt es Felder, wo du die Texte eintragen kannst. Das geht auch direkt im Widget auf der Website, ohne das du den Dialog aufrufen musst. Für einzeilige Texte klickst du einfach in den Text und passt ihn an. Für mehrzeilige Texte öffnet sich ein Text-Editor, wenn du auf den Text klickst.

Unter den Optionen zum Erstellen der Inhalte befinden sich graue Felder mit Beschriftungen wie "Box Einstellungen" und mehr. Klickst du auf so ein Feld, klappt der Dialog auf und zeigt dir dazugehörige Optionen zum Gestalten. Einige Dialoge erklären wir weiter unten noch.

Alle Einstellungsoptionen sind übersichtlich kategorisiert: Inhalte bearbeiten, Box-Einstellungen, Karten-Konfiguration, Bild-Optionen, Navigation und Icon-Einstellungen.

Rechts siehst du die Live-Vorschau deiner Änderungen. Was du links einstellst, wird sofort rechts sichtbar – so behältst du immer den Überblick und siehst sofort, wie sich deine Änderungen auswirken. Diese Live-Vorschau erleichtert ungemein die Arbeit. Mit den Vorlagen wird es noch einfacher. Im Bild unter diesem Text ist der Bereich "Karten (Slides) Einstellungen. Dort siehst du zum Beispiel das Label "Karten Designvorlagen" und daneben mehrere Buttons. Klickst du auf "Default" oder eine Zahl, werden von uns voreingestellte Werte übernommen und du siehst live, wie die Karte damit aussehen würde. Klickst du auf den Button mit den 3 Punkten, wie im Dialog angezeigt, klappen alle Optionen aus und du kannst dann einzelne oder alle Werte beliebig anpassen, natürlich auch immer mit direkter Live-Vorschau.

WICHTIG: Alle Einstellungen im Hauptdialog verändern immer das Design aller Karten. Stellst du eine Breite ein, haben alle Karten diese Breite. Wählst du als Hintergrundfarbe die Palettenfarbe Nummer 5, haben alle Karten diese Hintergrundfarbe.

Wenn du eine Karte bearbeitest, gelten diese Einstellungen für die ausgewählte Karte. In den meisten Fällen betrifft das die Inhalte der Karte. 

Legst du eine neue Karte an, werden die Inhalte der Karte übernommen, die links von der neuen Karte steht. Anschließend kannst du die Inhalte anpassen.

Wie oben erwähnt, ist der Bereich "Karten Einstellungen" dazu da, das Aussehen einer Karte zu bestimmen. Je nach Inhalt kannst du die Karten breiter oder schmaler machen. Die Höhe passt sich immer der Karte an, welche am meisten Inhalt hat. Du kannst aber auch festlegen, wie hoch eine Karte mindestens sein soll. 

Der Abstand zwischen den Karten kann festgelegt werden. Und natürlich hat eine Karte auch eine Hintergrundfarbe, gerne auch leicht transparent oder mit einem dezenten Farbverlauf und eine Umrandung.

Für Umrandungen verwenden wir einheitliche Bedienelemente, sofern möglich. Zum einen einen Farbwähler für die Rahmenfarbe. Und drei sogenannte "Quad-Felder" für den Innenabstand der Karte, die Rahmenstärke und die Rundung der Ecken.

Ds besondere an diesen Quad-Feldern ist, dass du für jede Seite auf Wunsch einen individuellen Wert eintragen kannst. Wenn das Schloß in der Mitte geschlossen ist, veränderst du alle Werte auf einmal. Dazu klickst du in eine Zahl und mit dem Slider, der dann sichtbar wird, stellst du den Wert ein. Du kannst den Wert auch eintippen. Möchtest du nur eine Seite oder eine Ecke verändern, klickst du zuerst auf das Schloß und öffnest es damit. Dann klickst du auf die Seite oder Ecke, welche du anpassen willst und jetzt wird nur dieser Wert angepasst, die anderen drei Werte bleiben unverändert. Das Schloss muss offen bleiben, wenn du unterschiedliche Werte benutzt. Klickst du auf das Schloß damit es sich schließt, werden alle Eingaben wieder auf einheitliche Werte zurückgesetzt.

Mit diesen Funktionen kannst du eine Karte erstellen, welche zum Beispiel nur eine Ecke gerundet hat oder wo nur eine Linie zu sehen oder stärker als die restlichen Ränder ist. Ebenso kannst du festlegen, dass der Innenabstand unten größer sein soll als oben oder seitlich.

Die Bildeinstellungen sind besonders flexibel gestaltet. Du kannst wählen, wo das Bild platziert werden soll: links neben dem Text, rechts daneben oder mittig oben. Je nach Inhalt und gewünschter Wirkung wählst du das passende Layout. Die Karten haben eine Abfrage der Breite integriert. Ist die tatsächliche Breite kleiner als 401 Pixel wird automatisch das Bild oben mittig angezeigt und der Text darunter angeordnet. Unabhängig davon, was du eingestellt hast. Das sorgt dafür, dass die Karte immer perfekt aussieht. 

Die Bildgröße lässt sich präzise einstellen – von kleinen quadratischen Icons bis zu großen Hero-Bildern ist alles möglich. Die vertikale Ausrichtung bestimmt dabei, ob das Bild oben, mittig oder unten im verfügbaren Bereich positioniert wird.

In den Navigationseinstellungen kannst du festlegen, wie sich dein Card-Slider verhalten soll. Hier bestimmst du zum Beispiel, mit welcher Karte der Slider starten soll – möchtest du mit der ersten Karte beginnen oder lieber mit einem Teammitglied in der Mitte?

Besonders praktisch ist die Endlos-Slider-Funktion: Wenn diese aktiviert ist, können deine Besucher unendlich durch die Karten navigieren, ohne an einem "Ende" anzukommen. Das sorgt für eine flüssige Benutzererfahrung, besonders wenn du viele Inhalte zu zeigen hast. Im Admin-Modus ist die Endlos-Slider Ansicht ausgeschaltet, damit du die Karten problemlos bearbeiten kannst. 

Bei der Navigation zwischen den Karten hast du verschiedene Optionen: Du kannst kleine Vorschaubilder (Thumbnails) verwenden oder minimalistische Punkte wählen. Die Farben und Größen lassen sich dabei ganz nach deinem Design anpassen.

Die Bewertung wird grundsätzlich immer unten auf der Karte angezeigt. Du hast aber trotzdem die Möglichkeit, einen Abstand oben und unten einzustellen. Das bietet sich zum Beispiel an, wenn die Kartenhöhe aufgrund der Inhalte nicht hoch genug ist. Dann kannst du hiermit die Kartenhöhe verändern.

Du kannst ein beliebiges Icon aus unserer Sammlung einbinden. Viel Spaß beim Ausprobieren.

Wir haben drei Beispiel-Vorlagen für dich vorbereitet. Du findest eine Vorlage im Bereich "page4 Highlight" also ganz oben und alle drei Vorlagen ganz unten im Dialog unter dem Navigationspunkt "Block mit mehreren Karten". Dieses Widget ist nur für die Kaufversion von page4 und nicht in der kostenlosen Version sichtbar.

Ein Hinweis noch: Wir haben das Widget so eingestellt, dass du bis zu 30 Karten anlegen kannst.

Bevor du mit dem Erstellen der Karten beginnst, überlegst du dir, welche Inhalte du präsentieren möchtest. Bei einem Team-Bereich sind das üblicherweise:

• Professionelle Fotos jedes Teammitglieds

• Name und Position

• Kurze Beschreibung der Expertise oder Aufgaben

• Optional: Bewertungen oder Kompetenzbereiche

Je nach Art deiner Inhalte eignen sich verschiedene Layouts:

• Bild links, Text rechts: Perfekt für Teamvorstellungen, wo das Gesicht im Fokus stehen soll

• Bild oben, Text unten: Ideal für Produkte oder Services

• Bild rechts, Text links: Wenn der Text wichtiger ist als das Bild

Beim Homepage Baukasten page4 passt sich das Widget automatisch an dein bestehendes Design an. Farben, Schriftarten und Abstände werden übernommen, sodass ein stimmiges Gesamtbild entsteht. Änderst du die Farben in deiner aktuellen Design-Palette, werden alle Widgets angepasst, vorausgesetzt, du benutzt die Grundeinstellungen und/oder achtest darauf, nur Design-Farben und Schriften auszuwählen. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Nutze einheitliche Bildgrößen und -stile für alle Teammitglieder. Halte die Beschreibungen ähnlich lang, damit die automatische Höhenanpassung optimal funktioniert. Verwende einheitliche Jobtitel und achte auf einen freundlichen, aber professionellen Ton.

Hier kannst du mit größeren Bildern arbeiten und das Layout "Bild oben, Text unten" wählen. Nutze die Bewertungsfunktion für Kundenbewertungen und halte die Produktbeschreibungen prägnant, aber informativ.

Verwende echte Kundenfotos (mit Einverständnis) oder stelle Platzhalter-Bilder bereit. Die Bewertungssterne verleihen den Aussagen zusätzliche Glaubwürdigkeit. Achte darauf, dass die Zitate nicht zu lang werden – lieber auf den Punkt bringen.

Ein großer Vorteil beim Homepage erstellen mit modernen Baukasten-Systemen wie page4: Die mobile Optimierung passiert automatisch. Dein Card-Slider funktioniert auf Smartphones genauso gut wie auf Desktop-Computern. Besucher können intuitiv durch die Karten wischen, genau wie sie es von Apps gewohnt sind.

Das System erkennt automatisch, ob jemand mit dem Finger über den Bildschirm wischt oder mit der Maus klickt, und passt die Bedienung entsprechend an. Du musst dich um nichts kümmern – es funktioniert einfach.

Wenn du deine Homepage erstellen möchtest, ohne dich in technische Details zu vertiefen, ist der Homepage-Baukasten page4 mit solchen vorgefertigten Widgets die ideale Lösung. Du konzentrierst dich auf deine Inhalte und das System kümmert sich um die technische Umsetzung.

Das Card-Slider Widget ist nur ein Beispiel dafür, wie page4 funktionieren: Du wählst aus professionell gestalteten Elementen aus, passt sie an deine Bedürfnisse an und fügst deine Inhalte hinzu. Das Ergebnis sieht aus, als hätte es ein Profi programmiert – ohne dass du eine einzige Zeile Code schreiben musst.

Wenn du unseren Homepagebaukasten page4 schon länger nutzt, kennst du die vielen Updates, die wir regelmäßig veröffentlichen. Dadurch bekommst du ohne Aufpreise neue Funktionen und Mittel zur Gestaltung deiner Website und bist immer auf dem neuesten Stand der Technik.

Das Card-Slider Widget zeigt perfekt, warum page4 bei unseren Kunden so beliebt ist: Du bekommst professionelle Funktionen, die früher nur mit aufwendiger Programmierung möglich waren, jetzt per Mausklick.

Egal, ob du Freelancer bist und deine Dienstleistungen präsentieren möchtest, ein kleines Unternehmen führst oder einfach eine persönliche Website erstellen willst – mit solchen Tools wird das Homepage erstellen zu einem kreativen Prozess statt zu einer technischen Hürde.

Der Card-Slider ist dabei nur ein Baustein von vielen. In Kombination mit anderen Elementen eines guten Homepage Baukastens wie page4 entsteht so Schritt für Schritt deine individuelle, professionelle Website – ganz ohne Technik-Stress und Kopfschmerzen.

Der vorgestellte Card-Slider ist das bisher umfangreichste und komplexeste Widget bei page4. Es zeigt, was alles möglich ist. Um solche Funktionalität zu erreichen, mussten wir bei einigen Updates Anpassungen vornehmen, die eventuell dazu geführt haben, dass man geliebte Gewohnheiten anpassen musste. Mit den neuen Vorlagen, die es seit der Personalkarte gibt, erleichtern wir euch das Gestalten der Inhalte enorm. Sofern möglich, werden wir auch ältere Widgets schrittweise anpassen.

Weitere Elemente sind bereits in der Entwicklung. Der Slider ist aus dem Wunsch einer Kundin entstanden, die ihre vielen Kundenbewertungen gerne übersichtlicher darstellen wollte. Wir hoffen, das Widget erfüllt diesen Wunsch. Wenn wir für euch entwickeln sollen, schickt uns entweder einen Link, damit wir sehen können, was ihr euch wünscht oder ein Bild mit Erklärung. Je genauer die Erklärung, um so leichter ist es für uns, zu entscheiden, ob man den Wunsch umsetzen kann.

Im kommenden Jahr haben wir uns vorgenommen, die Bildverwaltung zu moderniersen und den Shop zu überarbeiten. Trotzdem werden wir natürlich weiterhin Widgets veröffentlichen.

Viel Spaß beim Ausprobieren!
Manfred F. Schreyer – page4 Team

Wir freuen uns natürlich immer über eine Bewertung bei Google, OMR oder bei Trustpilot! Gerne auch auf allen Plattformen.

Du möchtest für deine Schule eine moderne und leicht zu pflegende Website erstellen?
Mit page4 gelingt das ganz einfach – ohne technisches Vorwissen.

Präsentiere eure Klassen, Projekte, Termine, Lehrerinnen und Lehrer oder richte einen Blog für Schulveranstaltungen, Wettbewerbe und Ausflüge ein.
Unser Homepage-Baukasten bietet alles, was Schulen brauchen, um sich informativ und professionell online zu präsentieren.

Schon ab 7 € im Monat erhältst du das komplette Paket – inklusive Hosting.
Eine .de-Domain bekommst du bereits ab 1 € monatlich. Die Bedienung ist intuitiv und ideal, wenn ihr eure Schulwebsite selbst verwalten möchtet – ganz ohne Agentur.

Teste page4 unverbindlich in der kostenlosen Version und probiere alles aus, bevor du dich entscheidest.

👉 Starte jetzt und gestalte die Website deiner Schule – modern, übersichtlich und perfekt auf eure Schulgemeinschaft abgestimmt!