Как редактировать HTML блок, добавленный на главную страницу

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

Как это проще сделать? Какие возможности дает конструктор интернет-магазинов 1os для оформления HTML элементов на главной странице? Об этом пойдет речь ниже.

Где находятся нужные настройки

Первое, с чего начинаются любые действия на конструкторе 1os, — вход в биллинговую панель. Она является вашим «центром управления» всеми действиями в системе. Необходимую ссылку вы получили в первом письме от 1os, которое пришло на вашу почту после регистрации. Чтобы не отвлекаться сейчас на его поиски, предлагаем осуществить вход прямо из этой инструкции:

https://billing.1os.ru/auth/login

При нажатии на нее открывается простая форма, где нудно заполнить всего 2 поля — электронную почту и пароль, которые вы указали при регистрации. Проверьте правильность внесенных данных и нажмите «ВХОД»:

Перед вами открылась биллинг-панель. Находим на ней левое вертикальное меню, вбираем пункт «МОИ САЙТЫ» и нажимаем на него:

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

Вы видите перед собой экран административной части своего-интернет-магазина — главную ее страницу со всеми доступными функциями. На верхней панели справа найдите иконку «глаз» и нажмите на нее:

Вы оказались в служебном разделе сайта. Отсюда открывается доступ к изменению различных настроек и к улучшению внешнего вида магазина. Теперь перейдем на главную страницу через нажатие на логотип, проведем курсором по экрану. Обратите внимание: по мере движения курсора вокруг некоторых блоков появляется красная рамка. Пролистайте страницу вниз и зафиксируйте этот красный контур на элементе «ВИДЕО БЛОКИ»:

Чтобы произвести здесь какие-либо изменения, нажмите кнопку «РЕДАКТИРОВАТЬ».

Что здесь можно сделать

Перед вами панель, которая позволяет менять дизайн этого блока главной страницы:

Речь идет о фоне, на котором будут отображаться HTML элементы. По умолчанию он совпадает с общим фоном страницы. Но вы можете выделить блок для акцентирования на нем внимания. У нас есть несколько вариантов:

· выбрать один из предложенных в палитре цветов;

· подобрать интересный градиент;

· остановить свой выбор на одном из паттернов.

Рассмотрим эти возможности подробнее.

Выберите цвет фона

Для начала посмотрим, как меняется впечатление от блока, если поменять цвет фона. Например, нажмем на палитре желтый кружок и кнопку «СОХРАНИТЬ»:

Результат будет выглядеть вот так:

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

Градиенты

Еще одна возможность — использовать вместо равномерной заливки градиент. Вам не придется делать растяжку цветов самостоятельно, система предлагает вам выбрать один из заранее разработанных вариантов:

Предположим, вам ближе морская тема и вы хотите вот такой градиент:

Нажмите на него, потом на кнопку «СОХРАНИТЬ». Получится вот такой фон с плавным переходом оттенков:

У вас обложки роликов в другой цветовой гамме? Отлично! Подходящий для нее градиент у нас обязательно найдется!

Паттерны

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

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

Для магазина мебели можно взять вот этот фон:

А если у вас онлайн-продажи чего-то легкого и оригинального, актуальным будет вот такой паттерн:

На самом деле, под любую тему на 1os можно подобрать интересный фон для видео.

Манипуляции с HTML элементами

Кроме изменения фона, эта панель позволяет менять порядок следования роликов, удалять их с главной страницы или дублировать элемент. Все это осуществляется с маленькой панельки, которая появляется при наведении курсора на конкретный объект:

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

После того, как вы внесли изменения в порядок следования и количество элементов, и вас все устраивает, нажмите «СОХРАНИТЬ». Если нет, то жмите «ОТМЕНА».

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

Потому что 1os — это просто!