Neue Widgets für die tägliche Nutzung
59 Views
Foto von Kyle Glenn auf Unsplash

 Zuletzt bearbeit am: Dienstag, 18. November 2025 - 14:54 

 

Genieße die neuen Elemente, am besten mit einem Kaffee

Website Design wird mit den neuen page4 Widgets noch vielseitiger und professioneller. Ab sofort stehen zwei leistungsstarke Inhaltselemente für alle Kaufversionen zur Verfügung:

Das Design-Image-02 Widget und der Card-Slider-03.

 

Beide Widgets bringen zahlreiche Funktionen mit, die dir helfen, deine Website ansprechender zu gestalten und gleichzeitig die Benutzerfreundlichkeit zu verbessern.

 

 

So findest du die neuen Widgets

Die neuen Inhaltselemente findest du im Dialog unter „page4 Highlights“. Der Card-Slider-03 ist ganz unten bei „Blocks mit Karten“ platziert, während das Design-Image-02 Widget im Bereich „Bilder“ zu finden ist. Für das Design-Image-02 stehen dir drei verschiedene Vorlagen zur Auswahl, die du nach deinen Wünschen anpassen kannst.

Design-Image-02: Bilder perfekt in Szene setzen

Das Design-Image-02 Widget verändert die Art, wie du Bilder auf deiner Website präsentierst. Es erweitert den normalen Bild-Content um zahlreiche Funktionen, die dir vollkommen neue gestalterische Möglichkeiten eröffnen.

SEO optimierte Bilddarstellung

Für eine optimale Suchmaschinenoptimierung kannst du jedem Bild einen individuellen Title und Alt-Text zuweisen. So werden deine Bilder von Google besser gefunden und tragen zur Verbesserung deines Rankings bei.

 

Bildausschnitt präzise steuern (1)

Wenn dein Originalbild größer ist als der angezeigte Ausschnitt, kannst du den sichtbaren Bereich ganz einfach per Maus festlegen. Das Bild wird automatisch gecovert und passt sich perfekt an die von dir gewählten Abmessungen an. Höhe und Breite lassen sich frei einstellen; mit nur einem Klick dehnst du das Bild auf die komplette Breite der Spalte aus, in der es platziert ist.

Bildverlinkung und Lightbox (2 und 4)

Du kannst jedes Bild verlinken und so deine Besucher gezielt zu anderen Seiten führen. Alternativ aktivierst du die Lightbox-Funktion, um das Originalbild in voller Größe anzuzeigen. So können sich deine Besucher Details genauer ansehen, ohne die Seite zu verlassen.

Flexible Textoptionen (3)

Unter jedem Bild lässt sich eine Bildunterschrift aktivieren, wahlweise mit oder ohne eigene Überschrift. Die Überschrift kann mit einem HTML-Tag (H1 bis H6) versehen werden, was sowohl für die Strukturierung deiner Seite als auch für SEO wichtig ist. Überschrift und Text können auch getrennt voneinander ein- oder ausgeschaltet werden, je nachdem, was du gerade benötigst.

Textblock Animation (6)

Eine besondere Funktion ist die Animation des Textblocks. Bei aktivierter Animation bleibt der Text zunächst unsichtbar und wird erst sichtbar, wenn sich die Maus über das Bild bewegt. Du hast mehrere Animationsoptionen zur Auswahl:

  • Von unten nach oben: Der Text wird von unten eingeblendet und bewegt sich nach oben
  • Von oben nach unten: Der Text wird von oben eingeblendet und bewegt sich nach unten
  • Einblenden: Der Text erscheint direkt an seiner finalen Position
  • Von links oder rechts: Der Text gleitet von der Seite ins Bild

Im Editor bleibt der Text bei aktiver Animation unsichtbar; die Animation wird erst live auf der Website ausgeführt.

Hover-Overlay mit Icon (5)

Ein weiteres Highlight ist das Hover-Overlay. Du kannst eine farbige Ebene mit einstellbarer Transparenz über das Bild legen. Zusätzlich lässt sich ein Icon aktivieren, das erscheint, sobald sich die Maus über dem Bild befindet.

Das Icon kannst du aus der Page4-Bibliothek auswählen und in Größe, Farbe und Animation individuell anpassen. So gibst du deinen Besuchern einen visuellen Hinweis, dass das Bild interaktiv ist.

Umfangreiche Bild-Einstellungen

Rahmen, Rundungen und Schatten

Deine Bilder können mit einem Rahmen und runden Ecken versehen werden. Mit einem einzigen Klick verwandelst du ein quadratisches Bild in einen perfekten Kreis.

