Шаблон "Atom"

В данной статье рассмотрим настройку оформления блоков в шаблоне "Atom":

• Баннер на главной слева (шаблон Atom)
• Баннер на главной справа (шаблон Atom)
• Баннер на главной внизу (шаблон Atom)
• Социальные кнопки и адрес в футере (шаблон Atom)
• Есть вопросы? Звоните 24/7! (шаблон Atom)
• Почта в шапке (шаблон Atom)
• Текст в хедере (шаблон Atom)
• Таблица слева на главной (шаблон Atom)
• Меню в футере,мобильная версия (шаблон Atom)
• Социальные сети в футере,мобильная версия (шаблон Atom)

Особенности шаблона

• Изображения в выпадающем списке подкатегорий
• Блоки на главной
• Мобильная версия
• Карточка товара
• Примечание: в случае медленной работы шаблона.

Внимание!

Шаблон "Atom" может быть установлен только на магазин версии 6.5.4 и выше. Если Ваш магазин версии ниже, пожалуйста, обновите магазин до версии 6.5.4 и выше до начала работ с шаблоном.

 

Баннер на главной слева (шаблон Atom)

Рисунок 1. Баннер на главной слева.

Для редактирования блока перейдите в раздел "CMS - Статические блоки", найдите в списке блок с названием "Баннер на главной слева (шаблон Atom)" и с ключом доступа "banner_left_atom", после чего перейдите в его редактирование:

Далее нажмите на иконку загрузки изображения (рис. 2):

Рисунок 2.

 

Блок "Баннер на главной справа (шаблон Atom)"

Блок "Баннер на главной справа (шаблон Atom)" Рисунок 1. пункт 2. Баннер на главной справа (шаблон Atom).

Для редактирования блока перейдите в раздел “CMS - Статические блоки”, найдите в списке блок с названием “Баннер на главной справа” и с ключом доступа “banner_right_atom” (рис. 3), после чего перейдите в его редактирование:

Нажмите на кнопку “Источник”, чтобы перейти в редактирование HTML-кода (рис. 3):

Рисунок 3. Режим "Источник".

Теперь рассмотрим, какие параметры Вы можете изменять для настройки баннера на главной справа:

1, 2) Изображение (Изображение загружается аналогичным способом как на Рис.2);

2) Ссылка на страницу при нажатии на изображение;

Данная ссылка формируется следующим образом: <a href="#">Подробнее</a>

Вместо "#" в кавычках Вы указываете путь, куда клиент должен переходить при нажатии на изображение.

Блок "Баннер на главной внизу (шаблон Atom)"

Рисунок 4. Баннер на главной внизу.

Для редактирования блока перейдите в раздел “CMS - Статические блоки”, найдите в списке блок с названием “Баннер на главной внизу” и с ключом доступа “banner_right_atom_bottom” (рис. 4), после чего перейдите в его редактирование:

Изображение загружается аналогичным способом как на Рис.2

Рисунок 5. 

Блок "Социальные кнопки и адрес в футере (шаблон Atom)"

Рисунок 6. Социальные кнопки и адрес в футере.

Для редактирования блока перейдите в раздел “CMS - Статические блоки”, найдите в списке блок с названием “Баннер на главной внизуо” и с ключом доступа “banner_right_atom_bottom” (рис. 6), после чего перейдите в его редактирование:

Нажмите на кнопку “Источник”, чтобы перейти в редактирование HTML-кода (рис. 7):

Рисунок 7. Режим "Источник".

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

В представленном коде Вы можете отредактировать ссылки, ведущие на ту или иную социальную сеть.

Для этого достаточно указать в коде href"#" вместо знака # url адрес к социальной сети.

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

<li> , например, <li><a class="fa fa-facebook" href="#">&nbsp;</a></li> затем сохраните изменения. 

Блок "Есть вопросы? Звоните 24/7! (шаблон Atom)"

Рисунок 8. Есть вопросы? Звоните 24/7!.

Для редактирования блока перейдите в раздел “CMS - Статические блоки”, найдите в списке блок с названием “Баннер на главной внизу” и с ключом доступа “banner_right_atom_bottom” (рис. 8), после чего перейдите в его редактирование:

Блок "Почта в шапке (шаблон Atom)"

Рисунок 9. Почта в шапке.

Для редактирования блока перейдите в раздел “CMS - Статические блоки”, найдите в списке блок с названием “Почта в шапке (шаблон Atom)” и с ключом доступа “header_info_email” (рис. 9 ) после чего перейдите в его редактирование.

Информация из данного блока выводится здесь (рис. 10)

Рисунок 10.

Блок "Текст в хедере (шаблон Atom)"

Рисунок 11. Текст в хедере .

Для редактирования блока перейдите в раздел “CMS - Статические блоки”, найдите в списке блок с названием “Баннер на главной внизу” и с ключом доступа “header_text” (рис. 11) после чего перейдите в его редактирование:

Рисунок 12.

Информация из данного блока выводится здесь (рис. 12)

Блок "Таблица слева на главной (шаблон Atom)"

Рисунок 13. Таблица слева на главной.

Для редактирования блока перейдите в раздел “CMS - Статические блоки”, найдите в списке блок с названием “Таблица слева на главной” и с ключом доступа “table_left_atom” (рис. 14 ) после чего перейдите в его редактирование:

Рисунок 14.

Рассмотрим более подробно редактирование данного статического блока.

В данном блоке можете изменить изображение и текст таблицы. Для этого перейдите в режим Источник, замените текст "Бесплатная доставка" и "от $50" на свой. Загрузить свое изображение можете как было указано в инструкции ранее.

Блок "Меню в футере,мобильная версия (шаблон Atom)"

Рисунок 15. Меню в футере.

Для редактирования блока перейдите в раздел “CMS - Статические блоки”, найдите в списке блок с названием “Меню в футере,мобильная версия (шаблон Atom)” и с ключом доступа “AtomMobileFooterBottom” (рис. 15) после чего перейдите в его редактирование:

Код в режиме "Источник" Вы можете редактировать следующим образом/ Рассмотрим на примере одного из элементов, например, Корзина. В коде Корзина можете изменить путь к странице, указав нужную ссылку вместо "cart", но в данном случае ссылка должна быть заключена в кавычках и можете изменить слово "Корзина" на другой пункт меню. Также если Вы не хотите, чтобы отображался данный пункт в мобильной версии, можете убрать галочку у данного статического блока.

Блок "Социальные сети в футере,мобильная версия (шаблон Atom)"

Рисунок 16. Социальные сети в футерей.

Для редактирования блока перейдите в раздел “CMS - Статические блоки”, найдите в списке блок с названием “Социальные сети в футере,мобильная версия (шаблон Atom)” и с ключом доступа “AtomMobileFooterSocial” (рис. 16) после чего перейдите в его редактирование:

Рассмотрим подробнее редактирование данного блока. Если какой либо элемент необходимо удалить из блока, например, Доставка, перейдите в режим Источник и удалите полностью код <div class="col-xs-6"><a href="cart">Корзина</a></div> Затем сохраните изменения. 

Теперь рассмотрим особенности данного шаблона

 

Изображения в выпадающем списке подкатегорий

Для того, чтобы вывести данное отображение, необходимо в редактировании категории загрузить изображение (рекомендуемый размер 740x700px)

Рисунок 17.

Далее необходимо перейти в пункт меню "Дизайн" - "Настройки шаблона" - поставить здесь галочки

Рисунок 18.

 

Блоки на главной

Еще одной из основных особенностей является то, что блоки Хиты, Скидки, Новинки выводятся в один ряд и отображаются путем перещелкивания

Рисунок 19.

 

Мобильная версия

Главной особенностью мобильной версии, что находится в данном шаблоне, это возможность просматривать фотографии товара в увеличенном виде при нажатии на неё.

 

Карточка товара

Если Вы перейдете в карточку товара, можете заметить еще одну особенность, это то, что в карточке товара представлено отображение категорий (Рис. 19)

Рисунок 19.

 

Примечание

Если вы заметили медленную работу сайта, то необходимо перейти в пункт меню Дизайн, нажать на кнопку "Редактор CSS стилей" (рис.20) и в открывшемся окне прописать следующий код (рис.21):

.preloader-wrapper
{
display:none;
}

Рисунок 20.

Рисунок 21.

В данной статье мы рассмотрели блоки шаблона "Atom" и его особенности.

Всё готово.