Langsung ke konten utama

Membuat Custom theme di divi dengan DIVI BLOG namun ketinggian nya semuanya sama

  1. Open the Blog module settings by clicking on the Gear icon

  2. Go to the Design Tab → Layout and select Grid

  3. Go to Advanced Tab → CSS ID & Classes → CSS Class and set a custom CSS class to the Blog module. You can use dt-blog-equal-height

  1. Go to Divi → Theme Option → Integration tab → Header

  2. Add this JS code:

<script>
(function ($) {
$(document).ready(function () {
$(window).resize(function () {
$('.dt-blog-equal-height').each(function () {
equalise_articles($(this));
});
});

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

equalise_articles($(this));

var observer = new MutationObserver(function (mutations) {
equalise_articles(blog);
});

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

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

function equalise_articles(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);
});
}

$(document).ajaxComplete(function () {
$('.dt-blog-equal-height').imagesLoaded().then(function () {
$('.dt-blog-equal-height').each(function () {
equalise_articles($(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);
}
});
})(jQuery);
</script>

Komentar

Postingan populer dari blog ini

Quick Tip: Remove Space between Footer and Post in Divi

 Divi has a weird quirk where any blog post that is published has a space between the post and the footer. Luckily there is a quick fix. Click on the gear icon in the Divi Visual Builder. In the CSS section of the post editor, add the following code snippet and save. .single .et_pb_post {  margin-bottom: 0;  padding-bottom: 0; } #left-area {  padding-bottom: 0 !important; } If it is saved correctly, you should no longer see a space between the post and footer.

Membuat background colom atau section yang saat di hover zoom

https://www.youtube.com/watch?v=EMud8mbVZ50 Pada colom yang ada backgroundnya, masuk ke ADVANCE - CUSTOM CSS - MAIN ELEMENT: background-size:100%; transition: all 0.5s ease; dan di HOVER: background-size:130%; Start write the next paragraph here