So beschriften Sie ein Hintergrundbild mit ansprechenden QuickInfos in Divi

Das Hinzufügen von QuickInfos zum Beschriften eines Hintergrundbildes ist eine kreative Möglichkeit, Besucher mit wertvollen Informationen über Ihr Produkt oder Ihre Dienstleistung zu binden. Die Grundidee besteht darin, Symbole (oder Text) an bestimmten Orten auf dem Bild zu positionieren (wie eine Google-Karte mit Pinpoints). Und wenn Sie die Hover-Effekte von Divi nutzen, können Sie zusätzlichen Text anzeigen, wenn Sie mit der Maus über ein Symbol fahren, um ansprechende Tooltips zu erstellen.

In diesem Tutorial zeige ich Ihnen, wie Sie ein Hintergrundbild mit Klappentexten beschriften, die als informative QuickInfos zu Ihrem Produkt dienen. Dazu verwende ich die Fitness Gym Landing Page, um ein Hintergrundbild mit Informationen zur Fitnessqualität zu beschriften.

Lass uns anfangen.

Eine kurze Vorschau

Hier ist ein kleiner Vorgeschmack auf das Design, das wir in diesem Tutorial erstellen werden.

Was du brauchst

Für dieses Tutorial benötigen Sie Folgendes:

• Das Divi-Thema
• Die Fitness Gym Landing Page aus dem Fitness Gym Layout Pack (erhältlich im Divi Builder)
• Ein Bild für Ihr Hintergrundbild, das genau 320 x 507 Pixel groß ist. Ziehen Sie dieses auf Ihren Desktop und verwenden Sie es für dieses Tutorial.
  

Vorbereiten des vorgefertigten Layouts

Erstellen Sie zunächst eine neue Seite, fügen Sie einen Titel hinzu und stellen Sie dann den Visual Builder bereit. Wählen Sie dann „Wählen Sie ein vorgefertigtes Layout“. Wählen Sie im Popup „Aus Bibliothek laden“ das Layout der Fitness Gym Landing Page aus und klicken Sie auf „Dieses Layout verwenden“.

Sobald das Layout auf die Seite geladen ist, scrollen Sie nach unten zum vierten Abschnitt mit der zweispaltigen Zeile, die in der rechten Spalte den Titel "Empfohlene Programme" hat. Wir fügen unser Hintergrundbild mit Tooltips in die linke Spalte dieser Zeile ein.

Verwenden Sie den Inline-Editor, um den Titeltext in der rechten Spalte in „Smart Fitness“ zu ändern.

Hintergrundbild hinzufügen und Zeileneinstellungen anpassen

Bei diesem Design sind Dimensionierung und Abstände von entscheidender Bedeutung und müssen präzise sein. Und alles beginnt mit der Größe unseres Hintergrundbildes. Wie bereits erwähnt, sollte das Bild, das wir für den Hintergrund verwenden, 320 x 507 Pixel groß sein. Da eine Breite von 320px ein guter Ausgangspunkt für Mobilgeräte ist, können wir das Design mobilfreundlich gestalten, ohne die Größe unseres Bildes ändern zu müssen.

Öffnen Sie die Zeileneinstellungen und fügen Sie das Hintergrundbild zu Spalte 1 hinzu. Aktualisieren Sie dann Folgendes:

Spalte 1 Hintergrundbildgröße: Tatsächliche Größe
Spalte 1 Hintergrundbildposition: Mitte links
Spalte 1 Hintergrundbild wiederholen: Keine Wiederholung

Als nächstes müssen wir der Reihe eine benutzerdefinierte Breite hinzufügen und den oberen und unteren Abstand herausnehmen.

Benutzerdefinierte Breite: 700px
Benutzerdefiniertes Padding: 0px oben, 0px unten

Wenn Sie die Breite auf 700 Pixel festlegen, wird sichergestellt, dass die Zeile auf kleineren Bildschirmgrößen vor dem Tablet-Haltepunkt nicht kleiner wird.

