Основы макета
Структура веб-страницы slidde
Slidde.co использует простую четырехслойную структуру:
- Страница (Глобальные стили)
- Слайд (Сегментация контента)
- Контейнер (Адаптивная ширина, несколько колонок)
- Встроенные элементы (Конкретное содержание)
Страница
Слой Страница находится на вершине и используется для установки глобальных стилей, таких как шрифты, цвета и стили ссылок, так как CSS-свойства наследуемы.
При желании вы можете использовать CSS-переменные, чтобы сделать ваш шаблон более удобным для пользователя.
Если вы не можете выбрать элемент Страница напрямую, используйте опцию Выбрать страницу на панели инструментов.
Функция Показать/скрыть слайд по хэшу URL может имитировать многостраничный веб-сайт. Ознакомьтесь с этой демонстрацией: Ссылка на демо
Слайд
Слайд — это элемент первого уровня под Страница, используемый для сегментации контента.- Простые страницы, такие как страницы "ссылка в био", могут иметь только один Slide.
- Сложные целевые страницы могут включать несколько секций, таких как #header, #hero, #works, #contact, #footer.
Чтобы скрыть Слайд с финального веб-сайта, но сохранить их, отметьте атрибут Скрытый. Это похоже на скрытые слайды в PowerPoint и может также использоваться для учебных пособий.
Функция Закрепленный (плавает вверху после прокрутки) предназначена для плавающих навигационных панелей или любых других элементов. Пример можно посмотреть здесь: Sticky Demo
Контейнер
Контейнер управляет адаптивной шириной и отображением в несколько колонок.- Ширина для мобильных устройств и настольных компьютеров обычно различается. Используйте атрибут Ширина в Контейнер для адаптивной ширины на разных устройствах.
- Колонки определяют, сколько колонок находится в контейнере. Вы можете установить ширину, например, x/12 (например, две колонки по 6/12 для ширины 50% каждая).
Каждая колонка также может иметь настройки горизонтального и вертикального выравнивания.
Другое
Другие элементы являются встроенными элементами, которые могут быть размещены внутри контейнера.
Следуя этому структурированному подходу, вы можете с легкостью создавать визуально привлекательные, адаптивные веб-страницы с использованием Slidde.co.