Как изменить дизайн сайта: Как изменить дизайн готового сайта. Азбука CSS – Как изменить дизайн блога или дизайн сайта?

Содержание

Как изменить дизайн готового сайта. Азбука CSS

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

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

А можно такой же, но с перламутровыми пуговицами? Да!

На 1С-UMI есть возможность изменить внешний вид готового сайта несколькими способами, которые можно сочетать или использовать по отдельности:

1. Самый простой способ — изменить вид страниц сайта при помощи картинок.

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

Замените основное имиджевое изображение в “шапке” сайта. Это ключевой элемент вашего брендинга и первое, что увидит посетитель вашего сайта, поэтому подбирайте изображение очень тщательно. Оно должно быть качественным, демонстрировать суть вашего предложения и особенности позиционирования. Использовать его можно также в качестве временного или постоянного баннера, рекламирующего какое-либо предложение или акцию.

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

Исходный шаблон дизайна:

Шаблон, измененный при помощи картинок:

2. Самый радикальный способ — изменить шаблон дизайна.

Этот способ подойдет, если вы хотите полностью изменить внешний вид сайта, выбрав другую тематику оформления. Для этого просто зайдите в раздел “Дизайн – Смена дизайна” в панели управления вашего сайта и выберите новый дизайн. При этом, вы можете сохранить все внесенные изменения: тексты, картинки, структуру, объекты каталога и т.д.

3. Самый творческий способ — редактирование стилей CSS.

CSS — это технология описания внешнего вида веб-страниц, написанных на языке разметки HTML. Определенные стили CSS уже применены к готовым сайтам на UMI.ru и описывают внешний вид всех элементов: текстов, кнопок, ссылок, меню, “хлебных кошек” и др. Для их изменения необходимо прописать новые стили в специальном файле, который находится в разделе “Дизайн” — “Управление CSS” в панели управления вашего сайта (доступно на платном тарифе).

С помощью стилей CSS можно изменить:

фон сайта (вставить фоновую картинку или поменять цвет)

цвет, расположение и угол наклона объектов

шрифты

форматирование абзацев

добавить тени, рамки или закругления объектам

передвинуть блоки или изменить их форму

многое другое.

Все это можно сделать самостоятельно, но вам потребуются некоторые базовые знания о редактировании стилей CSS. Не пугайтесь, вам не придется сочинять код: все стили уже есть в специальных учебниках. Разобраться в основах вам поможет отличный самоучитель CSS — htmlbook.ru, а получить нужный код — генераторы CSS: css3maker.com и css3generator.com. А если у вас есть знакомые, знающие язык HTML, то они с легкостью помогут в редактировании стилей.

И сайт превращается…

Как изменить сайт при помощи CSS и посмотреть, какие стили уже применены к элементам страниц — вы узнаете из нашего руководства.

А чтобы вы поняли, насколько это легко — разберем несколько примеров.

Действия с объектами

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

Перед тем, как изменить сайт, не забудьте сохранить его резервную копию — тогда вы сможете его легко восстановить с случае неполадок. Теперь можно приступать к редактированию. При помощи инструмента инспектирования кода (в нашем примере использован Firebug в браузере Mozilla Firefox) находим код необходимого элемента — в данном случае, это код кнопки:

В правом окошке инспектора “Стиль” прописан код, обозначенный разными цветами:

черным — класс (в данном случае, кнопка),

зеленым — CSS-свойство (в данном случае, цвет),

синим — значение (в данном случае, голубой),

зачеркнутый код обозначает, что данный стиль не работает, поскольку конфликтует с другим, более приоритетным стилем.

Мы видим, что класс кнопки называется .direction_title. Чтобы понять, какой фрагмент представленного кода отвечает за цвет, можно “перевести” зеленые теги, воспользовавшись поиском в справочнике. За цвет фона кнопки отвечает свойство background (не путайте со свойством color, оно отвечает за цвет шрифта). Сейчас кнопке присвоен стиль background: #1f1f1f; где background — это свойство, определяющее стиль фона, а #1f1f1f — голубой цвет в шестнадцатеричной кодировке цвета.

