Ваше полное руководство по шаблонам Squarespace

Опубликовано: 2019-05-31

Tooltester поддерживается такими читателями, как вы. Мы можем получать партнерскую комиссию, когда вы совершаете покупки по нашим ссылкам, что позволяет нам предлагать наши исследования бесплатно.

По данным Squarespace, его шаблоны «отмечены наградами». Но на самом деле это может означать что угодно. Это может быть даже просто маркетинговая чепуха.

Поэтому я решил провести расследование.

Спустя несколько поисков в Google я обнаружил правду: Squarespace действительно вошла в шорт-лист и получила несколько наград Webby, в том числе одну за лучший визуальный дизайн.

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

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

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

Однако шаблоны версии 7.0 также имеют несколько преимуществ – и, что удивительно, они все еще доступны для использования. Итак, давайте рассмотрим различия между двумя версиями, чтобы помочь вам решить, какая из них лучше для вашего сайта.

Сколько существует шаблонов Squarespace?

Когда я оцениваю шаблоны рейтингов, первое, на что я обращаю внимание, — это хороший выбор. Но как человек, который потратил часы своей жизни на просмотр сотен шаблонов WordPress, я также могу сказать вам, что слишком большой выбор может стать проблемой.

Примеры шаблонов Squarespace

Итак, первая хорошая новость заключается в том, что Squarespace, похоже, попал в правильное место. Каждая из версий 7.0 и 7.1 предлагает около 110 шаблонов, доступных в следующих 15 категориях:

  • Портфолио
  • Фотография
  • Интернет-магазины
  • Блоги и подкасты
  • Профессиональные услуги
  • Местный бизнес
  • Сообщество и некоммерческие организации
  • События
  • Свадьбы
  • Развлечение
  • Членство
  • Рестораны
  • Личное и резюме
  • Недвижимость и недвижимость
  • Стартовые страницы

Это управляемое число. Но если посчитать, это не так уж много шаблонов на категорию. Однако вы обнаружите, что каждый шаблон достаточно гибок, чтобы его можно было модифицировать для различных целей, особенно в последней версии 7.1.

Шаблон интернет-магазина

Независимо от того, продаете ли вы модную одежду, товары для дома или товары для домашних животных, есть ключевые принципы, которые делают хороший интернет-магазин:

  • Легко ориентироваться
  • Выдающиеся кнопки призыва к действию для транзакций
  • Качественные фото и видео для демонстрации вашей продукции.
  • Четкая информация о доставке и возврате
  • Рейтинги, обзоры и другие социальные доказательства для укрепления доверия.

Нам нравится шаблон Alameda для сайтов электронной коммерции, потому что это простой и гибкий способ продавать вашу продукцию. Это отличный шаблон независимо от того, создаете ли вы свой бренд или уже создали его.

Его минималистичный современный дизайн выделяет ваши продукты, поэтому вам не нужно иметь причудливый логотип, видеоролики или другой брендовый контент перед запуском магазина. Однако вам, конечно же, нужны качественные фотографии вашей продукции.

Шаблон интернет-магазина Аламеда

Более того, нам нравится, насколько легко делать покупки в магазине, оформленном в стиле Аламеда, что важно, поскольку вы хотите устранить барьеры, которые затрудняют покупки вашим клиентам. С помощью Alameda клиенты могут просматривать фотографии других товаров, наведя курсор на плитку. Вы также можете отмечать товары для продажи и показывать снижение цен, что помогает создать ощущение срочности.

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

Шаблон портфолио

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

Ранее мы упоминали шаблон Tepito, и он нам нравится для портфолио, потому что он предлагает хороший баланс между текстом и визуальными эффектами. Для еще более наглядного шаблона мы рекомендуем шаблон Ортиса. С помощью этого шаблона вы можете включить вводный текст о себе и галерею, демонстрирующую ваши работы в визуальной форме. Если люди хотят увидеть больше вашей биографии или портфолио, они могут сделать это с помощью удобного меню в верхней части страницы.

шаблон портфолио Ортиса

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

Шаблон блога

Хорошо продуманный блог демонстрирует ваши последние публикации, чтобы люди могли видеть, что ваш сайт регулярно обновляется. Люди вряд ли подпишутся на информационный бюллетень вашего блога или будут просматривать ваш контент, если не смогут определить, когда он последний раз обновлялся. Он также должен включать визуальные эффекты, чтобы ваши сообщения привлекали читателей. Вы можете быть отличным писателем, но вам все равно понадобятся качественные фотографии, чтобы привлечь внимание людей.

Нам нравится шаблон Stanton для блогов. Stanton позволяет вам добавить рекламное объявление, рассказывающее людям о вашем блоге, вместе с изображением. Когда люди прокручивают вниз, в галерее отображаются ваши последние публикации вместе с текстом предварительного просмотра, изображением и датой. Здесь приведен пример блога рецептов, но шаблон отлично подходит для блогов о путешествиях, фотографии, здоровье или дизайне.

шаблон блога Squarespace

Шаблоны бизнес-планирования

Онлайн-планирование очень важно для бизнеса и независимых консультантов. Веб-сайт с хорошо продуманными функциями бронирования (например, онлайн-календарем) избавляет потенциальных клиентов от необходимости звонить или писать по электронной почте и ждать от вас ответа. Это также избавляет от необходимости возвращаться назад и вперед при выяснении доступности. Чем проще людям планировать звонки, тем больше вероятность, что они это сделают.

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

бизнес-шаблон альмара

Шаблоны целевых страниц

Иногда вам не нужен целый веб-сайт для вашей услуги или бизнеса. Обычно это тот случай, когда у вас есть одно мероприятие, продукт или услуга, и вы просто хотите, чтобы люди подписались на него. Одна целевая страница также является хорошим способом «припарковать» веб-сайт, который еще не запущен. Зачастую лучше иметь целевую страницу, чем вообще не иметь присутствия в Интернете.

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

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

Нам нравится шаблон Wycoff для целевых страниц, потому что в нем есть все эти элементы. Цель сайта безошибочна, а призыв к действию сложно не заметить.

Шаблон целевой страницы wycoff

Лучшие шаблоны и семейства Squarespace в версии 7.0

Если вы решите использовать шаблон версии 7.0, хорошим началом будет семейство шаблонов Brine. Это самый популярный и гибкий вариант, на котором можно создать более 40 шаблонов. Он имеет страницу расширенных продуктов, параллаксную прокрутку и сложенную индексную страницу.

рассол шаблона Squarespace

Вот оригинальный шаблон Brine в действии, который является основой для интернет-магазина по продаже солений. Сейчас не знаю насчет бизнес-потенциала, но дизайн выглядит великолепно.

Но вот волшебство семейств шаблонов: вот Brine полностью трансформируется в сайт ресторана под названием Basil. Ниже находится страница меню, на которой для добавления элементов используется «страница коллекции».

шаблон квадратного пространства базилик

И вот он снова преобразован в шаблон под названием Hatch, который отлично подойдет для личного веб-сайта или страницы портфолио фрилансера.

Люк шаблона квадратного пространства

Вот еще примеры, которые мне очень нравятся:

Шаблон блога Great Squarespace – Tudor

шаблоны Squarespace блог Тюдор

Я имею в виду, просто посмотрите на это. Tudor — это журнальный стиль, чистый, трехколоночный макет (который можно адаптировать), красивая современная типографика, минимум значков социальных сетей. Мне хочется завести блог просто для того, чтобы поиграть с этим шаблоном.

Отличный шаблон Squarespace для портфолио – Йорк

шаблоны Squarespace портфолио Йорк

Йорк здесь используется для обозначения дизайнера, но любой, кто творит с помощью визуальных средств, может сделать свою работу блестящей. Изображения занимают центральное место, и вы получаете больше информации, наводя на них курсор, что идеально подходит для быстрого описания проекта или тематического исследования.

Лучший шаблон Squarespace для фотографов — Ishimoto

Шаблоны Squarespace для PHPtorgapher Ishimoto

