So fügen Sie benutzerdefinierte Vorlagen und Designs zu den Blog-Post-Formaten von Divi hinzu (Teil 3 von 3)
Veröffentlicht: 2017-05-04Willkommen zu Tag 3 von 3, dem letzten Tag in unserer Serie zum Hinzufügen von benutzerdefinierten Stilen zu Divis Blog-Post-Formaten. Standardmäßig wird Divi mit sechs Blog-Post-Formaten geliefert: Standard, Video, Audio, Zitat, Galerie und Link. In dieser Serie bringen wir Ihnen bei, wie Sie diese mit PHP und CSS anpassen können.
Heute ist der letzte Tag unserer Serie zum Hinzufügen von benutzerdefinierten Vorlagen und Stilen zu den Blogpost-Formaten von Divi. Dieser letzte Tag der Serie ist dem Design gewidmet. Mit angepasster single.php und aktivem Child-Theme sind wir bereit, den Blog-Post-Formaten Styling hinzuzufügen.
Ich werde Sie durch alle sechs Postformate führen, während wir jedem einzelne einzigartige Design-Akzente hinzufügen. Am Ende dieses Tutorials haben Sie sechs großartig aussehende Alternativen zu den standardmäßigen Blog-Post-Formaten, mit denen Divi geliefert wird.
Sie haben auch eine ziemlich einzigartige Blog-Seite, die die verschiedenen Elemente des Postformats anzeigt. Das Linkformat zeigt beispielsweise ein benutzerdefiniertes Linkfeld anstelle der Miniaturansicht des vorgestellten Bildes an. Der Beitrag im Galerieformat zeigt einen Bildschieberegler Ihrer Galeriebilder anstelle der Miniaturansicht des vorgestellten Bildes an. Und so weiter.
Hier sehen Sie, wie Ihre Blog-Seite nach dem heutigen Tutorial aussehen würde (ich verwende das Divi-Blog-Modul mit einem Raster-Layout in der Gif unten).
Lass uns anfangen.
Einrichten allgemeiner Designeinstellungen im Theme Customizer
Zuerst müssen wir mit dem Theme-Anpasser ein paar allgemeine Stiländerungen vornehmen. Gehen Sie in Ihrem WordPress-Dashboard zu Divi → Theme Customizer → General Settings → Layout Settings und ändern Sie Folgendes:
Breite der Website-Rinne: 2
Aktivieren Sie Benutzerdefinierte Seitenleistenbreite verwenden
Breite der Seitenleiste: 30
Gehen Sie auch unter Theme Customizer zu Farbschemata und wählen Sie Orange aus.
Schauen wir uns nun an, wie Ihr Standard-Post bisher aussieht:
Wie Sie sehen, braucht es noch etwas Styling, aber alles ist an der richtigen Stelle. Sie haben einen Heldenabschnitt, der sich über die gesamte Breite der Seite erstreckt. Sie haben noch kein vorgestelltes Bild, daher zeigt der Hintergrund nur den Farbverlauf, den Sie zuvor zu Ihrer single.php-Datei hinzugefügt haben. Auch der Titel und die Meta des Beitrags befinden sich im Heldenbereich. Jetzt ist es an der Zeit, die restlichen Designelemente hinzuzufügen.
Den Hero-Bereich für alle Post-Formate gestalten
Da jedes deiner Post-Formate den gleichen Hero-Bereich und das gleiche Seitenleisten-Design aufweist, kannst du zuerst dieses benutzerdefinierte CSS hinzufügen. Gehen Sie zurück zum Theme Customizer, klicken Sie unten auf Additional CSS und fügen Sie das folgende benutzerdefinierte CSS hinzu:
.hero-section {
padding-top: 120px;
padding-bottom: 120px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
max-height: 450px;
background-color: #333;
}
.single-post #main-content #left-area {padding-top: 0px;}
/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}
/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
@media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
}
Sehen Sie sich jetzt an, wie ein Standardbeitrag jetzt aussieht.
Mit dem Hero-Bereich und dem Sidebar-Styling sind Sie bereit, die einzelnen Post-Formate zu stylen.
Das Standard-Postformat gestalten
Das Standard-Post-Format ist das Standardformat für alle Ihre Blog-Posts. Sie können beim Bearbeiten Ihres Beitrags das Standard-Beitragsformat auswählen.
Alles, was wir für dieses Standardformat tun werden, ist das vorgestellte Bild hinzuzufügen. Da dieses vorgestellte Bild die gesamte Breite des Bildschirms ausdehnt, schlage ich vor, ein Bild mit der Größe 2000 x 600 zu verwenden. Ich verwende Bilder von unsplash.com.
Nachdem Sie Ihr vorgestelltes Bild hinzugefügt haben, sehen Sie sich an, wie der Standardbeitrag aussieht.
Styling des Video-Post-Formats
Um das Video-Post-Format zu gestalten, vergewissern Sie sich, dass Sie das Video-Format für Ihren Post ausgewählt haben.
Fügen Sie als Nächstes die URL oder Einbettung eines Videos zu Ihrem Inhalt hinzu. Das Videoformat nimmt die erste Video-URL, das Video-Tag oder die Einbettung und zeigt sie oben in Ihrem Beitragsinhalt an. Dieses Video ersetzt auch das vorgestellte Bild auf Ihrer Blog-Seite.
In diesem Beispiel verwende ich nur eine YouTube-Video-URL.
Fügen Sie dem Beitrag Ihr 2000 x 600-Bild hinzu.
Als Nächstes werden wir dem vorgestellten Video zusätzliches Styling hinzufügen, um dem Video einen weißen Rand zu geben und es leicht anzuheben, sodass es den Heldenabschnitt überlappt und etwas hervorsticht.
Gehen Sie zu Theme Customizer → Additional CSS und fügen Sie das folgende benutzerdefinierte CSS hinzu:
/* ---- Format the Position of the Video Wrapper ---- */
@media only screen and (min-width: 980px) {
/*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}
Schauen Sie sich jetzt Ihren neuen Videoformat-Beitrag an.
Alternativ können Sie diesen Beitrag in voller Breite erstellen, um eine weitere großartige Designoption zu erhalten. Gehen Sie einfach zum Bearbeiten Ihres Beitrags und wählen Sie in den Divi-Beitragseinstellungen oben rechts auf der Seite ein Seitenlayout in voller Breite aus.
Sehen Sie sich jetzt den Videoformat-Beitrag in voller Breite an:
Styling des Audio-Post-Formats
Stellen Sie für das Audio-Post-Format sicher, dass Sie das Audio-Format für Ihren Post ausgewählt haben.
Fügen Sie Ihr 2000 x 600-Featured-Bild hinzu.
Fügen Sie als Nächstes Ihre Audiodatei zu Ihrem Beitrag hinzu. Dies kann eine .mp3-, .m4a-, .ogg- oder .wav-Datei sein. Sie können Ihre Audiodatei auf drei verschiedene Arten in Ihre Medienbibliothek hochladen und in Ihren Beitrag einfügen (Medienplayer einbetten, Link zur Mediendatei oder Link zur Anhangsseite).
Jede dieser drei Optionen funktioniert. In diesem Beispiel füge ich der Audiodatei jedoch nur eine einfache URL hinzu. WordPress konvertiert diese Audio-URL in einen Mediaplayer oben im Beitrag.
Werfen wir nun einen Blick auf den Beitrag zum Audioformat.
Das ist nicht schlecht, aber es könnte besser sein. Lassen Sie uns den doppelten Mediaplayer ausblenden, der unter dem orangefarbenen Mediaplayer angezeigt wird, und fügen wir unserem orangefarbenen Mediaplayer ein Hintergrundbild hinzu.
Gehen Sie zu Theme Customizer → Additional CSS und fügen Sie das folgende benutzerdefinierte CSS hinzu:
/* ----- Add Background Image to the Audio Player & Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Hide the Duplicate Audio Player ------ */
div#mep_1 {display: none;}
Suchen Sie dann ein Bild und laden Sie es in Ihre Mediengalerie hoch (sollte etwa 700 x 300 groß sein). Kopieren Sie dann die URL und fügen Sie sie oben in das CSS ein, wo "IMAGE URL HERE EINGEBEN" steht.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Schauen Sie sich jetzt Ihren neuen Audioformat-Beitrag an.
Formatieren des Zitat-Post-Formats
Stellen Sie für das Zitat-Post-Format sicher, dass Sie das Zitat-Format für Ihren Beitrag ausgewählt haben.
Fügen Sie dann dem Beitrag ein 2000 x 600-Featured-Bild hinzu.
Das Angebotsformat verwendet den Blockquote-Shortcode, um eine benutzerdefinierte Angebotsanzeige zu generieren. Fügen Sie also Ihrem Inhalt ein Blockquote hinzu, damit das benutzerdefinierte Zitat angezeigt wird.
Schau dir jetzt deinen Beitrag an.
Lassen Sie uns die vorgestellte Zitatbox mit etwas CSS anpassen, um ihr ein Hintergrundbild und große Zitate oben rechts zu geben.
Gehen Sie zu Theme Customizer → Additional CSS und fügen Sie das folgende benutzerdefinierte CSS hinzu:
/* ---- Add Background Image to the Quote Box ---- */
.et_quote_content {
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Add the Quotation Symbol to the Quote Box ---- */
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px;
font-color: #fff;
content: "\201C" !important;
}
/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}
Suchen Sie ein Bild und laden Sie es in Ihre Mediengalerie hoch (sollte etwa 700 x 300 groß sein). Kopieren Sie dann die URL und fügen Sie sie oben in das CSS ein, wo "IMAGE URL HERE EINGEBEN" steht.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Sehen Sie sich jetzt Ihr Endergebnis an:
Das Format des Galeriebeitrags gestalten
Stellen Sie für das Gallery-Post-Format sicher, dass Sie das Gallery-Format für Ihren Post ausgewählt haben.
Stellen Sie als Nächstes sicher, dass Sie Ihr 2000 x 600-Featured-Bild hinzufügen.
Das Galerie-Post-Format ermöglicht es Ihnen, eine Galerie innerhalb Ihres Post-Inhalts aus der Mediengalerie zu erstellen.
Um eine Galerie für Ihren Beitrag zu erstellen, laden Sie zuerst mindestens 6 Bilder in Ihre Mediengalerie hoch. Die Größe des Bildes kann variieren, aber da die Galerie einen Lightbox-Effekt hat, der die Bilder auf volle Größe aufbläst, können Sie die Bilder etwa 1200 x 800 erstellen.
Wählen Sie nun Ihre Bilder in der Mediengalerie aus, wählen Sie Galerie erstellen und klicken Sie auf die Schaltfläche "Neue Galerie erstellen".
Jetzt sollten Sie einen Galerie-Shortcode in Ihrem Inhalt haben.
Diese Galerie wird in Ihrem Beitrag in einem Mosaik-Layout mit drei Spalten Breite angezeigt. Die Galerie ersetzt auch das vorgestellte Bild auf Ihrer Blog-Seite durch einen Schieberegler Ihrer Galeriebilder.
Schau dir jetzt deinen Beitrag an.
Fügen wir der Galerie etwas CSS hinzu, um sie ein wenig anzuheben, um den Heldenabschnitt zu überlappen, und ändern Sie die Ränder um jedes der Bilder.
Gehen Sie zu Theme Customizer → Additional CSS und fügen Sie das folgende benutzerdefinierte CSS hinzu:
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important;
background: #fff !important;
}
/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */
.et_gallery_item { margin: 0 0 0 0 !important;}
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}
Sehen Sie sich nun das Endergebnis an.
Das Link-Post-Format gestalten
Stellen Sie für das Link-Post-Format sicher, dass Sie das Link-Format für Ihren Post ausgewählt haben.
Fügen Sie als Nächstes Ihr 2000 x 600-Featured-Bild zu Ihrem Beitrag hinzu.
Das Link-Post-Format nimmt den ersten Link im Post und zeigt ihn oben im Inhalt in einer Box an. Diese benutzerdefinierte Linkanzeige ersetzt auch die Miniaturansicht des vorgestellten Bildes für diesen Beitrag auf Ihrer Blog-Seite.
Fahren Sie fort und fügen Sie einen Link zu Ihrem Beitrag hinzu und sehen Sie sich das Beitragsdesign an.
Lassen Sie uns nun das Design ein wenig verbessern, indem wir dem benutzerdefinierten Linkfeld ein Hintergrundbild und ein Symbol links neben der Link-URL hinzufügen.
Gehen Sie zu Theme Customizer → Additional CSS und fügen Sie das folgende benutzerdefinierte CSS hinzu:
/* ---- Add thick border to the left side and Lower the link box ---- */
.et_link_content {
border-bottom: 8px solid #ddd;
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059;
border-radius: 25px;
}
/* ---- Font Settings within the Link box ---- */
.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}
/* ---- Link Symbol on the right side ---- */
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px;
color: #fff;
content: "\e02c";
}
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
Suchen Sie dann ein Bild und laden Sie es in Ihre Mediengalerie hoch (sollte etwa 700 x 300 groß sein). Kopieren Sie dann die URL und fügen Sie sie in das soeben eingegebene CSS-Snippet ein, wo es heißt „BILD-URL HIER EINGEBEN“.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Sehen Sie sich jetzt an, wie der Beitrag aussieht.
Das ist es!
Nachdem wir nun alle unsere Post-Formate entworfen haben, ist es an der Zeit, das coole Layout zu überprüfen, das auf der Blog-Seite erstellt wird. Sie können sehen, wie all die verschiedenen Beitragsformate angezeigt werden.
Hinweis: Sie können Ihren Blog mit dem Standardeditor oder dem Divi Builder anzeigen und das Design funktioniert weiterhin.
Reaktionsfähig?
Alle Postformate sind vollständig responsiv und funktionieren auf allen Geräten gut. Hier ist ein Beispiel dafür, wie der Beitrag im Galerieformat aussieht, wenn ich die Bildschirmgröße verkleinere:
Abschließende Gedanken
Herzlichen Glückwunsch! Sie sind alle fertig. Ich hoffe, Ihnen hat diese dreiteilige Serie zum Anpassen von Blogpost-Formaten gefallen. Wenn überhaupt, hoffe ich, dass Sie etwas Wertvolles gelernt haben, das Sie bei Ihrem nächsten Projekt mitnehmen können. Nachdem Sie das Tutorial abgeschlossen haben, können Sie mit Ihren eigenen Designelementen für Ihre Blogpost-Formate experimentieren.
Bitte senden Sie Ihre Kommentare unten. Ich freue mich darauf, von dir zu hören.