Меню

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

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

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

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

Источник

Смена дизайна сайта

Дизайн (шаблон) определяет внешний вид сайта: оформление, меню, шрифты и т.д.
В Конструкторе используется большое количество дизайнов.
И с каждой новой версией Конструктора мы добавляем новые дизайны.
Потому желательно при установке новой версии Констурктора посмотреть новые дизайны (они обычно добавляются в начале списка дизайнов). Возможно какой-то из новых дизайнов понравится Вам больше, чем используемый на данный момент.

Важно:

Смена дизайна не влияет на наполнение сайта. Изменяется только внешний вид.

Первым делом выберите, пожалуйста, откуда будет отображаться страница: из MagicSite, или из Конструткора.

То есть выберите что будет отображаться на сайте в первую очередь — стратовая страница из Констурткора, или Главная страница MagicSite.

Читайте также:  Дизайн проект ресторана заказать

Указать Главную страницу Вы можете в Констуркторе версии 4.6.12 и выше , пройдя в меню Констурктора » Свойства проекта «.

Важно:

Если Вы выберете стартовой страницей страницу из Констурктора,

то главная страница из MagicSite станет недоступной, равно как и «Наши страницы».

а) Если Вы указали стратовую страницу MagicSite , то далее выбирать дизайн в Конструкторе не нужно.

В таком случае сохраните, пожалуйста, внесенные изменения в свойствах проекта;

после чего сохраните проект;

проведите полную (в этот раз обязательно, а вообще всегда крайне желательно проводить именно полную ) конвертацию

и опубликуйте сайт.

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

б) Если Вы указали стратовой страницу из Констурктора , то далее следует выбрать дизайн из Констурктора.

Для того, чтоб сменить дизайн сайта, пройдите, пожалуйста, в меню Конструктора: Проект – Смена дизайна

Выбрав желаемый дизайн, подтвердите, пожалуйста, выбор, нажав кнопку «ОК».

Окно выбора дизайна закроется и дизайн проекта сайта обновится.

Сохраните , пожалуйста, проект (это важно).

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

Важно:

Мы не раз встречались с обращениями по поводу того, что при смене дизайна на сайте стало отображаться некое слияние прежнего и нового дизайнов.
Или же, что на одних страницах сайта оторажается новый дизайн, а на других – прежний.
Потому позвольте акцентировать, что после смены дизайна необходимо:
сохранить проект
и провести полную конвертацию перед публикацией.

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

Наши контакты: Почта: info@edusite.ru Бесплатный телефон поддержки: +7(800) 511 08 86

Поделиться в соц.сетях:

© Руководство по созданию и ведению сайта в Конструкторе E-Publish. АО «Е-Паблиш», 2002—2020

Источник

Adblock
detector