So fügen Sie Ihrer Divi-Site eine Floating About-Karte hinzu

Auf fast jeder Website, die Sie besuchen, tauchen Elemente auf und bleiben auf der Seite haften. Cookie-Warnungen und Opt-Ins, E-Mail-Anmeldungen und Chat-Boxen. Wir alle neigen dazu, sie irgendwann zu ignorieren und blind für alles, was die Website uns zu sagen versucht. Wir klicken einfach auf das X, ohne zu lesen. Aber das bedeutet nicht, dass diese Art von Elementen nicht nützlich sein oder ihren Platz haben können. Mit Divi können Sie ganz einfach eine schwebende Infokarte erstellen, die Ihrer Website einen Mehrwert verleiht und unaufdringlich erklärt, wer Sie sind und was Ihre Marke tut. Mal sehen, wie einfach es ist.

Vorschau

Desktop

Handy, Mobiltelefon

1. Erstellen Sie eine Seitenvorlage

Das erste, was Sie tun möchten, ist zu entscheiden, welche Seiten Sie in diese schwebende Karte aufnehmen möchten. Vielleicht möchten Sie es auf jeder einzelnen Seite Ihrer Website oder nur auf bestimmten Zielseiten. In beiden Fällen können Sie den Divi Theme Builder verwenden, um es einzurichten. Entweder als globale Vorlage oder als Vorlage, die nur für bestimmte Seiten gilt.

Verwenden Sie den Theme Builder, um die Vorlage zu erstellen

Um zu beginnen, gehen Sie zu Divi – Theme Builder in Ihrem WordPress-Dashboard. Wählen Sie den Abschnitt " Benutzerdefinierter Körper " der Seiten, auf die Sie die Floating-Info-Karte anwenden möchten, oder den globalen Körper , um ihn überall anzuwenden.

Nachdem Sie den Divi Visual Builder geladen haben, wählen Sie von Grund auf neu starten, wenn Sie die Wahl haben.

Hinzufügen einer einspaltigen Zeile und eines Moduls zum Posten von Inhalten

Wählen Sie dann eine einspaltige Zeile aus, wenn Sie dazu aufgefordert werden.

Als nächstes möchten Sie das Modul Post Content auswählen. Dies ist ein Beispiel für unsere dynamische Inhaltsfunktion. Das Modul zeigt das begleitende Design an, das in die Divi-Seite selbst integriert ist, was bedeutet, dass dieses Modul unterschiedliche Inhalte für verschiedene Seiten mit dieser Vorlage anzeigt. Bei Blog-Beiträgen handelt es sich um den Blog-Inhalt. Bei Shop-Seiten sind es die Produkte. Und für einzelne Seiten die benutzerdefinierten Inhalte, die Sie mit Divi erstellt haben.

Abschnitts- und Zeilenabstand anpassen

Wenn diese vorhanden sind, müssen wir ein paar Abstandsanpassungen vornehmen. Gehen Sie in die Abschnittseinstellungen (blauer Rahmen im Divi-Builder) und entfernen Sie alle oberen und unteren Polster. Sie tun dies auf der Registerkarte Design , der Überschrift Abstand , und setzen Sie dann unter Padding 0px auf Oben und Unten .

Speichern Sie Ihre Änderungen und geben Sie die Zeileneinstellungen ein . Setzen Sie erneut die obere und untere Auffüllung auf 0px .

Suchen Sie als Nächstes die Überschrift Größenanpassung und schalten Sie Benutzerdefinierte Bundstegbreite verwenden ein und setzen Sie den Wert auf 1. Als Nächstes setzen Sie Breite und Max. Breite auf 100 %.

Wenn die Vorbereitungen abgeschlossen sind, machen wir uns an die schwebende Karte!

2. Floating-Karte hinzufügen

Einen neuen Abschnitt und eine neue Zeile hinzufügen

Zuerst möchten Sie einen neuen Abschnitt hinzufügen. Scrollen Sie dazu zum Ende der Seite, klicken Sie auf den blauen Kreis + und wählen Sie Regulär, wenn Sie zur Eingabe des Abschnittstyps aufgefordert werden.

Ein Blurb-Modul hinzufügen

