Искате ли да покажете страницата си в DIVI Blog като мрежа с много колони?
Модулът за блогове на Divi може да показва публикации в блогове в оформление с пълна ширина или решетка. Ако изберете оформлението на мрежата, максималният брой колони, които можете да имате, е три.
В този урок, само с няколко CSS фрагмента, вашият блог ще бъде трансформиран в красива многоколонна мрежа. Освен това, колоните ще бъдат плавни и адаптивни във всички размери на браузъра, така че не е нужно да се притеснявате за актуализиране на медийни заявки или настройки за адаптивност.
Можете също така да се консултирате с нашата статия, за да знаете Как да създадете блог страница с модула DIVI Blog.
изследване
Преди да започнем този урок, нека първо да разгледаме резултата, който искаме да постигнем.
Изтеглете DIVI сега!!!
Конфигуриране на модул за блог с оформление на цял екран
Модулът „Блог“ на Divi може да се използва за добавяне на блог навсякъде във вашия уебсайт. Това прави създаването на блог страница в Divi изключително лесно. Всичко, което трябва да направите, е да добавите модула „Блог“ към страницата, използвайки Divi Builder.
За този урок ще използваме предварително проектирано оформление на блога от един от безплатни пакети за оформление на DIVI, който вече съдържа блог модул с основен стил.
За да заредите предварително създаденото оформление на блога:
- Създайте нова страница от таблото за управление на WordPress
- Дайте му подходящо име и кликнете върху „Използване на Divi Builder“
- Кликнете върху „Избор на оформление“
- Въведете „Моден дизайнер“ в лентата за търсене и изберете оформлението „Страница на блога на моден дизайнер“.
- Уверете се, че сте избрали оформлението на блога и след това кликнете върху „Избор на оформление“.
След като оформлението се зареди, намерете модула Blog, използван за показване на публикации в блогове, и отворете настройките.
Задаване на брой публикации
В настройките на блога актуализирайте съдържанието, за да ограничите броя на статиите до 10. (Това е главно по естетически причини, тъй като нашата мрежа евентуално ще включва два реда от по пет публикации в блога.)
- Брой позиции: 10
Изберете Оформление на цял екран
Тъй като ще подреждаме блога си в колони, използвайки CSS Grid, трябва да се уверим, че оформлението на модула Blog е „Цял екран„(а не „Решетка“). Това ще гарантира, че публикациите в блога са подредени вертикално в нормалния им ред на страниците.
За да промените оформлението на модула „Блог“, отворете настройките на модула и в раздела „Стил“ отворете падащото меню. Шаблон и изберете Цял екран .
Отсега нататък всяка публикация в блога ще се простира по цялата ширина на колоната (или родителския контейнер).
Нека добавим рамка към публикациите в блога. Актуализирайте опциите за граници, както следва:
- Ширина на рамката: 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.