Размещение кнопок на сайте

9 июня 2023

Категории
Категории
Администратор
  • 4 мин
  • 227

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

Рассмотрим первый вариант: по кнопке открывается форма обратной связи.
Заходим в CMS на страницу где нужно вывести кнопку, выбираем в меню медиаблок Кнопка.
Заполняем поля:

  • текст кнопки должен содержать 1-2 слова действия. Это надпись на кнопке.
  • вид кнопки - по умолчанию будет небольшое скругление, если нужна прямоугольная кнопка без скругления - выберите Прямоугольная. Если нужна кнопка с большим скруглением, выберите Скруглённая
  • Зададим цвет кнопки из списка цветов. Кнопка может быть прозрачной с контуром, тогда цвет кнопки укажите прозрачный, а цвет контура выберите из предложенного списка.
    Если кнопка будет цветная, тогда выберите цвет кнопки и контура одинаковым.
  • Действие: для вывода формы при клике на кнопку выбираем Форма
  • Выбираем подходящую форму из списка. Формы нужно создать заранее, см. урок 13
  • Сохраняем

Проверяем вывод кнопки на сайте.

Медиаблок «Кнопка»
Заполнение полей для кнопки заполнения формы

Видим кнопку Записаться, по клику на кнопку открывается форма. Заполним поля и посмотрим куда поступает информация о заявке на сайте.
Информация о заполненной форме поступает в cms сайта в разделе Формы и на почту, которую вы указали в свойствах самой формы.

! Обратите внимание, что одну и туже форму можно вывести на странице сайта только один раз. 

Теперь перейдем к оформлению кнопки для перехода на страницу сайта.

Вернемся в cms на страницу где нужно вывести кнопку. Выберем медиаблок кнопка.

Заполним свойства кнопки

- Текст кнопки, 1-2 слова, например будем вести пользователя на каталог товаров. Кнопку назовем Инструкции

- Вид кнопки. Обратите что все кнопки на сайте должны быть одинаково скругленными.

- Цвет кнопки. Задайте цвет кнопки

- Действие при клике - выберите Ссылка.

- В поле Ссылка пропишите ссылку на страницу сайта, для этого перейдите на страницу сайта на которую должен быть переход и скопируйте url. Теперь вставьте ссылку в пустое поле и сохраните.

Перейдем на сайт и посмотрим отображение и функционал новой кнопки.
Видим кнопка Инструкции - при клике переходим на страницу с инструкциями.

Заполнение полей для кнопки «Ссылка»

Теперь научимся по кнопке открывать или скачивать файл.

Перейдем в cms, на страницу. Выберем медиаблок Кнопка.

Заполним свойства кнопки

- Текст кнопки. Например «Скачать образец»

- Вид кнопки

- Цвет кнопки

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

Перейдем на сайт и проверим работу кнопки «Скачать образец». По клику на кнопку должен загрузиться файл.

Заполнение полей для кнопки скачивания