Как самостоятельно изменить дизайн сайта? Дизайн на вордпресс
Дизайн сайта на Wordpress. Выбор шаблона и советы по оформлению
Вот вы уже сделали все первичные действия, чтобы ваш молодой сайт мог функционировать на начальном уровне. Теперь самое время подойти к сайту с творческой точки зрения. Если быть более точным, то мы поговорим об оформлении (дизайне) сайта.
Для кого-то этот шаг может стать любимым, для других же, напротив, самым сложным. Данная статья предназначена для того, чтобы работа над оформлением сайта стала для вас максимально простой и понятной. Мы обговорим как выбрать дизайн на движке WordPress и обсудим многие ошибки, с которыми сталкиваются начинающие вебмастеры.
Начнем с важного момента — шаблоны (темы) для сайта бывают как платными, так и бесплатными. Этот выбор зависит в первую очередь от ожидаемых затрат на бюджет сайта.
Чем платные шаблоны отличаются от бесплатных:
В первую очередь, платные шаблоны добавят сайту индивидуальность. Ни у кого другого в сети не будет такого же оформления, как у вас (если только какие-нибудь умельцы не украдут ваш дизайн). Нужно это или нет, это уже другой вопрос. Бытует мнение, что оригинальный дизайн помогает в продвижении сайта в поисковиках, но это мнение ни чем не подтверждено.
Главное, чтобы сайт был удобным с точки зрения функционала и приятным для зрительного восприятия, остальное вторично.
На своем блоге я использую бесплатный шаблон, который отредактировал относительно своих желаний и предпочтений. Мне кажется, что это идеальный вариант для блога, в который не хочется вкладывать крупные вложения. Если вы хорошо владеете фоторедакторами, то из любого бесплатного шаблона можно сделать нечто абсолютно непохожее на начальный вариант. Да и при достаточных умениях можно оформить дизайн сайта абсолютно бесплатно.
Однако поднимается не менее важная дилемма — затраченное время. Если сайт хочется сделать быстро или нет достаточных умений, но есть определенный бюджет, то однозначно стоит заказывать платный дизайн.
Где и как заказать платные темы я рассказывать не буду. У меня бесплатный шаблон, который я сам дорабатывал, так что в платных я не разбираюсь. Но не думаю, что могут возникнуть какие-то сложности с поиском профессионалов, готовых оформить ваш сайт относительно ваших предпочтений.
Где найти бесплатные шаблоны:
- Первый и наиболее простой вариант — в каталоге WordPress. Для этого нужно войти в административную панель вашего сайта. Там жмем на вкладку «внешний вид» — «темы»:
После внизу страницы находим большую прямоугольную кнопку «Добавить новую тему». Там вы найдете большой список шаблонов на любой вкус и цвет. После того как вы выберете желанную тему, нужно нажать «активировать» и дизайн автоматически добавится на ваш сайт; - Второй вариант — в другом интернет-каталоге. Тут выбор еще шире и большинство тем намного реже встречаются на просторах интернета, однако есть шанс наткнуться на мошенников и скачать вредоносные файлы. поэтому крайне важно проверять отзывы о таких каталогах. После загрузки заходим опять же в административную панель, а далее «Внешний вид» — «Темы» и сверху страницы жмем на кнопку «Добавить новую»:
Какой дизайн сайта выбрать (частые ошибки):
- Не стоит выбирать громоздкий дизайн! В настоящее время большинство сайтов оформляются в стиле минимализма и это не просто так. Пользователи не любят сильно нагруженные сайты. Информация должна легко восприниматься и ничего не должно от нее отвлекать. Также сайты с громоздким оформлением медленнее загружаются, что также отталкивает посетителей;
- Не стоит использовать слишком яркие цвета в оформлении. Светограмма сайта не должна напрягать глаза посетителей. Основной текст статей должен быть написан черным шрифтом (или приближенными цветами) на белом фоне (или очень светлом). Это звучит банально, но до сих пор встречаются тонны сайтов, где текст плохо виден, либо глаза очень устают от ярких цветов;
- Главное меню в верхней вкладке и побочное в правой. Это абсолютно необязательный пункт, но сейчас большинство сайтов оформляются именно в этом стиле и пользователи к нему привыкли.
На этом советы можно закончить. Надеюсь, что моя статья поможет вам создать новое произведение искусства в интернете!
После настройки дизайна можно переходить к функционалу сайта, о чем вы узнаете в следующей статье.
Вконтакте
Google+
LiveJournal
Похожие статьи:
greenprofitblog.com
Как изменить дизайн блога или дизайн сайта?
Привет, дорогие читатели блога! Сегодня я расскажу как изменить дизайн блога или дизайн сайта. В современном сайтостроении смена дизайна сайта не представляет трудности, и с ней справиться даже пользователь, не знающий HTML и CSS, ведь благодаря движку сайта, дизайн можно менять и в визуальном редакторе.
Если не знаете что такое движок сайта, рекомендую прочесть мою статью – что учесть при выборе движка сайта.
Конечно в зависимости от того на каком движке у вас сайт, смена дизайна может немного отличаться но в целом все идентично. В статье я расскажу:
Зачем нужно менять дизайн сайта или блога?Из каких элементов состоят web сайты?Как быстро изменить дизайн сайта на WordPress?Как изменить шапку блога или сайта?Как изменить дизайн сайдбара и элементов в нем?Изменить подвал сайта (footer).Как изменить дизайн страниц с текстом?
Зачем нужно менять дизайн сайта или блога?
Большинство сайтов и блогов в сети интернет изначально строятся на бесплатных шаблонах, и уже впоследствии меняют дизайн этой темы. Если у вас стандартная тема или шаблон (это одно и то же) и вы не меняли ее дизайн,то скорее всего сайтов с таким же дизайном как у вас несколько сотен или тысяч. Значит ваш сайт не уникален, его вряд ли запомнят пользователи, случайно попавшие на ваш блог или сайт.
Некоторые утверждают, что поисковые системы учитывают уникальность шаблона при ранжировании, но на самом деле это полная ерунда. Поисковым системам важна информация, которую вы даете и поведение пользователей на сайте, а не дизайн. Но не забывайте, что дизайн сайта тоже может влиять на поведение пользователей, об этом я писал здесь.
Из каких элементов состоят 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;
- Цвет шрифта – черный;
- Фон страницы – белый;
После того, как вы полностью изменили дизайн сайта, можете почистить кэш браузера и любоваться своим произведением 🙂
nazyrov.ru
Как нарисовать обалденный дизайн сайта с нуля, сверстать его и установить на WordPress
От автора: 8 бесплатных видеоуроков покажут Вам, как нарисовать обалденный дизайн сайта с нуля, сверстать его и установить на WordPress.
Урок 1. Подготовка к работе, расстановка направляющих.
Тема: Веб-дизайн
Время ролика: 15:41
Cложность: легкая
Прикладные программы: Adobe Photoshop CS5
Автор: Захаренко Алексей
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении
Узнать подробнееВ этом уроке мы сделаем разметку макета, используя направляющие. Это необходимо чтобы все элементы сайта были выровнены, а не "налазили" и "прятались" друг за другом. Направляющие в дальнейшем значительно облегчат вёрстку сайта.
Урок 2. Шапка сайта.
Тема: Веб-дизайн
Время ролика: 58:53
Cложность: средняя
Прикладные программы: Adobe Photoshop CS5
Автор: Захаренко Алексей
В этом уроке мы сделаем коллаж на тему путешествия из предметов, которые берём с собой или встречаем во время путешествий. В процессе мы обработаем каждую картинку: осветляя, затемняя, добавляя блики, тени, рисуя свои фигуры с нуля, деформируя и изменяя формы разных предметов и многое другое. Мы сделаем из кучи картинок гармонично вписывающуюся шапку в общий дизайн блога, когда посетитель будет заходить на сайт – он сразу будет понимать, куда попал и что его здесь ждёт.
Урок 3. Проработка меню, контента, правого блока и футера.
Тема: Веб-дизайн
Время ролика: 57:52
Cложность: средняя
Прикладные программы: Adobe Photoshop CS5
Автор: Захаренко Алексей
В этом уроке мы сделаем простое и удобное меню, поиск по сайту, красивый ротатор картинок на всю ширину, правый блок с категориями стран. Также создадим посты, которые будет удобно читать, и сделаем футер, который не будет отвлекать от контента, но будет давать всю необходимую информацию о сайте.
Урок 4. Продумываем разметку страницы и нарезаем макет.
Тема: HTML, CSS
Время ролика: 57:52
Cложность: средняя
Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
Автор: Бернацкий Андрей
В этом уроке мы продумаем разметку будущей HTML страницы, выделим основные блоки из которых она будет состоять. Вырежем из макета все необходимые для работы изображения. Сверстаем «шапку» сайта, меню и форму для поиска. Также установим логотип и слоган сайта.
Урок 5. Верстаем область основного контента.
Тема: HTML, CSS
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении
Узнать подробнееВремя ролика: 66:41
Cложность: средняя
Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
Автор: Бернацкий Андрей
В этом уроке мы сверстаем область основного контента, навигацию по рубрикам и «подвал» сайта. Чтобы уменьшить количество используемых картинок и не увеличивать вес страницы, при верстке будем использовать новые свойства CSS3. А также, чтобы уменьшить количество используемых классов, будем активно применять псевдо-классы.
Урок 6. Устанавливаем слайдер, дорабатываем сайт.
Тема: HTML, CSS
Время ролика: 23:01
Cложность: средняя
Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
Автор: Бернацкий Андрей
Как известно, Internet Explorer ниже 9-ой версии не поддерживает свойства CSS3. В данном уроке мы все-таки «заставим» Internet Explorer поддерживать эти свойства, чтобы сайт смотрелся одинаково во всех браузерах. Также в данном уроке мы установим слайдер на нашу страницу для прокрутки изображений.
Урок 7. Создание темы WordPress. Часть 1.
Тема: WordPress
Время ролика: 87:31
Cложность: средняя
Прикладные программы: WordPress 3.2.1-ru_RU
Автор: Кудлай Андрей
В этом уроке мы начнем с необходимых теоретических пояснений и установки CMS WordPress. В частности, узнаем об особенностях создания темы для выбранной нами системы управления сайтом, разберем структуру любой темы, поговорим о том, что необходимо знать для успешного создания темы. После установки CMS WordPress и создания папки для будущей темы, мы начнем постепенное изучение функций WP, знание которых является неотъемлемой частью при создании любой темы. После краткого знакомства с функциями мы перенесем имеющийся у нас шаблон в папку с создаваемой темой. После переноса шаблона в тему мы разделим шаблон на логические части (header, footer, sidebar), которые подключим к главному шаблону темы (index). В конце первого урока осуществляется динамический вывод краткого текста статей на страницы блога.
Урок 8. Создание темы WordPress. Часть 2.
Тема: WordPress
Время ролика: 97:16
Cложность: средняя
Прикладные программы: WordPress 3.2.1-ru_RU
Автор: Кудлай Андрей
Ваши пожелания, отзывы и рекомендации оставляйте в комментариях!
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении
Узнать подробнее
Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?
Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”
Получить
webformyself.com