Dies ist der Abschnitt, der der Floating-Karte gewidmet ist. Im Inneren möchten wir eine weitere einspaltige Zeile hinzufügen. Und darin wollen wir ein Blurb- Modul für die Floating-Karte selbst verwenden. Das Divi Blurb-Modul ist möglicherweise das vielseitigste Modul im Builder, daher möchten wir seine Vorteile für diese Funktion nutzen.

Abschnitts- und Reiheneinstellungen anpassen

Damit müssen wir die Polsterung und Positionierung dieser Reihe und des Abschnitts anpassen. Also zuerst, gehen Sie in den Abschnitt Einstellungen und stellen Sie die oben und unten Padding auf 0px unter Display - Abstand.

Suchen Sie dann auf der Registerkarte Erweitert die Überschrift Position . Setzen Sie den Z-Index auf 12. Je höher die Zahl, desto weiter „vorne“ wird der Abschnitt und sein Inhalt sitzen. Und da es sich um eine schwebende Karte handelt, möchten wir, dass sie über allen anderen Elementen schwebt.

Schließlich geht in die Reihe Einstellungen und legen Sie die Polsterung oben und unten , um einmal mehr 0px.

Inhalt des Blurb-Moduls

Jetzt ist es an der Zeit, die Karte selbst zu stylen. Geben Sie die Einstellungen für das Blurb-Modul ein. Da es sich um ein Element handelt, das Ihr Unternehmen beschreibt, sollten Sie kurz erwähnen, was Ihr Unternehmen oder Ihre Marke tut. Da dies ein Beispielpost ist, haben wir ihn mit Lorem - Ipsum mit Zombie-Geschmack gefüllt . Sie können den Titel- und Textinhalt auf der Registerkarte Inhalt festlegen.

Legen Sie die Hintergrundfarbe fest

Sie möchten natürlich, dass die schwebende Karte optisch zu Ihrer Website passt, daher ist die Wahl der richtigen Hintergrundfarbe von großer Bedeutung. Wir gehen mit #ffffff (weiß). Auch dies befindet sich auf der Registerkarte Inhalt , die Sie unter der Überschrift Hintergrund und der Farbdose finden .

Wählen Sie ein Kartenbild

Das Blurb-Modul bietet Ihnen die Möglichkeit, ein Bild oder ein Symbol für das Modul hinzuzufügen, und wir möchten ein Bild, das unser Unternehmen repräsentiert. Suchen Sie erneut auf der Registerkarte Inhalt nach Bild und Symbol und laden Sie einfach das Bild hoch, das für Ihr Modul geeignet ist.

Formen Sie die Kartenecken

Als nächstes gehen Sie in die Registerkarte Design und in die Überschrift Border . Suchen Sie die Optionen für abgerundete Ecken und stellen Sie jede Ecke auf 25px ein . Dadurch werden die scharfen, eckigen Kanten geglättet, ohne die Form der gesamten Karte zu verändern.

Textausrichtung

Unter dem Text Überschrift, stellen Sie die Textausrichtung auf die Mitte.

Stylen Sie den Titeltext der Floating Card

Der Titeltext, den Sie zuvor festgelegt haben, ist standardmäßig H4 . Um Stil es, gehen Sie in den Titel Text Überschrift, wählen Sie die Registerkarte H4 und die Optionen folgende Titel ändern:

• Schriftart: Poppins
• Schriftstärke: Fett
• Textfarbe : # 22303f
• Textgröße : 20px
• Linienhöhe : 1,3em

Dann müssen wir in die Reaktionsfähigkeitseinstellungen gehen und die Größe des Titels für mobile Geräte ändern. Ändern Sie den Titel Textgröße auf 14px.

Gestalten Sie den Text der Karte

Navigieren Sie als Nächstes zu Body Text und ändern Sie die Body Font in Poppins , um der Titelschriftart zu entsprechen.

Klicken Sie dann auf die Registerkarte Link (Kettensymbol) und ändern Sie die Linktextfarbe in eine Komplementärfarbe für Ihre Site. Wir haben #97c357 gewählt .

Größe der About-Karte

