Настройка и кастомизация сайта на Squarespace
Настройка существующего Squarespace-сайта — это работа в трёх слоях: визуальный редактор (ограниченный), Design panel (Site Styles), и Custom CSS + Code Injection для всего, что платформа не даёт через UI. Большинство запросов на «кастомизацию» означают именно третий слой.
Site Styles и что за ними скрыто
Design → Site Styles открывает панель визуальных переменных. Под капотом это CSS custom properties, которые Squarespace генерирует в <style> теге. Разные секции имеют разные «темы» (наборы цветов), которые переключаются через Theme Selector в редакторе секции.
Структура цветовой темы в 7.1:
Theme 1 (светлая)
Theme 2 (тёмная)
Theme 3-6 (акцентные)
Каждая тема имеет свой набор переменных: background, headings, body text, links, borders. Они задаются в Site Styles → Colors → Edit Themes.
Custom CSS: что, куда и когда
Custom CSS добавляется в Design → Custom CSS. Стили применяются глобально ко всему сайту. Для прицельной работы нужны правильные селекторы — Squarespace генерирует BEM-подобные классы, которые меняются между версиями:
/* Хедер */
.header-nav { background: transparent !important; }
.header-nav-item a { color: #fff; }
/* Hero-секция */
.section-background { opacity: 0.7; }
/* Кнопки */
.sqs-block-button-element {
border-radius: 2px;
padding: 12px 32px;
font-size: 0.875rem;
letter-spacing: 0.1em;
}
/* Мобильное меню */
.mobile-overlay-nav-item a {
font-size: 2rem;
font-weight: 300;
}
/* Скрыть элемент только на мобильных */
@media (max-width: 767px) {
.custom-desktop-only { display: none !important; }
}
Важно: классы .sqs-* могут обновляться при апдейтах Squarespace. Рекомендуется использовать data-атрибуты секций для более стабильных якорей:
[data-section-id="abc123"] .content-wrapper {
max-width: 960px;
}
Code Injection: Header, Footer, Page-specific
Настройки → Advanced → Code Injection позволяет вставить код в <head> и перед </body> глобально. На уровне отдельной страницы — Page Settings → Advanced → Page Header Code Injection.
Типичные задачи через Code Injection:
Google Tag Manager:
<!-- Head injection -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- Body injection -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Кастомный шрифт из Google Fonts:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
/* Custom CSS */
body, p, li { font-family: 'Inter', sans-serif; }
Schema.org разметка для LocalBusiness:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Название компании",
"address": {
"@type": "PostalAddress",
"streetAddress": "ул. Примерная, 1",
"addressLocality": "Москва",
"addressCountry": "RU"
},
"telephone": "+7-xxx-xxx-xx-xx"
}
</script>
Кастомизация навигации
Squarespace 7.1 не позволяет создать мегаменю через UI. Обходной путь — через JavaScript в Code Injection:
window.addEventListener('DOMContentLoaded', function() {
const navItems = document.querySelectorAll('.header-nav-item');
navItems.forEach(item => {
const link = item.querySelector('a');
if (link && link.textContent.trim() === 'Услуги') {
item.classList.add('has-megamenu');
// Inject megamenu HTML
}
});
});
Настройка блога и коллекций
Кастомные поля в блоге — нативно недоступны. Workaround: использовать thumbnail image как обложку, excerpt как подзаголовок, tags для категоризации. Для сложной структуры — переход на Portfolio collection или интеграция с внешним headless CMS через Embed блок.
Автор поста: задаётся через Contributors. В Summary Block выводится имя автора, но не аватар — для аватара нужен Custom CSS с content pseudo-element или JS-хак.
Производительность
Squarespace загружает значительный объём собственных скриптов. Для улучшения Core Web Vitals:
- Отключить встроенные шрифты Squarespace, если подключаются внешние
- Использовать нативный lazy load для Image Block (включён по умолчанию в 7.1)
- Минимизировать сторонние скрипты в Code Injection
- Включить AMP для блога (Settings → Blogging → AMP) — опционально
Сроки
Ревизия дизайна существующего сайта (цвета, шрифты, отступы) через Site Styles + Custom CSS — 1–2 дня. Полная переработка секций, настройка Code Injection, интеграции, SEO-разметка — 3–7 дней.