Искате ли да покажете страницата си в DIVI Blog като мрежа с много колони?
Модулът за блогове на Divi може да показва публикации в блогове в оформление с пълна ширина или решетка. Ако изберете оформлението на мрежата, максималният брой колони, които можете да имате, е три.
В този урок само с няколко CSS фрагмента, вашия блог ще се превърне в красиво мрежово оформление с много колони. Освен това колоните ще бъдат гладки и отзивчиви във всички размери на браузъра, така че не е нужно да се притеснявате за актуализиране на тези медийни заявки или настройки за отзивчивост.
Можете също така да се консултирате с нашата статия, за да знаете Как да създадете блог страница с модула DIVI Blog.
изследване
Преди да преминем към този урок, нека първо да разгледаме резултата, който искаме да постигнем.
Изтеглете DIVI сега!!!
Конфигуриране на блог модул с оформление на цял екран
Блог модулът на DIVI може да се използва за добавяне на блог навсякъде във вашия уеб сайт. Това наистина улеснява създаването на блог страница в Divi. Всичко, което трябва да направите, е да добавите блог модул към страницата с помощта на Divi Builder.
За този урок ще използваме предварително направено оформление на блог от един от безплатни пакети за оформление на DIVI, който вече съдържа блог модул с основен стил.
За да заредите предварително създаденото оформление на блога:
- Създайте нова страница от таблото за управление на WordPress
- Дайте му подходящо име и щракнете върху „Използване на Divi Builder“
- Кликнете върху „Избор на оформление“
- Въведете в лентата за търсене „Fashion Designer“ и изберете оформлението „Fashion Designer Blog Page“
- Уверете се, че сте избрали оформление на блога и след това щракнете върху „Избор на оформление“
След като оформлението се зареди, намерете модула Blog, използван за показване на публикации в блогове, и отворете настройките.
Задаване на брой публикации
В настройките на блога актуализирайте съдържание за да ограничите броя на публикациите до 10. (Това е главно от естетически причини, тъй като нашата мрежа в крайна сметка ще включва два реда от пет публикации в блогове.)
- Брой позиции: 10
Изберете Оформление на цял екран
Тъй като ще оформяме нашия блог в колони, използвайки CSS Grid, трябва да се уверим, че оформлението на модула Blog е 'Цял екран“ (не „Решетка“). Това ще гарантира, че публикациите в блога са подредени вертикално в нормалния им ред на страниците.
За да промените оформлението на модула Blog, отворете настройките на модула и под раздела Style отворете падащото меню Шаблон и изберете Цял екран .
Сега всяка публикация в блог ще обхваща цялата ширина на колоната (или родителския контейнер).
Нека добавим рамка към публикациите в блога. Актуализирайте опциите за граници, както следва:
- Ширина на рамката: 1px
- Цвят на рамката: rgba (150,104,70,0.35)
Добавяне на персонализиран CSS клас към модула Blog
За да насочим ефективно този конкретен блог модул (а не друг) с нашия CSS, трябва да дадем на нашия модул персонализиран CSS клас. Под разширения раздел добавете следния CSS клас:
- CSS клас: et-blog-css-grid
Създаване на многоколонно оформление с CSS Grid
Сега, след като нашият блог модул е настроен с оформление на цял екран, ние сме готови да добавим нашия персонализиран CSS.
Ще вмъкнем модул Code под модула Blog, за да добавим CSS към страницата.
В полето за въвеждане на код добавете необходимите тагове за стил, за да обвиете всеки CSS код, добавен към страница.
Вътре в етикетите за стил поставете следния CSS кодов фрагмент:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Първият ред на CSS представя съдържание (или модули) под формата на мрежа.
display: grid;Вторият ред на CSS дефинира модела на решетъчните колони.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Третият ред определя разстоянието между елементите на мрежата.
gap : 20px ;В този момент адаптивната мрежа с пет колони е готова за работа. Всъщност, ако не искате да използвате пагинация или граници за вашите публикации в блога, можете да спрете тук.
Ето резултата до момента.
Персонализирайте елементи от мрежата
След това можем да добавим няколко реда CSS, които са насочени към елементите на мрежата, така че да са подравнени в горната част на всеки ред и да имат някаква подложка.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Премахнато страниране на мрежата
Понастоящем, ако имате активна пагинация в модула на блога, тя ще се третира като последния елемент на мрежата в CSS мрежата. За да премахнем напълно пагинацията от мрежата, можем да й дадем абсолютна позиция и да я поставим директно под модула на блога. За да направите това, добавете следния CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Да видим резултата до момента!
Съвет: коригирайте размера на всички представени изображения (или миниатюри)
В този момент може да забележите несъответствието във височината на изображенията, представени във всяка публикация в блога. Ако искате всички те да са с еднаква височина, можете също да използвате допълнителен CSS, за да направите това.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
С горно вътрешно поле от 56,25%, трябва да получим съотношение на страните 16:9 за всички наши изображения.
Чувствайте се свободни да регулирате подложката на контейнера за изображение, за да получите съотношението, което искате за вашето изображение.
Краен резултат
А ето и окончателен преглед на нашия блог модул с новите ни колони и мрежа. И както виждаме, мрежата е напълно отзивчива.
Изтеглете DIVI сега!!!
Заключение
Това е направено ! В този урок ви показахме как да подредите публикациите в блога си в колони.
Успяхме да преструктурираме целия модул на Divi Blog в плавно оформление с пет колони. Надяваме се, че това ви спестява време и ви дава повече възможности за създаване на красиви блог страници. Можете също да се консултирате Как да създадете блог страница с модула на блога на Divi
Вижте също нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.