Fügen Sie unter der Überschrift Größenanpassung die folgenden Werte zu diesen Einstellungen hinzu:

• Bildbreite: 75%
• Inhaltsbreite: 25vw
• Breite: 25vw
• Maximale Breite: 30vw

Passen Sie in den Reaktionseinstellungen die folgenden Werte an:

• Inhaltsbreite: 90vw
• Breite: 90vw
• Maximale Breite: 95vw

Diese Werte stellen sicher, dass die Karte auf Mobilgeräten die gesamte Bildschirmbreite einnimmt, da eine schwebende Karte in der Ecke normalerweise nicht gelesen werden kann.

Abstand für den Blurb

Der Abstand Überschrift ist eine schnelle Lösung, in der Sie den linken Rand 0px, die oben und unten Padding zu 2vw, und die linken und rechten Padding einstellen müssen 1vw.

Bei responsiven Einstellungen ändern sich nur die oberen und unteren Polster . Wir werden diese auf 5% setzen .

Boxschatten hinzufügen

Da die schwebende Karte an ihrem Standort fixiert bleibt, soll sie so aussehen, als ob sie tatsächlich über Ihrem Inhalt schwebt. Dieser Effekt ist einfach genug, indem Sie dem Modul einen einfachen Boxschatten hinzufügen. Diese Option finden Sie unter Box Shadow , und wir haben den grundlegenden unteren Schatten ausgewählt.

Responsive CSS anpassen

Jetzt ist der lustige Teil. Wir wechseln in die Registerkarte Erweitert, wo wir die Floating-Karte selbst an der Seite anbringen. Um dies zu tun, besteht unser erster Schritt darin, das Bild zu deaktivieren, das wir für den Desktop hinzugefügt haben. Bilder im Blurb- Modul können die Größe und Benutzerfreundlichkeit auf Mobilgeräten wirklich beeinflussen, außerdem muss die Seite geladen werden.

Also wollen wir display:none; unter dem Feld Blurb-Bild nur für Mobilgeräte unter Custom CSS .

Fixieren und schweben Sie die Karte mit Positionseinstellung

Schließlich positionieren wir die Karte dort, wo sie schweben soll. Zuerst möchten wir zur Registerkarte Erweitert gehen und zu Position scrollen. Wählen Sie im Dropdown-Menü die Option Fest aus.

Suchen Sie als Nächstes die Standortoptionen . Dies ist der Punkt auf dem Bildschirm, an dem die schwebende Karte bleibt. Für den Desktop möchten wir, dass es sich in der unteren Ecke des Bildschirms befindet. Also klicken wir auf das Quadrat, das damit korreliert. Wir möchten auch, dass es leicht vom Fensterrand versetzt ist, also ändern wir den vertikalen Versatz auf 3% und den horizontalen Versatz auf 2%.

Als Nächstes möchten wir einen anderen Standort und einen anderen Offset für Mobilgeräte erstellen. Oben haben wir die Breite der Karte so eingestellt, dass sie die gesamte Breite des Bildschirms ausdehnt. Vor diesem Hintergrund ändern wir den festen Standort in die untere Mitte, sodass die Karte jederzeit am unteren Bildschirmrand schwebt.

Darüber hinaus werden wir nur den vertikalen Versatz für Mobilgeräte ändern. Setzen Sie diesen Wert auf 3% . Es ist kein horizontaler Versatz erforderlich, da er der Breite des mobilen Bildschirms entspricht und zentriert ist.

Endgültige Ergebnisse

Wenn alles richtig eingestellt und für Ihre persönliche Website angepasst ist, sollte das Endprodukt ähnlich aussehen.

Desktop

Handy, Mobiltelefon

Abschluss

Mit den leistungsstarken Optionen und der intuitiven Benutzeroberfläche von Divi können Sie im Handumdrehen eine schwebende Infokarte auf Ihrer Website entwerfen und anbringen. Indem Sie Ihre Nutzer von Anfang an wissen lassen, mit wem sie es zu tun haben, gewinnen Sie mit Sicherheit eine gewisse Markentreue.

Wofür haben Sie Floating Cards auf Ihren Websites verwendet? Lass es uns in den Kommentaren wissen!