Unter dem Bild kannst du einen Schatten platzieren; dabei stehen dir zehn Vorlagen zur Verfügung oder du stellst den Schatten komplett individuell ein.

Farbeffekte und Hover-Effekte

Für besondere visuelle Akzente kannst du Farbeffekte voreinstellen. Zeige deine Bilder beispielsweise standardmäßig in Schwarz-Weiß oder mit Sepia-Färbung an. Per Hover-Effekt wechselst du dann zur Originalfarbe oder einem anderen Effekt. So schaffst du spannende Übergänge, die die Aufmerksamkeit deiner Besucher auf sich ziehen.

Textbereich gestalten

Der Textbereich unter dem Bild lässt sich ebenfalls umfassend anpassen. Du kannst die Breite in Prozent der Gesamtbildbreite festlegen und entscheiden, ob der Text auf oder unter dem Bild platziert wird. Hintergrundfarbe, Rahmen, Innenabstand und Rundung sind frei einstellbar, sodass der Textbereich perfekt zu deinem Design passt.

Mobile Einstellungen: Volle Kontrolle auf allen Geräten

Neu bei page4 sind die separaten Einstellungen für die mobile Ansicht. Du kannst für Smartphone und Tablet getrennt festlegen, welche Höhe und Breite das Bild haben soll. So stellst du sicher, dass ein Bild beispielsweise auch auf dem Handy als Kreis dargestellt wird, auch wenn es auf dem Desktop ein anderes Format hat.

Auch Rahmen, Rundung und Textbreite lassen sich für Telefon und Tablet getrennt einstellen. Wichtig ist, dass du diese Einstellungen für jedes Bild individuell vornimmst, da sonst die Basiseinstellungen vom Widget übernommen werden. Diese Kontrolle ermöglicht dir eine perfekte Darstellung auf allen Endgeräten. 

Card-Slider-03: Inhalte dynamisch präsentieren

Der neue Card-Slider-03 basiert auf dem bewährten Card-Slider-02, wurde aber um viele neue Funktionen erweitert. Er eignet sich perfekt, um Galerien, Portfolios, Referenzen oder Themenbereiche dynamisch zu präsentieren und deine Besucher durch visuell ansprechende Karten zu führen.

Bildgestaltung auf jeder Karte

Auf jeder Slider-Karte kannst du ein Bild platzieren, das die gesamte Karte ausfüllt. Wie beim Design-Image-02 Widget kannst du für jedes Bild einen SEO-optimierten Title und Alt-Text hinterlegen. Der Bildausschnitt lässt sich individuell festlegen; das Bild wird gecovert und bleibt dabei ein normales Bild, das von Google gefunden werden kann.

Textinhalte auf den Karten

Über dem Bild platzierst du einen Text mit Titel und Fließtext. Der Titel kann mit einem HTML-Tag (H1 bis H6) versehen werden, was für die Seitenstruktur und SEO wichtig ist. Titel und Text können auch getrennt voneinander ausgeschaltet werden, falls du nur eines von beiden benötigst.

Kartenlayout anpassen

Die Höhe und Breite der Karten stellst du frei ein; auch der Abstand zwischen den einzelnen Karten ist variabel. Jede Karte kann einen Rahmen und eine Rundung erhalten, sodass sie perfekt zu deinem Website Design passt. Die Karten können außerdem verlinkt werden, um Besucher gezielt zu weiteren Inhalten zu führen.

Overlay für Textinhalte

Das Overlay, auf dem der Text platziert wird, kann eine Mindesthöhe erhalten. So stellst du sicher, dass alle Texte die gleiche Höhe haben und dein Layout einheitlich wirkt. Falls ein Text mehr Platz benötigt, dehnt sich das Overlay automatisch nach oben aus. Innenabstand und Hintergrundfarbe mit Transparenz lassen sich individuell einstellen.

Farbeffekte im Slider

Auch beim Card-Slider-03 kannst du allgemeine Farbeffekte nutzen. Zeige alle Bilder beispielsweise in Schwarz-Weiß oder Sepia-Färbung an und verändere sie beim Hovern mit einem Effekt. Die Hover-Effekte sind Vorlagen und können mit einem Klick ausgewählt werden.

Slider-Funktionen

Der Slider bietet umfangreiche Einstellungen zur Steuerung. Du legst fest, welche Karte beim Laden der Seite als Erstes angezeigt wird. Wähle zwischen einem normalen Slider und einem Endlos-Slider; bei der Endlos-Variante werden Phantom-Karten erzeugt, die die Illusion einer unendlichen Kartenreihe schaffen.

 

