Как создать собственный макет для мобильных устройств в Squarespace. Изменение Squarespace только...

Описание: Как создать собственный макет для мобильных устройств в Squarespace (Руководство 2025 г.)
// Изменение макета Squarespace только для мобильных устройств

Squarespace автоматически подстраивает ваш сайт под мобильные экраны, но иногда макет по умолчанию выглядит не совсем правильно. Возможно, изображения слишком большие, текст перекрывается, или вы хотите, чтобы некоторые разделы отображались на телефонах по-другому.

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

🔹 Шаг 1: Переключитесь в мобильный вид

Откройте редактор сайта Squarespace.

На верхней панели инструментов нажмите на значок 📱 для мобильного устройства, чтобы просмотреть свой сайт на мобильном устройстве.

Проверьте, как располагаются и меняются ли размеры разделов.

💡 Совет: Каждый раздел автоматически становится адаптивным, но текстовые блоки, изображения и кнопки могут смещаться, поэтому для достижения идеального вида вам следует настроить интервалы.

🔹 Шаг 2: Настройте интервалы между разделами для мобильных устройств

Наведите курсор на любой раздел → нажмите «Изменить раздел».

На левой панели откройте вкладку «Интервалы».

Настройте отступы сверху и снизу для лучшего визуального баланса на мобильных устройствах.

💡 Совет: используйте более узкие интервалы и центрируйте элементы для удобной прокрутки на мобильных устройствах.

🔹 Шаг 3: Создайте отдельные версии для ПК и мобильных устройств

В Squarespace нет отдельного редактора для мобильных устройств, но вы можете отображать или скрывать контент в зависимости от устройства.

Скопируйте раздел, который хотите изменить.

Измените одну версию для ПК и одну для мобильных устройств.

Нажмите на значок шестеренки раздела (⚙️) → перейдите в раздел «Видимость» → выберите:

Только для мобильных устройств или

Только для ПК