Стекло
Конструктор статей с эффектом жидкого стекла для OpenCart 3.0.3.9
Одна непрерывная статья вместо страниц. Все прежние блоки на месте, плюс заголовок статьи, авто-содержание и блок комментариев. Экспорт — чистый HTML/CSS без мусора редактора.
Введение, которое цепляет. Жирным цветом акцента, чтобы задать тон всей статье.
Обычный параграф. Здесь можно рассказать историю, добавить контекст и подготовить читателя к основному блоку. Весь текст редактируется кликом.
Почему стекло снова в тренде
Эффект liquid glass — это не просто размытие. Это блик сверху, внутренняя подсветка и мягкая тень. В OpenCart такой стиль выглядит дорого, если не переборщить с прозрачностью.
Как мы собираем блоки
Каждый блок — это независимая стеклянная панель. Двигайте их стрелками, дублируйте и удаляйте. Сетка подстроится под колонку вашего сайта.
- Фон страницы — градиент из двух цветов
- Скругление, блюр и прозрачность настраиваются слева
- Весь текст — contenteditable
Текст и фото рядом
Слева заголовок и текст с кнопкой. Справа — фото с пунктирной рамкой. Клик загружает файл с устройства, Alt+клик вставляет ссылку. Идеально для кейсов.
ПодробнееОсновная тема
Коротко объясните первую идею. Номер в круге окрашен цветом акцента.
Вторая тема
Вторая карточка использует Цвет 2, чтобы разделить визуальный ритм.
Третья тема
Третья — Цвет 3. На мобильном становится вертикальным стеком.
Стекло должно быть незаметным, пока на него не падает свет.
Стекло + фото
Левая часть — стеклянная карта с бликом, правая — фото. Эффект глубины достигается внутренней подсветкой и мягкой тенью.
Исследуем
Собираем референсы и смотрим, как стекло работает на светлом и темном фоне.
Собираем
Делаем сетку блоков в конструкторе и проверяем читабельность.
Публикуем
Экспортируем HTML/CSS и вставляем через Каталог → Информация в режиме Исходный код.
Готовы запустить блог?
Соберите статью здесь, экспортируйте и вставьте в OpenCart. Без плагинов, чистый HTML/CSS.
Стекло — это не материал, это состояние внимания к свету.
Введение
Это блок текста на всю ширину с полноценным редактором. Вы можете писать длинные абзацы, добавлять курсив, списки и заголовки.
Вступление
Мы часто слышим: «Мы на смешанном питании». Или: «Я даю сушку утром, чтобы котик не голодал, а вечером — натуралку». Или: «Котёнок должен знать сушку, а то вдруг в новом доме его будут кормить ею».
Звучит логично. Но давай посмотрим на это с точки зрения физиологии. Не маркетинга, не удобства, а того, как устроен организм хищника.
Детали
Заголовки H2 и H3 автоматически попадают в Содержание. Попробуйте добавить новый заголовок — он сразу появится в блоке содержания.
- Жирный и курсив
- H2 / H3 с якорями
- Списки и выравнивание
Бюллетень
Заголовок: Смешанное питание, дробное кормление и «прививка сушкой»: честный разговор о физиологии хищника
Анонс статьи в стиле Liquid Glass — коротко о главном, чтобы зацепить читателя и дать контекст.
Конструктор статей с эффектом жидкого стекла для OpenCart 3.0.3.9
Одна непрерывная статья вместо страниц. Все прежние блоки на месте, плюс заголовок статьи, авто-содержание и блок комментариев. Экспорт — чистый HTML/CSS без мусора редактора.
Введение, которое цепляет. Жирным цветом акцента, чтобы задать тон всей статье.
Обычный параграф. Здесь можно рассказать историю, добавить контекст и подготовить читателя к основному блоку. Весь текст редактируется кликом.
Почему стекло снова в тренде
Эффект liquid glass — это не просто размытие. Это блик сверху, внутренняя подсветка и мягкая тень. В OpenCart такой стиль выглядит дорого, если не переборщить с прозрачностью.
Как мы собираем блоки
Каждый блок — это независимая стеклянная панель. Двигайте их стрелками, дублируйте и удаляйте. Сетка подстроится под колонку вашего сайта.
- Фон страницы — градиент из двух цветов
- Скругление, блюр и прозрачность настраиваются слева
- Весь текст — contenteditable
Текст и фото рядом
Слева заголовок и текст с кнопкой. Справа — фото с пунктирной рамкой. Клик загружает файл с устройства, Alt+клик вставляет ссылку. Идеально для кейсов.
ПодробнееОсновная тема
Коротко объясните первую идею. Номер в круге окрашен цветом акцента.
Вторая тема
Вторая карточка использует Цвет 2, чтобы разделить визуальный ритм.
Третья тема
Третья — Цвет 3. На мобильном становится вертикальным стеком.
Стекло должно быть незаметным, пока на него не падает свет.
Стекло + фото
Левая часть — стеклянная карта с бликом, правая — фото. Эффект глубины достигается внутренней подсветкой и мягкой тенью.
Исследуем
Собираем референсы и смотрим, как стекло работает на светлом и темном фоне.
Собираем
Делаем сетку блоков в конструкторе и проверяем читабельность.
Публикуем
Экспортируем HTML/CSS и вставляем через Каталог → Информация в режиме Исходный код.
Готовы запустить блог?
Соберите статью здесь, экспортируйте и вставьте в OpenCart. Без плагинов, чистый HTML/CSS.