Site Generator Panel

Основная информация

Название

Тип секции

Описание

<section class="reviews-fade-section">
  <div class="reviews-fade-container">
    <div class="reviews-fade-viewport" id="reviewsFadeViewport">
      {{sliderItem}}
      <div class="reviews-fade-slide" data-index="{{index}}">
        <div class="reviews-fade-quote">
          <svg class="reviews-fade-quote__icon" width="40" height="40" viewBox="0 0 24 24" fill="var(--primary-color)" opacity="0.2"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378C7.28 7.723 6.334 9.765 6.088 11.549 6.588 11.3 7.172 11.2 7.749 11.249 9.456 11.404 10.778 12.832 10.778 14.555c0 1.796-1.456 3.249-3.252 3.249-.903 0-1.768-.38-2.386-1.044zm10.06 0C13.612 16.227 13.06 15 13.06 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-2.643 1.522-3.589 3.564-3.835 5.348.5-.249 1.084-.349 1.661-.3 1.707.155 3.029 1.583 3.029 3.306 0 1.796-1.456 3.249-3.253 3.249-.902 0-1.767-.38-2.386-1.044z"/></svg>
          <p class="reviews-fade-slide__text">{{reviewText}}</p>
        </div>
        <div class="reviews-fade-slide__footer">
          <div class="reviews-fade-slide__stars" style="--rating: {{rating}}"></div>
          <div class="reviews-fade-slide__author">{{authorName}}</div>
        </div>
      </div>
      {{/sliderItem}}
    </div>
    <div class="reviews-fade-controls">
      <button class="reviews-fade-btn reviews-fade-btn--prev" id="reviewsFadePrev" aria-label="Previous">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
      </button>
      <div class="reviews-fade-counter" id="reviewsFadeCounter"></div>
      <button class="reviews-fade-btn reviews-fade-btn--next" id="reviewsFadeNext" aria-label="Next">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
      </button>
    </div>
    <div class="r

Маркеры повторяющихся элементов (меню, футер, слайдер)

Меню (header):

{{menuItem}}
  <a href="{{url}}">{{title}}</a>
{{/menuItem}}

Ссылки футера (Казино):

{{footerLink}}
  <li><a href="{{url}}">{{title}}</a></li>
{{/footerLink}}

Ссылки футера (Информация):

{{footerInfoLink}}
  <li><a href="{{url}}">{{title}}</a></li>
{{/footerInfoLink}}

Слайдер / карточки:

{{sliderItem}}
  <div class="slide">...</div>
{{/sliderItem}}

Внутри маркеров: {{url}}, {{title}}, {{index}}. Слайдер: любые поля из данных слайда.

Пресеты слотов: если в настройках сайта включён режим слотов, переменные подставляются из пресетов автоматически.
Изображение: {{imageUrl}} {{image}} {{slotImage}} {{gameImage}} {{src}}
Название: {{name}} {{title}} {{gameTitle}} {{slotName}} {{slotTitle}}
Счётчик: {{index}}

Дефолтные hero изображения

Изображения по умолчанию для этого hero шаблона. Для слайдеров можно добавить несколько картинок. Могут быть переопределены в настройках сайта или на странице.

Hero изображения (слайды)

Hero Background {{heroBgImage}}

Не задано

Hero Description {{heroDescription}}

Заполнение картинки {{heroImageFit}}

Позиция картинки {{heroImagePosition}}

.reviews-fade-section {
  padding: 70px 20px;
  background: var(--body-bg);
}

.reviews-fade-container {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}

.reviews-fade-viewport {
  position: relative;
  min-height: 220px;
}

.reviews-fade-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.reviews-fade-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.reviews-fade-quote {
  position: relative;
  padding-top: 20px;
}

.reviews-fade-quote__icon {
  display: block;
  margin: 0 auto 16px;
}

.reviews-fade-slide__text {
  color: var(--article-text);
  font-size: 19px;
  line-height: 1.7;
  margin: 0 0 28px;
  font-style: italic;
}

.reviews-fade-slide__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.reviews-fade-slide__stars {
  display: inline-flex;
  position: relative;
  font-size: 0;
}

.reviews-fade-slide__stars::before {
  content: "★★★★★";
  font-size: 20px;
  letter-spacing: 4px;
  color: #ccc;
}

.reviews-fade-slide__stars::after {
  content: "★★★★★";
  font-size: 20px;
  letter-spacing: 4px;
  color: var(--primary-color);
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: calc(var(--rating, 5) / 5 * 100%);
}

.reviews-fade-slide__author {
  color: var(--article-text);
  font-weight: 700;
  font-size: 16px;
  opacity: 0.8;
}

.reviews-fade-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}

.reviews-fade-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}

.reviews-fade-btn:hover {
  background: var(--primary-color);
  color: #fff;
  transform: scale(1.08);
}

