Оформление текста в рамку. Рамки для wordpress



Оформление текста в рамку

Здравствуйте дорогие друзья! Сегодня мы займёмся таким делом, как оформление текста в рамку.

Рамки для wordpress блога обладают волшебными свойствами для наших посетителей, они притягивают, завораживают, а иногда просто кричат — эй, не проходи мимо — обрати на меня внимание!

Волей или неволей ты переводишь свой взгляд на текст, который заключён в цветную «обёртку»...
Мне, например, очень часто встречается текст заключённый в яркую призывающую или даже манящую рамку — не пропусти, сегодня колоссальная скидка на супер-пупер мега классный видеокурс «Как превратить бабушкины панталоны в шикарное вечернее платье»...

Я не женщина и бабушкины трофеи из которых можно что либо сделать меня не интересуют. Тогда почему я всё это читаю? Да потому, что текст в красивой рамке выделяется от основной массы  — это, как свет в конце туннеля... Просто притягивает и всё тут! Ладно, с платьем может я чуток переборщил :). Хотя...
Друзья, правда, это привлекает внимание — кто со мной согласен поднимите руку. Это как магнит для глаз!

Делаем вывод: наличие на блоге красивой рамки — это гарантия привлечения внимания!
В одной из своих статей я рассказывал о плагине WP-Note, который заключает текст в рамку — всё происходит довольно простенько, ознакомиться можно здесь:
Рамки для оформления текста
Сегодня мы рассмотрим другой вариант и мне он нравится больше, так как здесь есть гибкие настройки по созданию индивидуальных рамок.

Оформление текста в рамку с помощью DropShadow

C помощью этого плагина, Вы создадите свои собственные, красивые рамки для wordpress блога. Более того, можно создать «обёртку» для Вашего текста именно под дизайн блога...

Здесь можно наложить тени, задавать по отдельности цвет фона заливки рамки и её окантовки, отгибать края рамки... Теперь, если не против, давайте рассмотрим всё по ближе.

Скачать и проверить плагин Drop Shadow Boxes можно через свою админку блога. Как это сделать написано здесь — «Установка плагинов WordPress». или скачать с wordpress.org
Скачали? Активируйте плагин. Над текстовым редактором появится кнопка (!), что уже само по себе удобно.

Рамки для блога

Итак, вставив свой текст в текстовый редактор — в месте, где хотите вывести рамку, кликните ЛКМ и нажмите на кнопку Add box.

рамки для wordpress блога

У вас откроется окошко с опциями (настройки). Ну, здесь есть где разгуляться!
1. Effect — этот пункт содержит выпадающее меню с визуальными эффектами — наложение тени, отгиб края...

2. height и width — высота и ширина рамки. Я обычно  ставлю всё на «auto» . Для вывода  рамки на всю ширину текстового поля...

3. Alignment — выравнивание. У меня стоит «center» — расположение рамки по центру, но может понадобиться, например, вставить рамку слева или справа от текста, тогда значения нужно поменять соответственно на left или right.

4. Background — внутренний фон заливки рамки. Изменяется путём нажатия ЛКМ на поле с кодом (#ffffff). Открывается обширная цветовая гамма, повторное нажатие на это же поле — закрывает меню выбора цвета.

5. Border — граница или окантовка (рамки). По умолчанию в выпадающем меню стоит  значение «pixels» — его не меняем. Здесь же можно расширить ширину границы рамки, (по умолчанию стоит 1) и задать ей цвет.

6. Rounded corners — закругляет края рамки; Inside shadow — внутреннее наложение тени; Outside shadow — внешнее...

7. Поле для ввода Вашего текста (то, что будет в рамке)...

8. Кнопки:
Refresh Preview — предварительный просмотр результата.
Insert Box — если предварительный просмотр Вас устраивает, тогда можно смело жать. Текст с кодом вывода готовой рамки будет вставлен в редактор.
Cancel — отмена.

9. Поле Preview. Задавая эффекты из выпадающего меню, или играя с выбором цвета рамки и т.д. — нажимайте всегда кнопку «Refresh Preview». В этом поле будет показан результат Ваших стараний и только тогда, когда Вы добьётесь желаемого результата — смело жмите «Insert Box».

Я на момент тестирования этого плагина «выпал» из окружающего меня мира — увлёкся подбором цвета :) ... Сделал выписки с кодами определённых оттенков, хотя знаете, можно сильно и не заморачиваться,  оставить предложенный вариант по умолчанию. Он весьма неплох. На этом пожалуй всё... По нашей теме: «Оформление текста в рамку. Рамки для wordpress блога» могу сказать следующее — это не последняя статья по выводу рамок на wordpress блоге. Будут и другие! Подписавшись по e-mail Вы не пропустите ложку вкусной информации.
До скорого! :)



