Главная / Новичкам / Пять простых путей сменить дизайн сайта
Пять простых путей сменить дизайн сайта

Пять простых путей сменить дизайн сайта

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

В этом посте мы осветим 5 основных способов изменения дизайна WordPress темы, начиная от самого простого варианта и заканчивая решениями средней сложности.

Мелкие изменения дизайна – WordPress кастомайзер

WordPress кастомайзер

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

Вот несколько стандартных  секций в WordPress-кастомайзере, которые можно изменить во многих темах:

  • Идентификационная информация сайта. Здесь вы можете изменять такие вещи, как название сайта, а также добавить логотип сайта.
  • Цвета/цветовые схемы. Понятно, что здесь можно менять цвет разных частей вашего сайта.
  • Изображение «шапки». Здесь вы можете управлять расположением и размером вашего изображения в «шапке».
  • Статичная домашняя  страница. Здесь вы можете выбрать страницу, которая станет домашней страницей вашего сайта.

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

Мелкие изменения дизайна – плагины, решающие проблемы дизайна

yellow-pencil 3

Если WP-кастомайзер не помог решить вашу проблему, то возможно, вам пригодятся плагины-помошники. Например, для изменения цветов вашей темы вы можете использовать плагин Theme Tweaker.

Если же вы не можете изменить изображение в «шапке» вашей темы, или вы хотите изменить это изображение только для некоторых страниц/категорий, то вам пригодится плагин Unique Headers. Или вот уникальный и мощный плагин о котором мы уже писали — Yellow Pencil. Подобных плагинов существует довольно много, нужно только не лениться и использовать поиск.

Мелкие изменения дизайна – конструкторы страниц

Visual Composer - строим страницы сами

Здесь мы не будем говорить о решениях, которые позволяют создать тему с нуля, используя уже встроенные шаблоны (Divi или WPMU’s Upfront). Мы имеем в виду такие плагины, как Visual Composer, которые позволяют вам создавать динамичные страницы для практически любой понравившейся темы.

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

Средние изменения дизайна – изменяем CSS

Medium Design Changes

HTML и CSS формируют сайт таким, как мы его видим. HTML – это основа, можно сказать, кости, а CSS – это мясо, которое на них наросло – то, что придает сайту завершенный вид.

Для изменения CSS можно использовать плагин Simple Custom CSS или CSS Editor, который является частью Jetpack.

Перво-наперво, вам необходимо почерпнуть базовую информацию о том, что такое HTML/CSS, узнать, как это работает, как найти класс или элемент, который вы хотите изменить. Чтобы например, в Хроме подсветить область, которую вы хотите просмотреть, нажмите на правую кнопку мыши, а потом на «Посмотреть код». В нашем примере мы рассмотрим HTML и CSS, присущие заголовку записи.

Так же вам обязательно нужно обращать внимание на  медиа-запросы в CSS. Медиа-запрос – это функция в CSS, которая нужна, чтоб применить или отключить зависимость от таких вещей, как размер монитора.

В этом примере  есть медиа-запрос, который говорит:

И он задает следующие стили для .entry-title.

Это значит, что данные стили применяются только если экран (или окно браузера) шире, чем 61.5625em (или  985px). Так что, если вам нужно поменять то, как что-то выглядит на определенном экране, то вам нужно включить специфичный медиа-запрос. Давайте изменим размер шрифта только для экранов мониторов. Для этого напишите что-то подобное в вашем кастомном CSS плагине:

Вот так гипертрофировано этот шрифт будет выглядеть на экране монитора, но его нелепость оправдана тем, что позволяет показать, как контрастно шрифт выглядит на большом экране:

title

Но на экране мобильника и планшета текст будет выглядеть неизменно. Именно то, чего мы добивались.

Крупные изменения дизайна – используем дочернюю тему

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

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

 

Тоже интересно!

Как сделать возврат средств на ThemeForest?

Доброго дня всем внемлющим 🙂 Онлайн маркеты Envato по прежнему остаются любимым местом для покупок …

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *