Главная » Сайтостроение » Красивое обтекание картинки текстом

Красивое обтекание картинки текстом

Приветствую Вас дорогие друзья и читатели моего блога.
Блуждая по просторам интернета, я часто натыкался на блогах и сайтах, на некрасивое обтекание картинок.

Ну иногда как то это не смотрится, да и место занимает.У меня была та же проблема.Но я ее решил быстро, нет не плагином.

 

красивое обтекание картинки текстом

Кстати, плагина я никакого не нашел.Да и он не нужен, можно обойтись и кодом.

И в сегодняшней статье, я вам расскажу как сделать обтекание рисунка или картинки текстом.
В шаблонах для WordPress, обтекание отсутствует и при вставке изображения в тело поста получается вот-так:

плохой кадр

Смотрится не красиво, значит будем облагораживать.
Заходим в КОНСОЛЬ АДМИНА и как показано на картинке стрелками, нажимаем на ВНЕШНИЙ ВИД и заходим в РЕДАКТОР

редактирование

Справа в столбце находим файл ТАБЛИЦА СТИЛЕЙ(stile.css)
Заходим и опускаемся в самый низ файла стилей и в самом конце вставляем кусочек вот этого кода:

И обновляем файл.

Теперь когда вы вставляете картинку в текст, вам нужно открыть HTML-редактор в WordPress и добавить вот это код:

<div id="picture-wrap">Код Вашей картинки</div>

После сохранения ваша статья с картинкой будут выглядеть вот-так:

хороший кадр

Также можно сделать обтекание фотографии и видео.
Есть еще разные способы.Но на мой взгляд, я вам показал самый легкий способ.

Это интересно:  Похожие статьи с помощью плагина WordPress Related Posts

Будут вопросы, пишите в форме комментариев.
Удачи.

С Уважением, Игорь Александрович

21 комментарий

  1. Анастасия

    Спасибо большое за статью,я как раз искала на подобие.

    • Игорь

      Здравствуйте Анастасия.Я очень рад что вам помог.

    • Вера

      Здорово же, когда блогеры ищут полезные статьи и находят их именно на Вашем блоге7

  2. роман

    Спасибо Игорь за подробную подсказку.У меня все получилось.

  3. Елена

    Спасибо за статью.Неделю не получалось,сделать обтекание.А вчера получилось,оказывается код не вписывала.Еще раз спасибо.

  4. Игорь

    Рад был помочь.

  5. Андрей Косолапов

    Вау! Игорь, а я вот как раз с этим и не дружу. Вернее вроде как разбираюсь, но пока слабо. Так что как говорят, спасибо за науку. Будем посмотреть, может  пригодится.cool

    • Игорь

      Ну я думаю быстро разберешся.

    • Вера

      Сами блогеры, общаясть в комментариях, учатся друг у друга полезным умениям.

  6. Anna

    Игорь, здравствуйте! Я так давно ищу ответ на этот вопрос…Кто-то писал, что нужно вставить какие-то слова перед текстом и всё будет нормально, но я уже забыла, какие это слова…Теперь беру вашу статью в закладки и постараюсь всё сделать так, как вы пишете…Мне очень нравится, когда текст обтекает картинку и нет пустого места…Спасибо вам огромное за то, что поделились своими знаниями…С уважением, Анна.

    https://syzran.diezel76.ru/catalog/for/dvigateli-na-kombayny/ Двигатели на Комбайны в Сызрани

    • Игорь

      Чему сам учусь,тем и делюсь.

      Сам в свое время у других научился.

    • Вера

      Очень важно, чтобы на блоге всё было красиво и аккуратно. И обтекание картинки статьёй тоже немаловажно.

  7. Anna

    А я вот теперь пользуюсь ещё и таким методом… На самом деле нет ничего сложного. Достаточно вставить вот этот style="border: 10px solid white; margin: 10px;" небольшой код в нужное место. Для этого идем в редактор нашей статьи, далее нажимаем на кнопку «Текст» и находим в коде нашу картинку. Сделать это не сложно. Код вставляем сразу после номера картинки и перед тегом src=" И всё картинка будет стоять красиво…С уважением, Анна.

    • Игорь

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

      Молодец!!!! В правильном направлении идете.

    • Вера

      Если уж по ходу работы на блоге, все блогеры освиваются и начинают давать советы другим, почекму бы не попробовать? Хороший пример вдохновляет!04

  8. Ольга

    спасибо за дельные советы,даже неумеющий с помощью таких подсказок быстро освоится.

    • Вера

      Именно так, обучаясь полезному то на одном, то на другом блоге, можно и свой доводить до совершенства. Это нормальный путь.

      • Игорь

        Вера, совершенно верно говорите.

  9. Светлана

    Ой и всего то. Так все просто сделать.

    Спасибо за информацию

    • Вера

      Если статья толковая и всё понятно раписано, то уже использовать информацию — проще простого.

      • Светлана

        Да я это уже поняла.

        А здесь все разжевали и в рот положили