Чтобы сделать кнопку красной, нужно узнать цифровой код красного цвета. Его можно посмотреть с помощью онлайн-палитры, либо в любом графическом редакторе, которым вы привыкли пользоваться (например, Microsoft Paint, Photoshop, онлайн-редактор и т.п.). Итак, код красного цвета — #ff0000:

Теперь перейдем в раздел “Дизайн” — “Управление CSS” админзоны нашего сайта и пропишем новое значение для класса кнопки, соблюдая тот же синтаксис, что показывает инспектор в исходном коде: между открывающей и закрывающей фигурной скобкой помещают CSS-свойства со значениями, разделяя их знаком “;”.

Таким образом, в общем виде схема CSS-кода выглядит так:

Тег.Имя класса { свойство1: значение; свойство2: значение; … }

записываем класс (название элемента) — .direction_title

ставим фигурные скобки — { }

внутри фигурных скобок прописываем стиль кнопки — background:

после двоеточия указываем код красного цвета — #ff0000

в конце строки ставим ;

не забываем в самом конце закрыть фигурную скобку.

Что получилось:

Было Стало

Вторая задача: перемещение кнопки вверх и вправо на 100px.

Для начала посмотрим значения текущего расположения кнопки с помощью инспектора, если нужно — “переведем” через самоучитель. Сейчас стоят значения bottom: 20px; left: 40px; где bottom — расстояние от нижнего края кнопки до нижнего края родительского блока, а left — расстояние от левого края кнопки до левого края родительского блока.

Таким образом, для перемещения кнопки вверх и вправо на 100px нужно прибавить по 100px снизу и слева — получится 120px снизу и 140px слева. Добавим новые значения в наш файл стилей к уже прописанному классу нашей кнопки .direction_title, соблюдая синтаксис исходного кода:

Что получилось:

Было Стало

Изменение шрифтов

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

Задача: изменить размер и цвет шрифта в заголовке “Новости”.

Найдем класс заголовка и значения стилей при помощи инспектора кода Firebug, если нужно — “переведем” значения через справочник.

Мы видим, что класс заголовка “Новости” называется .shop-heading, за размер шрифта отвечает свойство font-size, значение которого сейчас — 18px; а за цвет — свойство color со значением #111111 (темно-серый).

Перейдем в раздел “Дизайн” — ”Управление CSS” админзоны сайта и изменим эти значения на нужные нам. Например, увеличим размер до 28px, а цвет изменим на красный. Как вы помните, цвет указывается в шестнадцатеричном коде:

Сохраняем и смотрим, что получилось. Обратите внимание, что при изменении стиля элемента внешний вид поменяют ВСЕ элементы на сайте, к которым применен данный стиль. В нашем случае, стиль .shop-heading применен к заголовкам “Новости” и “Популярные товары”.

Что получилось:

Было Стало

Еще несколько примеров работы с CSS описаны в нашем руководстве.

Возможные сложности

1. Не “срабатывают” стили, прописанные в файле CSS.
Решение: после значения свойства прописать правило !important, которое позволяет повысить приоритет стиля. Например:

.shop-heading{
color: #ff0000 !important;
font-size: 28px
!important;}

2. Вам не понравился результат работы со стилями. Решение: просто очистить файл стилей CSS в админзоне.

3. Если после изменения CSS вы сменили шаблон дизайна, то прописанные вами стили сохранятся, но могут не работать в случае, если на новом шаблоне используется другая верстка. Решение: внести изменения в CSS заново, с учетом новой верстки.

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

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

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

Как изменить дизайн вашего сайта, чтобы улучшить конверсию — Dizz.in.ua

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

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

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

Вот как изменить дизайн вашего сайта без потери клиентов.

Назначьте цели

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

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

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

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

Пусть клиенты знают, что вы меняете дизайн

