Как самостоятельно изменить дизайн сайта?

Привет, дорогие читатели блога! Сегодня я расскажу как изменить дизайн блога или дизайн сайта. В современном сайтостроении смена дизайна сайта не представляет трудности, и с ней справиться даже пользователь, не знающий HTML и CSS, ведь благодаря движку сайта, дизайн можно менять и в визуальном редакторе.

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

Конечно в зависимости от того на каком движке у вас сайт, смена дизайна может немного отличаться но в целом все идентично. В статье я расскажу:

Зачем нужно менять дизайн сайта или блога?

Большинство сайтов и блогов в сети интернет изначально строятся на бесплатных шаблонах, и уже впоследствии меняют дизайн этой темы. Если у вас стандартная тема или шаблон (это одно и то же) и вы не меняли ее дизайн,то скорее всего сайтов с таким же дизайном как у вас несколько сотен или тысяч. Значит ваш сайт не уникален, его вряд ли запомнят пользователи, случайно попавшие на ваш блог или сайт.

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

Из каких элементов состоят web сайты?

Несмотря на то, что в сети интернет существует миллионы сайтов, структура всех веб сайтов схожа:

• Header – шапка сайта;
• Footer – подвал;
• Sidebar – сайдбар или боковая колонка;
• Body – тело страницы;

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

Как быстро изменить дизайн сайта на WordPress?

Так как я использую движок WordPress, начну традиционно с него.

Если вы хотите полностью уникальный дизайн блога на WordPress, то лучше заказать его у фрилансеров. Но это удовольствие не из дешевых, поэтому практически все блоггеры изначально создают блог на бесплатном шаблоне.

Скачать такой шаблон можно с любого сайта, достаточно просто забить в поиске «темы вордпресс».

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

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

Чтобы добавить новую тему через браузер, выберете в меню «Внешний вид», «Темы», «Добавить новую».

Обращу ваше внимание, что лучше устанавливать адаптивную тему, чтобы ваш блог было удобно просматривать на мобильных телефонах и планшетах.

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

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

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

 

Если в разделе «Внешний вид» таковых настроек нет, возможно настройки дизайна темы вынесены отдельно. Проверьте так ли это. Для этого зайдите в раздел «Внешний вид», «Настройка темы».

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

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

Весь дизайн блога формируется в одном файле style.css

Как изменить дизайн шапки блога или сайта?

В файле style.css найдите раздел «HEADER». В этом разделе можно изменить дизайн шапки сайта, изменить цвет и размер шрифта названия сайта и его описания, а так же при необходимости изменить размер шапки сайта.

Для того, чтобы изменить дизайн шапки сайта, будем менять саму картинку, для этого в разделе «HEADER» ишем фоновое изображение, обычно оно находиться в классе #site-heading, #header-logo или что-то вроде этого и следует за значением background.

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

Как изменить дизайн сайдбара и элементов в нем?

В визуальном редакторе дизайн сайдбара изменить нельзя. Можно лишь менять местами блоки. Для того, чтобы изменить дизайн сайдбара сайта, снова заходим в файл Style.css и ищем раздел «SIDEBAR».

Аналогично изменению шапки сайта, меняем и сайдбар.

• Фоновое изображение – background;
• Ширина сайдбара – width;
• Рамка сайдбара – border;

Изменить подвал сайта (footer)

Чтобы изменить подвал сайта, нужно в файле style.css найти раздел «FOOTER».

Обращу ваше внимание, что в качестве фона сайдбара может быть фоновая картинка, цвет HTML или фон подвала может вовсе отсутствовать, а вместо него выступать фон сайта.

Так же как в предыдущем случае ищем фоновое изображение background и меняем на свое, затем меняем цвет и размер шрифта и ссылок.

• font-size – размер шрифта;
• color – цвет шрифта;
• text-align – расположение текста;

Как изменить дизайн страниц с текстом?

Очень часто бывает, что скачав бесплатный шаблон, web мастер недоволен не только дизайном сайта, но и цветом шрифта, а так же его размером.

Для того чтобы изменить шрифт, в файле style.css ищем значение bodyи меняем :

• Размер шрифта и сам шрифт – font;
• Цвет шрифта – color;
• Фон страницы – background;

На скриншоте видно, что для дизайна страницы сайта заданы значения:

• Шрифт – Arial, Verdana, Geneva;
• Размер шрифта – 14 пикселей;
• Отступ между строками – 1.6;
• Цвет шрифта – черный;
• Фон страницы – белый;

После того, как вы полностью изменили дизайн сайта, можете почистить кэш браузера и любоваться своим произведением 🙂