Site Generator Panel

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

Название шаблона

📋 Обязательные переменные

○ {{languageCode}}

○ {{metaTitle}}

○ {{metaDescription}}

○ {{canonical}}

○ {{opengraph}}

○ {{fonts}}

○ {{cssLink}}

○ {{microdata}}

○ {{faviconLinks}}

○ {{hero}}

○ {{content}}

○ {{footer}}

○ {{scripts}}

/* ===== Modern CSS Reset ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

/* ===== Base Typography ===== */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--primary-font), sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--secondary-font), var(--primary-font), sans-serif;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-color);
    margin-bottom: 0.6em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* ===== Paragraphs & Inline ===== */
p {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 1em;
    line-height: 1.7;
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }
small { font-size: 0.875rem; }

/* ===== Links ===== */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ===== Lists ===== */
ul, ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

ul ul, ol ol, ul ol, ol ul {
    margin-bottom: 0;
}

li {
    margin-bottom: 0.35em;
    line-height: 1.6;
}

/* ===== Images ===== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Hero/slider images fill their container */
.slide img {
    max-width: none;
    height: 100%;
}

/* ===== Tables ===== */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    font-size: 0.95rem;
}

th, td {
    padding: 0.75em 1em;
    text-align: left;
    border-bottom: 1px solid var(--body-bg);
}

th {
    font-weight: 700;
    background: var(--body-bg);
    color: var(--text-color);
}

/* ===== Blockquote ===== */
blockquote {
    border-left: 4px solid var(--primary-color);
    padding: 1em 1.5em;
    margin: 1.5em 0;
    background: var(--body-bg);
    font-style: italic;
    color: var(--body-text);
}

/* ===== Code ===== */
code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.875em;
    background: var(--body-bg);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

pre {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.875rem;
    background: var(--body-bg);
    padding: 1.25em;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1.5em;
    line-height: 1.5;
}

pre code {
    background: none;
    padding: 0;
}

/* ===== Horizontal Rule ===== */
hr {
    border: none;
    border-top: 1px solid var(--body-bg);
    margin: 2em 0;
}

/* ===== Buttons ===== */
.btn, .btn-primary, .btn-large, .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--primary-font), sans-serif;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    border-radius: 8px;
    line-height: 1.4;
}

.btn:hover, .btn-primary:hover, .btn-large:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:active, .btn-primary:active, .btn-large:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--accent-color);
    color: #fff;
    padding: 0.75em 1.5em;
    font-size: 0.95rem;
}

.btn-large {
    padding: 1em 2.25em;
    font-size: 1.1rem;
    background: #fff;
    color: var(--primary-color);
    border-radius: 10px;
}

.btn-outline {
    padding: 1em 2.25em;
    font-size: 1.1rem;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 10px;
}

.btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
}

/* ===== Container ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Main Content ===== */
.main-content {
    min-height: 40vh;
}

/* ===== Responsive ===== */
@media (max-width: 1400px) {
    .container { max-width: 1140px; }
}

@media (max-width: 1200px) {
    .container { max-width: 960px; }
}

@media (max-width: 992px) {
    .container { max-width: 720px; padding: 0 15px; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.65rem; }
    h3 { font-size: 1.3rem; }
}

@media (max-width: 768px) {
    .container { max-width: 100%; padding: 0 15px; }
    html { font-size: 15px; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.45rem; }
    h3 { font-size: 1.2rem; }
}

@media (max-width: 576px) {
    .container { padding: 0 12px; }
    html { font-size: 14px; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
}

Доступные переменные

Нажмите для копирования

Структура

Header секция

Hero секция (баннер)

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

Footer секция

Прилипающие элементы

JavaScript

SEO

Код языка

Meta title

Meta description

Canonical URL

OpenGraph теги

Hreflang теги

Robots meta

Schema.org разметка

Ресурсы

Подключение шрифтов

Ссылка на CSS

Favicon

Классы

Класс для <main>

Класс для <body>

CSS цвета (для CSS)

Используйте в base_css шаблона. При генерации заменяются на цвета из пресета.

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)

Текст футера

← Назад

Редактировать базовый шаблон