Home / Блоговедение / Как самостоятельно изменить дизайн сайта?

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

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

дизайн сайта

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

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

Зачем нужно менять дизайн сайта или блога?
Из каких элементов состоят web сайты?
Как быстро изменить дизайн сайта на WordPress?
Как изменить шапку блога или сайта?
Как изменить дизайн сайдбара и элементов в нем?
Изменить подвал сайта (footer).
Как изменить дизайн страниц с текстом?

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

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

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

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

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

структура сайтов

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

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

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

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

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

Возможно вас заинтересует:  Настройка граватар (Gravatar), или отображение аватара в комментариях на блоге.

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

После того, как выберете подходящий шаблон, нужно его скачать себе на компьютер в 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;
  • Цвет шрифта – черный;
  • Фон страницы – белый;

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

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

17 комментариев

  1. prorab:

    Андрей, вы думайте, что дизайн блога Борисова, это эталон? Он настолько популярен у блогеров, которые пишут о заработке, что как только видишь похожий шаблон, сразу думаешь»вот и этот подражает ему».
    Шаблон красивый, но он уже занят, нужно искать свой стиль.

    Ответить
    • Причем здесь вообще Борисов?

      Ответить
      • prorab:

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

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

  2. А мне нужно просто перейти в программу Artisteer , сделать новый шаблон и загрузить его на блог.

    Ответить
  3. Ну вот свой дизайн я делал в программе Artisteer, но только чуть в коде подправил как мне нужно и все.

    Ответить
    • Интересный дизайн, только что посмотрел. И есть что почитать, но это немного позже 🙂

      Ответить
  4. Мне нужно поменять фон и хотя тема поддерживает загрузку изображения, для меня большая проблема найти оное высокого качества. Думаю, пора осваивать фотошоп. А шапку не люблю, лучше как у Вас, совсем без нее.

    Ответить
    • А вот я все хочу шапку одеть, да все никак не определюсь что нарисовать на ней 🙂

      Ответить
  5. Баяс:

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

    Ответить
  6. С последним требованием Гугла, думаю, все хорошо знакомы. Забугорный поисковик потребовал оптимизировать сои сайты под мобильны устройства. Долго с этим тянула, но все-таки сменила шаблон на адаптивный. В последний раз при смене шаблона рухнула посещаемость (года 2 назад меняла). Сейчас тоже немного просела, надеюсь, восстановится. А вы оптимизировались для мобильников и планшетов?))

    Ответить
    • У меня адаптивный шаблон, но с гуглом проблема. Он не хочет его считать адаптивным, пока я запрещаю CSS темы в robots.txt

      Ответить
  7. Полезно было почитать. Я однажды столкнулась с проблемой медленной загрузки и падения посещаемости. Думала-думала и решила, что причина в шаблоне. Стала смотреть другие блоги и их темы и подобрала себе очень простую, резиновую. Помогло. Правда сейчас опять проблемы, но пока не знаю причины. Так что менять темы полезно.

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

    Ответить
    • Конечно, редактируя стопроцентной уникальности не добиться, но не у всех есть возможность заказывать дизайн за 20-30 т. р.

      Ответить
      • Я 20-30 Т. р. тоже не могу платить, но есть те, кто создают его за меньшую сумму. Конечно не на основе psd-макетов, но всё-таки уникальные. Мне только один раз для коммерческого сайта пришлось отвалить 20000 р, да и то в рассрочку по 2000 рублей в месяц.
        А в основном мне шаблон обходится в 1500 и больше (В зависимости от функционала). Правда я не знаю, насколько он уникален по коду, но на глаз, как мне сказали, уникальный.

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

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