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

Мы получили от вас вопросы о том, как реализовать навигацию с помощью липкой боковой панели, как в недавно реализованной теме 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 (1 Голоса)
Шаблон App Store
Previous

Шаблон App Store

Оставить отзыв
Новое поколение электронной коммерции Joomla начал...
Читать далее
Персональная и туристическая тема блога
Далее

Персональная и туристическая тема блога

Оставить отзыв
Минималистическая тема для личного и туристическог...
Читать далее

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

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

ТЕГИ

Популярные

Fitness Theme Stone & Создание сайтов Joomla

Fitness Theme Stone & Создание сайтов Joomla

Оставить отзыв
С каждым новым обновлением Gridbox для Joomla Website Builder становится вс...
Читать далее

Последние материалы

Создать интернет магазин конструктор

Создать интернет магазин конструктор Gridbox Store

Оставить отзыв
Пришло время для большого заявления! Мы готовы поднять занавес и официально...
Читать далее
Плагин для Instagram для сайта. Индивидуальный подход к вашему бренду

Плагин для Instagram для сайта. Добавьте индивидуальный подход к вашему бренду

Оставить отзыв
Представляем вам плагин для вашего сайта - Instagram, который предоставляет...
Читать далее
Персональная и туристическая тема блога

Персональная и туристическая тема блога

Оставить отзыв
Минималистическая тема для личного и туристического блога Onefold. Если вы ...
Читать далее

Категории

Follow us