Обратите внимание на следующие статьи...

49 Комментарии к статье “Оформление текста в рамку. Рамки для wordpress
  1. Как ни крути, а красиво оформленный текст всегда привлекает внимание читателей. Андрей, для меня информация нужная, беру на вооружение! ➡

  2. Денис привет! Когда блог, ну или сайт себе заведёшь? Я тоже хочу комменты тебе писать :) :)

  3. Полезная информация! Всегда, даже если читать статью полностью не хочется, текст в рамке обязательно прочтёшь, а в результате и саму статью начинаешь читать.

  4. Здравствуйте Павел! Верно подмечено — рамка заставит весь текст прочитать 😀

  5. Привет Андрей! Если делать-делать рамки...а потом через какое-то время отключить или удалить этот плагин, они останутся? Если останутся то...очень хороший плагин 😉

  6. Приветствую Валерий! Если отключить или удалить — рамки не будут выводиться. По аналогии — плагины, которые выводят код (html и пр.) в тело статьи при отключении которых, так же теряется порядок...

    Плагин постоянно обновляется, соответственно подходит под последние версии WordPress. Если со своими функциями справляется отлично, тогда зачем его удалять!?

  7. Ха-ха-ха про бабушкины панталоны! Всё верно!

    Мы ж в конфетке покупаем фантик,а потом уже пробуем содержимое на вкус!

    Так и с рамочками: выделенный текст бросается в глаза в первую очередь — 💡 буду пробовать! Спасибо за идею.

  8. Татьяна Зорина, пробуйте.

    Та, ещё и не такое можно увидеть... :)

  9. Здорово! Я тоже из Крыма. Плагин — очень кстати. Как раз искала как бы взять текст в рамочку. Спасибо. Но когда вы успеваете? Еще и строительство. Просто умница. Отправила ссылку на ваш сайт своему сыну. он, кстати, тоже автомобильный заканчивает в Севастополе. Не знает куда податься, чтобы не работать на «дядю».

  10. Приветствую Вас Евгения!

    Да, строительная сфера отнимает уйму времени, что очень мешает ведению и развитию блога, а про семью, так вообще молчу. Но всё же, цель поставлена и не выполнить её я просто не могу! Сыну — привет, найдёт себя в любимом ему деле.

    Спасибо и удачи Вам!

  11. Спасибо за интересный материал,плагин действительно замечательный,подскажите а можно что то похожее придать изображениям с помощью плагина?,то есть наложить тень,примерный эффект как и у рамок,видел в сети очень симпатично.

  12. Максим, а зачем использовать плагин если можно в фотошопе сделать шаблон с тенью, далее вставляйте в него любую картинку или фотографию.

  13. Ну с плагином думаю выйдет всё быстрее,было бы удобно также как и с рамками,настроил фото и всё.

  14. Обилие плагинов на блоге ведёт к замедлению Вашего ресурса. Если используется определённый формат изображений (например, как у меня в самом верху) тогда всё просто, переношу готовое изображение на шаблон и вуаля...:)

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

    Идёт!?

  15. Отличный плагин, установил и разобрался сразу. Блог преобразился. 😀

  16. Иван, согласен с Вами.

    Теперь мимо не пройдут и широко открыв рот, обязательно обратят внимание! Скажут — во блин!..:)

  17. Большое спасибо!! Я тоже у себя установила )) Симпатичненько получается... 💡

  18. Наталия, очень классненько и клёвенько! Пользуйтесь, но скоро будет ещё интересней — не пропустите :)

  19. Вчера интересный вариант попался на глаза мне... Протестирую, если понравится — поделюсь с аудиторией :)

  20. Андрей, очень кстати и полезно! Только не могу понять, как сделать, чтобы в рамке (общей) можно было вставлять еще рамки... При попытке вставить внутреннюю рамку, закрывающий ее тег закрывает и внешнюю рамку... Может быть, есть способ? Было бы интереснее! 😉

  21. Анна, честно говоря не задумывался о поиске такого решения. Собственно, а зачем нужна такая реализация, как рамка в рамке?

  22. Печаль =( кнопка more не может быть внутри рамки, снаружи выглядит ужасно, потому как получается много белого пространства под рамкой + в рамке нельзя делать текст отцентрованным

  23. Николай, видимо разработчики не предусмотрели такого варианта по использованию плагина, поэтому сделали так, как им этого хотелось... :)

  24. Хорошее решение для выделения текста, я кстати давно что то подобное искал, вот сегодня случайно у вас наткнулся. Спасибо огромное!!!

  25. День добрый. Почему-то плагин не желает делать рамку. Вставляет просто код. Выглядит вот так — prntscr.com/3c2d9c

    Не подскажете, что я не так делаю?

  26. Здравствуйте Екатерина! Вы всё делаете правильно, плагин не покажет рамку в текстовом редакторе, будет выводится лишь сам код...

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

    Всё очень просто :)

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

  28. По поводу «тормозов», или что может влиять на работоспособность так это — плагины, различные скрипты, отсутствие кеширующего плагина при хорошей посещаемости, медленный хостинг и т.д.

  29. отсутствие кеширующего плагина, что это за плагин?

  30. Олег, плагин создаёт образ посещённых страниц... То есть, Человек зашёл на страницу, плагин зафиксировал вход, создал образ. Другой пользователь заходит на эту же страницу, ему плагин выдаёт уже образ.

    Принцип работы: все последующие входы на кешируемые страницы осуществляются без загрузки страниц, что не создаёт нагрузки на блог/сайт.

    Я пользуюсь Hyper Cache.

  31. Андрей, спасибо за статью, очень рада, что она мне попалась. Одна проблема, не получается разместить в блоке маркированный список. Все пишется в одну строку. Это возможно? Если да, подскажите, пожалуйста как это сделать. Спасибо!

  32. Наташа, с маркированными списками не экспериментировал, но думаю, что это возможно осуществить. Попробуйте так: создайте через плагин рамку с каким-нибудь словом, жмём «Insert Box». В редакторе будет создан код самой рамки, удаляем вписанное словечко, а вместо него, прям туда пробуйте вставить марк-список...

  33. Хороший плагин! Спасибо! Сейчас поставлю и буду «играться».

  34. Плагин возьму на заметку, потому что действительно просто и красиво. Но пока поищу, как обойтись кодами. Итак слишком много плагинов наставила)).

  35. Хотелось бы такой плагин для дизайна страницы, но как я поняла рамка для оформления текста предназначена только в записи, хотелось бы еще в сайд баре, скажите пожалуйста это возможно?

  36. Вера, возможно будет работать и в сайдбаре. В текстовом редакторе зададим нужные нам цвета, наберём текст и скопируем получившийся код...

    Далее, идём — «Внешний вид» — «Виджеты» — перетаскиваем поле «Текст» в боковую колонку, копируем туда наш готовый код. Только размер рамки нужно предварительно делать под ширину сайдбара, вот вроде и всё :)

  37. Спасибо за ответ, попробую, хотя я пробовала изменить текст Worde по цвету и измененному шрифту, копировала, помещала в поле Текст, но он остался без изменений.

  38. Вера, Вы копировали и вставляли сам текст, а не код, вот поэтому и не получилось с Вордом...

  39. Спасибо за плагин. При добавлении записей он работает, но в сайдбаре, если делать как Вы рекомендуете, выводится все как текст — и теги и содержание. М.б. я туплю или эта рекомендация на проверялась.

  40. Николай, я действительно делал предположения, так как данный плагин не тестировал в сайдбаре (за ненадобностью)... Не ставится тень и некоторые другие эффекты, а так, в принципе всё показывает. Сейчас протестил — вот

  41. Почему в этой рамке всё в кучу?

    1.

    2.

    3.

    не написать идёт вот так:

    1...2...3...

    ?

  42. Алексей, помню, было и у меня так. Не мог вывести список в рамке в таком же порядке. Это к разработчикам нужно обращаться.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *