Настройка темы AVADA. Крутой конструктор сайтов

Настроить тему AVADA не сложно. Это очень понятный конструктор среди многочисленных мультитем с удобным интерфейсом. Если у вас она уже есть (купили, вам ее подарили, или третий  вариант), тогда статья специально для вас. Вот основные пункты установки и настройки этого красивого шаблона для WordPress:

1. Установка темы AVADA на WordPress

  • Распаковываем скачанный архив. В архиве есть еще 2 архива: avada theme и avada child theme. Эти архивы не надо распаковывать. Их нужно по очереди загрузить на wordpress: внешний вид > темы > добавить новую. Сначала надо загрузить avada theme, а потом детскую (child). Детская тема — это страховка. Если возникнут жесткие косяки в дальнейшей настройке (полная лажа), их можно легко удалить вместе с этой темой. При чем, с сайтом все будет нормально, он будет работать на отцовской теме.
  • Тема появится в меню и сразу же запросит установку плагинов. Путь к плагинам: avada > plagins. Обязательно установите плагин Fusion builder. Это конструктор сайта, который дает возможность тонкой настройки и еще дает возможность разбить каждую станицу на блоки (контейнеры) и потом вносить туда разнообразное содержимое (текст, фото, скрипты, слайды, виджеты и т.д.). Fusion core — основной плагин, он отвечает за функциональность темы и установку простого слайдера Fusion Slider.  Layer Slider и Slider Revolution  — премиум слайдеры, доступ к которым дают после регистрации на сайте разработчика темы. Чтобы получить такой доступ, нужно войти: avada > product registration и в разделе с инструкциями (под полем для внесения ключа) нажать на ссылку сайта, зарегистрироваться там, подтвердить почту и потом вставить полученный ключ в поле активации. После этого перейти в плагины и установить премиум версии. Плагин Woocommerce  доступен без регистрации.

Теперь установка темы Авада закончена, переходим к настройке:

2. Настройка темы Авада

  • Выбираем в меню путь: Авада — настройки темы (theme options). Я думаю, необходимо начать с хедера (шапки сайта). В Авада их 7 штук. Для выбора типа хедера переходим в настройках темы в раздел header — header content и выбираем заголовок  сайта. Внизу раздела хедер контент в зависимости от типа хедера будет меню с выбором текста в каждой части шапки (контактная информация, социальные кнопки, слоган). Надо указать свои контакты и место их публикации (правая-левая часть ТОП меню (secondary menu) для контактов и кнопок соц сетей). В Avada есть два типа меню хедера: main menu- основное (под хедером) и второстепенное (secondary) — над шапкой сайта. Именно в нем и будет отображаться контактная информация. Хотя ее можно влепить вместо слогана посредине заголовка сайта. При настройке меню непосредственно в вордпресc (путь: внешний вид — меню) это второстепенное меню будет указано как «ТОП меню». Если в таком меню надо поставить навигацию (кнопки по сайту), тогда вновь созданному меню нужно присвоить категорию ТОП меню (поставить галочку). Кроме того, необходимо задать цвет и разделы плавающему хедеру, который будет двигаться вниз вместе с прокруткой страницы и всегда будет в поле зрения (sticky header). Header background image — загрузить фоновое изображение для шапки сайта.
  • Avada — theme optoins — logo. Установка логотипа и фавикона.(есть возможность поставить фавикон и логотип для различных типов мониторов — мобилка, планшет, ПК).
  • Avada — theme optoins — menu. Настройка цвета, размера фона и текста в главном, второстепенном и выпадающем меню (выпадающее меню — это подразделы для каждой кнопки главного меню, такое выпадающее меню можно отобразить в режиме Mega menu. Это даст возможность прикрепить к каждому пункту меню изображение и даже целый виджет. Включается мега меню в разделе advansed-theme features. Но если нужно простое меню (dropdown), тогда лучше эту опцию не включать.
  • Theme options-layout (настройки темы-перетяжка) — выбор ширины сайта (на весь экран или задать фиксированный размер). Выбор ширины сайдбаров с виджетами.
  • Colors (цвета) — выбор основного цвета темы.
  • Background — загрузка изображения для фона сайта или выбор его цвета.
  • Далее идут разделы с настройками футера, сайдбаров, блога, шрифтов. Там нет ничего сложного.
  • Если у вас интернет-магазин и вы установили плагин woocommerce, вам буде также доступна функция настройки плагина в настройках темы, где можно задать число отображаемых столбцов товара на странице, включить или отключить фильтр отображения товара, вкл/выкл видимость корзины и кабинета в главном или второстепенном меню, включить или отключить видимость социальных кнопок под карточкой товара и т. д. Более подробно о его настройке читайте в статье: Как настроить Woocommerce.


  • В разделе Socsal Media надо вставить ссылки на ваши соц. сети и задать цвет иконок (пользовательский или цвет бренда). Без вставки ссылки, иконка отображаться не будет. Там есть отдельная настройка иконок шапки сайта, подвала (футера) и кнопок  поделиться (sharing).
  • Самый главный раздел настроек темы avada — Fusion Builder Elements. Тут есть все для красивой и легкой (одним щелчком) настройки стилей дизайна сайта (css). Это настройка всех элементов, которые вы установили на страницах и в других местах ( например, кнопки (тон кнопок, 3D-эффект кнопки), фоны для изображений, различные боксы, слайдеры, иконки, флип-коробки и многое другое.

 

 

Чтобы понять, какой элемент как выглядит и какая его функция, смотрите презентацию элементов непосредственно на сайте разработчика avada: theme-fusion в разделе меню elements.

Все эти элементы помогут создать действительно красивый сайт. Их можно вставлять непосредственно в текст во время редактирования страницы (статьи), или же в режиме редактирования нажать кнопку use default editor. Это кнопка добавления конструктора, что дает возможность разбивать страницу на отдельные части (добавить контейнер), а потом в каждую часть внести нужный «элемент» , которых так много в Авада:
Во время создания страницы или записи, в самом низу есть опция добавления слайдера на страницу. Но перед этим его нужно создать (дать ему название, добавить изображения и тому подобное). Вы можете выбрать любой из трех выше описанных слайдеров (fusion slider, slider revolution, layer sider) и настроить их по своему вкусу, и уже потом добавляйте их на страницу.

3. Как обновить тему AVADA самостоятельно

Бывает, что устаревшая тема создает конфликты с плагинами, особенно с woocommerce (не работают атрибуты ( вариации) товара). Для обновления темы, нужно для начала обзавестись последней версией. Далее необходимо активировать на сайте любую бесплатную тему, а старую Аваду удалить вместе с дочерней темой. Потом также по очереди загрузить два архива новой темы. Поскольку весь контент сайта остается на месте, база данных на хостинге (mySQL) также осталась прежней, то после переустановки в течении нескольких секунд сайт полностью возобновит свой прежний вид со всеми страницами и контентом (статьи, фото, товар, категории, теги).

4. Преимущества купленной темы:

Лицензионная версия с ключем дает возможность простого автообновления в один клик с админки wordpress (как плагины). Кроме того, в крякнутых версиях автоматом загрузить премиум плагины с меню не получится. Придется вручную загружать архивы. Обновление также будет недоступно и все время ( раз в месяц или 2 месяца) надо будет вручную перезаливать тему со всеми премиум плагинами. Кроме того, сейчас без активации невозможно зайти в демо версии, чтобы поставить себе на сайт. Я недавно одному своему клиенту купил лицензионную AVADA на сайте Evanto Market с поддержкой пол года и пожизненным автообновлением. Кто его знает, что прячется в бесплатных кряках. В раскрученных сайтах постоянный перезалив темы создает огромный риск словить вирус и попасть под фильтр.

Как выглядит сайт, созданный с помощью AVADA, смотрите в моем Портфолио.
От | 2018-07-11T20:14:49+00:00 Апрель 25th, 2017|Тема Avada|12 комментариев

12 комментариев

  1. Виктор Макаров Март 18, 2018 at 10:06 пп - Ответить

    Добрый день. В конструкторе в настройках любого элемента есть пункты» Gneral, Общий». В общем можно настроить CSS. Как это сделать на практике. Например мне нужно задать тип и цвет шрифта. Спасибо.

    • Игорь Хабурский Март 19, 2018 at 7:26 дп - Ответить

      Здравствуйте. Цвет и размер шрифта для каждого заголовка или всего текста можно задать в опциях авады — Typography (avada-theme options-typography). Там же можно загрузть свои шрифты (файл TTF) из гугл фонтс. Путь: avada-theme options-typography-fonts. Шрифт в google fonts надо выбирать на кириллице, а после загрузки на сайт, в разделе типография указать для заголовков его название и сменить галочку латинь на кириллицу для каждого заголовка.У меня есть отдельная статья, приблизительно на эту тему «Авада — перевод на криллицу, шрифты

  2. Виктор Макаров Март 19, 2018 at 7:03 пп - Ответить

    Спасибо Игорь, попробую.

  3. вопрос Март 25, 2018 at 7:52 дп - Ответить

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

    • Игорь Хабурский Март 25, 2018 at 8:32 дп - Ответить

      AVADA — адаптивная тема под все устройства. Отдельно создавать мобильную версию нет необходимости. У моих клиентов прекрасные позиции в мобильном поиске.

    • Игорь Хабурский Апрель 4, 2018 at 5:12 дп - Ответить

      Извините. Не правильно понял вопрос. Действительно в мобильном меню Авада нет поиска по сайту. Приходится или делать ссылку на страницу поиска или на виджет с окном поиска.

  4. Евгений Март 30, 2018 at 9:28 дп - Ответить

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

    может сталкивались с подобным и есть готовое решение?

    • Игорь Хабурский Март 30, 2018 at 6:55 пп - Ответить

      Тоже об этом думал. Но как то не приходилось делать разные кнопки. Из ситуации выходил тем, что все меню делал текстовым с одной только кнопкой)

  5. Дарья Апрель 3, 2018 at 10:05 дп - Ответить

    Здравствуйте. Мне подарили тему Авада, но столкнулась с тем, что совершенно пропали настройки меню. То есть они на секунду появились, а затем осталось пустое окно с некоторыми ползунками и настройками типографии. Может кто-то подскажет в чем может быть проблема?

    • Игорь Хабурский Апрель 3, 2018 at 5:06 пп - Ответить

      Или новую тему залейте, или вордпрес обновите

  6. Jack Май 18, 2018 at 8:19 дп - Ответить

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

    может кто в курсе как активировать аваду подправив файлик class-avada-product-registration раньше была инструкция, но теперь не подходит, код изменен….

    • Игорь Хабурский Май 18, 2018 at 8:36 дп - Ответить

      При заливке фоновой картинки в медиафайлах во время выбора фото надо выбрать его полный размер. У вас по умолчанию средняя или минимальная копия подтягывается. Поставьте галочку на полном размере и проблема исчезнет. На счет активации — не знаю. Раньше делал через тот самый код. Сейчас покупаю тему для нормальных обновлений. Без них с новыми версиями вордпрес или вукомерс будут конфликты.

Оставить Комментарий