An dieser Stelle halte ich es für eine gute Idee, eine bestimmte Höhe für Spalte 1 festzulegen, die der Höhe des Hintergrundbilds entspricht. Auf diese Weise wissen wir, dass das Bild sichtbar bleibt, wenn der Inhalt der Spalte nicht das gesamte Bild zeigt. Gehen Sie dazu zur Registerkarte Erweitert und fügen Sie das folgende benutzerdefinierte CSS im Hauptelement von Spalte 1 hinzu:

height: 507px;

Jetzt entspricht die Höhe der Spalte der Höhe Ihres Bildes und hängt nicht von den Inhalten (oder Modulen) ab, die wir der Zeile hinzufügen.

Hinzufügen der QuickInfo-Beschriftungen über dem Hintergrundbild mithilfe von Blurbs

Wenn unser Hintergrundbild vorhanden ist, können wir damit beginnen, unsere Klappentexte hinzuzufügen, die so positioniert und gestaltet werden, dass sie als Tooltips fungieren. Fahren Sie fort und fügen Sie ein Klappenmodul zu Spalte 1 hinzu und aktualisieren Sie die folgenden Klappeneinstellungen:

Titel: „Fokus“
Inhalt: „Der Schlüssel zum Erfolg!“
Symbol verwenden: Ja
Symbol: siehe Screenshot

Es ist wichtig, den Titel und den Inhalt auf wenige Worte zu beschränken, da wir in der Lage sein möchten, den gesamten Klappentext in das Hintergrundbild einzupassen.

Als Nächstes aktualisieren Sie die Designeinstellungen. Dies ist ein fortgeschritteneres Design eines Klappentextes, daher gibt es viele Optionen zum Ändern zusammen mit ein paar Hover-Effekten, die den Inhalt des Klappentextes beim Hover zeigen. Aktualisieren Sie die folgenden Klappendesign-Einstellungen:

Symbolfarbe: #edf000
Kreissymbol: JA
Kreisfarbe: rgba(0,0,0,0)
Kreisrahmen anzeigen: JA
Kreisrandfarbe (Standard): rgba(0,0,0,0)
Kreisrandfarbe (Hover): #edf000
Bild-/Symbolplatzierung: Links
Symbolschriftgröße verwenden: JA
Symbolschriftgröße: 40px

Passen Sie die Designeinstellungen wie folgt an:

Schriftstärke des Titels: Fett
Titeltextfarbe (Standard): rgba(0,0,0,0)
Titeltextfarbe (Standard): #edf000
Textkörperfarbe (Standard): rgba(0,0,0,0)
Textkörperfarbe (Standard): #ffffff

(Beachten Sie, dass die Standardtextfarben vollständig transparent sind, um sie auszublenden, bis Sie den Mauszeiger über den Klappentext bewegen.)

Benutzerdefinierter Rand: 15 Pixel oben, 0 Pixel unten, 90 Pixel links
Benutzerdefinierte Polsterung: 5 Pixel oben, 5 Pixel unten, 5 Pixel rechts

(Mit dem benutzerdefinierten Rand positionieren Sie das Klappensymbol an einer bestimmten Stelle über dem Bild.)

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: -154px
Vertikale Position des Boxschattens: 0px
Schattenfarbe (Standard): rgba(0,0,0,0)
Schattenfarbe (Hover): #1e2441

(Der Boxschatten ist eine kreative Möglichkeit, dem Inhalt des Klappentextes eine Hintergrundfarbe hinzuzufügen. Standardmäßig ist der Boxschatten vollständig transparent, zeigt aber beim Schweben eine schöne blaue Farbe.)

Sehen Sie sich nun das Endergebnis Ihres ersten Klappentextes an, um sicherzustellen, dass der Schwebeeffekt und das Design korrekt sind.

Als nächstes können wir das Klappenmodul duplizieren, um unser zweites Tooltip-Label zu erstellen. Nachdem Sie den Klappentext dupliziert haben, können Sie den Inhalt auf den gewünschten Text aktualisieren (halten Sie sich kurz). Dann müssen Sie nur noch den Tooltip mit einem anderen benutzerdefinierten Rand wie folgt positionieren:

