Какво бихте казали напостерer вашия Divi блог във формат на карусел, където можете лесно да превъртате през статиите?
За много уебсайтове, блогването се е превърнало във важна част от тяхната SEO стратегия.
Но освен създаването на висококачествено съдържание, е важно и да опростите процеса на навигация за посетителите си. По този начин те могат да преминават от една статия към друга и да прекарват повече време на уебсайта ви, четейки публикуваното от вас съдържание.
Divi предлага модул за блог, който можете да използвате за динамично показване и персонализиране на вашите публикации. Ако търсите начин да изведете търсенето на публикации на следващото ниво, ще ви хареса тази статия.
Ще ви покажем как да трансформирате интегрирания блог модул на Divi във въртележка, като използвате интегрираните елементи на Divi и безплатна js библиотека .
Да вървим.
изследване
Преди да се потопим в урока, нека хвърлим бърз поглед на резултата.
Създайте блог страница с Divi Theme Builder
Започнете с добавяне на нова страница към уебсайта, върху който работите.
Дайте заглавие на страницата си, публикувайте я и кликнете върху „Използвайте Divi Builder'.
Изтеглете предварително проектираната страница на блога „Компания за интериорен дизайн“
В този урок ще използваме страницата на блога от оформлението „Компания за интериорен дизайн“, но вие можете да използвате всяко друго оформление по ваш избор.
Създайте шаблони за стрелки „Предишно“ и „Следващо“, използвайки модула Summary на Divi
След като сме вътре в страницата на блога, можем да започнем да създаваме карусела.
Първата част е посветена на създаването на стрелките, от които се нуждаем, за да позволим на посетителите да навигират между статиите.
Прочетете още: Как да създадете лепкава глобална заглавка в DIVI
За да проектираме стрелките, ще използваме модула Summary на Divi, но вие можете да използвате всеки друг модул по ваш избор.
Добавете нов ред в горната част на секцията на блога си, като използвате следната структура на колоните:
оразмеряване
Без да добавяте още модули, отворете настройките на линията и оставете линията да докосне лявата и дясната страна на секцията, като промените настройките за оразмеряване, както следва:
- Максимална ширина: 100%
- Максимална ширина: 100%
Добавяне на модул Резюме
Добавете модул Резюме и вмъкнете заглавие.
След това изберете икона.
- Използвайте икони: ДА
Настройки на икони
Отидете в раздела „Стил“ и променете настройките на иконите, както следва:
- Цвят на иконата: #000000
- Разположение на изображение/икона: Vertex
- Подравняване на изображение/икона: Централно
Настройки за текст на заглавието
След това променете настройките на текста на заглавието.
- Шрифт на заглавието: Mulish
- Заглавие с мека светлина: Получерно
- Подравняване на текста: център
- Цвят на текста на заглавието: #000000
оразмеряване
След това променяме параметрите за оразмеряване на модула за различни размери на екрана.
- Максимална ширина: 10% (настолен компютър), 20% (таблет), 30% (телефон)
- Подравняване на текста: вдясно
Нека добавим и CSS клас. Този CSS клас ще ни помогне да задействаме действието на въртележката при кликване.
- CSS клас: бутон за връщане назад
Накрая ще добавим и ред CSS код към главния елемент на модула, за да трансформираме курсора в показалец.
cursor: pointer;
Клонирайте линията и я поставете в долната част на секцията
След като завършите първата стрелка, можете да клонирате целия контейнер с редове и да поставите дублирания ред в края на секцията на блога.
Отворете модула Резюме в дублиращия се ред и редактирайте заглавието.
Използвайте икони: ДА.
Също така променете CSS класа.
- CSS клас: следващ бутон
Подгответе модула за блог
оразмеряване
Със стрелките на място е време да започнете да настройвате модула Blog, като започнете от реда, в който е поставен. Отворете настройките на линията и съответно променете настройките за оразмеряване:
- Максимална ширина: 100%
- Максимална ширина: 100%
След това задайте препълванията на реда на „скрити“. Това ще помогне да се гарантира, че въртележката не показва хоризонтална лента за превъртане на нашата страница.
- Хоризонтално преливане: Скрито
- Вертикално преливане: Скрито
Скриване на пагинацията
След като настройките на линията са на мястото си, отворете настройките на модула Blog. Уверете се, че странирането е деактивирано в настройките на елемента.
- Показване на пагинация: Не
След това отидете в раздела „Стил“ и променете оформлението на „Цял екран“.
- Модел: Цял екран
Ще добавим и наслагване.
- Показано насложено изображение: АКТИВНО
- Цвят на иконата за наслагване: #ffffff
- Цвят на фона на наслагването: rgba (1,0,66,0.33)
След това ще добавим CSS клас към нашия блог, което ще ни помогне да активираме въртележката по-късно в урока.
- CSS клас: блог-модул
И ще генерираме разстояние между мета кода на публикацията и откъса, като добавим долен марж към CSS елемента Post Meta в раздела „Разширени“.
Открийте също: Как да създадете плъзгащо се и натискащо меню в DIVI
margin-bottom: 50px;
Добавете Slick JS функционалност
След като всички настройки на Divi са на място, е време да добавите елегантната js функционалност! Добавете модул „Код“ точно под модула „Блог“ (или някъде другаде на страницата).
След това добавете гладката js библиотека в тагове на скрипт (както можете да видите на екрана за печат по-долу). Можете също така да ги добавите към заглавката на уебсайта си в настройките на темата Divi.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Ще модифицираме леко всяка публикация в блог на индивидуално ниво, използвайки CSS код.
Прочетете още: Как да създадете страницата на блога с модула Блог в DIVI
Не забравяйте да поставите кода между тагове стил както е показано на екранната снимка по-долу.
.slick-slide {
float: left;
margin: 2vw;
}
И накрая, ще добавим малко JQuery код, за да позволим на въртележката да придобие форма. В кода по-долу добавяме и бутоните, които проектирахме за функционалността на въртележката.
Не забравяйте да поставите кода в тагове на скрипт както можете да видите по-долу.
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
Запазете страницата и излезте от Visual Builder на Divi, за да покажете резултата
Във Visual Builder няма да видите резултата.
Така че, веднага след като сте готови, запазете страницата си, излезте от Visual Builder и вижте резултата на уебсайта си!
изследване
След като преминахме през всички стъпки, нека да разгледаме за последен път резултата на различни размери на екрана.
Изтеглете DIVI сега!!!
Заключение
Това е всичко! Това е всичко за тази статия. Показахме ви как да издигнете дизайна на вашия блог модул на следващото ниво. По-конкретно, показахме ви как да трансформирате вградения блог модул на Divi в карусел, използвайки безплатна JavaScript библиотека.
Ако искате да научите повече за Divi, моля, посетете нашия каталог на Divi уроци. Можете също да се консултирате Как да създадете страницата на блога с модула Divi Blog
Вижте също нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...