So gestalten Sie das Post-Slider-Modul von Divi wie den Post-Slider von Facebook Newsroom

Post-Slider sind eine elegante Lösung, um Ihren Lesern eine Vielzahl von Inhalten zu präsentieren. Die hervorgehobenen Beiträge können auf verschiedene Weise von Kategorien bis Datum organisiert werden. Im heutigen Projekt betrachten wir ein Beispiel von der Facebook Newsroom-Blogseite, die eine Kategorie von Beiträgen namens „Top Stories“ präsentiert. Es ist ein sehr attraktiver Schieberegler, der den Beitragstitel und das vorgestellte Bild hervorhebt. Wir werden das Aussehen dieses Schiebereglers mit dem Post-Slider-Modul von Divi neu erstellen.

Vorher & Nachher: ​​Das Divi Post Slider-Modul

Das erste Bild unten zeigt das Divi Post Slider-Modul mit seinen Standardeinstellungen, während das zweite eine Modifikation ist, die mit nur wenigen Anpassungen in den Einstellungen und etwas benutzerdefiniertem CSS erstellt wurde.

Vor

Nach

Das Konzept & Inspiration

Wie bereits erwähnt, stammt das Modell für den heutigen Post-Slider-Stil aus dem Facebook-Newsroom. Dies ist ein Nachrichtenblog, der sich, wie Sie vielleicht schon erraten haben, um alles dreht, was mit Facebook zu tun hat. Während die meisten von uns Facebook als den Social-Media-Giganten kennen, wird ein kurzer Blick durch diesen Blog Ihre Perspektive erweitern. Mit 8,8 Milliarden US-Dollar Umsatz im letzten Quartal und 1,23 Milliarden aktiven Nutzern pro Tag bietet der Blogpost-Slider auf der Facebook-Newsroom-Seite ein würdiges Modell für das heutige Projekt.

Vorbereiten der Designelemente

Zur Vorbereitung auf dieses Design benötigen Sie einige Blog-Posts mit vorgestellten Bildern. Wenn Sie nicht mit dem Festlegen von empfohlenen Bildern für Ihre Beiträge vertraut sind, finden Sie die Einstellung auf der Seite "Beitrag bearbeiten" unten rechts auf der Seite.

Dieses Slider-Design funktioniert am besten, wenn jedes der vorgestellten Bilder 600px x 400px groß ist, aber die genaue Größe ist nicht entscheidend.

Vielleicht möchten Sie auch einen Textauszug für jeden Ihrer Beiträge in das Eingabefeld "Auszug" am unteren Rand der Seite des Beitragseditors einfügen. Der Beitrag zeigt Ihren Beitragsauszug an, falls Sie einen haben, verwendet jedoch einen Teil Ihres tatsächlichen Inhalts, wenn Sie dies nicht tun.

Umsetzung des Designs mit Divi

Abonnieren Sie unseren Youtube-Kanal

Wenn Sie mitmachen und noch keine Seiteneinrichtung haben, um Ihren Post-Slider anzuzeigen, erstellen Sie einfach eine neue Seite und klicken Sie auf "Visual Builder verwenden", um die erforderlichen Änderungen vorzunehmen.

Wir beginnen mit dem Hinzufügen eines regulären Abschnitts mit einer 1-spaltigen Strukturzeile.

Fügen Sie dann das Post Slider-Modul zur Zeile hinzu.

Unsere Modifikationen beginnen mit den „Inhalt“-Einstellungen, in denen Sie sich standardmäßig befinden, nachdem Sie ein neues Modul im Visual Builder hinzugefügt haben.

Nehmen Sie die folgenden Änderungen an den standardmäßigen Inhaltseinstellungen vor:

Stellen Sie "Post Number" auf beliebig viele Posts ein. Für dieses Beispiel verwende ich 3.

Setzen Sie dann „Postauszug verwenden, wenn definiert“ auf Ja und stellen Sie „Automatische Auszugslänge“ auf 180 ein.

Jetzt können wir zu den Designeinstellungen wechseln, indem wir auf die Registerkarte oben im Moduleinstellungen-Modal klicken.

Nehmen Sie die folgenden Änderungen an den Designeinstellungen vor:

Ändern Sie die "Hintergrund-Overlay-Farbe" in Weiß (#ffffff).

Ändern Sie "Dot Nav Custom Color" in #576d90.

Ändern Sie die "Textfarbe" auf Dunkel.

Machen Sie nun die „Header Font“ fett, setzen Sie die „Header Font Size“ auf 34px, setzen Sie „Header text Color“ auf #3b5998 und „Header Line Height“ auf 42px.

Stellen Sie nun die „Body Text Color“ auf #141924 und die „Body Line Height“ auf 24px.

Klicken Sie nun auf "Benutzerdefinierte Stile für Schaltfläche verwenden", um es in "Ja" zu ändern. Ändern Sie die „Button-Textgröße“ auf 16px, die „Button-Randbreite“ auf 0px, die „Button-Hover-Textfarbe“ auf #666666 und die „Button-Hover-Hintergrundfarbe“ auf rgba(0,0,0,0).

Klicken Sie nun oben im Moduleinstellungen-Modal auf die Registerkarte "Erweitert". Fügen Sie in der Texteingabe unter CSS-ID „fb-post-slider“ hinzu. Auf diese Weise können wir diesem speziellen Modul Stile hinzufügen, ohne dass dies Auswirkungen auf andere Post-Module hat, die möglicherweise auf der Seite angezeigt werden.

Fügen Sie nun wie folgt CSS-Code zu den verschiedenen Elementen hinzu:

Vor

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Hauptelement

border-radius: 3px;
border:1px solid #dedede; 

Nach

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

Folienbeschreibung

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

Folientitel

font-family: 'Alegreya Sans', sans-serif;

Schiebetaste

padding:0!important;
margin-top:0;

Schieberegler

margin-bottom:-55px;

Schiebepfeile

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

Speichern Sie nun die Moduleinstellungen, indem Sie auf das Häkchen in der unteren rechten Ecke des Modal klicken.

Sie können im Visual Builder sehen, dass es noch einige Schritte zu tun gibt, um unseren Post-Slider wie den auf der Facebook-Newsroom-Seite aussehen zu lassen.

Das ist nichts, worum sich ein bisschen CSS nicht kümmern kann, und wir können zusehen, wie es Gestalt annimmt, indem wir den restlichen Code direkt aus dem Visual Builder zu den Seiteneinstellungen hinzufügen. Um dorthin zu gelangen, klicken Sie unten in der Mitte der Seite auf das Symbol Einstellungen erweitern und dann auf das Symbol "Seiteneinstellungen".

Wenn Sie an einem größeren Monitor arbeiten, schlage ich vor, das Modal an die Seite des Post Sliders zu verschieben, damit Sie sehen können, was jedes Codebit beim Hinzufügen macht. Das wird Ihnen helfen, das CSS besser zu verstehen, das zum Stylen unseres Moduls verwendet wird.

Zuerst kümmern wir uns um die Größe und Position des Hintergrundbildes (derzeit hinter dem weißen Overlay versteckt), sowie die Position des Slider-Textes und des Overlays, indem wir das folgende CSS zum Textbereich „Custom CSS“ hinzufügen.

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

Jetzt kümmern wir uns darum, unser Post-Meta mit Ausnahme des Datums auszublenden und die Position des Datums über den Titel zu verschieben. Fügen Sie dazu den folgenden Code zur benutzerdefinierten CSS-Texteingabe direkt unter dem zuvor eingegebenen Code hinzu.

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

Wir sind fast da, mit nur wenigen Ausnahmen. Wenn Sie mit der Maus über unser Post Slider-Modul fahren, werden Sie feststellen, dass sowohl der vorherige als auch der nächste Pfeil angezeigt werden. Auf dem Facebook-Newsroom-Schieberegler wird nur der nächste Pfeil angezeigt. Das lässt sich leicht beheben, indem Sie der benutzerdefinierten CSS-Texteingabe direkt unter dem zuvor eingegebenen Code das folgende CSS hinzufügen.

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

Jetzt müssen wir die Navigationspunkte unter dem Schieberegler mit dem folgenden Code neu positionieren. Übrigens werden Sie auch feststellen, dass das Setzen der Überlaufeigenschaft des Schiebereglers auf sichtbar den 3D-Effekt zeigt, den wir zuvor für das „Top Stories“-Tag erstellt haben, das sich um die obere rechte Ecke wickelt.

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

Schließlich ändert dieser letzte Code die Animation unseres Schiebereglers, damit sie besser zu unserem Modellschieberegler passt. Obwohl es keine perfekte Übereinstimmung ist, ist es das Beste, was ich erreichen konnte, ohne in jQuery-Lösungen einzusteigen. Es gibt auch einige Medienabfragen, um unseren Slider etwas reaktionsschneller zu machen.

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

Jetzt können Sie die Seite speichern, indem Sie auf die Schaltfläche Speichern in der unteren rechten Ecke Ihres Bildschirms klicken. Nachdem die Seite gespeichert wurde, verlassen Sie den Visual Builder, um den fertigen Post-Slider anzuzeigen, der vom Post-Slider auf der Facebook-Newsroom-Seite inspiriert wurde.

Abschließende Gedanken

Nun, ob Sie dieses spezielle Design nützlich fanden oder nicht, ich hoffe, es hat Ihnen einen detaillierten Einblick in einige der fortgeschritteneren Einstellungen in Divis Post Slider-Modul gegeben und Ihre Vorstellungskraft darüber angeregt, was möglich ist.