Какво е Divi Builder?

Divi е нещо повече от уникална тема на нашите партньори от Elegant Themes. За разлика от всяка друга WordPress тема, Divi е изградена изцяло с едноименната платформа Divi Builder.

Използвайки drag&drop вие ще може да създавате страхотни темплейти с лекота и същевременно да имате контрол върху всяка една част от вашият сайт.

 

Основни Елементи

Строителя съдържа три основни елемента: Секции, Редове и Модули.
На изображението по-долу може да видите секция, която съдържа един ред с две колони, а всяка една колона съдържа по един модул.

divi-example

 

Нека разгледаме всеки елемент поотделно:

Секции (Sections)

Основния елемент при изграждането на сайт с Divi строителя, е Секцията. Те биват два вида: редовни и с пълна ширина:

  • Редовните секции съдържат редове с колони в тях, като във всяка от тях можете да  добавяте неограничен брой модули
  • В секциите с пълна ширина може да поставяте модули, които ще използват пълната ширина

 

Редове (Row)

Редовете се съдържат в Секциите и можете добавяте неограничен брой от многобройните различни видове. След избирането на вид, вече може да започнете с поставянето на модули в него.

Всяка колона на всеки ред, може да съдържа също неограничен брой модули.

 

Модули (Modules)

Модулите са визуалните елементи, които изграждат вашия Уебсайт. Те могат да бъдат добавяни както в Редове, така и в Секциите с пълна ширина.

Как да започнем?

Когато създавате нова страница ако използвате Divi, Вие ще видите [Use The Divi Builder] бутон. За да започнете да използвате Divi Строител натиснете на този бутон.

 

Опции в Divi Строителя

Save To Library (Запазване в библиотека)

С тази опция Вие може да запазите вашият текущ проект по всяко време. Тя е страхотна в случай, че желаете да използвате текущото си оформление, което сте създали на други сайтове или страници, които използват Divi.

 

Load From Library (Зареждане от библиотека)

С тази опция Вие може да заредите вашите предишно запазени проекти а и също така да заредите някоя от многото готови темплейти с които Divi идва.

 

 

Clear Layout (Изчистване на темплейт)

Ако по всяко време поискате да се започне от нулата, просто кликнете върху бутона Clear Layout. Понякога единственото от което се нуждаете е свежо начало. Избирането на тази опция ще изтрие всичко, което сте направили и ще ви предостави празна страница.

Секции

Всеки път, когато добавяте нова секция ще трябва да дефинирате нейните свойства. С натискането на бутона меню ще отидете в настройки и свойства на съответната секция.

 

Background Image – Ако е дефинирано изображение то ще бъде за фон в тази секция. За да изтриете изображението, просто премахнете URL адреса от полето за настройки.

Transparent Background Color – Включването на тази опция ще направи фона на вашите секции прозрачни, така фона на сайта ще прозира през тях.

Background Color – Цвят за фон. Това е в случаите, когато не искате да поставяте изображение за фон а само цвят.

Background Video MP4/Background Video WEBM – Може да зададете видео за фон. Поддържат се файловите разширения с .MP4 и .WEBM за оптималната функционалност на всеки един браузър. Видео за фон е изключено от браузърите на мобилните устройства, но в такъв случай ще бъде използвано изображение ако сте дефинирали такова. За най-добри резултати, е добре да зададете и двете.

Background Video Width – за фиксиране на широчината на видеоклипа

Background Video Height – за фиксиране на височината на видеоклипа

Show Inner Shadow – От тук можете да включите или изключите опцията за вътрешна сянка на секцията.

Use Parallax Effect – Включването на тази опция ще фиксира фоновото изображение на една позиция докато навигирате по сайта нагоре или надолу. Имайте предвид, че включването на тази опция също така ще разшири това изображение според височината на браузъра.

CSS ID – Може да добавите ID за определен CSS стил

CSS Class – Може да изберете определени CSS класове да бъдат използвани за конкретния модул. Класовете могат да се използват за да си създадете собствен CSS стил. Може да използвате много CSS класове, като при указването им ги разделяте с разстояние.

Добавяне и дефиниране на Ред

След като запазите настройките на вече добавената секция е необходимо да добавите Ред в нея и да дефинирате неговият вид. Редовете също така имат много опции, които може да използвате, за да персонализирате външния вид и така да променяте структурата на оформлението. За повече информация относно настройките на Редовете, може да прочетете в официалната документация.

Добавяне на Модули

Щом изберете вид на Ред, Вие ще бъдете подканени да вмъкнете Модул:

 

Всеки път, когато искате да вмъкнете Модул Вие ще трябва да натиснете бутона ‘Insert Module’ и да изберете такъв от предоставеният Divi списък. Всеки модул има различно предназначение и различен набор от опции.

Oформление

На изображението долу, може да видите пример за Секция (синьо) с Ред (зелено), който се състои от две колони. В първата колона има вмъкнат Модул (сиво) за изображение а в втората Модул за текст.

 

Също така имате достъп до настройките на всички елементи, като натиснете иконката за меню или да ги изтриете, като натиснете иконката Х. За да разширите оформлението на сайта може да използвате бутоните с + към всеки един елемент: Секции, Редове или Модули.

Специализирани секции

Под всяка секция имате бутони ‘Add Standard Section | Fullwidth Section | Specialty Section | Add From Library’.

Fullwidth Section (секциите с пълна ширина) са уникални с това, че те не съдържат Редове. И поради тази причина в тях могат да се вмъкнат единствено Модули, които са предназначени да работят на пълна ширина. В примера на изображението по-долу, добавяме Модул Fullwidth Slider към нашия дизайн

 

Specialty Sections. Специализираните секции са уникални с това, че всяка такава съдържа по един Ред, който разширява височината й. Това ви предоставя възможност да създавате класически оформления за странични ленти (sidebar layouts). В изображението по-долу може да видите такава примерна секция.

 

Също така, можете да зареждате готови шаблони за секции, които сте създали по късно, и да ги добавяте. Това може да направите от бутона „Add From Library“.

Редактиране на оформлението

Редактирането на вашето сайт оформление никога не е било по-лесно отколкото с drag § drop системата на Divi Builder. Ако искате да преместите Секция под или над друга, просто „хванете“ и привлачете до желаната от вас дестинация. Същото важи за Редовете и Модулите. По същия начин, можете да привлачите Редове от една Секция в друга и Модули от един Ред в друг.

На изображението по-долу е даден пример как преместваме Секцията със слайдера от средата в най-горната част на сайта. Слайдера с Блог и странични менюта от най-долу в средата и най-горния модул, като за долна част на сайта.

Запиши и Публикувай!

Веднъж приключили с оформлението на сайта, натиснете бутона Update/Publish най-долу на вашето Табло на WordPress. Ще се влюбите в резултата!

Premium WordPress

Вземи Сега

 

Започнете да създавате сега с Premium WordPress от Host.bg.

(С използване на промокод wordpress35 можете да вземете 35 отстъпка за всички wordpress хостинг планове)

Всеки един план идва с Divi Builder и многобройни други екстри.

Вижте и видео за опциите на Divi Builder:

 

Още информация за невероятните възможности на Divi Builder и скрийншоти можете да намерите в специализираната ни страница.