Skip to content

 

Меняем дизайн сайта сами

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

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

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

Также мне хотелось попробовать свои силы и применить знания в кодировке HTML/CSS, CSS3. Собственно, только изменяя файл стилей мне удалось кардинально изменить внешний вид сайта, сохранив его структуру. И в PHP файлах изменить самую малость, типа h2 на h1 🙂

У меня стоит резиновая тема F2 и она мне очень нравится. Только фэйс мне хотелось подправить, чтобы отличаться от многочисленных братьев-близнецов 🙂 Правда, не всё получилось. Как ни пыталась, не смогла сделать активную вкладку меню, когда я нахожусь на какой-то странице, другим цветом. Т.е. при наведении на вкладку курсора, она становится оранжевой. А когда перехожу на эту страницу, вкладка остается синего цвета.

Ни скрипты, ни коды не помогли. Так как шаблон бесплатный, то его код не совсем валидный. Те скрипты, которые я пробовала установить, конфликтовали с кодировкой. Так что этот вопрос для меня так и остался открытым. Может, кто мне поможет разобраться с этой заковыкой? Исправлять весь код тоже не хочется 😉 Хотя, постепенно постараюсь все подшаманить.

Кому-то дизайн может показаться пестрым, или ярким, или ещё каким-то броским. Скажу честно, я люблю яркие тона. К тому же тематика сайта располагает к этой яркости. Ну не нравятся мне бледные тона современного дизайна 2.0 🙂 Где-то они, несомненно, оправданы. В бизнес темах это просто необходимо.

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

В этом плане мне понравились уроки Алексея Захаренко. Молодой талантливый веб-дизайнер, наверное, многие уже проходили его тренинги, учились по его курсам. Кстати, в ноябре Алексей набирает мастер-группу, в которой обучает не только создавать уникальные дизайны, но и как зарабатывать на своих умениях. Группы он всегда набирает ограниченные и очень много внимания уделяет каждому участнику. Поэтому, если кого интересует качественное обучение и стабильный заработок, скорей записывайтесь к нему на тренинг.

Все изменения проводились с помощью инструмента Firebug в браузере Мозилла. А в Гугл Хром и Опере просто с помощью правой кнопки и меню Просмотр кода элемента. То есть, в браузере я искала нужный элемент, и в файле style.css делала соответствующие изменения.

Изменения, в основном, сводились к замене цветов и размеров — отступов, высоты, ширины, шрифтов, обрамлений, линий и пр. Отличный справочник и помощник в этом деле HTML-учебник. Для определения цвета я установила расширение ColorZilla в Хроме и Мозилле.

С помощью сервиса генерирования кода для кнопок я сделала красивую градиентную кнопку для формы подписки. Там дается два кода — HTML и CSS. HTML я добавила в код формы, а CSS — в файл style.css. Потом подумала и привязала к css коду все остальные кнопки на сайте: кнопку поиска, комментариев. Теперь они все в одном стиле. Правда, пришлось отдельно поискать информацию, как прописывать градиент (переход от одного цвета к другому) для браузера IE.

Все файлы редактировала только через ФТП-клиент Файлзилла.

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

Вот и все мои помощники 🙂

К тому же уже давно пора делать все правильно, в том числе название сайта должно быть активным. Предыдущая шапка не позволила мне заголовок сделать в виде ссылки. А это плохо для сайта в смысле поискового трафика. Теперь все по правилам. Или, почти все 🙂

Если вы тоже хотите сделать свой уникальный шаблон, то не торопитесь менять его на новый. Если вам его не сделали по заказу, то значит, он есть ещё у кого-то. Попробуйте сами создать что-то свое. А если вы точно знаете, каким хотите видеть свой дизайн, а сами сделать не можете, обращайтесь. Я с удовольствием для вас поработаю. Мне такая работа очень нравится 🙂

Ну, а теперь для расслабления предлагаю видеоролик об одной странной любви. Крыска очень любит кыску 🙂

 

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

  1. Александра:

    Этот вариант очень понравился! Намного лучше предыдущего, появилась систематичность, порядок расположения элементов. Классный шаблон!

    • Ольга Абрамова:

      Спасибо, Александра за Вашу оценку. Мне очень важно мнение моих читателей.

  2. Елена:

    Поздравляю Вас, Ольга, с успешно завершенным проектом! Мне этот вариант дизайна больше нравится, «солиднее» и «энергичнее» смотрится, чем предыдущий. Обязательно воспользуюсь Вашими услугами, когда надумаю что-либо менять в своем шаблоне.

    • Ольга Абрамова:

      Елена, спасибо. Особенно за “солиднее” 🙂 Успехов Вам!

  3. Наталья:

    Поздравляю, Ольга! Этот вариант, действительно, смотрится гораздо солиднее .Хорошим советам достойное обрамление. Успехов вам и дальнейшего продвижения!

    • Ольга Абрамова:

      Наталья, спасибо. И Вам тоже большого плавания!

  4. Dana:

    Какой у вас прекрасный и полезный сайт, для новичков -особенно!

    • Ольга Абрамова:

      Дана, спасибо. Когда-то я была новичком и поэтому всё записывала. Сейчас сама часто возвращаюсь к записям 🙂

  5. Михаил:

    Оля, я тут повозился немного и методом тыка вот чего добился. У меня остаются кнопки и текст окрашенными теми цветами которые указаны в стилях (обведено красным) clip2net.com/s/2qOWf.
    На тестовом сайте можно посмотреть вот ссылка: sadvinia.ru
    Все кнопки активируются кроме Главной
    Посмотри, может пригодится.

    • Ольга Абрамова:

      Михаил, большое спасибо. Применила. По поводу главной, надо уроки Попова посмотреть, где-то у него есть решение этой проблемы.

  6. Галина:

    Ольга, вы умница!
    Дизайн отличный! Теперь знаю к кому обращаться в случае чего.
    Успехов вам! 🙂

    • Ольга Абрамова:

      Галина, большое спасибо. Если что, обращайтесь. А может и сами справитесь 🙂

  7. Олег:

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

    • Ольга Абрамова:

      Олег, спасибо, и я изменила ссылку. Если что, можете посмотреть 🙂

  8. Ирина:

    Ольга! Поздравляю с обновлением шаблона. Потрудились на славу! Сайт стал лучше, красочнее, энергичнее, удобнее для восприятия.
    А у меня сейчас проблемы на сайте. Некоторые странички в шапке сайта не открываются, кнопки ретвиттов работают только на главной в анонсах, а в записях нет. Почему такое? Не понимаю. И разобраться никак не могу. Может подскажите из-за чего это может быть?
    С весны возникают иногда проблемы с комментариями — исчезают. Восстанавливаю только откатом. Подозреваю, что это после обновления версии Вордпресс.

    • Ольга Абрамова:

      Ирина, большое спасибо за отзыв.
      Сложно так, заочно, говорить о причинах Ваших проблем. Даже инструменты не видят ссылки на Ваши проблемные страницы. Можно удалить эти страницы и заново создать. Может, как-то ссылки неправильно прописаны? Может код у темы неправильный.
      Так же и с кнопкой Твиттера. Если это плагин, то может он с темой конфликтует. Попробуйте отключить его и через какое-то время опять активировать.
      А если ещё и проблемы с комментариями, то может стоит задуматься о смене шаблона?…

    • Ирина:

      Шаблон работал хорошо до обновления версии Вордпресс. Техподдержка хостинга сказала, что это некорректная работа CMS. А как с этим бороться — не знаю.

    • Ольга Абрамова:

      Верните старую версию ВП http://abramo8a.ru/manual/vernut-staruyu-versiyu-vordpress

  9. Галина:

    Оля! Хорошо получилось.Аккуратно, всего в меру…кнопочки в тему.Картинка в цветовой гамме.Вообщем-просто молодчина!!! Сейчас многие переходят на широкие премиум-шаблоны…Просторно, свободно на блоге становится.Но когда вот так сам подгонишь бесплатную тему, поковыряешься в коде…так жалко становится всё бросать и менять.Я ведь тоже многое в коде уже изменила на блоге,даже валидацию пыталась полностью подогнать.Но «грязного» кода много в бесплатных шаблонах, иногда и не понятно, где и что. Пусть у тебя на блоге, с новым дизайном, будет много новых заказчиков и читателей!И спасибо за подсказочку! ColorZilla у меня програмкой на компе запускалась, а теперь тоже расширением в браузер поставила…и то, и другое, в зависимости от задач, пригодится.
    stm.dp.ua/web-design/color-html.php здесь таблица кодов и цветов.Иногда цвет выбрать просто понадобится,посмотреть можно сразу,подходит ли…и код скопировать.Ну вообщем, может пригодится…а ссылочку вместе с комментом можешь удалить потом.

    • Ольга Абрамова:

      Галя, спасибо за мнение специалиста 🙂 Я старалась действовать по законам веб-дизайна. Я тоже хотела установить премиум-тему Stryking, которую всем давали на Тринити. Но как увидела ее у каждого второго, да ещё такая морока с ней разбираться, перестала с ней возиться и взялась за свою. И спасибо за твои подсказки по таблицам.

  10. Катерина:

    Мне пришлось поменять шапку, так как просто увидела сайт -дубликат. Это было смешно!!! А потом я поняла, что несмотря на то, что я ничего еще не умею это пора делать. день потратила на поиск нового шаблона. Но не рискнула менять его. Решила для начала просто поменять шапку. вроде получилось, но я все равно не совсем довольна. Ольга, если вам не сложно, дайте совет о сайте. Спасибо!

    • Ольга Абрамова:

      Катерина, меня пригласили в качестве консультанта в Ассоциацию консультантов по созданию продающих сайтов. В рамках этой работы предлагаю Вам бесплатную 20-минутную консультацию http://iacwdbs.com/index/ru/olga_abramova/. Можете там оставить заявку и мы с вами договоримся о времени.

  11. Ирина:

    Мне многие советуют поменять шаблон. Прочитав эту Вашу запись, вспомнила, что тоже когда-то загрузила на сайт шаблон F2. Но не использовала его. Он мне понравился, когда я помогала своей знакомой найти хороший настраиваемый шаблон.
    Сегодня рискнула и поменяла свой шаблон на этот. Поставила картинку свою — своих любимых паровозиков. Пока оставлю так.
    Главное, что все проблемы, которые у меня были, исчезли. Странички все работают, кнопки ретвиттов тоже работают. Значит проблемы были в шаблоне?! Вот только смайлики так и остались не кликабельны. Но это, наверно, в самом плагине смайлов надо смотреть.
    Не могу в подвале добавить название своего сайта.
    Чуть позже буду смотреть и разбираться с цветовой гаммой на сайте. Если что, обращусь к Вам, если Вы не против)))
    Оля! Если Вам не сложно, зайдите, посмотрите. Может что подскажите?

    • Ольга Абрамова:

      Ирина, Вам также предлагаю консультацию по Скайпу. Бесплатный аудит на 20 минут. http://iacwdbs.com/index/ru/olga_abramova/ оформите заявку и мы с Вами пообщаемся.

    • Ирина:

      Огромное спасибо, Оля! Я рада! А можно завтра?

    • Ольга Абрамова:

      Напишите в заявке желаемый диапазон времени по мск.

  12. Василий:

    Ольга поздравляю вас со сменой шаблона. Сейчас ваш блог выглядит намного приятнее.
    Такой к вам вопрос про тэги H1, вы как раз ими занимались. Как вообще должно быть правильно? H1 — главная страница, H2 — заголовки статей и т.д. Или такой вариант — на главной H1 нет, а заголовки статей — H1, другие подзаголовки в статье — H2 и т.д. Объясняют все по разному, а как должно быть правильно не совсем понятно.
    У меня на сайте вообще нет H1, есть только заголовки статей — H2. Объясняют, что желательно иметь H1, хотя у меня и без этого тзга посещаемость неплохая.

    • Ольга Абрамова:

      Василий, большое спасибо.
      Согласна, что все пишут по разному. Я для себя сделала название сайта, заголовки на главной и в статьях H1, подзаголовки H2. Все остальное H3. Я не думаю, что изменение этих тэгов уж очень сильно повлияет на посещаемость, хотя безусловно для ПС это что-то значит. Коль Вас всё устраивает, то и нет нужды что-то править 🙂 Работает и пусть работает.

  13. ТОха:

    Ольга. Предлагаю вам поучавствовать в моем марафоне — подробности будут на выходных. Если есть желание сделать дизайн своими руками)

    • Ольга Абрамова:

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

  14. Елена:

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

    • Ольга Абрамова:

      Елена, пожалуйста! Рада была поделиться 🙂

  15. Надежда:

    У меня сайт детской тематики. Я первоначально выбрала бесплатный шаблон, он мне очень понравился. Но гуляя по просторам интернета, и заходя на молодые блоги, обнаружила, что сайтов с таким же шаблоном очень много. Я порылась в коде своего шаблона, внесла изменения, поменяла фон… Стало намного лучше, по-моему мнению!

    • Ольга Абрамова:

      Надежда, я видела подобные шаблоны. Правда, не помню, как они конкретно выглядят, но Вы правильно сделали, что видоизменили его. И главное, что Вам нравится. Другое дело, что над ним ещё можно и можно работать.

  16. Олег:

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

    • Ольга Абрамова:

      Олег, спасибо. На то и расчитано было, чтобы не путали 🙂

  17. Елена:

    Оля, поздравляю с новосельем! У Вас все отлично получилось, а главное — энтузиазма несомненно прибавилось. В комнате диван передвинешь — и то, заряжен на целую неделю. А здесь целый сайт. Примите мои поздравления и наилучшие пожелания. С успехом Вас!

    • Ольга Абрамова:

      Леночка, большое спасибо. Вы правы, перемены очень вдохновляют. Вам тоже удачи!

  18. WPixel:

    Отличный дизайн получился! Намного лучше чем был до этого.

    • Ольга Абрамова:

      Спасибо.

  19. Ирина:

    Ольга! Здравствуйте. Я тоже оформила свой сайт. Поработала на славу над этой темой. Даже немного в кодах стала разбираться. Совсем чуть-чуть. Пока возилась с установкой цветового оформления на сайте. И я все-таки добилась своего: сделала красивый сайт. Мне по-крайней мере нравится и многим моим читателям.
    Вот только не получается у меня поставить кнопки соц. сетей в header. Вчера тоже пробовала методом тыка поставить кодом в редакторе. Но не получилось поставить сверху справа. Вставали только под заголовком и на маленьком подзаголовке. Оля! У Вас есть на сайте статья про это. Может подскажите?

    • Ольга Абрамова:

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

    • Ирина:

      Спасибо, Ольга! Для меня было поначалу ооочень сложно цвета поменять — коды не знала.
      Поставила кнопки в статьях и на страницах вначале записи (вверху). И, наверно, будет много кнопок вверху (над статьей и в сайдбаре)?! А это, наверно, плохо?!

  20. Владимир Сальников:

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

    • Ольга Абрамова:

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