.reviews-fade-counter {
  font-size: 14px;
  color: var(--article-text);
  opacity: 0.6;
  font-weight: 600;
  min-width: 50px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.reviews-fade-progress {
  margin-top: 24px;
  height: 3px;
  background: var(--article-text);
  opacity: 0.12;
  border-radius: 3px;
  overflow: hidden;
}

.reviews-fade-progress__bar {
  height: 100%;
  background: var(--primary-color);
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 0;
}

(function() {
  var viewport = document.getElementById('reviewsFadeViewport');
  var prevBtn = document.getElementById('reviewsFadePrev');
  var nextBtn = document.getElementById('reviewsFadeNext');
  var counter = document.getElementById('reviewsFadeCounter');
  var progressBar = document.querySelector('.reviews-fade-progress__bar');
  if (!viewport) return;

var slides = viewport.querySelectorAll('.reviews-fade-slide');
  var total = slides.length;
  if (total === 0) return;

var current = 0;
  var autoplayInterval = null;
  var autoplayDelay = 6000;

function show(index) {
    current = ((index % total) + total) % total;
    for (var i = 0; i < total; i++) {
      slides[i].classList.remove('active');
    }
    slides[current].classList.add('active');

// Adjust viewport height
    viewport.style.minHeight = slides[current].offsetHeight + 'px';

// Counter
    if (counter) {
      counter.textContent = (current + 1) + ' / ' + total;
    }

// Progress
    if (progressBar) {
      progressBar.style.width = ((current + 1) / total * 100) + '%';
    }
  }

function next() {
    show(current + 1);
  }

function prev() {
    show(current - 1);
  }

function startAutoplay() {
    stopAutoplay();
    autoplayInterval = setInterval(next, autoplayDelay);
  }

function stopAutoplay() {
    if (autoplayInterval) {
      clearInterval(autoplayInterval);
      autoplayInterval = null;
    }
  }

prevBtn.addEventListener('click', function() {
    prev();
    startAutoplay();
  });

nextBtn.addEventListener('click', function() {
    next();
    startAutoplay();
  });

// Touch swipe
  var startX = 0;
  var touching = false;

viewport.addEventListener('touchstart', function(e) {
    startX = e.touches[0].clientX;
    touching = true;
    stopAutoplay();
  });

viewport.addEventListener('touchend', function(e) {
    if (!touching) return;
    touching = false;
    var diff = startX - e.changedTouches[0].clientX;
    if (Math.abs(diff) > 40) {
      diff > 0 ? next() : prev();
    }
    startAutoplay();
  });

// Pause on hover
  viewport.addEventListener('mouseenter', stopAutoplay);
  viewport.addEventListener('mouseleave', startAutoplay);

show(0);
  startAutoplay();
})();

Превью секции

Нажмите "Обновить превью" для просмотра секции

Переменные HTML

Универсальные

Название бренда

Партнерская ссылка

Домен сайта

URL логотипа

Текущий год

Кнопки

Кнопка "Регистрация"

Кнопка "Вход"

Кнопка "Зарегистрироваться"

Кнопка "Играть"

Кнопка "Присоединиться"

Кнопка "Получить бонус"

Hero изображения

Главное изображение hero

Фоновое изображение hero

Описание в hero блоке

Alt текст hero изображения

object-fit: cover / contain / fill

object-position: center / top / bottom...

SEO / Контент

H1 заголовок

Подзаголовок H1

Копирайт

Заголовок "Казино"

Заголовок "Информация"

Базовый URL медиа

Основные цвета

var(--primary-color)

Основной цвет

var(--primary-hover)

Основной при наведении

var(--secondary-color)

Вторичный цвет

var(--secondary-hover)

Вторичный при наведении

var(--accent-color)

Акцентный цвет

var(--accent-hover)

Акцентный при наведении

Цвета секций

var(--header-bg)

Фон шапки

var(--header-text)

Текст шапки

var(--hero-bg)

Фон hero-блока

var(--hero-text)

Текст hero-блока

var(--body-bg)

Фон страницы

var(--body-text)

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

var(--article-bg)

Фон статьи

var(--article-text)

Текст статьи

var(--footer-bg)

Фон футера

var(--footer-text)

Текст футера

← Назад

Редактировать шаблон секции

Основная информация

Данные слайдов

Дефолтные hero изображения

Превью секции

Переменные HTML

Универсальные

Кнопки

Hero изображения

SEO / Контент

Основные цвета

Цвета секций

Редактировать шаблон секции

Основная информация

Данные слайдов

Дефолтные hero изображения

Превью секции

Переменные HTML

Универсальные

Кнопки

Hero изображения

SEO / Контент

Основные цвета

Цвета секций

Выбрать изображение