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;
}

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 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.

Hier kostenlos herunterladen

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

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!

0 Comments

Submit a Comment

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

drei kubik - Divi Tutorial