Основы макета

Last updated on 10/29/2024@mrbirddev

Структура веб-страницы slidde

Slidde.co использует простую четырехслойную структуру:

  • Страница (Глобальные стили)
  • Слайд (Сегментация контента)
  • Контейнер (Адаптивная ширина, несколько колонок)
  • Встроенные элементы (Конкретное содержание)

Страница

Слой Страница находится на вершине и используется для установки глобальных стилей, таких как шрифты, цвета и стили ссылок, так как CSS-свойства наследуемы.

При желании вы можете использовать CSS-переменные, чтобы сделать ваш шаблон более удобным для пользователя.

Если вы не можете выбрать элемент Страница напрямую, используйте опцию Выбрать страницу на панели инструментов.

Функция Показать/скрыть слайд по хэшу URL может имитировать многостраничный веб-сайт. Ознакомьтесь с этой демонстрацией: Ссылка на демо

Слайд

Слайд — это элемент первого уровня под Страница, используемый для сегментации контента.
  • Простые страницы, такие как страницы "ссылка в био", могут иметь только один Slide.
  • Сложные целевые страницы могут включать несколько секций, таких как #header, #hero, #works, #contact, #footer.
Якорь ID (HTML ID) по сути является HTML ID. Назовите их в зависимости от содержимого внутри Слайд, чтобы легко перемещаться с помощью ссылок типа “#ID”. [Узнайте больше о пропуске ссылок](https://developer.mozilla.org/ru/docs/Web/HTML/Element/a#skip_links).

Чтобы скрыть Слайд с финального веб-сайта, но сохранить их, отметьте атрибут Скрытый. Это похоже на скрытые слайды в PowerPoint и может также использоваться для учебных пособий.

Функция Закрепленный (плавает вверху после прокрутки) предназначена для плавающих навигационных панелей или любых других элементов. Пример можно посмотреть здесь: Sticky Demo

Контейнер

Контейнер управляет адаптивной шириной и отображением в несколько колонок.
  • Ширина для мобильных устройств и настольных компьютеров обычно различается. Используйте атрибут Ширина в Контейнер для адаптивной ширины на разных устройствах.
  • Колонки определяют, сколько колонок находится в контейнере. Вы можете установить ширину, например, x/12 (например, две колонки по 6/12 для ширины 50% каждая).

Каждая колонка также может иметь настройки горизонтального и вертикального выравнивания.

Другое

Другие элементы являются встроенными элементами, которые могут быть размещены внутри контейнера.

Следуя этому структурированному подходу, вы можете с легкостью создавать визуально привлекательные, адаптивные веб-страницы с использованием Slidde.co.