Модулът на кода е празно платно, което ви позволява да добавяте код към вашата страница, като например шорткодове на приставки или статичен HTML код. Ако искате да използвате приставка на трета страна, например плъзгач на трета страна, можете просто да поставите шорткода на приставката в стандартен или с ширина кодов модул, за да покажете елемента неограничен.
Как да добавите кодов модул към страницата си
Преди да можете да добавите кодов модул към вашата страница, първо трябва да получите достъп до Divi Builder. Веднъж Тема на Divi инсталиран на вашия уеб сайт, ще забележите бутон Използвайте Divi Builder над издателя всеки път, когато създавате нова страница.
С натискането на този бутон активирате Divi Builder, който ви дава достъп до всички модули Divi Builder. След това кликнете върху бутона Използвайте Visual Builder за стартиране на генератора във визуален режим.
Можете също да кликнете върху бутона Използвайте Visual Builder когато разглеждате своя уеб сайт нагоре по веригата, ако сте влезли в таблото си за управление на WordPress.
След като влезете в Visual Builder, можете да щракнете върху сивия бутон плюс, за да добавите нов модул към вашата страница. Нови модули могат да се добавят само в редове. Ако стартирате нова страница, не забравяйте първо да добавите ред към страницата си.
Намерете кодовия модул в списъка с модули и кликнете върху него, за да го добавите към вашата страница. Списъкът с модули може да се търси, което означава, че можете също да въведете думата "код" и след това да натиснете Enter, за да намерите автоматично и добавите модула на кода! След като модулът бъде добавен, ще бъдете посрещнати със списъка с опции на модула. Тези опции са разделени на три основни групи: Съдържание , Концепция et напреднал .
Използвайте случай, като добавите тъп лист със стилове за анимиране на съдържание на отделна страница
В този пример ще добавя скрипт за връзка за импортиране на Animate.css, за да добавя анимационни ефекти към елементите на страницата. Тъй като файлът Animate.css съдържа много код, има смисъл да го зареждам само на страницата, която ми трябва.
Просто добавете обикновен раздел и линия с пълна ширина (колона 1) и добавете кодовия модул.
В текстовото поле за съдържание добавете фрагмента от код.
Всичко, което трябва да направите, е да добавите няколко CSS класа, за да анимирате всеки елемент от вашата страница на CSS клас на вашата страница. В този пример ще отскоча бутона, когато страницата се зареди.
В настройките на модула Бутон, в раздела Разширени, въведете двата класа „анимирани“ и „отскачащи“ в текстовото поле на класа на CSS.
Сега бутонът отскача, когато страницата се зареди.
Съвет: Понякога добавянето на код с прекъсвания на редове ще доведе до спиране на работата на кода. По-добре е да създадете своя код в текстов редактор и да го поставите в модула на кода.
Опции за съдържанието на кода
В раздела за съдържание ще намерите всички елементи на съдържанието на модула, като текст, изображения и икони. Всичко, което контролира какво се появява във вашия модул винаги ще бъде в този раздел.
Съдържание
Тук можете да поставите всеки HTML, CSS или JavaScript код, който искате да се покаже на страницата на текущото местоположение. Само редактори и администратори имат право да публикуват нефилтриран HTML, което означава, че кодът може да бъде премахнат от курса, ако се използва от автор или сътрудник. Можете също да поставите кратки кодове в модула. Тези кодове на курсове (кратки кодове) ще бъдат показани вътре в родителската колона без никакви допълнителни обвивки на модул Divi.
Етикет на администрацията
Това ще промени етикета на модула в генератора за лесно идентифициране. Когато използвате изгледа WireFrame в Visual Builder, тези етикети ще се появят в модулния блок на интерфейса Divi Builder.
Опции за дизайн на кода
В раздела Дизайн ще намерите всички опции за стила на модула, като например шрифтове, цветове, размер и разстояние. Този раздел ви позволява да промените външния вид на вашия модул. Всеки модул Divi има дълъг списък с дизайнерски настройки, които можете да използвате, за да промените почти всичко.
Максимална ширина
Всяка въведена тук стойност ограничава ширината на всяко съдържание, изобразено в кодовия модул, до зададената стойност. Например въвеждането на 50% в полето за въвеждане ще намали съдържанието на кодовия модул до 50% от колоната, която го съдържа.
Код Разширени опции Код
В раздела Разширени ще намерите опции, които по-опитните уеб дизайнери могат да намерят за полезни, като персонализирани 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 правила, разделени с точка и запетая.
видимост
Тази опция ви позволява да контролирате устройствата, на които се показва вашият модул. Можете да изберете да деактивирате модула си поотделно на таблети, смартфони или настолни компютри. Това е полезно, ако искате да използвате различни модове на различни устройства или ако искате да опростите мобилния дизайн, като премахнете определени елементи от страницата.
Това е всичко за този урок.
