Прикрепленный столбец в боковой панели сайта

Мы получили от вас вопросы о том, как реализовать навигацию с помощью липкой боковой панели, как в недавно реализованной теме Gridbox Snoop . Итак, сегодня мы собираемся показать вам, как создавать и где использовать Sticky Column (прикрепленный столбец) на сайтах Gridbox.

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

Примеры для вашего вдохновения

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

Липкая боковая панель

Сделайте так, чтобы ваш баннер, недавние сообщения, продукты, список категорий или любой другой контент всегда были видны, пока покупатель прокручивает страницу. Увеличивайте количество кликов с помощью липкой боковой панели.

Добавить в корзину

Sticky Add To Cart - отличное решение, если у вашего продукта длинное описание или галерея. Используя трюк с закреплением столбца, кнопка «Добавить в корзину» всегда видна, что упрощает процесс оформления заказа для ваших клиентов. Получите больше кликов с помощью липкой кнопки «Добавить в корзину»!

Пошаговое руководство

После ознакомления с идеями реализации Sticky Column пришло время практической части. Так что следуйте инструкциям ниже!

Шаг 1. Скопируйте суффикс класса.

sticky-sidebar

Шаг 2. Скопируйте код CSS.

Скопируйте код CSS и вставьте его в редактор кода Gridbox.

Прикрепленный столбец в боковой панеле сайта

@media (min-width769px){

.sticky-sidebar .column-wrapper {

   displayblock !important;

}

 

.sticky-sidebar .column-wrapper .ba-grid-column-wrapper:nth-child(1) {

   position: sticky;

   top160px;

  }

}

  • nth-child (1) - порядковый номер столбца;
  • top: 160px - липкий столбец прилипает, когда вы достигаете положения прокрутки.

Это все, что вам нужно знать, чтобы создать липкий столбец в сетке конструктора сайтов Joomla. Поиграйте с Sticky Column и поделитесь с нами результатами !

Рейтинг 5

Теги страницы

Это интересно