Как изменить дизайн блога или как изменить дизайн сайта
Want create site? Find Free WordPress Themes and plugins.

Как изменить дизайн сайта или как изменить дизайн блога — в сегодняшней статье мы с Вами дорогой (подписчик) поменяем дизайн своего блога или дизайн сайта.

+

ЗАЧЕМ НУЖНО МЕНЯТЬ ДИЗАЙН  САЙТА

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

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

На поисковых роботов смена дизайна Вашего блога никак не влияет, для них главное полезен ли контент на сайте, который Вы пишете.

ПОСМОТРИТЕ ВИДЕО (КАК ИЗМЕНИТЬ ДИЗАЙН САЙТА)

Перед тем, как нам начать редактировать дизайн блога, рекомендую скачать архив с программами, которые будут для нас необходимы, [urlspan]нажав здесь.[/urlspan]

Сейчас наш сайт выглядит примерно так

smena_design_2

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

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

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

КАК УСТАНОВИТЬ ТЕМУ НА WORDPRESS ДЛЯ СМЕНЫ ДИЗАЙНА БЛОГА

Начнем с установки темы на wordpres, wordpress тему мы будем устанавливать RoboGamse. После того как скачали тему зайдите в админ панель Вашего блога по адресу (имя mysite.com поменяйте на свое) «внешний вид |темы»:

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

Установить темы | загрузить и выберете скачанную тему wordpress на Вашем компьютере:

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

После чего жмите установить | активировать тему wordpress! Теперь ваш блог будет выглядеть вот так как на картинке:

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

Но нам такой дизайн блога не подходит для бизнеса и он совсем не уникален, поэтому сейчас изменим дизайн блога до неузнаваемости и сделаем его чертовски красивым!

Изменяем дизайн шаблона, темы wordpress

Первым делом сделаем кликабельными социальные кнопки, которые находятся в шапке блога:

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

Для этого зайдите в админ панель Вашего блога по адресу , внешний вид | RoboGamse настройки темы | социальные настройки:

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

Здесь нам нужно поставить свои ссылки на наши социальные страницы, зарегистрируйтесь в каждом из сервисов:  Facebook, Twitter, GooglePlus,  LinkedIn, YouTube и eMail. Эти кнопки помогут нам для продвижения блога:

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

Теперь в эти поля нужно вставить адреса Ваших социальных сетей. Если у Вас еще нет социальных страниц, то создайте их. Вот по этим ссылкам: Вконтакте, facebook, twitter, odnoklassniki, linkedin, plus.google и youtube. Рассказывать о регистрации я не буду, так как это уже будет отдельных статья (подписывайтесь на обновления). Думаю, Вы разберетесь сами в регистрации настройки социальных страниц, ну а если нет, то google Вам в помощь.

И так продолжим изменение дизайна блога! После того как Вы вставили свои адреса социальных сетей, нажмите на кнопку сохранить изменения:

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

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

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

Как сделать открытие страниц в новом окне

Сейчас Вам нужен FTP клиент, например FileZila. Запускайте FTP и входите в корень Вашего сайта:

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

Далее заходите в папку wp-content | themse и в папку с нашей темой – RobaGamse:

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

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

Вернитесь на сайт и посмотрите код кнопок, который мы найдем header.php и сделаем кое какие изменения. Для этого нажмите правой кнопкой мыши на социальную кнопку Вашего блога или сайта и выберите «просмотр кода элемента»:

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

Скопируйте класс кнопки и откройте файл header.php блога. Теперь нужно найти кнопки социальных сетей для этого скопированный класс нужно вставить в поиск и нажать кнопку искать далее:

Страница опустится в низ, и откроет перед Вами код социальных кнопок, код кнопок выглядит вот так:

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

В него нам нужно вставить HTML атрибут «target=”_blank”», что означает открыть в новом окне.

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

В эту же строчку надо вставить HTML атрибут «rel=”nofollow”», что запретит поисковым роботом индексировать наши кнопки. Это необходимо, чтобы с Вашего блога или сайта не было зафиксировано много исходящих ссылок.

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

После проделанных действий сохраните документ и обновите страницу блога. Теперь кнопки социальных сетей открываются в новом окне!

ДАЛЕЕ ИЗМЕНИМ ШАПКУ БЛОГА, УДАЛИМ ЛИШНИЕ КАРТИНКИ И СМЕНИМ ЦВЕТ ПОДВАЛА САЙТА В ФОТОШОПЕ

Дальше нам понадобится программа Photoshop, если Вы не умеете пользоваться фотошопом, то ничего страшного я все буду показывать на примере.

Теперь с папки блога перенесите все картинки на компьютер! Все картинки блога располагаются в папке images:

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

Первое что нам нужно сделать, это удалить левые изображение с блога. Зайдите в скопированную папку images с нашего сервера и удалите там картинку «wrapper-bg2» и «wrapper-bg». Теперь запустите программу фотошоп и перетащите в нее картинку «wrapper»:

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

Инструментом «прямоугольная область» выделите всю область картинки «wrapper» и зажмите сочетание клавиш CTRL+C, после этого – файл | новый! OK. Опять нажмите инструмент «прямоугольная область» и выделите красную панель:

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

После чего нажмите сочетание клавиш CTRL+X b и вставьте на пустой области нажмите CTRL+V:

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

Далее нажмите создать новый слой:

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

И выберите инструмент «заливка», залейте нашу картинку и перетащите красную панель в самый верх слоев!

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

Теперь сделаем градиент цвета для панели и для залитого белого пространства. Станьте на слой панели и нажмите «добавить стиль слоя», создание градиента:

Как изменить дизайн блога или как изменить дизайн сайта_22Как изменить дизайн блога или как изменить дизайн сайта_23

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

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

Для залитой области повторите действия с небольшой поправкой – поставьте галочку «инверсия»:

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

Теперь сохраняем то, что у нас получилось в папку с нашей темой «images» под именем — «wrapper», для этого нажмите «файл | сохранить для web-устройств в формате JPG качество ставьте средние и жмите кнопку сохранить.

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

Ищите папку «images» на компьютере и сохраняйте картинку под именем «wrapper», компьютер спросит, заметь существующую, нажмите да заменить.

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

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

Теперь нам нужно изменить цвет панелей в сайт-баре нашего блога. Цветная, красная картинка  называется — «h2bg» ее нам и нужно открыть в фотошопе:

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

Наложим градиент такой же, как и в шапке…

И сохраним картинку в скопированную папку на компьютере, нашего блоге, под именем «h2bg».

Настала очередь footera – подвала блога

Его мы изменим с помощью файла Style.css в папке с блогом. Этот файл отвечает за все стили блога. Запускайте FTP клиент и заходите в wp-content | themse | RoboGamse | style.css. В поиске впишите footer-outer:  поиск нашел такое:

#footer-outer {

background: none repeat scroll 0 0 #222222;

margin: 0 auto;

width: 970px;

}

В строке background: none repeat scroll 0 0 #222222; нужно изменить цвет. Для этого скачайте программу ColorMania (здесь). И определим нужный нам цвет. В программе выберем такой цвет и нажмем copy:

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

Теперь поменяйте #222222 на #CEDB5A и сохраните.

Последний шаг

Папку «images» на нашем компьютере, нужно закинуть обратно на сервер. Заходите в wp-content | themse | RoboGamse и закачивайте с компьютера на блог папку «images»:

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

Ну а теперь почистим кэш браузере, а то наши изменения можем не увидеть. Для этого в Вашем Браузере зажмите сочетание клавиш – CTRL+Shift+Delet, этим мы все почистим!

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

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

На этом у меня все! Теперь Вы знаете, как изменить дизайн сайта или блога. Если возникли вопросы, то пишите их в комментариях. Увидимся в следующей статье «правильный файл  .htaccess«!

Did you find apk for android? You can find new Free Android Games and apps.

С уважением, Алексей Кобзарев

Лучшие статьи

19 Комментариев к “Как изменить дизайн блога или как изменить дизайн сайта”

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