Как сделать на сайте так, чтобы текст обтекал картинку (или картинка обтекала текст), для примера возьмем картинку сложной формы (не прямоугольник) и заставим текст обтекать её.
Скачать исходники для статьи можно ниже
Бизнес сообщество BizNet - здесь
Пример:
Для примера вам понадобятся картинки, можете скачать их с помощью правой клавиши мыши:
Попробуем воссоздать данный пример!
Заходим в админку wordpress и как обычно создаем “Запись” – заходим в пункт “Записи”, подпункт “Добавить новую” и вводим нужный нам текст:
Далее выбираем место для картинки и вставляем её, нажав кнопку “Добавить медиафайл”, при этом указав в параметрах картинки выравнивание по левому краю:
Аналогично вставляем вторую картинку чуть ниже, только с выравниванием по правому краю.
В итоге у нас получиться что-то вроде этого:
Как видите текст обтекает картинки, однако ровно по линии – но нам нужно сделать красивее!
Для этого нам понадобиться – бесплатное расширения для браузера – CSS Shapes Editor.
Если у вас Яндекс.Браузер или Google Chrome, то установить данное приложение можно здесь:
«chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp»
Теперь вернемся к нашему сайту – сохраним и опубликуем создаваемую нами “Запись”:
Переходим на опубликованную нами запись, наводим курсор мышки на картинку, кликаем правой клавишей мышки и в выпадающем окошке выбираем пункт “Просмотр кода элемента”:
Далее справа внизу выбираем пункт “Shapes” (по скриншоту ниже можно кликнуть для увеличения):
В данном пункте (“Shapes”) кликаем мышкой на плюсик:
Здесь выбираем “polygon”:
, а далее редактируем границы рисунка на сайте (по скриншоту ниже можно кликнуть для увеличения):
Любое ваше изменение границ рисунка будет фиксироваться в коде, а именно: будут прописываться дополнительные стили к картинке – вот их и нужно будет скопировать (по скриншоту ниже можно кликнуть для увеличения):
Теперь возвращаемся к редактированию нашей “Записи” через админку wordpress, открываем вкладку “Текст” (вместо вкладки “Визуально”):
и добавляем к ней скопированные нами стили:
И сохраняем изменения в “Записи”.
Теперь переходим на сайт, открываем “Запись” и смотрим результат:
Аналогичные действия проделываем и со второй картинкой.
На этом все! Красивых вам сайтов!