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