Möchten Sie Blog-Beiträge in Divi freigeben?
Heute zeigen wir Ihnen eine kreative Möglichkeit, Blogbeiträge als schwebende Karten in Divi zu präsentieren. Jeder Blog bzw Website sollte darauf abzielen, eine ausgezeichnete zu haben Inhalt attraktiv und vielleicht ebenso wichtig oder zugänglich.
Eine Möglichkeit, sicherzustellen, dass die Inhalt Um für Benutzer zugänglich zu bleiben, muss es auf der Seite schweben.
Und für Blogger zeigen wir Ihnen, wie Sie Artikel von präsentieren Ihr Blog als schwebende Karten, sodass sie beim Scrollen der Seite sichtbar bleiben.
Gehen wir.
Übersicht
Hier ist ein kurzer Überblick über das Ergebnis, das wir am Ende dieses Tutorials erhalten werden.
Was Sie brauchen, um loszulegen
Bevor Sie mit der Erstellung dieses Designs in Divi beginnen, müssen Sie Folgendes tun:
- Erstellen Sie eine neue Seite, geben Sie einen relevanten Namen ein und klicken Sie auf „Divi Builder verwenden“.
- Wählen Sie die Option aus Layout wählen".
- Layout suchen und auswählen 'Blogger-Landingpage'.
- Klicken Sie auf die Schaltfläche Layout wählen um es auf die Seite zu laden.
Danach haben Sie das vorgefertigte Layout, das Sie für dieses Tutorial verwenden können.
So erstellen Sie Floating Cards für Blog-Posts mit dem Blog-Modul von Divi
Nachdem das Layout auf der Seite geladen wurde, können wir unsere schwebenden Karten für Blogposts erstellen.
Lesen Sie auch: So erstellen Sie einen Sticky Global Header in Divi
Erstellen Sie ganz unten im Layout einen neuen Abschnitt.
Fügen Sie dann dem Abschnitt eine neue einspaltige Zeile hinzu.
Fügen Sie der Zeile/Spalte ein Blog-Modul und einen Titel hinzu
Anstatt hier ein neues Blog-Modul zu erstellen, scrollen Sie nach oben und suchen Sie das vorhandene Blog-Modul mit drei Blog-Beiträgen (es befindet sich im dritten Abschnitt in der Mitte der Seite). Offen " Andere Modulparameter »Und wählen« Modul kopieren".
Fügen Sie dann das Modul in die neue einspaltige Zeile ein, die wir unten auf der Seite erstellt haben, indem Sie mit der rechten Maustaste auf das graue Plus-Symbol klicken und „ Modul einfügen".
Als Nächstes fügen wir über unseren Blogbeiträgen einen Titel hinzu, der auch über den Blogkarten schwebt. Kopieren Sie dazu den bestehenden Textbaustein mit dem kleinen Titeltext " Lifestyle".
Fügen Sie dann das Modul direkt über dem neuen Blog-Modul ein, das wir gerade hinzugefügt haben.
Bearbeiten Sie als Nächstes den Titeltext, um die Art der Blogbeiträge zu beschreiben, die Sie hervorheben möchten. In diesem Beispiel verwenden wir einfach " Top Story".
Anpassen der Linie mit fester Position und benutzerdefinierter Breite
Wir möchten die Größe schwebender Blogposts reduzieren, damit sie nicht zu viel Platz auf der Seite einnehmen, wenn sie eine feste Position haben. Es wäre unterhaltsam. Öffnen Sie dazu die Leitungseinstellungen und aktualisieren Sie Folgendes:
Damit die Gegenstände schweben, müssen wir der Linie eine feste Position geben. Aktualisieren Sie auf der Registerkarte Erweitert Folgendes:
- Position: Fest
- Ort: Unten rechts
- Vertikaler Versatz: 20px
- Horizontaler Versatz: 20px
- Z-Index: 12
Aktualisiertes Blog-Modul mit minimalem Inhalt und Box-Schatten
Im Allgemeinen hat das Blog-Modul bereits ein dreispaltiges Rasterlayout und einen schönen Stil, der mit dem von uns gewählten Layoutpaket geliefert wird. Aber es gibt ein paar Dinge, die wir tun müssen.
Siehe auch: So erstellen Sie einen globalen Header mit Anmeldeformular in Divi
Zunächst müssen wir die Größe der Karten (vertikal) reduzieren und einige Elemente daraus entfernen Inhalt.
Öffnen Sie dazu die Blog-Einstellungen und blenden Sie alle Elemente außer dem Beitragsbild aus. Dadurch zeigt der Beitrag nur das vorgestellte Bild und den Titel.
Konfigurieren Sie auf der Registerkarte Stil den Rahmenschatten wie folgt:
- Schattenbox: Siehe Screenshot
- Feld-Schattenunschärfe-Stärke: 28px
- Schriftfarbe Untertitel: rgba(0,0,0,0.19)
Übersicht
Hier ist eine Vorschau auf das Ergebnis, das wir bisher haben.
Lassen Sie die Artikelzeile beim Hover erscheinen
Schließlich können wir einen netten Hover-Effekt hinzufügen, der Benutzer dazu ermutigt, mit den schwebenden Artikeln zu interagieren.
Lesen Sie auch: So erstellen Sie die Blog-Seite mit dem Blog-Modul in Divi
Leitungseinstellungen und Aktualisierungsoptionen öffnen:
Für das Büro
- Verwandlung: 50 %
Für Schwebezustand
- Transformieren: 0%
Dadurch wird die gesamte Linie zunächst um 50 % außerhalb des Browser-Darstellungsfensters gebracht. Sobald der Benutzer mit der Maus über die Linie schwebt, kommt sie wieder vollständig ins Blickfeld.
Zeile auf Handy ausblenden
Sofern Sie nicht einen einzelnen Blogbeitrag veröffentlichen möchten, ist es nicht sinnvoll, diese Blogbeiträge auf Mobilgeräten zu veröffentlichen. Es würde wahrscheinlich viel zu viel Platz beanspruchen und Probleme beim Scrollen verursachen.
Siehe auch: So fügen Sie ein Kontaktformular zu einer globalen Kopfzeile in Divi hinzu
Um Karten auf Mobilgeräten auszublenden, öffnen Sie Abschnittseinstellungen und deaktivieren Sie die Abschnittssichtbarkeit auf Telefon und Tablet.
Endergebnis
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
So ! Wir haben Ihnen in diesem Tutorial eine kreative und originelle Möglichkeit gezeigt, die Blog-Beiträge zu präsentieren, die Sie hervorheben möchten.
Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
