Trick # 357 | 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