Für die Navigation kannst du Punkte oder runde Vorschaubilder anzeigen lassen. Links und rechts neben den Navigationspunkten befinden sich zwei Icons zum manuellen Steuern des Sliders, die du frei anpassen kannst. Der Slider nimmt bis zu 50 Karten auf, sodass auch umfangreiche Inhalte problemlos dargestellt werden können.

Mobile Einstellungen für den Slider

Der Card-Slider-03 erlaubt dir ebenfalls die separate Kontrolle über die mobile Darstellung. Auf Wunsch blendest du die Navigationspunkte aus, sodass nur die Steuerungs-Icons sichtbar bleiben; das ist besonders sinnvoll, wenn du viele Karten hast. Die Höhe der Karten kannst du für Tablet und Smartphone getrennt einstellen, während Umrandung und Rundung für beide mobilen Geräte gemeinsam konfiguriert werden.

 

Die Schriftgrößen werden aktuell von page4 für die mobile Darstellung aktiviert und passen sich automatisch an die Bildschirmgröße an.

Praktische Anwendungsmöglichkeiten

Design-Image-02 im Einsatz

Das Design-Image-02 Widget eignet sich für alle Bereiche, in denen Bilder eine wichtige Rolle spielen. Da du jetzt eine feste Höhe einstellen kannst, ist es deutlich einfacher, mehrere Bilder in Spalten nebeneinander zu platzieren. Alle Bilder erhalten die gleiche Höhe, auch wenn die Originalbilder unterschiedliche Formate haben. Die Möglichkeit, den Bildausschnitt individuell festzulegen, hilft dir dabei, den perfekten Ausschnitt zu wählen.

 

Nutze das Widget beispielsweise, um verschiedene Galerien auf deiner Startseite vorzustellen. Jedes Vorschaubild verlinkst du dann auf die entsprechende Galerie-Seite.

 

Oder erstelle eine Teamseite mit einheitlich formatierten Porträtfotos, die beim Hovern zusätzliche Informationen einblenden. Die Möglichkeiten sind nahezu grenzenlos.

Card-Slider-03 für dynamische Inhalte

Der Card-Slider-03 eignet sich hervorragend, um Galerien, Portfolios oder thematische Übersichten zu präsentieren. Zeige deine besten Arbeiten, neueste Projekte oder verschiedene Leistungsbereiche und verlinke jede Karte auf die entsprechende Detailseite. Mit bis zu 50 Karten hast du genügend Raum für umfangreiche Präsentationen.

 

Auch für Kundenstimmen, Produktvorstellungen oder Blog-Artikel ist der Slider ideal. Die dynamische Darstellung sorgt dafür, dass deine Besucher sich durch die Inhalte bewegen und dabei immer wieder neue Informationen entdecken.

Weitere spannende Widgets in Arbeit

Die beiden neuen Widgets sind erst der Anfang. Das page4-Team arbeitet bereits an weiteren interessanten Inhaltselementen, die dir noch mehr Möglichkeiten geben werden, deine Website zu gestalten. Es lohnt sich also, regelmäßig nach Updates zu schauen und die neuen Funktionen auszuprobieren.

 

Du willst eine neue Website erstellen? Mit Design-Image-02 und Card-Slider-03 macht das Gestalten von Inhalten noch mehr Spaß. Die neuen Widgets geben dir die Werkzeuge an die Hand, um professionelle und visuell ansprechende Webseiten zu gestalten, ohne dass du dafür Programmierkenntnisse benötigst. Probiere die neuen Funktionen aus und entdecke, wie einfach modernes Websitedesign sein kann.

 

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

 

 

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

Du möchtest eine eigene Website für deinen Friseursalon, dein Yogastudio oder dein Dienstleistungsunternehmen erstellen? Mit page4 gelingt dir das spielend leicht – ganz ohne Technikstress.

 

Ob Preise und Öffnungszeiten, Teamvorstellungen, Buchungsformulare oder inspirierende Bilder deines Studios: Unser Homepage-Baukasten bietet dir alles, was du brauchst. Schon ab 7 € im Monat erhältst du alle Funktionen – und für nur 1 € extra im Monat sogar deine eigene „de“-Domain. Die Bedienung ist kinderleicht und perfekt für alle, die ihr Geschäft professionell online präsentieren wollen.

 

Mit der kostenlosen Version kannst du alles in Ruhe testen.

👉 Jetzt ausprobieren und deine Dienstleistungs-Website einfach, modern und professionell gestalten!

 

 

 

Kommentare
()
Einen neuen Kommentar hinzufügenEine neue Antwort hinzufügen
Ich stimme zu, dass meine Angaben gespeichert und verarbeitet werden dürfen gemäß der Datenschutzerklärung.*
Abbrechen
Antwort abschicken
Kommentar abschicken
Weitere laden