Фон – это изображение, на котором показываются все элементы сайта. Либо он может быть не картинкой, а сплошным или градиентный цветом, .
Большинство шаблонов не поддерживают установку и смену фона. Однако не все темы способны это делать, особенно если речь идёт о бесплатных экземплярах. Но даже если у вас на сайте установлен такой шаблон, на котором можно в настройках изменить фон WordPress, это будет весьма скудной операцией, так как изменения примутся сразу на всём сайте. Нет возможности в обычных шаблонах поменять фон только у некоторых записей, рубрик или страниц.
В данной статье мы вам расскажем о двух простых плагинах, которые решают эту проблему за пару кликов.
Background Per Page
Это самый простой плагин, который позволяет проводить операции с фоном WordPress. После его установки и активации не появится никаких настроек и дополнительных пунктов панели управления сайтом. Только на странице каждой записи и страницы будет новая опция, которая позволит добавить индивидуальную фоновую картинку.
К картине, выбранной для фона WordPress, можно применить несколько эффектов:
- Выбрать повтор – горизонтальный или вертикальный;
- Сделать картинку, прокручиваемой с сайтом или фиксированной, так называемый ;
- Выбрать ориентацию фона WordPress – справа, слева, в центре;
- Выбрать вместо изображений обычную цветовую заливку.
Плагин бесплатный. Кроме того, каждый загруженный фон WordPress может быть отредактирован во встроенном редакторе этого дополнения.
Full Screen Background Images Pro
А этот плагин более сложен в работе, позволяет проводить больше операции с фоном WordPress. Он платный и стоит 13$. После установки активации плагина в панели администратора будет его пункт меню. В нём хранится галерея фонов, сюда можно в любое время добавлять, удалять и редактировать изображения.
Кроме этого, можно установить фон WordPress для любой записи или страницы, определяя их по идентификатору ID, для главной страницы, любой рубрики, архивных страниц и даже страницы 404.
Широкие возможности данного плагина дополняются и той функцией, что было в первом – на странице добавления каждой страницы и записи добавляют опции для установки того или иного фонового изображения, с редактором и всякими эффектами.
В общем, отличный инструмент, чтобы сделать фон WordPress. И платный, и бесплатный плагин подойдут для решения многих задач, с этим связанных.
Сегодня в своей практике столкнулся с тем, что для фона меню необходимо было поставить прозрачность . Был вариант конечно сделать это с помощью картинки.png, но все же решил покапать и сделать полупрозрачный фон с помощью CSS . Оказалось это совсем несложным:)
В html-коде прописываем "класс", для которого необходимо установить определенную прозрачность:
FON { background: rgba(200, 54, 54, 0.5); }
тем самым я указал цвет фона, выставив значения для трех основных цветов (красный - r , зеленый - g , синий - b ), и прозрачность фона на 50% (alpha - a ) одним свойством. Значения для цвета указывается в диапазоне от 0 до 255, а для прозрачности диапазон будет от 0.0 до 1.0
Свойство rgba применимо также для всех других элементов. Но если станет необходимым установить прозрачность для всех элементов находящихся в данном классе, то можно воспользоваться свойством opacity , что устанавливает прозрачность для целого элемента или всей страницы. тогда код будет выглядеть так:
FON { opacity: 0.5; }
В таком случае прозрачными станут все элементы, находящиеся в данном классе, в том числе картинки и текст будут прозрачными .
Подписывайтесь и получайте полезные статьи на почту!
Другие крутые статьи на нашем блоге
- Знаю, что на практике часто встречается такая ситуация, что владелец сайта "переделывает" или создает сайт "с нуля" по несколько раз, и в итоге не получает нужного результата. При этом следует…
- Партнерский материал! Благодаря постоянному сосредоточению поисковых систем непосредственно на самом пользователе интернета и показателям последних обновлений алгоритмов Google, владельцам сайтов стало еще более важно обратить внимание на скорость загрузки их…
- Смотри, если у тебя стоит задача "разработать сайт под ключ" - переходи по этой ссылке и делегируй нам задачу. Если нужен пример технического задания - смотри статью "ТЗ на создание…
- Партнерский материал! - Хочешь опубликовать свою статью? Многим владельцам сайтов, SEO-оптимизация кажется очень сложной задачей. На самом деле, это не совсем так. Привлечение к продвижению высококвалифицированных специалистов может быть очень…
Посмотрите теперь на Ваш блог критическим взглядом. Скоро на нем многое будет по-другому, потому что в принципе, Вы на своем можете изменить все, что захотите. Конечно, только нужно знать, как это сделать.
В административной панели
Зайдите в административную панель во Внешний вид — Редактор . Вы уже знаете, за что отвечают многие из шаблонов, но теперь Вас будут интересовать не шаблоны, а то, что находится под ними: Стили . Точнее, один раздел из них, который называется Список стилей .
Соответствует этому списку файл style.css
. Этот файл находится на блоге в папке активной темы. Вы его всегда там сможете найти.
В браузере
Просто откройте в браузере свой . У большинства браузеров есть хорошая функция: Вы можете нажать на любую область на блоге правой клавишей мыши, и выбрать из списка операций Просмотр кода элемента . Внизу появляется окно, в котором Вы можете найти интересную информацию об элементе, на который Вы нажимали.
В этом окне слева
Вы увидите код страницы, и в этом коде будет выделена строка. соответствующая данному элементу. А справа
, в стилях, будут свойства этого элемента.
Размер шрифта, отступы, цвет текста и фона, выравнивание: все это находится в стилях , и все это можно изменить.
Меняем цвет фона
На блоге WordPress лично мне не нравится, когда фон статей и фон всего остального разный. В этом случае статьи в ленте идут отдельными блоками и, на мой взгляд, не очень хорошо смотрятся. Мы сделаем фон везде такой же, какой сейчас фон статьи. Нажимаем на фон, который мы хотим изменить, правой клавишей мыши, выбираем Просмотр кода элемента. Нас в той строке, которая будет выделена в результате справа, будет интересовать название атрибута class . Стили прописываются именно по классам.
В данном случае class = art-layout-cell Это означает, что в стилях, в файле style.css , тоже будет такой класс, и в нем уже будут прописаны свойства. Только выглядеть это будет по-другому, а именно:
.art-layout-cell
, а дальше в фигурных скобках будут прописаны свойства этого класса.
Находим класс с таким название в файле style.css . Воспользуемся функцией поиска Ctrl+F , и пропишем в окошке поиска название: art-layout-cell . Мы сразу увидим фон:
background-color: Transparent . Transparent означает прозрачный .
А теперь, какой же все-таки цвет нам нужен? Где взять цвет фона наших статей? На этот раз мы воспользуемся программой FSCapture
. В ней. помимо всего прочего, среди набора инструментов можно найти пипетку
, которая определяет цвет любого участка на экране Вашего монитора. Очень полезный инструмент!
Открываете программу FSCapture, заходите в Настройки
, и выбираете инструмент Экранная пипетка
. Нажимаете на нужную область на экране. В окошке Hex
Вы увидите код нужного Вам цвета: D2E8EE
Его Вы вставляете в стиль art-layout-cell вместо слова Transparent .
Смотрите, что получилось. Еще остается много работы, но начало уже положено.
Видео о том. как редактировать фон на блоге WordPress
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
