Преди да можете да добавите модул Резюме към вашата страница, първо трябва да получите достъп до Divi Builder. Веднъж Тема на Divi инсталиран на вашия уеб сайт, ще забележите бутон Използвайте Divi Builder над редактора на публикации, когато създавате нова страница. С натискането на този бутон активирате Divi Builder, който ви дава достъп до всички модули Divi Builder. След това кликнете върху бутона Използвайте Visual Builder за да стартирате генератора във визуален режим. Можете също да щракнете върху бутона Използвайте Visual Builder когато разглеждате своя уеб сайт нагоре по веригата, ако сте влезли в таблото си за управление на WordPress.

След като влезете в Visual Builder, можете да щракнете върху сивия бутон плюс, за да добавите нов модул към вашата страница. Нови модули могат да се добавят само в редове. Ако стартирате нова страница, не забравяйте първо да добавите ред към страницата си.

Намерете модула Summary в списъка с модули и кликнете върху него, за да го добавите към вашата страница. В списъка с модули може да се търси, което означава, че можете също да въведете думата "Обобщение" и след това да натиснете Enter, за да намерите автоматично и да добавите описателния текстов модул! След като модулът бъде добавен, ще бъдете посрещнати със списъка с опции на модула. Тези опции са разделени на три основни групи: Съдържание , Концепция et напреднал .

използвайте случай, за да изброите фирмените услуги на началната страница

Тъй като модулът Summary комбинира както изображения, така и текст, за да демонстрира определени функции, можете да го използвате, за да добавите списък с вашите бизнес услуги към началната си страница. Модулът Blurb също ви позволява да превърнете вашето изображение / икона и заглавие в линк към вашата страница за услуги. За този пример ще използвам модула Blurb, за да добавя четири изброени услуги към начална страница.

За да добавите всичките четири Blurbs към вашата страница, използвайте визуалния конструктор, за да добавите стандартен раздел с ред с четири колони. След това добавете модул Blurb към първата колона на вашия ред.

Актуализирайте настройките на Blurb със следното:

Опции за съдържанието

Заглавие: [въведете заглавие на услугата]
Съдържание: [въведете кратко описание на услугата]
URL: [добавете URL към страницата на услугата]
Използвайте иконата: ДА
Икона: [изберете икона, илюстрираща вашата услуга]

Опции за дизайн

Цвят на иконата: # 42bb99 (направете цвета, който допълва дизайна на сайта)
Използвайте иконата Размер на шрифта: ДА
Размер на шрифта на иконата: 68px (регулира размера на иконата)
Ориентация на текста: Център -
Размер на шрифта на главата: 24px
Размер на шрифта: 18px
Височина на тялото: 1.5em

Сега първият ви уводен текст е завършен.

Сега дублирайте модула „Обобщение“, който току-що създадохте, три пъти и плъзнете всяко от дублираните обобщения върху останалите три колони. Тъй като настройките ви за дизайн са интегрирани в дублираните ви модули, трябва само да редактирате съдържанието (заглавка, съдържание, икона, URL адрес и др.) и да промените цветовете, за да отговарят на всяка от вашите услуги.

Обобщени опции за съдържание

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

Заглавие

Дайте на текста си заглавие, което ще се появи над текста в получер текст. Опцията за URL, намираща се под полето за заглавие, ще ви позволи да направите заглавието си хипервръзка.

Съдържание

Това поле е мястото, където можете да въведете основното съдържание на вашия текст. Blurb Text също ще покрие цялата ширина на вашата колона до 550px.

URL

Поставете валиден уеб адрес в това поле, за да превърнете заглавието на Blurb във връзка. Ако оставите това поле празно, заглавието ви просто ще остане като статичен елемент.

Отварящ URL адрес

Тук можете да изберете дали връзката ви да се отвори в нов прозорец.

Използвайте икона

Когато използвате Blurbs, можете да изберете да използвате икона или изображение с вашия текст. Ако изберете „Да“ за опцията „Използване на икона“, ще ви бъдат предложени следните опции за персонализиране на вашата икона. Ако не изберете да използвате икона, вместо това ще бъдете подканени да качите изображение.

икона

Ако сте избрали „Да“ за настройката „Използване на икона“, тази опция ще се появи. Тази опция ви представя списък с наличните икони, които можете да използвате с вашия размах. Просто кликнете върху иконата, която искате да използвате и тя ще се появи във вашия текст.

Изображение

Ако не сте избрали да използвате икона, тази настройка ще се появи. Поставете валиден URL адрес на изображението тук или изберете / качете изображение чрез библиотеката на медиите на WordPress. Изображенията в модула Резюме винаги се показват центрирани в колоните им и обхващат цялата ширина на вашата колона до 550px. Вашето изображение обаче никога няма да бъде по-голямо от първоначалния си размер за качване. Височината на презентационното изображение се определя от пропорциите на оригиналното изображение. Поради това е препоръчително да поставите всичките си презентационни изображения на една и съща височина, ако ги поставите една до друга.

Цвят на фона

Определете персонализиран цвят на фона за вашия модул или оставете празно, за да използвате цвета по подразбиране.

Изображение на фона

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

Администраторски етикет

Това ще промени етикета на модула в генератора за лесно идентифициране. Когато използвате изгледа WireFrame в Visual Builder, тези етикети ще се появят в модулния блок на интерфейса Divi Builder.

Обобщени възможности за дизайн на модула

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

Цвят на иконата

Ако сте избрали „Да“ за настройката „Използване на икона“, тази опция ще се появи. Тази опция ви позволява да персонализирате цвета на вашата икона. По подразбиране иконите са настроени на цвета на акцента на вашата тема.

Икона на кръг

Ако сте избрали „Да“ за настройката „Използване на икона“, тази опция ще се появи. Тази опция ви позволява да поставите иконата си в цветен кръг. Ако изберете „да“ за тази настройка, ще ви бъдат предложени допълнителни опции за персонализиране на цвета и границата на вашия кръг.

Цвят на кръга

Ако сте избрали „Да“ за настройката „Икона на кръга“, тази опция ще се появи. Тук можете да изберете цвят, който да използвате за вашия кръг. Този цвят е независим от цвета на избраната от вас по-рано икона. Вашата икона в своя цвят ще се появи в кръг с цвета, който изберете тук.

Покажете границата на кръга

Ако сте избрали „Да“ за настройката „Икона на кръга“, тази опция ще се появи. Тази опция ви позволява да активирате контур за вашия кръг. Ако е избрана тази опция, ще се появи допълнителна опция за избор на цвета на вашата граница.

Цвят на границата в кръг

Ако сте избрали „Да“ за настройката „Покажи граница на кръга“, тази опция ще се появи. Тук можете да регулирате цвета на границата на кръга.

Поставяне на изображение / икона

Тук можете да изберете местоположението на вашето изображение/икона. Може да се появи над текста или отляво на текста. Като поставите изображението/иконата отляво на вашия текст, изображението ще бъде по-малко, отколкото ако бъде поставено отгоре.

Използвайте размера на шрифта на иконата

Ако тази опция е активирана, можете да въведете персонализиран размер за иконата, показана по-горе или две вляво от вашата размивка.

Цвят на текста

Ако вашият размах е поставен на тъмен фон, цветът на текста трябва да бъде зададен на "Тъмно". И обратното, ако вашата размивка е поставена на светъл фон, цветът на текста трябва да бъде зададен на „Light“.

Ориентация на текста

Това падащо меню ви позволява да посочите ориентацията на вашия текст да бъде подравнена вляво, центрирана или подравнена вдясно.

Шрифт на заглавката

Можете да промените шрифта на заглавката си, като изберете желания шрифт от падащото меню. Divi се предлага с десетки страхотни шрифтове, задвижвани от Google Fonts. По подразбиране Divi използва шрифта Open Sans за целия текст на вашата страница. Можете също така да персонализирате стила на вашия текст, като използвате опции удебелен, курсив, главни букви и подчертаване.

Размер на заглавния шрифт

Тук можете да регулирате размера на вашия заглавен текст. Можете да плъзнете плъзгача на интервала, за да увеличите или намалите размера на текста си, или можете директно да въведете желаната стойност на размера на текста в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Цвят на заглавния текст

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

Разстояние между буквите в заглавката

Разстоянието между буквите засяга пространството между всяка буква. Ако искате да увеличите интервала между всяка буква от заглавния текст, използвайте плъзгача за интервал, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Височина на заглавния ред