Benutzerdefinierter Rand: 0 Pixel oben, 0 Pixel unten, 15 Pixel links

Um den dritten Klappentext zu erstellen, können Sie den zweiten Klappentext duplizieren.

Für diesen dritten Klappentext wird uns der Platz auf der rechten Seite unseres Bildes ausgehen, sodass wir wirklich nicht viel Platz für Inhalte haben. Wir könnten einen negativen Rand verwenden, um den Klappentext außerhalb des Bildes zu erweitern, aber dies würde auch über die Bildschirmgröße von 320 Pixel auf Mobilgeräten hinausgehen. Wir werden also ein paar kleine Codeschnipsel einführen, um unseren Klappeninhalt umzudrehen, sodass das Symbol rechts und der Text links ist. Öffnen Sie dazu die Klappeneinstellungen und fügen Sie auf der Registerkarte Erweitert das folgende benutzerdefinierte CSS hinzu.

Hauptelement-CSS:

direction: rtl;

Blurb-Bild-CSS:

padding-left: 15px;

Wenn Sie es nicht bemerkt haben, befindet sich das Symbol jetzt auf der rechten Seite. Jetzt müssen Sie nur noch den Klappentext mit dem folgenden benutzerdefinierten Rand positionieren:

Benutzerdefinierter Rand: 35 Pixel oben, 0 Pixel unten, 0 Pixel links

Wir müssen auch den Boxschatten so anpassen, dass er von links statt von rechts kommt, wie folgt:

Horizontale Position des Kastenschattens: 150px

Sehen Sie sich jetzt den umgekehrten Tooltip auf der Live-Site an.

Kopieren Sie für den letzten Klappentext den ersten Klappentext oben in der Spalte und fügen Sie ihn unter dem dritten Klappentext ein.

Aktualisieren Sie dann den Rand wie folgt:

Benutzerdefinierter Rand: 0 Pixel oben, 100 Pixel links

Schauen Sie sich jetzt das Endergebnis des Designs an!

Und sieh dir diese Tooltip-Hover-Effekte an!

Ist es reaktionsschnell?

Dieses Design wurde von Anfang an mit Blick auf das Handy gebaut. Das Bild hat eine Breite von 320px, was der Breite der meisten kleinen Smartphones entspricht. Und da wir alles mit Pixellängeneinheiten bemessen und positioniert haben, bewegt sich das Design (einschließlich der Tooltips) nicht, wenn wir die Browsergröße anpassen.

Es gibt jedoch noch eine weitere Sache, die Sie möglicherweise tun müssen, um die Breite des Bildes auf kleinen Telefonbildschirmen sicherzustellen und zu maximieren. Standardmäßig hat Ihre Zeile auf Mobilgeräten eine Breite von 80 %. Um diese 100 % zu erreichen, können Sie sie wie folgt als benutzerdefiniertes CSS zum Hauptelement Ihrer Zeile hinzufügen:

width: 100%;

Ihre benutzerdefinierte Breite von 700 px gilt weiterhin als maximale Breite auf dem Desktop, beträgt jedoch jetzt 100 % auf Mobilgeräten.

Abschließende Gedanken

Wenn Sie ein Hintergrundbild mit Tooltips und Hover-Effekten wie diesem beschriften, können Sie ein professionelles Designelement hinzufügen, das Ihr Publikum mit nützlichen Informationen anspricht. Und ich bin mir sicher, dass es mehrere Möglichkeiten gibt, dieses Konzept für andere Anwendungsfälle zu verwenden. Es birgt jedoch Herausforderungen, wenn Sie das Design auch auf Mobilgeräten beibehalten möchten. Der Trick besteht darin, mobil zu denken und vorauszuplanen. Ich hoffe, dass dies als Inspiration für zukünftige Projekte dient. Wenn überhaupt, wissen Sie zumindest, wie man einen Klappentext mit einem Symbol oder rechts erstellt :).

Ich freue mich, von Ihnen in den Kommentaren unten zu hören.

Danke schön!