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

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

Шаблон App Store

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

Шаблон интернет-магазина Raley

Оставить отзыв
Вам нужна свежая и модная тема для вашего нового и...
Читать далее

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

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

ТЕГИ

Популярные

Cоздание сайта на joomla. The Harbor Gridbox Theme

Cоздание сайта на joomla. The Harbor Gridbox Theme

Оставить отзыв
Cоздание сайта на Joomla с красивой и современной темой Harbour! Креативная...
Читать далее

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

Тема для ресторана Joomla Theme Maestro

Ресторан Joomla Theme Maestro

Оставить отзыв
Представляем вам новую, стильную и гармоничную тему для ресторана Joomla Th...
Читать далее
Анимация Падающего Конфетти.

Анимация Падающего Конфетти.

Оставить отзыв
Новый год уже не за горами! Самое время украсить свой веб-сайт. Сегодня у н...
Читать далее
Прикрепленный столбец в боковой панеле сайта

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

Оставить отзыв
Мы получили от вас вопросы о том, как реализовать навигацию с помощью липко...
Читать далее

Категории

Follow us