Разработка шаблона для сайта на Squarespace 6
SquareSpace — коммерческая CMS, объединяющая в себе удобный WYSIWYG-редактор, блог-платформу, функционал интернет-магазина и хостинг. Про все преимущества этого продукта надеюсь расскажет автор этого поста, как он и обещал — ну а я хотел бы поведать тот минимум, который поможет быстро сориентироваться при самостоятельной разработке сайта на Squarespace. Если вам интересно, как в кратчайшие сроки приступить к разработке — прошу под кат.
При создании сайта на SquareSpace можно воспользоваться более, чем дюжиной встроенных шаблонов. Все они очень хорошо проработаны, имеют мобильную версию. Благодаря настройкам и визуальному редактору (прямо на странице можно поменять и css-код) можно быстро добиться желаемого результата, и простые дизайны или несложные посадочные страницы получатся быстро, фактически просто клацая мышью. Но если вы любите все держать под контролем и понимать, что же творится «под капотом», да и дизайн сложный — то необходимо в настройках своего аккаунта (кроме случая, если вы сразу зарегистрировали платный) перейти на вкладку «Developer» и зарегистрироваться разработчиком.
Вот теперь-то можно приступать к разработке — ваш сайт теперь все время доступен, только по адресу расположена заглушка, предлагающая ввести капчу или логин/пароль для входа. Для простоты понимания при создании сайта можно воспользоваться «голым» шаблоном для разработчика, а можно пойти на маленькую хитрость — выбрать напоминающий будущий дизайн и функционал шаблон, а уж потом включить developer-режим сайта в настройках, что может существенно сократить время разработки (и подсмотреть как-что реализовано).
Включение developer-режима сайта
После включения нам становится видна информация с данными для подключения, основная информация о шаблоне, об используемых коллекциях, Githistory и так далее. На этой же странице будут видны основные ошибки, если что-то пойдет не так в процессе разработки.
Основная информация после включения developer-режима
Все сайты, разрабатываемые на SquareSpace, по-умолчанию содержат: html5shiv.js, modernizr.js, и normalize.css, вещи нужные, заботится об этом нам не надо. Так же «из коробки» на стороне сервера работает Less-препроцессор — можно смело использовать синтаксис Less, можно создавать css-стили в разных файлах — пользователю сервер отдаст один объединенный css-файл. Тоже самое касается и Javascript — по-умолчанию используется фреймворк YUI3, но вы можете подключать свой любимый фреймворк или скрипты — на выходе они тоже будут минифицированы в один файл. Шаблонизатор по-умолчанию — Json-T.
Структура шаблона выглядит примерно так:
Структура шаблона
1.Главный конфигурационный файл template.conf
Я начну с корня проекта, так как именно здесь располагаются самые важные для отображения сайта настройки. Сердце шаблона — конфигурационный файл template.conf. В этом файле по желания задается имя шаблона и авторство, а также здесь указывается разметка (Layouts) вашего сайта, навигация (Navigation) по сайту и используемые стили для отображения. Выглядит это примерно так:
Содержимое template.conf
Как видим, уже на этом этапе желательно предполагать, как будут выглядеть страницы сайта, какой будет контент и так далее. Это позволит сразу выделить и задать нужные разметки и регионы (Regions) для страниц. В данном конкретном случае заданы такие layout’ы:
В дальнейшем, при создании страницы можно будет выбрать ту или иную разметку уже в визуальном режиме.
Навигация именуется для удобства отображения этих секций непосредственно в админ-панели сайта, и в дальнейшем подключать ее нужно по имени, которое вы дали. Задавать несколько секций целесообразно, если у вас например разные блоки навигации, скажем, в шапке сайта и подвале или сайдбаре.
В последнем пункте файла template.conf вы указываете, какие стили из папки styles использовать. По умолчанию в этой папке уже лежит reset.css (он же normalise.css) и его указывать не нужно, он подключится и так.
2. Файлы регионов (Regions)
В простейшем случае, разметка может состоять из одного региона, назовем его site.region. Содержимое его было бы примерно следующим:
Содержимое site.region
Не сильно вдаваясь в теги SquareSpace и синтаксис JSON-T и так становится ясно, что создается минимальная разметка страницы с шапкой и сайдбаром. Но я рекомендую функционально разграничивать отдельные области сайта — это делает проект более сопровождаемым, самому же легче потом вносить правки, не говоря о том, какое одолжение вы делаете человеку, которому придется работать с этим после/вместо вас.
Таким образом файл header.region мог бы выглядеть так:
Файл header.region
Здесь конструкция включает мета-теги для поисковиков и соцсетей, подключает squarespace-скрипты и позволяет дополнительно вставить код в визуальном режиме. Тегом подключается секция mainNav, используя как шаблон файл nav.block из каталога blocks.
Таким же образом создаются и остальные файлы *.region — создаете необходимую разметку и подключаете необходимый блок Squarespace. Этими блоками могут быть:
Среди самых полезны тегов я бы выделил такие:
3. Блоки (Blocks)
Фактически блоки — то же, что и регионы. И все сказанное выше к ним абсолютно применимо, и при желании можно обходится без них. И все же рекомендую их использовать — это более наглядно, более структурировано. Использовать отдельные файлы *.block для шаблонов навигации — милое дело. Так что давайте рассмотрим гипотетический navigation.block и разберемся, что к чему.
Файл navigation.block
Сразу оговорюсь, что здесь использовался Bootstrap 3, поэтому вы видите знакомые/незнакомые классы. Здесь основательно используется JSON-T-разметка, уточним же, что за что отвечает.
Этой конструкцией мы «открыли» глобальную область видимости нашего сайта, проверили задан ли логотип (загружается в визуальных настройках) и собственно отобразили его.
Здесь мы обращаемся конструкцией ко всем нашим страницам на сайте, которые в визуальных настройках вы поместили в секцию навигации. Дальше включаем «цикл» — в котором будет опрашиваться каждый item (страница, папка со станицами, блог, коллекция, галерея, продукты или что-либо созданное вами дополнительно). Собственно, и и тестируют, чем есть текущий item.
Если это папка (folder), то создается ссылка на нее и запускается еще цикл , в котором происходит опрос теперь уже содержимого данной папки (а это могут быть либо просто страницы, либо коллекции, либо материалы с внешней ссылкой). Здесь следует заметить, что на данный момент поддерживается только один уровень вложенности, так что если у вас много уровней в меню, то нужно хитрить.
Удобный момент — можно протестировать активна ли данная папка или ссылка конструкциями <.if folderActive>folder-active и <.section active>active и присвоить им нужный класс (и описать нужными стилями). Очень удобно — не надо создавать свой велосипед со сравнением текущего адреса и адресов ссылок в навигации.
Этот последний кусок кода делает то же самое, что мы провернули внутри цикла опроса папки — проверяет оставшиеся элементы, создает на них ссылки, задавая нужные классы и атрибуты (для внешних ссылок). Важно проследить, чтобы все секции были закрыты ( ), иначе не заработает правильно.
4. Коллекции (Collections)
Коллекции в Squarespace — это суть та же папка, только содержимое ее одного типа. Самый яркий пример — блог: все посты, по сути одинаковы, разное лишь их содержимое. В зависимости от шаблона, доступны разные коллекции, но у них всех одно устройство, разная лишь разметка внутри.
Итак, в идеале коллекция состоит из трёх файлов (рассматриваем блог):
Дальше я приведу содержимое этих файлов без разъяснений, думаю если вы дочитались сюда, то уловили смысл построения шаблонов (комментарии и названия section говорят сами за себя).
Конструктор сайтов Squarespace
Основная информация о Squarespace:
Обзор конструктора сайтов Squarespace проводился по следующим возможностям:
Обзор Squarespace
В апреле 2003 года, во время обучения в Университете штата Мэриленд, Энтони Казалена разработал Squarespace, как хостинг с сервисом создания блогов. Он начал делиться этим с друзьями и членами семьи и участвовал в программе «бизнес-инкубатор» в университете.
В сервисе были добавлены различные инструменты электронной коммерции, служба регистрации доменных имен, аналитика и добавились функции визуального редактирования сайта.
Целевая аудитория
Squarespace обслуживает более миллиона веб-сайтов. Его пользователи используют предварительно созданные шаблоны веб-сайтов и различные виджеты перетаскивания для добавления таких элементов, как текст и изображения. Разработчики Squarespace создают пользовательские шаблоны, которые продаются пользователям.
Инструкции на экране помогают пользователям выполнять такие действия, как поисковая оптимизация и настройка электронной коммерции.
Возможности
Squarespace изначально создавался для создания и размещения блогов. Но вскоре были добавлены функции электронной коммерции, такие как интеграция с Stripe для приема платежей по кредитным картам.
Squarespace очень простой и продуманный конструктор сайтов, функционал которого подойдет для создания сайтов любой сложности: от блога, до интернет-магазина. Конструктор позволит с легкостью создать сайт в визуальном режиме без знаний программирования. Для опытных пользователей, веб-мастеров и фрилансеров есть возможность редактирования исходного кода, вставка своих скриптов и стилей.
Squarespace поддерживает следующие языки: английский, немецкий, испанский, французский, итальянский, португальский.
Визуальный редактор позволяет легко перетаскивать изображения на свой сайт и легко перемещать, добавлять и удалять разделы страницы. Вы можете сделать ваш сайт уникальным с настраиваемыми настройками, включая шрифты и цвета.
Функциональность блогов Squarespace дополнена изображениями, галереями, видео и аудио. Благодаря встроенному RSS ваши читатели никогда не пропустят публикацию. Публикуйте свой контент через Apple News прямо из своего блога, чтобы охватить больше читателей.
Squarespace позволяет создать календарь или список событий вашего сайта и делиться событиями в профилях социальных сетей.
Стоимость тарифов
Стоимость конструктора сайтов Squarespace разделяется на несколько тарифов:
Все тарифы Squarespace включают в себя наш полностью управляемый облачный хостинг, обеспечивающий постоянную доступность вашего веб-сайта.
Тарифы для сайтов
$16 в мес.
$12 в мес. при оплате на год.
$18 в мес. при оплате на год.
Неограниченная пропускная способность и
Неограниченная пропускная способность и
* с ежегодной покупкой тарифа
* с ежегодной покупкой тарифа
3% за транзакции продаж
* для снятия нужно перейти на Squarespace Commerce
Тарифы для интернет-магазинов
Основной (Basic)
Продвинутый (Advanced)
$30 в мес.
$26 в мес. при оплате на год.
$46 в мес.
$40 в мес. при оплате на год.
Все функции плана «Бизнес (Business)»
Все функции плана «Бизнес (Business)»
Оптимизированный для мобильных устройств сайт
и оформление заказа
Оптимизированный для мобильных устройств сайт
и оформление заказа
* с ежегодной покупкой тарифа
* с ежегодной покупкой тарифа
Как оплатить тариф Squarespace
Вы можете оплатить тарифы Squarespace в долларах США и других валют поддерживаемых платежными системами Stripe и PayPal.
На какой период можно оплатить Squarespace
Тарифы Squarespace оплачиваются ежемесячно или ежегодно. Вы можете в любой момент поменять тариф своего сайта, при обновлении тарифа вы будете получать пропорциональную плату или возмещение в зависимости от стоимости вашего нового плана.
Скидки Squarespace
Squarespace предлагает скидки при оплате на долгий срок, например, при оплате на 1 год. Если вы создаете сайт для сайта школы или другого учебного учреждения, то Squarespace предоставляет скидку — 50% на покупку тарифа.
Пробная версия
Squarespace предоставляет 14 дней пробной версии, чтобы вы могли попробовать платформу перед покупкой тарифа.
Пробная версия имеет следующие особенности:
Домены и почта
Squarespace предлагает самостоятельно выбрать и зарегистрировать домен для сайта прямо в конструкторе, без необходимости искать домен на других ресурсах. Кроме этого, вы можете подключить свой домен к G Suite и получить настраиваемую электронную почту для вашего личного бренда или бизнеса.
Squarespace включает 2048-битный SSL-сертификат в ваш домен, а также бесплатную конфиденциальность WHOIS для соответствующих TLD, обеспечивая простое управление DNS.
Вы также сможете легко перенести свой сторонний домен в Squarespace и получить все те же преимущества, что и при покупки домена у них.
Дизайн и шаблоны
Шаблоны Squarespace работают на всех устройствах, поэтому вам нужно создать свой сайт только один раз, без необходимости создавать отдельные копии страниц и настраивать для мобильных устройств.
Маркетинг и продвижение (SEO)
Squarespace предоставляет вам полный набор маркетинговых инструментов для взаимодействия с вашей аудиторией, поиска в социальных сетях и роста новых клиентов. Squarespace помогает миллионам веб-сайтов показываться в верхней части результатов поиска. Благодаря передовому опыту в SEO, ваш сайт может найти больше клиентов.
Кнопки «Поделиться» позволят посетителям делиться вашим контентом с подписчиками, например, в Facebook и Twitter.
Из единого интерфейса Squarespace Analytics вы можете получить представление о ваших посетителях и их поведении с помощью визуальных отчетов, охватывающих статистику, такую как просмотры страниц, конверсии, популярный контент и многое другое.
Сбор информации от посетителей через контактные и регистрационные формы, приложения, опросы позволяют не растерять клиентов. Вы можете получить доступ к электронной почте с помощью Email-кампаний Squarespace или интеграции с MailChimp.
Squarespace позволяет добавить карты Google на свой веб-сайт, чтобы показать посетителям, где находится ваша компания. С помощью страницы «О компании» с уникальной историей своего бизнеса вы можете привлечь клиентов и дать посетителям быстро получить доступ к вашей бизнес-информации.
Интернет-магазин
В Squarespace есть все, что нужно для создания интернет-магазина и запуска продаж в интернете.
В интернет-магазине нет ограничений на количество продуктов или услуг, которые вы можете продать. Кроме того, вы можете перечислить продукты с несколькими вариантами и артикулами. Итак, будь то небольшой бутик или крупный бизнес, вы можете продемонстрировать все, что у вас есть в магазине.
С помощью тегов, категорий и инструмента сортировки с помощью перетаскивания легко торговать, систематизировать и управлять своими продуктами. С настройками видимости и планирования вы можете поместить продукты на виртуальные полки, когда они будут готовы к работе.
Позвольте клиентам взаимодействовать с вашими продуктами с помощью встроенных видео, изображений, сопутствующих товаров и многого другого. Настраивайте продукты в сообщения блога, события и многое другое, чтобы ваш контент стимулировал продажи. Разрешить клиентам увеличивать изображения продуктов, чтобы они могли видеть все детали. А благодаря быстрому просмотру они могут быстро узнать об элементах и добавить их в свои корзины.
Независимо от того, продаете ли вы постоянную ежемесячную подписку, годовую поставку товара или временный сезонный товар, вы можете настроить периодические и ограниченные подписки, которые наилучшим образом соответствуют потребностям ваших клиентов. Экономьте деньги и время, управляя всеми своими продажами на Squarespace.
Вы можете напомнить покупателям о товарах в их корзине и соблазнить их совершить покупку с помощью напоминания по электронной почте клиентам, которые откажутся от оформления заказа или завершения заказа.
Сделайте больше продаж с большим количеством способов оплаты. В дополнение ко всем основным кредитным картам ваш магазин оборудован для приема платежей PayPal и Apple Pay. Эти альтернативные способы оплаты являются быстрыми и удобными, экономят время клиентов и приводят к увеличению продаж в интернет-магазине.
Используйте инструменты CRM, чтобы получить представление о средней стоимости заказа, истории заказов и многом другом. Легко идентифицируйте своих самых лояльных и ценных клиентов, а также тех, кто подвержен риску, и организуйте их, используя заметки и теги.
Отправляйте уведомления о доставке, обрабатывайте возвраты, обновляйте запасы и выполняйте заказы любых размеров на ходу. Печатайте отгрузочные этикетки партиями с нашей интеграцией ShipStation. Рассчитывайте тарифы доставки в реальном времени от FedEx, UPS и USPS при оформлении заказа, чтобы обеспечить точную стоимость доставки для клиентов. С легкостью предоставьте клиентам номера для отслеживания, отсканировав штрих-коды из нашего приложения.
Интеграции сервисов
Каждый шаблон сайта имеет встроенную интеграцию, поэтому вам не нужно перемещаться по рынку приложений или устанавливать какие-либо плагины. Squarespace предлагает лучшие варианты интеграции.
Интеграция социальных сетей:
Интеграция доменов и электронной почты
Интеграция онлайн заказов
Примеры сайтов
Актер Киану Ривз (Keanu Reeves) намеревался создать собственный мотоцикл для себя в 2007 году. Когда он тестировал финальное творение, его вдохновило превратить этот страстный проект в бизнес.
Фотограф и арт-директор из Нью-Йорка Эдриен Ракель использует Squarespace для усиления своего присутствия в Интернете. Образы Адриенны игривы и ярки, но они также очень значимы.
Шеф-повар и владелец ресторана Дэнни Боуэн переопределяет традиционные ингредиенты и кухню, и он использует Squarespace, чтобы помочь своим блюдам выделиться в Интернете.
И это далеко не все примеры сайтов Squarespace, некоторые из которых можно просмотреть на официальном сайте.
Служба поддержки
Squarespace обеспечивает круглосуточную поддержку клиентов по электронной почте или в чате. Squarespace не предлагает поддержку по телефону. Консультанты по обслуживанию клиентов хорошо подготовлены и работают с дизайнерами и инженерами в офисах в Нью-Йорке, Дублине и Портленде. Они имеют глубокие знания
Squarespace и готовы помочь, когда вам это нужно. Кроме этого пользователи конструктора сайтов могут получить помощь от сотрудников и обычных пользователей на официальном форуме Squarespace.
Получить информацию о работе с конструктором можно в базе знаний Squarespace, где размещено много полезных инструкций, а также различных видео обзоров.
Плюсы и минусы
Ниже приведены основные плюсы и минусы конструктора сайтов Squarespace.
Плюсы
Минусы
Если вы ищите конструктор для создания простого сайта или небольшого интернет-магазина для своих зарубежных клиентов, то Squarespace может стать подходящим вариантом для этого.
Аналоги Squarespace
 |
 |
 |