Как изменить дизайн сайта

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

197110, Россия, Санкт-Петербург, а/я 144, ООО «Юми» +7 (812) 309-68-23

Итак, у вас есть готовый сайт на 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-кода выглядит так:

• записываем класс (название элемента) — .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 применен к заголовкам “Новости” и “Популярные товары”.

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

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

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

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

Как дизайн может привлечь внимание пользователей

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

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

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

Как изменить дизайн сайта

Чтобы изменить дизайн сайта, нужно выбрать другую тему дизайна или изменить существующую тему. Тема дизайна — это набор HTML-, CSS- и других файлов, формирующих внешний вид сайта.

Способ 1. Выбрать другую тему дизайна

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

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

Способ 2. Изменить существующую тему дизайна

Тему дизайна можно изменять самостоятельно: с помощью настроек или редактируя исходный код файлов.

Настройки темы дизайна доступны в секции «Оформление». У каждой темы дизайна свой набор настроек, с их помощью можно редактировать надписи на главной странице, изменять цветовую гамму, выбрать другой тип главного меню, включить или отключить автоматическую загрузку длинных списков и т. д.

Если доступных настроек недостаточно, вносите изменения в исходный код файлов темы (HTML и CSS) в секции «Шаблоны».

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

2 комментария

+1
Andrey And 22 февраля 2018 23:14 #

Здравствуйте, подскажите пожалуйста какие знания необходимы кроме HTML и CSS для создания темы с нуля? на чем написан?

+1

Михаил Ушенин 26 февраля 2018 10:14 #

• JavaScript с jQuery
• Smarty

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

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

Форум поддержки

Задайте вопрос, предложите идею или сообщите об ошибке. Ответят партнеры или сотрудники Webasyst.

Эксперты

Найдите надежного партнера-эксперта Webasyst для работы над сложными индивидуальными проектами.

Услуги Webasyst

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

Раздел помощи работает на основе приложения «Хаб»

Как изменять дизайн сайта в конструкторе

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

Сделать отдельный фон для части страницы

Для этого добавьте элементы Фото или Фигура:

• Для элемента Фото можно настроить только изображение и размер.
• Для элемента Фигура можно настроить изображение, размер, цвет, прозрачность, закругленность и подгонку изображения под размеры Фигуры.

Изменить высоту шапки и подвала

Откройте раздел Фон:

Оформить надписи

1. Откройте раздел Стили:

2. Настраивайте до 12 разных стилей для обычного текста и заголовков:

3. Примените ваши стили к надписям, выбрав элемент Текст, и далее — Редактировать текст:

Поставить отдельный цвет надписи для каждой страницы

1. Разместите текст:

2. Откройте Свойства элемента и выберите:

3. Откройте другую страницу и добавьте тот же текст на то же место. Выберите нужный цвет:

Добавить фавикон

• Фавикон — маленькая картинка-логотип рядом с названием страницы в браузере:

Чтобы добавить фавикон, откройте раздел Favicon и загрузите картинку:

Изменить шаблон сайта

1. Нажмите на кнопку Новый/Сброс:

2. Выберите нужное действие:

• Изменить шаблон — открывает меню выбора шаблонов.
• Сброс шаблона — загружает начальный вид шаблона без ваших правок.
• Импорт — загружает в конструктор дизайн сайта. Можно импортировать только сайт, который уже виден через веб-браузер.

Расположить элементы несколькими слоями

1. Поместите на сайт элементы, которые хотите скомбинировать:

2. В свойствах элемента выберите пункт Порядок:

3. Назначьте Передний план или Задний план расположения. Перетащите элементы один на другой:

• Для переднего плана используйте .png-картинки с прозрачным фоном.

Увеличить или уменьшить элемент

Чтобы изменить размер элемента, выделите его. Наведите курсор на отметку в правом нижнем углу. Зажав левую кнопку мыши, двигайте курсор по диагонали:

Добавить таблицы

1. Откройте раздел Еще и добавьте на сайт элемент Таблицы:

2. Настройте количество столбцов и строк, цвет ячеек и рамки таблицы:

Оформить готовыми блоками

Чтобы добавить на страницу сразу несколько элементов, перетащите элемент Блоки на область сайта:

В результате элементы блока равномерно распределятся по сайту:

Откройте Свойства элементов и замените стандартные картинки и тексты на свои.
Также читайте о том, как сделать сайту мобильную версию или как настроить сайт для SEO через панель конструктора.