Как кратко упоминалось ранее, вы хотите, чтобы ваши клиенты были в восторге от редизайна, поэтому не оставляйте их в темноте. Почтовый маркетинг по-прежнему является одним из лучших способов связаться с вашими клиентами. Фактически, по данным HubSpot, более 50% респондентов в США проверяют свою личную учетную запись электронной почты более 10 раз в день. Таким образом, вы должны рассылать электронные письма всем своим подписчикам, сообщая им о том, что готовится редизайн, а также электронное письмо, чтобы приветствовать их на новом и улучшенном сайте, как только он появится.

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

Получать отзывы

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

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

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

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

Сделайте проверку качества

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

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

Заключение

Редизайн может быть стрессовым, но он также может помочь вам увеличить трафик и увеличить количество конверсий, если это будет сделано правильно. Не забудьте провести A / B-тестирование. Не каждый редизайн веб-сайта идеален сразу, но с A / B-тестированием вы можете точно определить, что лучше всего подходит для ваших клиентов. Наслаждайтесь новым дизайном вашего сайта и всеми его преимуществами, и обращайтесь за разработкой дизайна сайта в Dizz Agency.

loader

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

Инструкция содержит следующие разделы:

Важно! Установка и переустановка полностью обновит содержимое глобальных блоков. Перед внесением каких-либо изменений в дизайн сайта мы рекомендуем сделать резервное копирование шаблона.

Установка нового шаблона

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

Выерите шаблон из списка:

И нажмите на кнопку «Установить»:

Появится индикатор процесса установки шаблона:

После успешной установки нового шаблона вы увидите сообщение:

А после нажатия на ссылку «Посмотреть» сможете оценить новый дизайн.

Переустановка шаблона

Если нужно вернуть стандартный шаблон к первоначальному виду, воспользуйтесь ссылкой «Переустановить». Она видна, если зайти в раздел «Дизайн»:

Подтвердите действие:

Дождитесь окончания переустановки:

И сообщения об успешном выполнении операции:

Редактирование шаблона

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

В некоторых случаях целесообразно изменить лишь часть шаблона. Для этого потребуются знания HTML и CSS. Если вы сомневаетесь в своих силах, посмотрите, куда обратиться за помощью при создании сайта.

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

Изменение внешнего вида сайта

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

Мы хотим полностью изменить внешний вид сайта. Для начала откроем Firebug в браузере Mozilla Firefox, для этого достаточно нажать F12. Вы можете использовать любой браузер со схожим функционалом — например, в Google Chrome есть инструменты разработчика, они также вызываются через F12, но в данной статье мы рассмотрим всю работу с браузером Mozilla Firefox.

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

Обратите внимание на правую часть окна, там указаны стили, которые используются на указанном элементе:

Теперь выберем цвет, который будет использоваться на нашем сайте. Для выбора цвета вы можете воспользоваться ресурсом http://earninguide.biz/webmaster/palette.php. Как только вы выберете нужный вам цвет, в поле «Код» будет указан нужный вам цвет в шестнадцатеричном виде, вам останется только скопировать это значение и вставить его, как значение нового правила. Например, для начала выберем цвет:

Теперь добавим в CSS-редактор новое правило, которое задает цвет фона, и в качестве цвета укажем код #fff388:

css

Как только мы нажмем на кнопку «Сохранить», внешний вид сайта изменится — у выделенного элемента цвет изменится на выбранный нами:

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

Нужный нам элемент выделен синим. В правой части Firebug мы видим правило CSS, которое задает цвет элемента:

css 1

Осталось добавить в редактор CSS новое правило, которое изменит цвет фона элемента:

фон

Теперь шапка сайта перестала выделяться, и осталось только изменить белый фон в центре сайта.

Поступаем аналогично — выбираем необходимый элемент, убеждаемся, что выбран нужный (выбранный элемент выделяется синим цветом):

Смотрим, какое правило задает фоновый цвет элемента:

Выберем салатовый цвет для фона на странице http://earninguide.biz/webmaster/palette.php:

Добавляем новое CSS-правило, где указываем новый цвет:

В итоге мы изменили внешний вид сайта с помощью всего 3-х правил CSS: