Простая настройка внешнего вида блога в шаблоне — конструкторе AB-Inspiration 7 для блога на WordPress

  Автор:
  16 комментариев
  7684
Простая настройка внешнего вида блога в шаблоне AB-Inspiration 7

Сегодня выходит новая версия шаблона- конструктора AB-Inspiration. После публикации этой статьи шаблон будет доступен для обновления.

Как обновить шаблон AB-Inspiration можно посмотреть здесь.

В этой статье я расскажу о новшестве шаблона 7-й версии — «Простая настройка» внешнего вида блога, над которым я работала  полгода.

Немного предыстории.

Настройки внешнего вида в шаблоне AB-Inspiration

Как вы знаете в шаблоне большую часть настроек занимает изменение внешнего вида. Практически каждую деталь внешнего вида можно изменить: Цвет, границы, шрифты итд.

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

Видеокурс по настройкам внешнего вида

В помощь пользователям я создала видеокурс по изменению внешнего вида с подробнейшим объяснением всех настроек. Видеокурс вы можете найти в клубе Изменение внешнего вида блога. Раздел “Настройка шаблона”. На эту страницу можно попасть если вы войдете под своим логином и паролем в клуб.

Видеоуроки с примерами внешнего вида

А также я создала ряд видео инструкций по изменению внешнего вида с конкретными примерами в рамках конкурса на самый эффектный дизайн сайта. Эти видео можно посмотреть здесь: Конкурс на самый эффектный дизайн блога на шаблоне AB-Inspiration

Простая настройка

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

Но меня все не покидала мысль сделать настройку внешнего вида как можно проще. Чтобы в 2-3 клика и готово.

От идеи до реализации понадобилось 6 месяцев. И вот сегодня я готова представить Бета версию простой настройки.

Как работает «Простая настройка»

В разделе «Настройки шаблона» появилась новая вкладка «Простая настройка».

  1. Если вы хотите использовать простую настройку необходимо поставить галочку «Использовать простую настройку».
  2. Необходимо выбрать 3 цвета и определить какого цвета будет текст.
  3. Выбираете на всю ширину будет сайт или с границами по центру
  4. И выбираете шрифты для заголовков и для текста

Далее программа все эти настройки перенесет на элементы сайта. Здорово, правда?

В этой небольшой видео инструкции я покажу как быстро меняется внешний вид сайта с простой настройкой.

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

Какие элементы входят в «Простую настройку»

Ниже список элементов, которые входят в Простую настройку. Это значит, что их невозможно будет менять, если вы используете «Простую настройку».

Стиль блога

  1. Ширина блога

Стиль шапки

  1. Ширина шапки
  2. Настройки заголовка блога — цвет заголовка и описания будет использоваться согласно «Простой настройки». Все остальное можно менять

Стиль меню в шапке

  1. Фон
  2. Цвет текста пунктов меню
  3. Шрифт текста пунктов меню

Стиль основного меню

  1. Ширина
  2. Фон
  3. Шрифт и цвет текста пунктов меню

Стиль контента

  1. Шрифт текста

Стиль статьи

  1. Цвет границы
  2. Шрифт и цвет заголовков статей и страниц
  3. Шрифт и цвет заголовков в тексте статей
  4. Цвет ссылок
  5. Цвет кнопок

Стиль виджетов

  1. Цвет границы
  2. Шрифт и цвет заголовков
  3. Фон заголовков

Стиль виджетов в футер

  1. Фон снаружи и фон внутри
  2. Шрифт и цвет заголовков
  3. Цвет текста

Стиль футер

  1. Ширина
  2. Фон
  3. Цвет текста

Форма в виджете

  1. Фон
  2. Шрифт и цвет заголовка
  3. Цвет границы
  4. Цвет кнопки
  5. Шрифт и цвет текста на кнопке

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

  1. Фон
  2. Шрифт и цвет заголовка
  3. Цвет границы
  4. Цвет кнопки
  5. Шрифт и цвет текста на кнопке

Простая настройка также работает и в плагинах «Входная страница» и «WPForm — Живая форма + Слайдер», Каталог

Плагин «Входная страница»

  1. Фоны уровней (первый уровень — первый цвет, далее чередуется белый с бледным основным цветом)
  2. Шрифты и цвет заголовков
  3. Цвет кнопок

Плагин WPForm — Живая форма

  1. Цвет кнопок

Плагин WPForm — Слайды

  1. Шрифт и цвет текста
  2. Цвет кнопки

Плагин Каталог

  1. Цвет кнопок и фильтров
  2. Шрифт и цвет заголовков

Плагин Woocommerce (Интернет магазин)

  1. Шрифт и цвет заголовков товаров
  2. Цвет границы
  3. Цвет границ вокруг товаров
  4. Цвет кнопок
  5. Шрифт текста
  6. Цвет плашки Скидка (третий цвет)
  7. Цвет звездочек рейтинга (третий цвет)
  8. Фон

Ваше мнение о «Простой настройке»

Жду ваших комментариев и отзывов о новом функционале. Обязательно попробуйте «Простую настройку». Если Вам что-то не нравится, смело пишите в тех поддержку свои пожелания, и я буду учитывать пожелания в дальнейшей разработке шаблона AB-Inspiration.

Если у Вас остались вопросы, не стесняйтесь, задавайте в комментариях. Буду рада ответить.

P.S. Для подбора гармоничных цветов для «Простой настройки»  вы можете воспользоваться технологией описанной в данном статье — Как подобрать гармоничные цвета для сайта не будучи дизайнером.

 


Создать сайт для заработка с нами — легко и быстро!

За помощью обращайтесь в нашу службу поддержки 24/7

 

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget

 

Простая настройка внешнего вида блога в шаблоне — конструкторе AB-Inspiration 7 для блога на WordPress

   4 голоса
Средняя оценка: 5 из 5
Находите эту информация полезной и интересной? Тогда смело жмите на кнопки соцсетей и поделитесь этой информацией со своими друзьями и знакомыми:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик шаблона "AB-Inspiration" для самостоятельной и профессиональной настройки сайтов на WordPress для бизнеса. Основатель клуба "Мастер WordPress" и автор эксклюзивных курсов по WordPress. Фрилансер. Спикер.

Подпишись на меня в Telegram! Только важные новости и лучшие статьи
Оставьте свой комментарий:

Комментарии на Блог
16 комментариев
  1. Здравствуйте, Анфиса!
    Обновил шаблон сейчас до новой версии. Делал все правильно.
    Но контентная часть блога с левой стороны обрезалась.
    Граница проходит около букв, а ранее был сбоку отступ.

    • Евгений, зайдите в раздел «Настройки шаблона» — Стиль статьи — укажите Граница статьи — Да, укажите цвет границы.
      Это новшество в шаблоне. Завтра я опишу в статье что нового было внесено в шаблон и как этим пользоваться. Теперь, если вы не указываете границу в статьях то отступы от границы исчезают. Это нужно для тех, кто делает дизайн на всю ширину

  2. Большое спасибо, Анфиса!
    Указал: ДА и все нормально стало.
    Цвет пока не указывал.

  3. Обновила шаблон и два плагина сразу, как только увидела обновление. Вроде все работает нормально. Просто надо после обновления зайти в настройки шаблона и нажать » сохранить настройки». А потом я еще прохожу по всем виджетам и нажимаю «сохранить» И все работает. Только вот в футер у меня есть виждет текст, в котором стоят два счетчика. Почему-то сам виджет стал намного больше, раньше счетчики стояли рядом и виджет был компактный.
    Простую настройку пока не знаю, стоит ли пробовать, вроде все настроено так, как мне нравится. Может, и не совсем правильно с точки зрения дизайнеров, но мне нравится. А для новичков, и тех, кто только начинают оформлять свои блоги, думаю, такая возможность — это просто замечательно.

    • Ирина, у вас замечательный дизайн. И конечно, если вам не нужно менять внешний вид, то не обязательно использовать простую настройку. Но она хороша еще тем, что ее можно всегда отключить не теряя обычную настройку.
      Зашла на ваш сайт и вижу, что у вас выходит ошибка на странице на всю ширину. Эта проблема на сайтах которые размещены на хостинге Jino. Я уже подправила функцию и выпустила обновление 7.7. Обновите шаблон и страница исправится.

  4. Морские круизы

    Доброго времени суток, Анфиса!
    Отличная новость и функционал! *YAHOO* После обновления на одном блоге сразу не сохранил настройки и меню немного съехало, но быстро все исправил. Зато на втором блоге проделал все как положено и всё в порядке! *THUMBS UP*
    Огромное спасибо за Ваш труд! *BRAVO*

  5. Анфиса, не знаю, с чем может быть связано. но при отправлении новой статьи в соцсети — в Фейбук и В контакте не привязывется картинка к статье. Может, это временная заминка, не знаю.

  6. Сима Йосилевич

    Здравствуйте, Анфиса! Прежде всего хочу поблагодарить вас за ваш труд, за ту информацию, что вы отдаете нам!
    Я обновила wordpressдо последней версии, а затем обновила шаблон. Простую настройку я не стала делать. Появилось несколько проблем:
    1. В шапке блога появилась строка о чем мой блог. Прямо на шапке.
    2. появилось сообщение, что на блоге обнаружился вирус.
    3. RSS сразу послал сообщение с блога, что вышла статья, хотя эта статья была написана месяц назад
    4. Под статьей похожие записи в картинках немного исказились.
    5. В виджете Networkedblogs кнопка присоединиться стала темно синего цвета и не видно на ней что эта кнопка предлагает присоединиться. Правда я влезла в код этого виджета и попыталась изменить цвет кнопки на подходящий мне, но цвет текста на ней мне не удалось изменить.
    Как мне избавиться от этих проблем?

    • Сима, спасибо за описание проблем после обновления.
      1. надпись появилась поскольку у вас активирована опция в Настройках шаблона — Стиль шапки — «Отметьте галочкой если хотите загрузить логотип в виде изображения», т. е. фактически вы активировали показ заголовка сайта в виде изображения, но его не загрузили. Заголовок у вас нарисован на фоне. В новой версии шаблона я внесла заголовок в h1 для заголовка в виде изображения. Это необходимо для SEO. Раньше было так. Если пользователь загружал картинку с заголовком, на сайте отсутствовал заголовок h1, это плохо для SEO. Сейчас этот заголовок есть и он у вас отображается в виде текста. Чтобы его небыло видно, необходимо сделать лого в виде изображения, как это написано в настройках (вы активировали эту опцию!!!). Что нужно сделать. Необходимо от фона отделить название вашего сайта. Фон это одно, название сайта это другая картинка на прозрачном фоне.
      2. Сообщения о вирусе не вижу. Где именно выходит сообщение? Что именно написано.
      3. Про RSS не могу сказать. Возможно какой-то сбой с RSS. Нужно понаблюдать.
      4. Исказились те миниатюры, которые загружены очень маленькими. В разделе «Похожие записи» изображение отображается в квадратном виде 132 на 132 пикселя. Например у вас в статье миниатюра размером 132 на 74. Высота получается меньше 132 и в Похожих записях она вытянулась до 132. Как исправить? Открыть те статьи, где искажена миниатюра в Похожих записях и поменять миниатюры на картинки большего размера (минимум 132 на 132).
      5. Если вы хотите убрать фон, то в стилях напишите background-color:transparent. Чтобы задать цвет текста добавьте к стилю цвета !important, должно выглядеть так: color:#ffffff !important. Также можно увеличить ширину: width:190px, тогда текст «Присоединиться к блогу» будет в одну строчку.

      • Сима Йосилевич

        Анфиса, сообщение о вирусе выскакивает в админке и приходит на эл. почту.
        С темой письма Virus suspected
        В самом письме вот такой текст:
        The daily antivirus scan of your blog suggests alarm.

        Notify message by AntiVirus for WordPress
        http://wpantivirus.com

        • Сима, так не могу сказать. Нужно смотреть. Похоже на просто подозрение на вирус. Этот плагин подозревает вирусы во всех фреймах (все вставки кодов из соц сетей, а также видео на вашем блоге это фреймы). Нужно посмотреть. Войдите, пожалуйста, в контакт по скайпу завтра, посмотрим.

          • Сима Йосилевич

            Спасибо, Анфиса! Сделаю. *IN LOVE*

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

Добавить комментарий для Морские круизы Отменить ответ

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