Искате ли да създадете организационна схема в Divi?
Знаете как да създадете оформление на блок-схема в Divi отваря много възможности за комуникация на процеси и идеи на a уеб сайт. В някои случаи блок-схемите могат да се използват за обяснение на изключително сложни идеи, включващи голям брой елементи.
На уеб сайт, обаче, тези по-сложни блок-схеми могат да бъдат трудни за постигане, особено ако искате да бъде отзивчив.
В този урок ще ви покажем как да създадете удобно оформление на блок-схема, която можете да използвате на вашия уеб сайтпрост, ефективен и отзивчив.
Освен това ще използваме само вградените опции на Divi, за да го създадем, така че не е нужно да се притеснявате за добавяне на персонализиран код или добавки.
Нека да започнем!
изследване
Ето бърз поглед към дизайна на блок-схемата, който ще създадем в този урок.
Създайте нова страница с Divi Builder
За да започнете, ще трябва да направите следното:
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Как да създадете оформление на блок-схема в Divi
Стъпка 1: Създайте ред с центрирано рекламно съобщение
За да започнем да създаваме оформлението на блок-схемата в Divi, ще започнем със създаването на ред, съдържащ центрирано рекламно съобщение. Това ще бъде първият елемент от блок-схемата.
Подложка на секции
Първо отворете настройките на секцията за секцията по подразбиране и задайте долната подложка на 0px.
- Подложка (отдолу): 0px
Линия
Вътре в секцията добавете ред към колона.
Отворете настройките на линията и актуализирайте следните настройки на дизайна:
- Ширина на канала: 1
- Подложка (отгоре и отдолу): 0px
Blurb Mod Design
За да създадем нашия първи елемент на блок-схема, ще използваме модул Blurb.
Вмъкнете вграден модул Blurb.
Настройки на модула
Отворете настройките на модула Blurb. Под раздела съдържание, можете да запазите заглавието и основния текст по подразбиране.
След това актуализирайте изображението с изображение на малка икона или използвайте една от вградените икони на Divi. За този урок използваме икони от Пакет за оформление за групово финансиране .
След това дайте на модула фонов цвят:
- Фон: #f8f8f8
Под раздела Дизайн, актуализирайте следното:
- Подравняване на текст: центрирано
- Максимална ширина: 400 пиксела (настолен компютър и таблет), 90% (телефон)
- Модул за подравняване: Център
- Подплата: 6% (отгоре и отдолу), 3% (отляво и отдясно)
След това дайте граница на модула за раздуване, както следва:
- Ширина на рамката: 2px
Стъпка 2: Създаване на свързваща линия с вертикална линия и стрелка
За следващата част от оформлението на нашата блок-схема ще създадем ред от конектори, които имат центрирана вертикална линия и стрелка. Тази линия ще се използва за свързване на линиите на съдържание на организационната схема, която трябва да продължи към дъното на страницата.
В този случай искаме да започнем блок-схемата, като добавим линия и стрелка под предишния ред с центриран модул Blurbn.
Създайте нов ред и копирайте/поставете стиловете от предишния ред
За да направите това, добавете нов ред към колона под предишния ред.
Използвайки " Други настройки на модула (или опции с десен бутон), копирайте стиловете от предишния ред по-горе и ги поставете в новия ред.
Създаване на разделител за вертикални линии
За да създадете вертикален разделител на линиите, добавете нов разделителен модул към линията.
Под настройките на разделителя актуализирайте настройките на дизайна, както следва:
- Цвят на линията: #333333
- Позиция на линията: отдолу
- Тегло на разделителя: 150px
- Ширина: 2px
- Модул за подравняване: Център
- Поле: -1px (отдолу)
Под раздела Подробно, скрийте преливането, както следва:
- Хоризонтално преливане: Скрито
- Вертикално преливане: Скрито
Създайте стрелка с модул за раздуване
След това ще създадем икона със стрелка, която ще стои над разделителната линия с помощта на презентационен модул.
За да създадете стрелката, добавете нов модул Blurb под разделителя.
Настройки на Blurb Mod
Под настройките на модула премахнете заглавието и основния текст по подразбиране и щракнете Използвайте икона, След това изберете иконата със стрелка (вижте екрана).
Под раздела Дизайн, актуализирайте следното:
- Цвят на иконата: #bbbbbb
- Изравняване на изображение/икона: Център
- Използвайте размер на шрифта на иконата: ДА
- Размер на шрифта на иконата: 50px (десктоп), 40px (таблет и телефон)
- Максимална ширина: 50%
- Модул за подравняване: център
- Височина: 50px (десктоп), 40px (таблет и телефон)
Под раздела Подробно, добавете следния CSS към Размазано изображение :
margin-bottom: 0px;
background: #ffffff;
За да позиционирате стрелката над линията, актуализирайте следното:
- Позиция: Абсолютна
- Местоположение: Център
- Z индекс: 10
Стъпка 3: Създаване на линия за съседни части на блок-схемата
След като редът от конектори е завършен, ще добавим още един ред от няколко съседни модула Blurb, за да продължим дизайна на блок-схемата.
За да добавите реда, просто копирайте и поставете първия ред (линията с центрирано рекламно съобщение, което създадохме в горната част на оформлението) под линията на конектора.
Отворете настройките на линията и актуализирайте следното:
- Максимална ширина: 50%
- Ширина на рамката: 2px
Лявата страна на блок-схемата
След като нашата граница е добавена към линията, ще позиционираме модула Blurb над лявата граница.
За да направите това, актуализирайте следните настройки на дизайна:
- Модул за подравняване: ляво
- Марж: 70px (отгоре и отдолу)
- Трансформиране на транслацията по ос X: -50%
Това е ключово за модула Blurb да бъде центриран хоризонтално над граничната линия.
Дясната страна на блок-схемата
За да добавите друг Blurb модул на дясната гранична линия, дублирайте съществуващия blurb.
За да позиционирате рекламното съобщение на дясната граница, отидете на раздела Подробно и му дайте абсолютна позиция:
- Позиция: Абсолютна
- Местоположение: Център вдясно
След това актуализирайте следните опции:
- Полета: няма
- Трансформирайте превод y ос: -50%
- Трансформиране на транслацията по ос X: 50%
Добавени са стрелки към ъглите на всяка гранична линия
За да направим блок-схемата по-ясна в каква посока се движат линиите, ще добавим допълнителни икони със стрелки върху граничните линии на линията.
Стрелка горе вляво
За да добавите стрелка към горния ляв граничен ред, дублирайте модула за раздуване на стрелки, който създадохме в реда на конектора и го плъзнете в реда, съдържащ съседните модули за раздуване.
Отворете дублиращия модул за раздуване на стрелки и променете иконата на стрелка вляво.
След това актуализирайте местоположението на позицията на модула:
- Местоположение: горе вляво
И накрая, актуализирайте опцията за трансформиране на превод, както следва:
- Трансформирайте превод y ос: -50%
Стрелка горе вдясно
За да създадете стрелка, която седи на горната дясна гранична линия, дублирайте стрелката " в горния ляв ъгъл които току-що създадохме. След това отворете настройките и променете местоположението на позицията:
- Местоположение: горе вдясно
Също така актуализирайте иконата със стрелка със стрелка, сочеща надясно.
Стрелка надолу наляво
За да създадете стрелка, която се намира на долната лява граница, дублирайте стрелката " горе в дясно които току-що създадохме.
След това отворете настройките и променете местоположението на позицията:
- Местоположение: долу вляво
След това актуализирайте опцията Transform Translate:
- Transform Translate ос Y: 50%
Стрелка надолу надясно
За да създадете стрелка, която се намира на долната дясна гранична линия, дублирайте стрелката " долу вляво които току-що създадохме.
След това отворете настройките и променете местоположението на позицията:
- Местоположение: Долу вдясно
Също така актуализирайте иконата със стрелка със стрелка, сочеща наляво.
След като всички стрелки са поставени, можете да актуализирате етикетите за всяка с помощта на изглед на слоя .
Стъпка 4: Добавяне на друга съединителна линия
След като сме завършили линията с двете съседни части на блок-схемата и всички стрелки, можем да продължим блок-схемата, като добавим друга съединителна линия.
За да направите това, дублирайте съединителната линия, която създадохме по-горе, и я поставете под линията, съдържаща модулите Blurb от съседната част на блок-схемата.
Стъпка 5: Персонализиране на потока с прав конектор
В съществуващия дизайн на блок-схема потокът започва с горния елемент, след това се разклонява към десния и левия съседни елементи, след което се връща към средата и отива към следващия среден елемент.
За да персонализираме потока, ще дублираме секцията, така че да можем да персонализираме блок-схемата, за да спре на съседния презентационен елемент(и) отляво и да продължи от презентационния елемент отдясно.
Дублиран раздел
За да направите това, първо дублирайте целия раздел, съдържащ блок-схемата.
Добавете още един ляв модул за реклама
В дублиращия се раздел (отдолу) намерете левия модул Blurb в реда, съдържащ двата съседни модула. След това дублирайте текстовото съобщение отляво, за да създадете ново директно отдолу.
Премахнете долните стрелки и границата
След това изтрийте долната лява стрелка и долната дясна стрелка.
Отворете настройките на линията за линията, съдържаща множество реклами, и премахнете долната граница:
- Ширина на долната граница: 0px
Създайте линия с конектор с права граница
Сега искаме да персонализираме дизайна на блок-схемата с конектор на дясната гранична линия, който ще свързва дясната гранична линия на линията с линията на конектора по-долу.
За да направим това, ще създадем друга линия и ще добавим персонализирана разделителна линия и контурна стрелка от дясната страна.
Добавете нов ред една колона под съществуващия ред с трите оформления.
Актуализирайте настройките на реда, както следва, под раздела Дизайн :
- Ширина на улука: 1
- Максимална ширина: 50%
- Подплата: 0px (отгоре и отдолу)
След това добавете права граница към линията.
- Ширина на дясната граница: 2px
След това добавете модул Divider към линията.
Актуализирайте настройките на разделителя, както следва:
- Цвят на линията: #333333
- Позиция на линията: отдолу
- Тегло на разделителя: 2px
- Ширина: 50%
- Поле: -2px (отдолу)
Под разширения раздел актуализирайте позицията на разделителя:
- Позиция: Абсолютна
- Местоположение: Долу вдясно
Когато разделителят е на място, копирайте модула Blurb от долната дясна стрелка на третия ред на първата секция и го поставете в реда с дясната разделителна линия.
Отворете настройките на модула Blurb на стрелката, която току-що дублирахте и преместихте, и актуализирайте следното:
- Позиция: По подразбиране
- Модул за подравняване: вдясно
Лява гранична линия спиране на потока
В момента част от лявата граница е изложена под рекламното съобщение в долния ляв ъгъл. За да го скриете, просто премахнете долното поле на това долно рекламно съобщение.
Стъпка 6: Актуализиране на линията с конектор за линия от левия край
Вашата блок-схема може също да се нуждае от конектор за лява граница. За да го създадем, можем да актуализираме линията с десния граничен конектор, както следва:
- Ширина на левия панел: 2px
- Ширина на дясната граница: 0
Актуализирайте разделителя вътре в реда с ново местоположение:
- Местоположение: долу вляво
След това, актуализирайте подравняването на стрелката:
- Модул за подравняване: ляво
И променете иконата на стрелка надясно.
Краен резултат
Вижте крайния резултат.
Изтеглете DIVI сега!!!
Заключение
В този урок създадохме полезна схема на блок-схема, която всеки може да използва, за да комуникира процес и идеи на посетители със зашеметяващ отзивчив дизайн.
Използвайте го, за да покажете услугите или процеса на проектиране, да създадете инфографика или да насочите клиентите през съдържание по нов начин.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...