Искате ли да добавите тийзърно съдържание към таблет с възможност за превъртане на Divi?
L’ajout de contenu d’accroche à votre site Web peut constituer une stratégie маркетинг ефективен. Това работи особено добре за насърчаване неща като електронни книги. Давате им предварителен преглед на съдържанието, така че те искат още.
В днешния урок ще ви покажем как да покажете съдържание на тийзър в падащ таблет в Divi.
За да направим това, ще се възползваме от вградените опции на Divi, за да превърнем колона в падащ контейнер (проектиран да изглежда като таблет), който може да включва всеки тип съдържание, което желаете.
Можете да го използвате за насърчаване първите глави на всяка електронна книга, покажете примерни дизайни от вашето портфолио или друг тип съдържание.
Нека да започнем!
изследване
Ето бърз поглед върху таблета със съдържание, което може да се превърта, което ще създадем в този урок.
Създайте нова страница с Divi Builder
В таблото за управление на WordPress отидете на „Страници > Добавяне на нова“
Дайте заглавие, което има смисъл за вас, след което щракнете „Използване на DiviBuilder“
След това кликнете „Стартиране на строителство“
Дизайн на таблет с превъртащо се тийзър съдържание в Divi
Създаване на падащия контейнер за таблети с колона Divi
Добавете ред
За да започнете, създайте ред с две колони с обикновена секция.
Настройки на колона 1
Цвят на фона
Отворете настройките на колона 1 и добавете бял фон към колоната.
- Фон: #ffffff
Граница и поле
Отидете на раздела Дизайн падаща опция Отстояние и променете настройките, както следва:
- Подплата (отгоре, отдолу, отляво и отдясно): 25px (отгоре, отдолу, отляво, отдясно)
След това дръпнете надолу опцията Граница и съответно променете настройките:
- Заоблени ъгли: 20px
- Ширина на рамката: 30px
- Цвят на рамката: #000000
Кутия за сянка
За да придадете дълбочина на дизайна на таблета, дръпнете надолу опцията Box Shadow и добавете следната сянка на кутията:
- Box Shadow: вижте екранната снимка
- Позиция на сянка на кутия (хоризонтална и вертикална): 5 px
- Цвят на сенките: #555555
Персонализирана височина и ширина на колона с CSS
Ключът към това съдържанието на колоната да може да се превърта е да му дадете определена височина. Това ще накара съдържанието да прехвърли височината на колоната.
Също така искаме съотношението на страните на таблета да остане постоянно, така че е добра идея да дадете и на колоната максимална ширина.
За да дадете на колоната персонализирана височина и ширина, отидете на раздела Подробно и актуализирайте следното:
при Персонализирана CSS, добавете следния CSS за дисплея на работния плот (основен елемент):
height:650px;
max-width: 488px;
След това активирайте раздела за друг дисплей и поставете следния персонализиран CSS за дисплея на телефона на основния елемент:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Вертикално преливане: превъртане
Както споменахме по-рано, колоната вече има определена височина, което неизбежно ще доведе до вертикално преливане на съдържанието на колоната.
Pour vous assurer que le contenu débordant peut être visualisé en faisant défiler la colonne, définissez l’option de débordement vertical de видимост от "превъртане". За да направите това, разширете опцията Видимост раздел Подробно
- Вертикално преливане: Превъртете
Добавете съдържание на тийзър към падащата колона
В този момент колоната (или рафтът) е готова за съдържание. Можете да използвате който и да е модул Divi в тази колона, за да създадете съдържание за визуализация.
В този пример добавяме фиктивно съдържание на електронна книга, което ще се състои от модул отзив за книга от издателя (за показване на първоначалния призив за действие), модул Изображение (за показване на корицата на книгата) и модул Текст (за показване на някои глави от електронната книга).
Превъртащ се CTA (Call to Action) с фон на корицата на книгата
Първият елемент от съдържанието на тийзър, който ще добавим, е модул отзив за книга от издателя което ще служи като призив за действие „превъртете до визуализация“.
Ще използваме икона на презентация, заглавие и фон с корица на книга като фоново изображение и наслагване с цветен градиент.
В колоната за таблет добавете модул отзив за книга от издателя.
Актуализирайте съдържанието, както следва:
- Заглавие: Превъртете, за да прочетете откъс
Падаща опция „Изображение и икона“
- Използване на икона: Да
- Икона: вижте екранната снимка
След това дръпнете надолу опцията История и добавете градиент
- Цвят от лявата страна: rbga(0,0,0,0,0.0)
- Цвят на дясната страна: #ffffff
- Начална позиция: 20%
- Крайна позиция: 85%
- Квадратен градиент над фоновото изображение: ДА
След това добавете изображението на корицата на книгата. За най-добри резултати добавете изображение приблизително 600px на 850px .
В раздела Дизайн актуализирайте следните стилове за иконата и заглавието:
- Цвят на иконата: #000000
- Размер на шрифта на иконата: 80px (десктоп и таблет), 70px (телефон)
- Шрифт на заглавието: Монсерат
- Подравняване на текста на заглавието: центрирано
- Цвят на текста: #000000
След това можем да преместим иконата и заглавието надолу в колоната, като добавим горно поле.
За да оразмерите и разположите рекламното съобщение, актуализирайте следното:
- Височина: 100%
- Поле: 25px (отдолу)
- Подложка: 400px (десктоп и таблет), 270px (телефон)
Изображение на корицата на книгата
Следващата част от съдържанието на тийзъра ще бъде изображение на корицата на книгата. За да добавите изображение, просто добавете модул Image под модула Blurb.
След това качете същото изображение, използвано за фона на рекламния текст.
Съдържанието на предварителния преглед на текста
Нашата последна част от тийзърното съдържание ще бъде текстът, който ще включва някои измислени глави от нашата електронна книга. За да добавите текста, добавете нов текстов модул под предишното изображение.
След това поставете следния HTML код в раздела с основния текст:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
В раздела Дизайн актуализирайте стила на заглавието и разстоянието, както следва (Заглавие 3):
- Шрифт: Монсерат
- Тегло на шрифта: Ultra Bold
- Подравняване на текст: центрирано
- Височина на реда: 1,3 em
- Подплата: 10% (отгоре и отдолу)
Няколко последни щрихи
Актуализиране на параметрите на реда
Със съдържанието на място трябва да направим някои корекции на реда, за да направим дизайна по-отзивчив. Отворете настройките на линията и актуализирайте следното:
- Ширина: 100% (десктоп), 90% (таблет и телефон)
- Максимална ширина: 1px (десктоп), 080px (таблет и телефон)
Добавете допълнително съдържание към колона 2
На този етап можем да добавим допълнително съдържание към колона 2, ако е необходимо. За този пример добавихме текстов модул и модул бутон и ги персонализирахме подобно на дизайна, показан в нашия пакет за оформление на електронни книги.
Изтеглете DIVI сега!!!
Краен резултат
Сега нека видим крайния резултат.
Разгледайте падащото съдържание, налично в лаптоп таблета.
Ето как дизайнът се подрежда на екрана на таблета и телефона.
Заключение
Може би най-доброто нещо в този дизайн на превъртащ се таблет е неговата гъвкавост. Тъй като таблетът е по същество колона Divi, можете да използвате произволен брой модули Divi (текст, изображение, бутон), за да проектирате съдържанието, което искате да покажете.
Espérons que cela vous sera utile la prochaine fois que vous aurez besoin de présenter un contenu teaser sur votre site Web.
Ако искате да научите повече за Divi, не се колебайте да посетите нашия каталог на Divi уроци. Можете също да се консултирате Как да създадете страницата на блога с модула Divi Blog
Ако имате някакви въпроси или предложения, не се колебайте да оставите коментар в раздела за коментари по-долу.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...