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

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

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

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

userCompName.Page

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

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

Если вы не можете выбрать элемент userCompName.Page напрямую, используйте опцию userCompOption.Select page на панели инструментов.

Функция userCompOption.hashSection может имитировать многостраничный веб-сайт. Ознакомьтесь с этой демонстрацией: Ссылка на демо

userCompName.Slide

userCompName.Slide — это элемент первого уровня под userCompName.Page, используемый для сегментации контента.

• Простые страницы, такие как страницы "ссылка в био", могут иметь только один Slide.
• Сложные целевые страницы могут включать несколько секций, таких как #header, #hero, #works, #contact, #footer.

userCompOption.htmlId по сути является HTML ID. Назовите их в зависимости от содержимого внутри userCompName.Slide, чтобы легко перемещаться с помощью ссылок типа “#ID”. [Узнайте больше о пропуске ссылок](https://developer.mozilla.org/ru/docs/Web/HTML/Element/a#skip_links).

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

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

userCompName.Container

userCompName.Container управляет адаптивной шириной и отображением в несколько колонок.

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

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

Другое

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

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