Kobieta Koduje

Recepty na divi

Wielu początkujących blogerów korzysta z divi. Jest to dość fajne narzędzie do tworzenia stron internetowych i blogów bez znajomości programowania, czasem się jednak bez tego nie obejdzie. Poniżej zdradzę wam kilka odnośników do artykułów, które pomogą wam przebrnąć przez batalie błędów  divi i pomogą wam dostosować stronę do waszych wymagań.

  1. Jak zadbać o to aby artykuły na blogu miały taką samą wysokość zajawki?
    Na pewno nie raz zdarzyło wam się, że wysokości zajawek w jednym wierszu obejmującym np. trzy ostatnie wpisy blogowe były różne:

I zapewne chcielibyście żeby wyglądały one w ten sposób:

Wystarczy w zaawansowanych ustawieniach modułu blog dodać klasę css o nazwie „bloggrid”, a następnie dodać poniższy kod do custom style, możesz zrobić to w ustawieniach divi w zakładce „opcje szablonów graficznych”:

/*Equalize Blog Columns*/
.bloggrid .et_pb_salvattore_content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.bloggrid article {
margin-bottom: 20px !important;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

.bloggrid .post-content {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.bloggrid .column {
margin-bottom: 20px !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
Niestety recepta ta nie działa w blogach z 3-kolumnami, wtedy trzeba zastosować jquery. Co dokładnie trzeba zrobić? Do modułu naszego bloga w ustawieniach zaawansowanych dodajemy nową klasę CSS "sensei-grid", a następnie dodajemy do skryptu w ustawieniach divi (integracje) poniższy kod javascript w klamerkach < script> i </ script> (bez spacji):

(function ($) {
$(document).ready(function () {

$( window ).resize(function() {
$(".sensei-grid").each(function(){
equalise_articles($(this));
});
});

$(".sensei-grid").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).outerHeight() - $(this).height();
height += $(this).find(".et_pb_image_container").outerHeight(true);
height += $(this).find(".entry-title").outerHeight(true);
height += $(this).find(".post-meta").outerHeight(true);
height += $(this).find(".post-content").outerHeight(true);
heights.push(height);
});

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

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

$(document).ajaxComplete(function(){
$(".sensei-grid").imagesLoaded().then(function(){
console.log("images loaded");
$(".sensei-grid").each(function(){
equalise_articles($(this));
});
});
});

$.fn.imagesLoaded = function () {
var $imgs = this.find('img[src!=""]');
if (!$imgs.length) {return $.Deferred().resolve().promise();}
var dfds = [];
$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);
Cały artykuł na ten temat dostępny tutaj.

2. Podobnie zapewne bywa z ustawieniem modułu produktów ze sklepu internetowego.
Chcesz dowiedzieć się jak zrobić aby produkty woocomerce były w jednej linii i sprawiały wrażenie wysokiej estetyki? Aby tego dokonać należy w pierwszym wierszu poprzedzającym moduł z produktami dodać klasę „flex-row-wrapper”, a następnie dodać do custom code w ustawieniach divi poniższe parametry:

.flex-row-wrapper {
display: flex;
}

.flex-row-wrapper .et_pb_column {
display: flex;
flex-direction: column;
padding: 20px;
justify-content: space-between;
}
@media screen and (max-width: 981px) {
.flex-row-wrapper {
flex-direction:column;
}
}

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.