Как изменить фон сайта в wordpress шаблоне

Как изменить фон сайта wordpress на желаемый вами, вы узнаете из этого урока.Можно поставить любое изображение на фон, или же просто сплошной фоновый цвет. Ну и конечно же градиент. Это к примеру от светлого к темному, градиент может идти сверху вниз или с центра и до краев.Еще фон сайта можно сделать неподвижным при прокрутке сайта.Также в этой статье, поделюсь с вами полезные сервисами, с помощью которых вы сможете подобрать фон для сайта, и он будет максимально гармонировать с остальными цветами сайта.

Как изменить фон сайта wordpress

Вот небольшая навигация по статьи.

Какой выбрать фон для сайта

1. Не ставьте резких цветов, которые бы отвлекали на себя больше внимания чем основной контент блога. Пусть это будет легкий цвет для глаз.2. Не останавливайтесь на одном варианте, если сомневаетесь подойдет этот или нет, лучше проверьте как смотрится на сайте, это будет намного быстрее. И еще, оставляйте старый вариант, не закрывая вкладку чтобы могли сравнить.5. Следите за размером изображения, которое ставите на фон сайта. Желательно ставить изображение не больше чем 250 kb. На ваш блог будут заходить люди с мобильного, а также те, у кого слабый интернет.Придется долго ждать, если фон сайта будет весить несколько мегабайт. А обычно люди не ждут, если сайт грузится медленно, это приведет к большому количеству отказов.

Изображение на фоне сайта

Для установки изображения на фон сайта не требуется много времени.Заходим в панель управления нашим блогом, затем выберите Внешний вид, далее выберите Фон

Как изменить фон сайта wordpress

Откроется окно, в котором сможете Выбрать изображение и загрузить его в качестве фонового.

загрузить изображение

После загрузки изображение, появится вот такое меню настроек.

меню настроек фона

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

Цветовой фон сайта — сплошной цвет на фоне

Чтобы поставить какой-то цвет на фон сайта, достаточно зайти в панель настроек вашего шаблона и выбрать пункт Цвета

цвета

Тут вы можете настроить основные цвета всего сайта, а тот, который отвечает за фон, называется Цвет фона

выбрать цвет фона

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

Градиент на фоне сайта

Установить градиент на фоне сайта очень просто. Если кто не знает что это, то градиент, это плавный переход с одного цвета в другой.Вот примеры градиента.

градиент на фоне

Чтобы установить какой-то градиент, прежде всего нужно создать его в онлайновом сервисе предназначенном для этого.А затем нужно скопировать код из сервиса, и вставить его на нашем сайте. Давайте посмотрим как это делается.Заходим на один из таких сервисов, вот к примеру http://www.cssmatic.com/Вот так выглядит сайт на данный момент.

Выберите первый пункт Gradient Generator, откроется вот такое окно.

Gradient Generator

Тут вы можете, выбрать нужный вам цвет и указать в каком направлении он будет изменяться. Эти инструменты я обвел зеленым прямоугольником по вертикали.Когда выберите тот цвет, который хотите установить на свой сайт, то нажмите кнопку Copy text, ее пометил на скрине выше зеленым прямоугольником.Все, теперь код у нас есть, идем в настройки нашего шаблона и выберем пункт Дополнительные стили, он находится в самом низу настроек.

дополнительные стили

Нажимаем на него и видим вот такое окно.

окно для ввода стилей

То что тут написано удалять не нужно, возможно у вас тут будет уже какой-то код, также не удаляйте его.После закрывающего слеш со зведкой */ нужно сначала написать немного кода. Вот что пишем.body {}

body

body — это тело сайта. Написав body, а затем фигурные скобки, это означает что мы обращаемся к телу сайта, то-есть всему что содержится на нашем сайте.Теперь что мы напишем между этими скобками, будет применяться к нашему блогу. Более подробно о фоне в css, можете почитать тут.Между фигурными скобками пишем тот код, который хотим применить к body.И так, давайте применим фон для нашего сайта, вставив код, который мы скопировали с сайта где генерировали фон.Вот что получилось у меня.

заполняем стили градиента

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

сохранить и опубликовать

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

Полезные сервисы

Для выбора и создания фонового изображения, которые помогут подобрать классный фон для сайта.Подобрать цвета, которые гармонируют друг с другом.Генератор градиента для фона, и еще три интересных функции сервиса.На этом все, теперь вы знаете как изменить фон сайта wordpress, надеюсь вы подобрали красивый цветной фон, который сочетается с общим дизайном вашего блога.Жду вас в следующем уроке, а к этому оставляйте ваши комментарии, если есть какие-то вопросы, пишите.Желаю вам всего доброго, и удачи в вашей работе, с уважением к вам Василий Цубера!

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

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