• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
текст обтекающий картинку

Обтекающий текст

Как сделать на сайте так, чтобы текст обтекал картинку (или картинка обтекала текст), для примера возьмем картинку сложной формы (не прямоугольник) и заставим текст обтекать её.


Скачать исходники для статьи можно ниже

Пример:

текст обтекающий картинку

Для примера вам понадобятся картинки, можете скачать их с помощью правой клавиши мыши:

перенос сайта с Денвера на хостинг

обтекающий текст на сайте

Попробуем воссоздать данный пример!

Заходим в админку wordpress и как обычно создаем “Запись” – заходим в пункт “Записи”, подпункт “Добавить новую” и вводим нужный нам текст:

как сделать обтекающий текст на сайте

Далее выбираем место для картинки и вставляем её, нажав кнопку “Добавить медиафайл”, при этом указав в параметрах картинки выравнивание по левому краю:

текст обтекает картинку на сайте

обтекание текстом картинки сложной фигуры

обтекание текста

Аналогично вставляем вторую картинку чуть ниже, только с выравниванием по правому краю.

В итоге у нас получиться что-то вроде этого:

обтекающий текст на сайте

Как видите текст обтекает картинки, однако ровно по линии – но нам нужно сделать красивее!

Для этого нам понадобиться – бесплатное расширения для браузера – CSS Shapes Editor.

Если у вас Яндекс.Браузер или Google Chrome, то установить данное приложение можно здесь:

«chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp»

Теперь вернемся к нашему сайту – сохраним и опубликуем создаваемую нами “Запись”:

obtekanie9

Переходим на опубликованную нами запись, наводим курсор мышки на картинку, кликаем правой клавишей мышки и в выпадающем окошке выбираем пункт “Просмотр кода элемента”:

obtekanie10

Далее справа внизу выбираем пункт “Shapes” (по скриншоту ниже можно кликнуть для увеличения):

obtekanie11

В данном пункте (“Shapes”) кликаем мышкой на плюсик:

obtekanie12

Здесь выбираем “polygon”:

obtekanie13

, а далее редактируем границы рисунка на сайте (по скриншоту ниже можно кликнуть для увеличения):

obtekanie14

Любое ваше изменение границ рисунка будет фиксироваться в коде, а именно: будут прописываться дополнительные стили к картинке – вот их и нужно будет скопировать (по скриншоту ниже можно кликнуть для увеличения):

obtekanie15

Теперь возвращаемся к редактированию нашей “Записи” через админку wordpress, открываем вкладку “Текст” (вместо вкладки “Визуально”):

obtekanie16

и добавляем к ней скопированные нами стили:

obtekanie17

И сохраняем изменения в “Записи”.

Теперь переходим на сайт, открываем “Запись” и смотрим результат:

obtekanie18

Аналогичные действия проделываем и со второй картинкой.

На этом все! Красивых вам сайтов!