WordPress & Divi Tutorial 2022 Deutsch, 10: Layout, Lottiefiles mit dem Divi Supreme PlugIn integrieren, WP Divi Icons & PHP/CSS Code

drei kubik Tutorial Tuesday, Teil 10: Layout Anpassung, Divi Supreme, WP Divi Icons & PHP/CSS Code

In diesem Teil installieren und konfigurieren wir das PlugIn Divi Supreme Modules Lite, eine Erweiterung für das Divi Theme, WP And Divi Icons und passen unser Layout mit individuellem CSS Code in der style.css Datei unseres Child-Themes an. Außerdem limitieren wir die Suchfunktion von WordPress mit einer kleinen PHP Funktion für die functions.php Datei unseres Child Themes.
Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

In diesem Teil des Tutorials passen wir die Suchfunktion von WordPress mit PHP Code in unserer functions.php an. Füge den folgenden PHP Code ein, um die Suchfunktion von WordPress auf die drei Post Types „post“, „product“ und „project“ zu limitieren. Falls Du weitere Post Types in Deinen Suchergebnissen ausgeben lassen möchtest, finde den Namen des Custom Post Types heraus und füge ihn in derselben Form innerhalb der runden Klammern hinter dem Wort Array hinzu:

/**
 * Include 'post types' in search
 */

function limitSearchFunction($query) {
if ( $query->is_main_query() ) {
		if ( $query->is_search ) {
			$query->set( 'post_type', array('post','product','project') );
		}
	}
}
add_filter( 'pre_get_posts','limitSearchFunction' );

Wir haben uns mit Hilfe der Divi Erweiterung Divi Supreme Modules Lite auch ein Layout in einer Zeile (Row) erstellt. Darin befindet sich das „Posts Module“, mit dessen Hilfe wir uns die 5 neuesten Beiträge mit Featured Image, Titel, Meta Daten und einem kurzen Textauszug in einem Footer Widget darstellen lassen können. Im Folgenden findest Du alle bisher gemachten Formatierungen für den gesamten Footer. Füge den CSS-Code in der style.css Deines Child Themes ein, um alle Elemente der „Latest Posts“ im Footer Deiner Website zu formatieren.

/********************* FOOTER *************************/

#footer-widgets {
    padding: 5% 0 3% 0;
}

#footer-widgets .footer-widget h1, #footer-widgets .footer-widget h2, #footer-widgets .footer-widget h3, #footer-widgets .footer-widget h4, #footer-widgets .footer-widget h5, #footer-widgets .footer-widget h6 {
    padding-bottom: 1em;
}

#footer-widgets .footer-widget .et_pb_post .post-meta {
    position: relative;
	display: inline-block;
	font-size: 12px;
	padding-bottom: 0;
	margin-bottom: 0;
	text-align: left;
	top: -8px;
}

#footer-widgets .footer-widget .et_pb_post a.entry-featured-image-url {
	width: 40%;
	float: left;
	margin-right: 20px;
	margin-bottom: 0;
}

#footer-widgets .footer-widget .et_pb_post h2.entry-title,
#footer-widgets .footer-widget .et_pb_post div.post-content {
	width: calc(60% - 20px) !important;
	float: right;
	padding-bottom: 0;
}

#footer-widgets .footer-widget .et_pb_post .entry-featured-image-url {
    margin-bottom: 0;
}

#footer-widgets .footer-widget .et_pb_post h5.entry-title {
    padding-bottom: 0;
}

#footer-widgets .footer-widget .et_pb_post div.post-content-inner p {
    font-size: 75%;
    line-height: 150%;
}

#footer-widgets .footer-widget .et_pb_post:first-child {
    margin-top: 8px;
}

#footer-widgets .footer-widget .et_pb_post:not(:last-of-type) {
	hyphens: auto;
	-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
	padding-bottom: 20px;
    margin-bottom: 1em;
	border-bottom: 2px dotted #3a3937;
}

#footer-widgets .footer-widget .et_pb_post .entry-title {
	font-size: 16px !important;
}

#footer-widgets {
    padding: 60px 0 30px 0;
}

.et_pb_widget {
    float: none;
}

#footer-widgets .footer-widget li {
	padding: 0;
}

#footer-widgets .footer-widget li::before {
	display: none;
}

#footer-widgets .footer-widget li {
	list-style-type: "\2794";
	margin-left: 1em;
	padding: 0 0 0 .5em;
}

drei kubik Divi Child Theme, Divi Config Files und .htaccess Datei herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 3 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach. Das drei kubik Divi Child Theme wurde am 01.01.2023 aktualisiert. Den aktuellen Stand des drei kubik Divi Tutorial Child Themes, die erarbeitete .htaccess Datei und alle WordPress Divi Config Files zum Importieren in Eure Installation könnt Ihr kostenlos hier herunterladen.

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

• WordPress & Divi Tutorial 2022 (deutsch) – Teil 01: WordPress Installation
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 02: WordPress Einstellungen & Datenbank Backup mit DropTable
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 03: PlugIn Installation & Konfiguration von WP Maintenance Mode
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 04: Divi Theme & Divi Child Theme Installation
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 05: SEOPress installieren und alle Einstellungen
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 06: SEOPress PRO Installation und einstellen
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 07: Alle Divi Customizer Einstellungen und Divi Theme Builder Layouts aufbauen
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 08: Design Tweaks mit CSS und Design der Startseite
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 09: ReGenerate Thumbnails, Contact Form 7, Postman SMTP Installation & Konfiguration
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 10: Layout Anpassung, Divi Supreme, WP Divi Icons & CSS Code
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 11: Impressum, Datenschutz, DSGVO, TTDSG, lokale Google Fonts, das musst Du wissen - Website rechtssicher betreiben
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 12: Divi Theme Builder Custom Footer mit Social Media Icons erstellen
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 13: Redirection Plugin von John Godley, About Seite und SEO
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 14: Design Portfolio mit Divi Custom Post Type „Projects“ einrichten
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 15: Startseite mit Divi Supreme Flipbox, Design & Theorie
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 16: PlugIns Autoptimize und WP Cerber Security Installation & Konfiguration
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 17: WordPress Website Security & Performance mit .htaccess und .user.ini Datei
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 18: WordPress Website und Datenbank kopieren - So geht's richtig
• WordPress & Divi Tutorial 2022 (deutsch) – Teil 19: Das PlugIn WP Optimize – Wozu Du es benötigst, wie Du es einstellst

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!