Site Generator Panel

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

Название

Тип секции

Описание

<section class="hero-section">
    <div class="conteiner main_conteiner">
      <div class="main">
        {{h1}}

<div class="banner-slider">
          <div class="slider-container">
            <div class="slider-wrapper" id="sliderWrapper">
              {{sliderItem}}
              <div class="slide">
                <a href="{{affiliateLink}}">
                  <img src="{{slideImage}}" alt="{{slideAlt}}">
                </a>
              </div>
              {{/sliderItem}}
            </div>

<div class="banner-buttons">
          <a href="{{affiliateLink}}" class="banner-btn glowing">{{buttonSignUp}}</a>
          <a href="{{affiliateLink}}" class="banner-btn secondary">{{buttonLogin}}</a>
        </div>

</div>
    </div>
  </section>

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

Меню (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}}

h1 {
      font-size: 36px;
      font-weight: 700;
      color: var(--hero-text);
      text-align: center;
      margin-bottom: 40px;
      line-height: 1.3;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
      letter-spacing: 0.5px;
    }

.banner-slider {
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto 40px;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

.slider-container {
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
    }

.slider-wrapper {
      display: flex;
      
      height: 100%;
      transition: transform 0.5s ease-in-out;
    }

.slide {
      position: relative;
      width: 100%;
      height: 100%;
      flex-shrink: 0;
    }

.slide a {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

.slide img {
      width: 100%;
      height: 100%;
      object-fit: {{heroImageFit}};
      object-position: {{heroImagePosition}};
      transition: transform 0.3s ease;
    }

.slide:hover img {
      transform: scale(1.05);
    }

.slider-dots {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 10;
    }

.dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

.dot.active {
      background-color: var(--primary-color);
      border-color: var(--hero-text);
      transform: scale(1.2);
    }

.dot:hover {
      background-color: rgba(255, 255, 255, 0.8);
    }

.slider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: var(--hero-text);
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

.slider-arrow:hover {
      background-color: var(--primary-hover);
      transform: translateY(-50%) scale(1.1);
    }

.slider-arrow.prev {
      left: 20px;
    }

.slider-arrow.next {
      right: 20px;
    }

.banner-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 40px;
      padding: 0 20px;
    }

.banner-btn {
      padding: 15px 30px;
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-radius: 10px;
      transition: all 0.3s ease;
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      color: var(--hero-text);
      text-decoration: none;
      display: inline-block;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

.banner-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
    }

.banner-btn:hover::before {
      left: 100%;
    }

.banner-btn:hover {
      background-color: var(--primary-hover);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

.banner-btn.secondary {
      background-color: transparent;
      color: var(--primary-color);
    }

.banner-btn.secondary:hover {
      background-color: var(--primary-color);
      color: var(--hero-text);
    }

.banner-btn.glowing {
      animation: banner-glowing 2s ease-in-out infinite;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }

.hero-section {
      background: var(--hero-bg);
      padding: 20px 0;
    }

@keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

.hero-section {
      animation: fadeInUp 0.8s ease-out;
    }

h1 {
      animation: fadeInUp 0.6s ease-out;
    }

.banner-slider {
      animation: fadeInUp 0.8s ease-out 0.2s both;
    }

.banner-buttons {
      animation: fadeInUp 0.8s ease-out 0.4s both;
    }

(function() {
  var wrapper = document.getElementById("sliderWrapper");
  if (!wrapper) return;
  var slides = wrapper.querySelectorAll(".slide");
  if (!slides.length) return;

var dotsContainer = document.getElementById("sliderDots");
  var prevBtn = document.getElementById("prevBtn");
  var nextBtn = document.getElementById("nextBtn");
  var current = 0;
  var total = slides.length;

wrapper.style.width = (total * 100) + "%";
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.width = (100 / total) + "%";
  }

for (var i = 0; i < total; i++) {
    var dot = document.createElement("span");
    dot.className = "dot" + (i === 0 ? " active" : "");
    (function(idx) {
      dot.addEventListener("click", function() { goTo(idx); });
    })(i);
    dotsContainer.appendChild(dot);
  }

function goTo(index) {
    current = index;
    wrapper.style.transform = "translateX(-" + (current * 100 / total) + "%)";
    var dots = dotsContainer.querySelectorAll(".dot");
    for (var j = 0; j < dots.length; j++) {
      dots[j].className = "dot" + (j === current ? " active" : "");
    }
  }

if (prevBtn) prevBtn.addEventListener("click", function() {
    goTo((current - 1 + total) % total);
  });
  if (nextBtn) nextBtn.addEventListener("click", function() {
    goTo((current + 1) % total);
  });

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

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

Переменные 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 / Контент

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

Цвета секций

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