Мне очень нравится, как эта тема Ishimoto позволяет выделить одно большое изображение и позволяет пользователям быстро перемещаться по галерее благодаря карусели. Это минималистично, эффективно и красиво. Совет: дополнительную информацию о конструкторах веб-сайтов с фотографиями можно найти здесь.

Есть ли разница между «шаблонами» и «темами»?

Нет.

Это одно и то же, но с другим названием. Сами Squarespace называют их шаблонами, а не темами. Но… есть еще семейства шаблонов.

Подождите, что такое семейства шаблонов Squarespace?

Хороший вопрос. Первое, что здесь нужно понять, это то, что семейства шаблонов — это термин, который действительно относится только к версии 7.0 . Это просто группа шаблонов, имеющих одну и ту же базовую структуру.

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

Так, например, в версии 7.0 шаблоны Adversary, Alex и Ginger основаны на семействе Marquee. Некоторые уникальные особенности этого семейства:

  • Шапку сайта можно зафиксировать вверху при прокрутке
  • Размер логотипа не может быть изменен
  • Боковая панель не поддерживается
  • Параллакс-прокрутка работает на баннерах

противник шаблона Squarespace

Шаблон Adversary, используемый для сайта группы.

Однако в версии 7.1 это уже не важно, поскольку все шаблоны принадлежат к одному семейству . Таким образом, у вас будут одни и те же возможности для дизайна и оформления вашего сайта , независимо от того, какой шаблон вы выберете.

Это подводит нас к следующему важному моменту: как выбрать правильный шаблон Squarespace:

Как выбрать шаблон Squarespace?

Выбор шаблона Squarespace может оказаться непростой задачей (особенно если у вас так много великолепных дизайнов на выбор!), но в вашем распоряжении есть ряд инструментов, которые помогут немного упростить этот процесс:

  • Используйте категории (интернет-магазины, портфолио и т. д.), чтобы отфильтровать свой выбор. Не можете найти шаблон, который вам нравится в вашей категории? Нет проблем – поскольку все шаблоны можно адаптировать для любых целей, просто выберите шаблон, внешний вид которого аналогичен тому, что вы хотите для своего сайта, независимо от категории.
  • Обязательно просмотрите шаблоны, прежде чем остановиться на одном (вы даже можете полностью продемонстрировать его, чтобы получить представление о том, как будет выглядеть действующий сайт). Это действительно важно, так как вы не сможете позже сменить шаблон (если вы используете версию 7.1).

С шаблонами Squarespace версии 7.1 довольно легко изменить макеты благодаря возможности добавлять готовые разделы. Поэтому я бы рекомендовал выбирать шаблон на основе стилей (шрифтов, цветов и т. д.), а не макета , поскольку стилистические изменения требуют больше работы, чем структурные.

Если вы используете шаблон версии 7.0, помните, что ваши параметры стиля определяются семейством вашего шаблона . Это означает, что при выборе шаблона вам нужно учитывать, как вы хотите, чтобы ваш сайт вел себя. Хотите разместить свои сообщения в блоге в сетке? Вам нужна боковая панель контента? Как насчет навигационных ссылок в нижнем колонтитуле?

Я знаю, это звучит немного ошеломляюще, но, к счастью, у Squarespace есть удобная таблица сравнения шаблонов для шаблонов v7.

Шаблоны Squarespace в версии 7.1

Что действительно замечательно в подходе, использованном Squarespace в версии 7.1, так это то, что все шаблоны имеют одинаковую базовую структуру и параметры стиля . Это дает вам большую свободу в настройке шаблонов по своему усмотрению – чего очень не хватало в версии 7.0.

Например, вы можете начать с ультраминималистичного текстового шаблона, такого как Suhama (идеально подходит для резюме и личных сайтов):

Шаблоны Squarespace Suhama

И внесите изменения (вставьте новые разделы, измените шрифт и цвета и т. д.), чтобы в итоге получить более визуально богатый шаблон, такой как Tepito:

Шаблоны Squarespace Тепито

Фактически шаблоны Squarespace версии 7.1 настолько универсальны, что вы можете изменить любой из следующих элементов:

  • Шрифты (семейства шрифтов, интервалы, высота и т. д.)
  • Цвета (благодаря настраиваемым цветовым схемам и палитрам Squarespace)
  • Кнопки
  • Анимации
  • Расстояние
  • Пользовательские CSS
  • И более

