Добавянето на видеоклипове към вашата страница в Divi е лесно, когато използвате видео модула. Този модул ви позволява да вграждате видеоклипове от всякакъв източник, но също така да персонализирате миниатюрата и бутона за възпроизвеждане.
Как да добавите видео модул към страницата си
Преди да можете да добавите видео модул към вашата страница, първо трябва да влезете в Divi Builder. Веднъж Тема на Divi инсталиран на уебсайта ви, ще забележите бутон Използвайте Divi Builder над редактора на публикации, когато създавате нова страница. Щракнете върху този бутон, за да активирате Divi Builder и да получите достъп до всички модули Divi Builder. След това кликнете върху бутона Използвайте Visual Builder за да стартирате генератора във визуален режим. Можете също да щракнете върху бутона Използвайте Visual Builder когато разглеждате уебсайта си на преден план, ако сте свързани с таблото за управление на WordPress.
След като влезете в Visual Builder, можете да щракнете върху сивия бутон плюс, за да добавите нов модул към вашата страница. Нови модули могат да се добавят само в редове. Ако стартирате нова страница, не забравяйте първо да добавите ред към страницата си.
Намерете видеомода в списъка с модове и кликнете върху него, за да го добавите към вашата страница. Списъкът с модове може да се търси, което означава, че можете също да въведете думата „видео“ и след това да кликнете върху Enter, за да намерите автоматично и добавите видеомода! След като модулът бъде добавен, ще бъдете посрещнати от списъка с опции на модула. Тези опции са разделени на три основни групи: Съдържание , Концепция et напреднал .
Пример за употреба: Добавяне на видео към целевата ви страница
Добавянето на видеоклип към вашата целева страница е чудесен начин да насърчаване вашите продукти и увеличете реализациите. В този пример ще ви покажа как можете да използвате видео модула, за да добавите видеоклип към вашата целева страница. Сложих червен кръг там, където трябва да отиде видеото.
Използвайки Visual Builder, добавям нов раздел с ред с пълна ширина (1 колона). В настройките на реда, в раздела Дизайн, избирам опцията „Използване на персонализирана ширина“. За опцията Персонализирана ширина, която се появява, въвеждам персонализирана ширина от 767px. Това гарантира, че видео модулът, който ще добавя в този ред, не надвишава тази ширина и става твърде голям при по-големи размери на екрана.
След това добавям видео модула към реда. Под раздела Съдържание на настройката за видео модул въвеждам URL адреса на видеоклипа, който искам да вградя в целевата си страница. Използвам URL адреса на видеоклип в YouTube за този пример.
След това добавям URL за наслагване на изображение за видеоклипа си, като щраквам върху бутона „Генериране на видео“. Това автоматично изтегля кадър от видеоклипа, за да служи като наслагване с нова персонализирана икона за видео.
В раздела Дизайн променям цвета на иконата за възпроизвеждане, за да съответства на целевата ми страница.
Сега имам видео за целевата си страница, което изглежда изчистено и отговаря на моя дизайн.
След като видяхте видеомода в действие, се потопете във всички негови настройки в секциите по-долу. Предоставихме подробен поглед върху това, което ще намерите във всеки раздел от настройките на модула, и обяснение на това, което прави всеки.
Опции за съдържанието
URL адрес на видеоклипа
Модулът Divi Video ви позволява да добавяте видео чрез два различни метода. Можете да изтеглите свой собствен видео файл от компютъра си, като кликнете върху бутона „Изтегляне на видео“ и изберете желания файл, или можете да въведете всеки видео URL от видео източник на трета страна, като Youtube или Vimeo. Просто копирайте и поставете URL адреса от браузъра си и го поставете в полето Video URL и Divi ще се погрижи за останалото!
URL адрес на наслагване на изображение
Ако искате да зададете персонализирано изображение на видеоклип, което ще бъде поставено на стандартния видео интерфейс с персонализиран бутон за възпроизвеждане, за да се създаде по-остър и стилизиран външен вид, можете да изберете да го направите, като използвате полето Image Overlay Този контрол ви позволява или да качите свое собствено персонализирано изображение, или автоматично да позволите на Divi да генерира такова от URL адреса на вашето видео. Повечето доставчици на видео поддържат тази опция, като Youtube и Vimeo. Просто кликнете върху бутона „Генериране на видео“ и оставете Divi да се погрижи за останалото!
Администраторски етикет
По подразбиране вашият видео модул ще се появи с етикет „Video“ в генератора. Администраторен маркер ви позволява да промените този етикет за лесна идентификация.
Опции за дизайн
промяна на цвета на иконата
Ако определите наслагване на изображение за вашата видеопод, показаното видео съдържа икона за възпроизвеждане над видеото. Можете да посочите цвета на тази икона тук, за да съответства на цветовете на вашата страница.
Разширени опции
Идентификатор и класове на CSS
Това може да се използва за добавяне на CSS ID или клас към вашия модул. След това те могат да се използват във вашата таблица със стилове или в полето CSS Custom Options, за да приложите персонализиран стил към модула. Идентификаторите на CSS също могат да бъдат насочени с връзки към котва, за да се свържат към определени области на вашата страница.
Персонализиран CSS
Тук можете да добавите персонализиран CSS към вашия видео модул.
видимост
Ако искате да скриете своя видео модул на някои устройства, можете да изберете устройствата, на които искате да деактивирате видео модула.
[vc_row center_row= »yes »][vc_column width= »1/2″][vcex_button target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]ИЗТЕГЛЕТЕ ГО ТЕМА DIVI [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=уроци » target= » празно » layout= »разширено » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]ИЗТЕГЛЯНЕ НА ШАБЛОНИ DIVI[/vcex_button][/vc_column][/vc_row]
Други уроци по Диви
- Ресторант 5, който използва темата на Divi
- Как да добавяте текст към продукт Divi WooCommerce
- Как да промените цвета на менюто между страниците на Divi
- Как да персонализирате решетките на блог с Divi
- Как да използвате редактора на роли Divi в WordPress
- Как да създадете плъзгач Divi на цял екран
- Как да промените цвета на менютата между страниците на Divi
- Функции, които вероятно не знаете за Divi
- Как да използвате Divi Builder на WordPress
- Как да използвате модула за превъртане на видео Divi
- Как да използвате модула за обръщане на Divi Builder
- Как да добавите препоръчителен модул на Divi Builder
- Как да използвате текстовия модул Divi
- Как да създадете плъзгач на Divi
- Как да редактирате потребителска роля на Divi
- Как да използвате модула Divi Social Media
- Как да използвате магазинния модул по темата WordPress Divi
- Как да използвате модула Sidebar на Divi
- Как да използвате модула на таблицата с цени за Divi
- Как да използвате заглавния модул на публикациите на Divi
- Как да добавите видео модул на Divi
- Как да използвате навигационния модул на статията
- Как да използвате модула за търсене Divi
- Как да използвате модула на портфейла Divi
- Как да използвате модула за лице на Divi Builder
- Как да използвате портфейла с филтър на Divi
- Как да използвате модула на плъзгача с пълна ширина
- Как да използвате модула за изображения на Builder на Divi
- Как да използвате навигационния модул с пълна ширина на Divi Builder
- Как да използвате модула за галерия на изображения
- Как да използвате модула на карта с пълна ширина Divi Builder
- Как да използвате модула за портфейли с пълна ширина Divi
- Как да използвате заглавния модул Divi с пълна ширина
- Как да използваме Counter модула Divi
- Как да използвате плъзгача за статии в Divi Builder
- Как да използвате модула Divi Email Optin
