Купить Корзина
  • Вход
  • Помощь
  • Конструктор и CMS
  • Рег.сайт
  • Работа с модулями Рег.сайт
  • Модули «Карточка» и «Флипбокс» в Рег.сайте

Модули «Карточка» и «Флипбокс» в Рег.сайте

В статье мы рассмотрим два информационных модуля в Рег.сайте: «Карточка» и «Флипбокс».

При помощи модуля «Карточка» на страницу вашего сайта можно добавить изображение с текстом и кнопкой. Её можно использовать как превью товара или новости на сайте:

Пример модуля Карточка

Флипбокс — это модуль, в который можно добавить заголовок, текст, изображение и ссылку. Он состоит из двух элементов: один отображается на странице по умолчанию, а второй появляется при наведении на модуль. Смена элементов сопровождается анимацией «переворота»:

Пример Флипбокса

Рассмотрим, как добавить и настроить каждый модуль.

Как настроить модуль «Карточка»

  1. 1.
    Войдите в режим редактирования сайта.
  2. 2.
    Выберите строку, в которую хотите добавить модуль, и нажмите на серый плюс.
  3. 3.

    Выберите модуль Карточка:

    Добавить модуль Карточка

Готово, теперь переходите к настройкам во вкладках «Контент», «Дизайн» и «Дополнительно».

Контент

В блоке «Текст» можно настроить:

  • Заголовок и подзаголовок карточки. Введите их в соответствующие поля:

Блок Текст во вкладке Контент для Карточки

  • Контент под заголовком и подзаголовком внутри модуля. Для редактирования текста доступен текстовый редактор. Также можно добавить изображение. Для этого нажмите Добавить медиа:

Добавить медиа в заголовок карточки

В блоке «Изображение и значок» настраивается:

  • Основное изображение модуля.
  • Вариант отображения картинки: без изменения границ или в качестве фона.
  • Текст значка в правом верхнем углу модуля:

Пример значка в модуле карточка

В блоке «Иконка» можно добавить иконку под картинку. Для этого переведите переключатель в положение ДА и выберите иконку из предложенного списка:

Пример значка в модуле карточка

В блоке «Ссылка» настраивается:

  • Переход по ссылке при нажатии по модулю.
  • Переход по ссылке при нажатии на значок.

В блоке «Кнопка» настраивается текст кнопки, ссылка и вариант перехода по ссылке: в этой же или новой вкладке:

Настройка кнопки в модуле карточка

В этой же вкладке можно настроить фон (однотонный, градиент, изображение или видео) для всего модуля.

Дизайн

В блоке «Макет и выравнивание» настраивается положение элементов модуля. Вы можете выбрать два варианта расположения элементов:

  • Сложены — элементы будут расположены сверху вниз:

Макет модуля карточка 1

  • В линию — элементы будут расположены слева направо:

Макет модуля карточка 2

В блоке «Изображение» настраивается ширина, выравнивание (слева, справа или по центру) и границы изображения.

В блоке «Значок» настраивается положение, границы и шрифт значка:

Значок в модуле карточка

В этой же вкладке можно настроить внешний модуля с помощью блоков:

  • «Текст» — выравнивание, цвет и тень текста.
  • «Заголовок Текст» — форматирование заголовка.
  • «Тело Текст» — форматирование основного текста.
  • «Подзаголовок Текст» — форматирование подзаголовка.
  • «Размеры» — размер модуля на странице.
  • «Кнопка» — внешний вид кнопки.
  • «Отступы» — отступы между элементами и другими модулями слева, справа, сверху и снизу в пикселях.
  • «Границы» — добавить и закруглить границы модуля для всех или для каждого угла отдельно.
  • «Тень контейнера» — настроить тень модуля.
  • «Фильтр» — настройка внешнего вида модуля при помощи графических фильтров.
  • «Преобразовать» — масштабирование, поворот и перекос модуля.
  • «Анимация» — настройка анимации перед появлением модуля на экране.

Дополнительно

Эта вкладка дает возможность опытным пользователям работать с модулем при помощи CSS и HTML. Также здесь можно настроить видимость модуля на разных устройствах (компьютер, телефон и планшет).

Как настроить модуль «Флипбокс»

  1. 1.
    Войдите в режим редактирования сайта.
  2. 2.
    Выберите строку, в которую хотите добавить модуль, и нажмите на серый плюс.
  3. 3.

    Выберите модуль «Флипбокс»:

    Как добавить модуль Флипбокс

  4. 4.

    Модуль состоит из 2 элементов: первый видно на странице по умолчанию, а второй отображается при наведении курсора на модуль. Если увести курсор с модуля, на экране снова появится первый элемент. Чтобы создать элемент, нажмите Добавить новый элемент:

    Как добавить новый элемент в модуль Флипбок

  5. 5.

    Введите заголовок и основной текст в текстовом редакторе:

    Текстовый редактор в модуле Флипбокс

  6. 6.
    Чтобы сохранить элемент, нажмите на зелёную кнопку с галочкой.

Готово, вы добавили модуль «Флипбокс». Чтобы добавить ещё один элемент, повторите действия с 6 шага.

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

Контент элемента

  • В блоке «Текст» настраивается заголовок и текст элемента.
  • В блоке «Изображение и значок» можно добавить картинку и значок.
  • В блоке «Кнопка» можно добавить переход по ссылке при нажатии на модуль:

Настройка кнопки в Флипбоксе

В этой же вкладке можно настроить фон (однотонный, градиент, изображение или видео).

Контент модуля

  • В блоке «Ссылка» можно добавить переход по ссылке при нажатии на модуль.
  • В блоке «Фон» можно настроить фон (однотонный, градиент, изображение или видео) для всего модуля:

Настройка фона в модуле Флипбокс

Дизайн

В этой вкладке можно настроить внешний вид элемента с помощью блоков:

  • «Изображение и значок» — настройка ширины, выравнивания (слева, справа или по центру) и границы изображения и значка.
  • «Текст» — выравнивание, цвет и тень текста.
  • «Заголовок Текст» — форматирование заголовка.
  • «Тело Текст» — форматирование основного текста.
  • «Подзаголовок Текст» — форматирование подзаголовка.
  • «Размеры» — размер элемента на странице.
  • «Кнопка» — внешний вид кнопки.
  • «Отступы» — отступы между элементом и модулями слева, справа, сверху и снизу в пикселях.
  • «Граница» — добавить и закруглить границы элемента для всех или для каждого угла отдельно.
  • «Тень контейнера» — настроить тень элемента.
  • «Фильтр» — настройка внешнего вида при помощи графических фильтров.
  • «Преобразовать» — масштабирование, поворот и перекос элемента.

Дополнительно

Эта вкладка дает возможность опытным пользователям работать с модулем при помощи CSS и HTML. Также здесь можно настроить видимость модуля на разных устройствах (компьютер, телефон и планшет).

Помогла ли вам статья?

Спасибо за оценку. Рады помочь 😊

 👍
Рассылка Рег.ру

Лайфхаки, скидки и новости об IT

Подписываясь, вы принимаете правила рассылок

Продукты
  • Домены
  • Хостинг
  • Создание сайтов
  • Рег.облако
  • Серверы и ДЦ
  • SSL-сертификаты
  • Сервисы
Полезное
  • Стоимость услуг
  • База знаний
  • Документы
  • Whois
  • Магазин доменов
  • ЭДО
  • Партнерам
  • Сообщить о нарушении
Компания
  • О компании
  • Контакты
  • Офисы
  • Новости
  • Акции и скидки
  • Мероприятия
  • Блог
  • Отзывы клиентов
+7 495 580-11-11 Телефон в Москве
8 800 555-34-78 Бесплатный звонок по России
  • vk
  • telegram
  • ok
  • moikrug
  • youtube
  • twitter
  • Банковская карта
  • Система быстрых платежей
  • SberPay
  • QIWI-кошелёк
  • ЮMoney
  • Наличные
  • Безналичный перевод
Все способы оплаты

Нашли опечатку?
Выделите и нажмите Ctrl+Enter

  • © ООО «РЕГ.РУ»

    Правовая информация и правила пользования

  • Мы используем файлы cookie. Продолжив работу с сайтом, вы соглашаетесь с Политикой обработки персональных данных и Правилами пользования сайтом.