Все эти элементы можно настроить в меню «Дизайн». Чтобы узнать больше, ознакомьтесь с нашим руководством по Squarespace.

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

Какие возможности настройки я получу с версией 7.0?

Как вы видели на примере семейства Brine, вы можете полностью трансформировать свой шаблон, перемещая элементы и используя стандартные параметры настройки. Все это делается с помощью стилей сайта.

шаблоны Squarespace стили сайта

Пример стилей сайта с шаблоном Brine

Стили сайта позволят вам изменить такие вещи, как:

  • Типографика : (семейство шрифтов, цвет и размер)
  • Размеры и значения (для заполнения, интервалов и т. д.)
  • Соотношение сторон изображения
  • Изображение на заднем плане
  • Отображение и скрытие элементов
  • И более…

После внесения изменений вы можете отменить или сохранить их. Если они сохранены, они появятся на вашем сайте.

Но если вам нужно еще больше возможностей настройки, вам повезло, потому что Squarespace также предлагает:

  • Пустые шаблоны: выберите пустой шаблон веб-сайта вместо использования демо-версии с его содержимым. Это даст вам больше творческих возможностей.
  • Пользовательский код: Да, вы можете добавить HTML или CSS, чтобы создать полностью индивидуальный веб-сайт. Но для этого вам понадобится бизнес-план, и поддержка не поможет вам, если что-то пойдет не так (пока вы не удалите собственный код).
  • Премиум-функции: в зависимости от вашего плана Squarespace вы можете добавить премиальные функции, такие как вышеупомянутые блоки кода, внедрение JavaScript и многое другое.

И последнее, на что следует обратить внимание: когда вы подписываетесь на бесплатную пробную версию Squarespace, все функции Premium автоматически включаются. Однако вы потеряете их, если ваш план не будет поддерживать их позже.

Удобны ли шаблоны Squarespace для мобильных устройств?

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

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

шаблоны Squarespace Mojave для мобильных устройств

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

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

Сколько стоят шаблоны Squarespace?

Это просто: все они бесплатны. Вы платите только ту сумму, которую стоит ваш план Squarespace.

Но вы также можете приобрести индивидуальные шаблоны непосредственно у сторонних дизайнеров. Обычно они колеблются в районе отметки 100–300 долларов.

Каковы различия между шаблонами Squarespace в версиях 7.0 и 7.1?

Когда вы регистрируетесь на новом веб-сайте Squarespace, вам автоматически будут представлены новейшие шаблоны Squarespace (версия 7.1) на выбор:

Шаблоны Squarespace 7.1

Однако, если вы прокрутите страницу вниз, вы увидите вместо этого возможность выбрать один из шаблонов более ранней версии 7.0: популярные шаблоны Squarespace

Визуально большой разницы между шаблонами 7.0 и 7.1 нет — обе версии предлагают стильный дизайн веб-сайтов, отражающий уникальный минимализм Squarespace.

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

Кроме того, версия 7.1 предлагает более 100 готовых разделов (заголовки, текст, изображения, галереи и т. д.), которые можно добавить на любую страницу. В конечном итоге это дает вам больший контроль над дизайном вашего сайта.

Давайте разберем эти различия более подробно:

Особенность Квадратное пространство Версия 7.0 Квадратное пространство версии 7.1
Шаблоны Позволяет переключаться между шаблонами даже после того, как вы уже начали использовать шаблон. Не позволяет переключать шаблоны. Однако у вас есть больший контроль над макетом и дизайном вашего шаблона, а это означает, что вы можете полностью переработать свой шаблон, если это необходимо (см. следующую строку).
Стиль Шрифты, цвета и стили определяются шаблоном — ваши возможности по их настройке ограничены. Корректировки вносятся постранично. Однако у вас есть возможность редактировать HTML, CSS и JS в бизнес-плане Squarespace. Все шаблоны имеют одинаковый стиль и параметры макета, поэтому у вас больше свободы в настройке. Корректировки можно вносить по разделам, а система редактирования Squarespace Fluid Engine позволяет перетаскивать контент куда угодно. Как и в версии 7.0, вы также можете внедрить собственный код, если у вас есть бизнес-план.
Мобильная отзывчивость Все шаблоны адаптированы для мобильных устройств. Некоторые шаблоны версии 7.0 позволяют указать собственные стили для отображения определенных элементов на мобильных устройствах (например, шрифт, размер логотипа, панели навигации). Все шаблоны автоматически адаптируются к мобильным устройствам. Вы также можете настроить мобильную версию своего сайта, не затрагивая дизайн рабочего стола.
Блог Параметры макета ограничены и определяются выбранным вами шаблоном (например, отображение списка или сетки). Вы получаете больший контроль над макетом, поскольку все шаблоны предлагают одинаковые параметры (сетка, один столбец, отображение кладки и т. д.).
Интернет-магазин Использует «Страницы продукта». Максимум 200 товаров, используется навигация по категориям без раскрывающихся меню. Такие функции, как быстрый просмотр, масштабирование изображения и списки ожидания, доступны только в некоторых шаблонах. Использует «Страницы магазина». Максимум 10 000 товаров, используется навигация по категориям с раскрывающимися меню. Больше контроля над макетом, поскольку вы можете добавлять разделы на страницы магазина. Быстрый просмотр, масштабирование изображения и списки ожидания доступны во всех шаблонах.
Галереи изображений Предлагается через «Страницы галереи». Параметры отображения ограничены только двумя макетами Вместо этого используются «Разделы галереи», что означает, что вы можете добавить их на любую страницу. Доступны более универсальные макеты (полосы, каменная кладка, катушка и т. д.)
Платформа разработки Позволяет вам создать собственный сайт Squarespace с нуля. Рекомендуется только в том случае, если у вас есть технические знания и вам нужен собственный сайт. В настоящее время недоступно для версии 7.1.

Могу ли я перейти с шаблона версии 7.0 на шаблон 7.1?

К сожалению , невозможно перейти с шаблона Squarespace версии 7.0 на шаблон 7.1 . Если у вас уже есть сайт, созданный с использованием шаблона 7.0, единственный способ обновить его до версии 7.1 — это перестроить сайт вручную. Это означает воссоздание макета, копирование и вставку поверх существующего контента.

Могу ли я найти шаблоны Squarespace где-нибудь еще?

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

Однако имейте в виду, что для многих шаблонов требуется использование платформы разработчика Squarespace, которая в настоящее время доступна только для версии 7.0 . Для версии 7.1 вы также можете купить наборы шаблонов Squarespace на некоторых веб-сайтах, которые содержат пошаговые инструкции по настройке (по сути, вы используете их иллюстрации и сами создаете дизайн в Squarespace). Это кажется сложным обходным путем, но может оказаться полезным, если вы захотите позже самостоятельно изменить свой сайт.

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

Что касается других плюсов и минусов шаблона Premium Squarespace? Я бы сказал, что главным преимуществом является то, что ваш сайт будет выделяться из толпы . Даже несмотря на все возможности настройки, вы, вероятно, найдете все больше и больше сайтов, очень похожих на ваш.

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

Заключение: плюсы и минусы шаблонов веб-сайтов Squarespace

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

Плюсы шаблонов Squarespace

  • Стильно и эстетично
  • Достойный выбор
  • Хорошая гибкость и возможности настройки (особенно в версии 7.1).
  • Вы можете добавить собственный код

Тем не менее, я могу понять, почему некоторым людям хочется больше возможностей настройки или выбора. В этом случае я бы, вероятно, порекомендовал вам взглянуть на Wix (достаточно гибкий, чтобы размещать все вручную из редактора), Weebly (который позволяет вам настраивать код по своему вкусу) или даже Webflow (который предоставляет вам полный контроль над вашими дизайн сайта, без необходимости какого-либо кодирования).

Минусы шаблонов Squarespace

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

И это почти все. Что еще вы хотели бы узнать о шаблонах Squarespace? Позвольте мне знать в комментариях ниже.