Височината на реда засяга пространството между всеки ред от текста на заглавката ви. Ако искате да увеличите интервала между всеки ред, използвайте плъзгача за диапазон, за да регулирате интервала или да въведете желания размер на разстоянието в полето за въвеждане вдясно от курсора. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Шрифт на тялото

Можете да промените шрифта на тялото си, като изберете желания шрифт от падащото меню. Divi се предлага с десетки страхотни шрифтове, задвижвани от Google Fonts. По подразбиране Divi използва шрифта Open Sans за целия текст на вашата страница. Можете също така да персонализирате стила на вашия текст, като използвате опции удебелен, курсив, главни букви и подчертаване.

Размер на шрифта на тялото

Тук можете да регулирате размера на основния си текст. Можете да плъзнете плъзгача на интервала, за да увеличите или намалите размера на текста си, или можете директно да въведете желаната стойност на размера на текста в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Цвят на текста на тялото

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

Разстояние между буквите

Разстоянието между буквите засяга пространството между всяка буква. Ако искате да увеличите интервала между всяка буква от основния текст, използвайте плъзгача за интервал, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Височина на линията на тялото

Височината на реда засяга пространството между всеки ред от основния текст. Ако искате да увеличите интервала между всеки ред, използвайте плъзгача за интервал, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа му.

Използвайте границата

Активирането на тази опция ще постави граница около вашия модул. Тази граница може да бъде персонализирана, като се използват следните условни параметри.

Цвят на границата

Тази опция влияе върху цвета на вашата граница. Изберете персонализиран цвят от инструмента за избор на цвят, за да го приложите към вашата граница.

Ширина на границата

По подразбиране границите са широки 1 пиксел. Можете да увеличите тази стойност, като плъзнете плъзгача за диапазон или въведете персонализирана стойност в полето за въвеждане вдясно от плъзгача. Поддържайте персонализирани мерни единици, което означава, че можете да промените единицата по подразбиране от "px" на нещо друго като em, vh, vw и т.н.

Стил на границата

Границите поддържат осем различни стила, включително: плътен, пунктиран, пунктиран, двоен, жлеб, гребен, вложка и старт. Изберете желания стил от падащото меню, за да го приложите към вашата граница.

Максимална ширина на изображението

Прилагането на стойност на максимална ширина тук ще ограничи ширината на изображението на презентацията. Това засяга само размити, които не са в режим на икони.

Персонализиран марж

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

Перманентни подплънки

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

Разширени опции Резюме модул

В раздела Разширени ще намерите опции, които по-опитните уеб дизайнери могат да намерят за полезни, като персонализирани CSS и HTML атрибути. Тук можете да приложите персонализиран CSS към всеки от многото елементи на модула. Можете също да приложите персонализирани CSS класове и идентификатори към модула, които могат да се използват за персонализиране на модула във файла style.css на вашата детска тема.

CSS ID

Въведете незадължителен CSS ID, който да използвате за този модул. Идентификаторът може да се използва за създаване на персонализиран CSS стил или за връзка към определени раздели на вашата страница.

CSS клас

Въведете незадължителните CSS класове, които да използвате за този модул. CSS клас може да се използва за създаване на персонализиран CSS стил. Можете да добавите множество класове, разделени с интервал. Тези класове могат да се използват във вашия Тема на Divi Дъщерно или в персонализирания CSS, който добавяте към вашата страница или вашия уеб сайт като използвате опциите на темата на Divi или настройките на страницата на Divi Builder.

Персонализиран CSS

Персонализиран CSS може също да се приложи към модула и всеки от вътрешните елементи на модула. В раздела Персонализиран CSS ще намерите текстово поле, където можете да добавите CSS директно към всеки елемент. CSS записите в тези настройки вече са вградени със стилови тагове. Така че просто трябва да въведете CSS правила, разделени с точка и запетая.

Анимация на изображение / икона

Това контролира посоката на мързеливата анимация на зареждане.

ALT текст от изображение

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

видимост

Тази опция ви позволява да контролирате устройствата, на които се показва вашият модул. Можете да изберете да деактивирате модула си поотделно на таблети, смартфони или настолни компютри. Това е полезно, ако искате да използвате различни модове на различни устройства или ако искате да опростите мобилния дизайн, като премахнете определени елементи от страницата.

Това е всичко за този урок. Надяваме се да сме ви показали как да използвате модула за обобщение на Divi.

Блеър Jersyer

Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на добавки, Теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Вижте пълната биография