Lesefortschritt:

Höhe des Divi-Blog-Rasters ausgleichen

30. Juni 2024 | CSS-Stylesheet, Divi-Theme, Scripts

Dieser Beitrag beinhaltet 1156 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.

Das Blog-Modul des Divi-Themes kommt standardmässig im Masonry-Look daher. Das bedeutet, dass die Höhe des Blog-Gitters je nach Teaserlänge stark variieren kann. Diese Höhenunterschiede lassen sich jedoch mit JavaScript und ein wenig CSS-Code ausgleichen.

Wenn Sie ein Blog-Modul im Divi-Theme verwenden und unter «Design» das Gitter- (oder Grid-)Layout wählen, kann der Blog so dargestellt werden wie nebenan:

Immerhin: Die unterschiedlichen Höhen lassen sich ausgleichen: Bearbeiten Sie das Blog-Modul und vergeben Sie ihm eine CSS-Klasse. Klicken Sie dafür auf den Tab «Erweitert» und dann auf «CSS-ID & Klassen». Dort fügen Sie die Klasse «blog-equal-height» in das Eingabefeld «CSS-Klasse» ein. Dieselbe Klasse wird dann in dem unten stehenden Codeschnipsel verwendet, um den Code mit diesem Modul abzugleichen und zu verknüpfen.

Nun platzieren Sie den untenstehenden Script-Code im <head>-Bereich Ihrer Website – wahlweise auch in einem Code-Modul auf der gewünschten Seite. Für den <head>-Bereich klicken Sie im Backend auf Divi/Integration und fügen ihn dort dem <head> der Website hinzu:

<script>
	(function ($) {
		var blog_equalize_button_height = "true";

		if (blog_equalize_button_height == "false") {
			function blog_equalize_blog_post_height(blog) {
				var articles = blog.find('article');
				var heights = [];

				articles.each(function () {
					var height = 0;
					height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
					height += $(this).find('.entry-title').outerHeight(true);
					height += ($(this).find('.post-meta').length != 0) ? $(this).find('.post-meta').outerHeight(true) : 0;
					height += ($(this).find('.post-content').length != 0) ? $(this).find('.post-content').outerHeight(true) : 0;

					heights.push(height);
				});

				var max_height = Math.max.apply(Math, heights);

				articles.each(function () {
					$(this).height(max_height);
				});
			}
		} else {
			function blog_equalize_blog_post_height(blog) {
				var articles = blog.find('article');
				var heights = [];
				var btnheights = [];

				articles.each(function () {
					var height = 0;
					var btnheight = 0;
					var basebtnmargin = 20;

					height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
					height += $(this).find('.entry-title').outerHeight(true);
					height += $(this).find('.post-meta').outerHeight(true);
					height += $(this).find('.post-content').outerHeight(true);

					btnheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
					btnheight += $(this).find('.entry-title').outerHeight(true);
					btnheight += $(this).find('.post-meta').outerHeight(true);
					btnheight += $(this).find(".post-content p").outerHeight(true);
					btnheight += basebtnmargin;

					heights.push(height);
					btnheights.push(btnheight);

				});

				var max_height = Math.max.apply(Math, heights);
				var max_btn_height = Math.max.apply(Math, btnheights);

				articles.each(function () {
					$(this).height(max_height);

					var eachheight = 0;
					var eachbasebtnmargin = 20;
					eachheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
					eachheight += $(this).find('.entry-title').outerHeight(true);
					eachheight += $(this).find('.post-meta').outerHeight(true);
					eachheight += $(this).find(".post-content p").outerHeight(true);
					eachheight += eachbasebtnmargin;

					var requiredbtnmargin = (max_btn_height - eachheight) + eachbasebtnmargin;
					$(this).find(".more-link").css("margin-top", requiredbtnmargin + "px");
				});
			}
		}
    
		$(document).ready(function () {
			$(window).resize(function () {
				if ($(this).width() >= 768) {

					$(".blog-equal-height article").each(function () {
						$(this).removeClass("pa-auto-height");
						$(this).find(".more-link").removeClass("pa-auto-margin");
					})
					$('.blog-equal-height').each(function () {
						blog_equalize_blog_post_height($(this));
					});

					$('.blog-equal-height').each(function () {
						var blog_blog = $(this);

						blog_equalize_blog_post_height(blog_blog);

						var observer = new MutationObserver(function (mutations) {
							blog_equalize_blog_post_height(blog_blog);
						});

						var config = {
							subtree: true,
							childList: true
						};

						observer.observe(blog_blog[0], config);
					});

					$(document).ajaxComplete(function () {
						$('.blog-equal-height').imagesLoaded().then(function () {
							$('.blog-equal-height').each(function () {
								blog_equalize_blog_post_height($(this));
							});
						});
					});

					$.fn.imagesLoaded = function () {
						var $imgs = this.find('img[src!=""]');
						var dfds = [];

						if (!$imgs.length) {
							return $.Deferred().resolve().promise();
						}

						$imgs.each(function () {
							var dfd = $.Deferred();
							dfds.push(dfd);
							var img = new Image();

							img.onload = function () {
								dfd.resolve();
							};

							img.onerror = function () {
								dfd.resolve();
							};

							img.src = this.src;
						});

						return $.when.apply($, dfds);
					}
				} else {
					$(".blog-equal-height article").each(function () {
						$(this).addClass("pa-auto-height");
						$(this).find(".more-link").addClass("pa-auto-margin");
					})
				}
			});
		});
	})(jQuery); 
</script>

Nun noch ein wenig CSS-Code, den Sie in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) einfügen können:

.blog-equal-height .auto-height {
    height: auto !important;
}

.blog-equal-height .auto-margin {
    margin-top: 20px !important;
}

Und schon ist die Höhe der Beiträge im Divi-Blog-Modul auch bei unterschiedlicher Textlänge angeglichen – so wie nebenan:

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This