Обтичането на текст около изображения е често срещана техника за дизайн, обикновено използвана в печатни медии, като списания и вестници. Но можете да намерите това използвано и в интернет, особено за публикации в блогове. Обгръщането на изображение с текст всъщност е доста стандартна част от WordPress, която включва просто регулиране на подравняването в WYSIWYG редактора. Единственият проблем е, че е трудно да персонализирате стила на страницата си, използвайки редактора по подразбиране на WordPress. Тук е мястото, където Диви може да помогне!
Въпреки че този урок се фокусира върху изображения, всъщност можете да използвате същия процес, за да обвиете текст във всеки Divi модул.
изследване
Ето един поглед към основния проект, който ще изградим днес.
В този пример ще ви покажа как да увиете две колони текст около центриран модул с изображения. Това ви позволява да създадете уникално оформление в стил списание или вестник. Но тъй като няма свойство "float: center" css, ще ни трябва малко креативност с оформлението, за да накараме този дизайн да работи.
Ето как да го направите.
Създаване на съдържание в горния ред с центрирано изображение
За да започнете, създайте нова обикновена секция с ред от една колона. След това добавете модул с изображения към вашия ред. Качете изображение, което е 400 пиксела на 250 пиксела. Оразмеряването трябва да бъде точно за този дизайн.
След това актуализирайте параметрите на дизайна, както следва:
Максимална ширина: 400px (десктоп), 100% (таблет)
Подравняване на модула: център
Персонализирани подплънки: 2% в горната част, 2% в долната част, 2% вляво, 2% вдясно
След това запазете настройките си и отворете настройките на линията. Извадете подложката от долната част на реда.
Персонализирана подложка: 0px в долната част
Създайте реда с текст на двуколона
Под реда, съдържащ изображението, създайте нов ред с оформление с две колони.
В колона 1 добавете текстов модул с a съдържание манекен.
Създаване на празно пространство с плаващи разделители
За да създадем необходимото пространство за изображението, можем да използваме модули за разделяне. В лявата колона ще създадем разделителен модул, наполовина по-малък от изображението, и ще го плуваме надясно, така че нашият текстов модул да се увива около разделителя. След това в дясната колона ще създадем друг разделител, който е с половината от размера на изображението, и ще го плуваме вляво.
За целта създайте модул за разделяне и го поставете директно над текстовия модул в колоната 1.
След това актуализирайте настройките на разделения модул, както следва:
Покажи разделител: NO
Ширина: 200px
Височина: 250px
Уверете се, че височината е същата като създадената по-рано и че ширината е точно половината от ширината на изображението.
За мобилни устройства искаме да деактивираме разделителите на таблета и телефона. За да направите това, актуализирайте настройките на видимост за изключване на дисплея на таблета и телефона.
Сега, когато е създаден първият ни разделител, копирайте модула за разделяне и го поставете отгоре на текстовия модул в колоната 2.
След това трябва да плаваме нашите разделители. За да направите това, отворете настройките на разделителя в колона 1 и добавете следния персонализиран CSS код към основния елемент:
плаваш: право;
След това отворете настройките на модула за разделяне в колона 2 и добавете следния персонализиран CSS код към основния елемент:
плаваш: ляв;
Преместете изображението на място с персонализиран поле
Сега просто трябва да намалим изображението си на първия ред, така че да се побере в пространството, което сме създали с нашите разделители.
Отворете настройките на модула за изображения и добавете следните персонализирани полета:
Персонализиран марж: Нисък -250px (Desktop), 20px (таблет)
Ето резултата до момента.
Добавете заглавие към секцията
Тази последна стъпка не е задължителна, но ако искате да добавите заглавие към раздела, създайте текстов модул и го позиционирайте над изображението.
След това добавете съдържание след текстовия модул:
Научете повече за това как да давате
След това актуализирайте текстовите настройки, както следва:
Цвят на фона: #000000
Заглавие 2 Шрифт: Playfair Display
Заглавие 2 Подравняване на текст: Централен дял
Цвят на текста 2: #ffffff
Заглавие 2 Височина на линията: 2em
Оправдайте текста за по-чист дизайн на текстово обвиване
Когато заобикаляте текст с изображения, особено ако текстът е центриран по този начин, винаги е добра идея да оправдаете околния текст. В този случай просто променете ориентацията на текста на оправдайте два текстови модула, съдържащи нашите съдържание на обвиване на текст.
Краен резултат
Ето и крайния резултат.
Заключителни мисли
Знанието как ефективно да обгръщате изображения с текст може наистина да направи съдържанието ви да изглежда професионално и лесно за четене. Концепцията е доста проста. Всичко, което трябва да направите, е да преместите изображението си надясно или наляво, след което да използвате персонализирано разстояние около изображението за буфера. И това, което ми харесва, е че можете да използвате всеки модул (не само изображения), за да вмъквате текст във всякакъв тип съдържание в Divi. Надявам се, че това ще ви даде малко вдъхновение за следващия ви проект.
Надявам се да се чуем от вас в коментарите.
Здравей,
Опитвам се да адаптирам този урок, за да обграждам видео ... ... но не мога.
Процедурата горе-долу същата ли е?
Благодаря ти лека вечер. Стеф