Как использовать Squarespace для создания своего первого веб-сайта

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

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

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

Мы рассмотрим следующие компоненты Squarespace:

1. Дизайн (настройка общего внешнего вида вашего сайта)
2. Страницы (добавление контента на ваш сайт)
3. Настройки (точная настройка SEO и других бизнес-настроек)

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

Как использовать Squarespace… Подготовка перед началом

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

1. Доменное имя

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

Итак, вам понадобится доменное имя. Если вы еще не приобрели доменное имя, приобретите его сейчас.

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

NameCheap - это отличная служба регистрации доменных имен, обеспечивающая конкурентоспособные цены и отличный сервис. Проверьте это, чтобы купить доменное имя для своего сайта Squarespace.

Примечание. Если вам нужна помощь в регистрация доменного имени для вашего сайта эти генераторы доменных имен может помочь.

2. Примерное представление о структуре навигации вашего сайта. 

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

Например, вы можете добавить на свой сайт некоторые из следующих страниц:

3. Копирование и графика

Последнее, что вам понадобится, прежде чем вы начнете создавать свой сайт, - это контент. Так что напишите черновики всех страниц, которые вы собираетесь добавить.

Кроме того, скопируйте все изображения (или видео), которые вам понадобятся для создания веб-сайта Squarespace. Если вам нужны стоковые изображения, расположите их тоже. Правильные изображения могут иметь огромное влияние по конверсиям.

Когда весь контент и медиа будут под рукой, понадобится много времени.

А теперь приступим к созданию сайта.

(Если вы уже подписались на пробную версию Squarespace, перейдите к первой части руководства.)

Как создать свой первый веб-сайт Squarespace

Шаг №1: регистрация на сайте Squarespace

Все планы Squarespace начинаются с бесплатной пробной версии. Чтобы подписаться на бесплатную пробную версию, посетите Squarespace и выберите вариант 'СОЗДАТЬ САЙТ ':

Далее выбираем шаблон.

Чтобы упростить этот шаг, Squarespace группирует свои темы по следующим категориям:

Примеры тем Squarespace

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

Прохождение Squarespace регистрация процесс подготовки

Для этого пошагового руководства я настроил его, используя свою учетную запись Squarespace.

Я выбираю бизнес-категорию и выбираю шаблон Montauk.

После того, как вы выберете шаблон, Squarespace покажет вам короткую форму регистрации:

После завершения регистрации вы будете перенаправлены на четырехэтапный процесс персонализации контента сайта Squarespace.

1. Выбор того, для кого предназначен сайт

2. О чем этот сайт?

3. Каковы ваши цели для этого сайта?

4. Название сайта

После заполнения анкеты по персонализации содержания сайта я вижу следующий экран.

Как вы можете видеть на скриншоте слева, есть панель с различными настройками дизайна и предпочтениями. А справа - превью моего сайта.

Шаг №2: Использование Squarespace (Часть №1): варианты дизайна

В настройках дизайна Squarespace есть 10 элементов:

1. Логотип и название
2. шаблон
3. Редактор стилей
4. Редактор стилей страницы оформления заказа
5. Блокировка экрана
6. Панель объявлений
7. Мобильная информационная панель
8. Значок Squarespace
9. Пользовательские CSS
10. Дополнительно

Давайте подробно рассмотрим каждый из этих элементов.

1. Логотип и название

Мы уже дали нашему сайту имя, поэтому на этом этапе я добавлю слоган. Давайте установим слоган на 'Ресурс для начинающих Squarespace.

Как только я нажимаю на кнопку, я попадаю в инструмент создания логотипов Squarespace.

Этот инструмент для создания логотипов позволяет:

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

В целом инструмент для создания логотипов Squarespace довольно интуитивно понятен. Он имеет различные элементы дизайна или значки на панели с левой стороны.

Когда я искал ключевое слово 'интернет сайт', У меня много отличных иконок. Я выбрал тот, который вы видите справа, и сделал графический логотип.

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

Но, тем не менее, здесь можно скачать версию с низким разрешением. Пока этого достаточно.

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

Следующие два параметра в этом элементе дизайна - это установка значка и логотипа социального обмена. Если они у вас есть, отлично. В противном случае перейдите к следующей настройке.

Чтобы сохранить изменения, которые вы внесли на данный момент, нажмите кнопку "СПАСТИ' кнопку в верхней части панели.

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

2. Шаблон

'ШаблонВ разделе показаны все шаблоны, загруженные на сайт Squarespace.

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

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

Чаевые

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

Как узнать, какой шаблон Squarespace использует веб-сайт

Если вы видите понравившийся шаблон Squarespace и задаетесь вопросом, какую тему он использует, вот как это узнать:

1. Щелкните страницу правой кнопкой мыши> Просмотреть исходный код / ​​источник страницы
2. Вы заметите  в верхней части кода, чтобы указать, что это веб-сайт Squarespace
3. Нажмите Ctrl + F, чтобы найти на странице: идентификатор шаблона и скопируйте код

Используемый мной шаблон Montauk имеет идентификатор шаблона: 50521cf884aeb45fa5cfdb80. Попробуй себя. 

Найдя идентификатор шаблона, вы можете обратиться к Семейство шаблонов Squarespace чтобы перейти на официальный демонстрационный сайт Squarespace.

3. Редактор стилей

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

Каждый шаблон предлагает различные варианты настройки в Редактор стилей.

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

4. Редактор стилей страницы оформления заказа

Редактор стилей страницы оформления заказа помогает в настройке параметров страницы оформления заказа. Этот параметр в основном полезен для сайтов Squarespace, на которых есть магазины или являются веб-сайтами магазинов.

5. Экран блокировки

Squarespace позволяет блокировать страницы паролями. На всех таких страницах не отображается содержимое, а отображается экран блокировки.

Если вы не настраиваете Блокировка экрана вообще, вот как это будет выглядеть.

5. Панель объявлений

Панель объявлений позволяет добавить липкое уведомление вверху вашего сайта. Это отличная возможность привлечь внимание читателей к важному контенту.

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

Как видно на скриншоте выше, ссылку можно открыть в новом окне.

6. Мобильная информационная панель

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

Squarespace получает эту информацию из своего 'Деловая информация' раздел, который мы увидим позже.  

7. Значок Squarespace

Squarespace добавляет свой брендинг (значок) на все сайты, созданные с его помощью.

Значок Squarespace Параметры позволяют включать или отключать значок Squarespace, настраивать его положение и точно настраивать параметры отображения.

8. Пользовательский CSS

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

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

9. продвинутый

Дополнительно опция позволяет добавить больше шрифтов из Typekit на ваш сайт Squarespace. В Дополнительно settings также имеют расширенные настройки шаблона.

Итак, на этом завершается дизайн вашего сайта Squarespace.

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

Шаг № 3: Использование Squarespace (Часть № 2): Как?Страницы'работа в Squarespace

После того, как вы выбрали шаблон, настроили его и добавили заголовок и логотип вашего сайта, пора начинать добавлять контент.

Страницы Squarespace позволяют:

• Добавьте страницы (и контент) на свой сайт (например: О себе, Контакты и т. Д.)
• Добавьте блог на свой сайт
• Добавьте магазин на свой сайт
• Создайте главное меню своего сайта

Начнем с главного меню.

Когда вы впервые обращаетесь к настройкам страниц, вы заметите, что 'ВЕРХНЯЯ НАВИГАЦИЯ ' показывает пункты меню из демонстрации.

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

Для каждой страницы, которая обычно нужна сайту, Squarespace предоставляет готовые шаблоны.

Например, для таких страниц, как «О нас», «Функции», «Магазин», «Контакты» и т. Д. У вас уже есть готовые макеты страниц, которые вы можете просто загрузить на свой сайт.

1. Как добавить страницу в готовый шаблон

Давайте посмотрим, как можно добавить страницу в готовый шаблон.

Как вы можете видеть на следующем снимке экрана, есть два знака «+», на которые вы можете нажать, чтобы добавить страницу на свой сайт.

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

И когда вы нажимаете на второй вариант, вы просто добавляете страницу.

Я предлагаю вам начать добавление страницы со вторым вариантом. После того, как вы закончите создание страниц, удалите все демонстрационные страницы и перетащите все свои только что сгенерированные страницы и поместите их под ТОП НАВИГАЦИЯ.

Давайте добавим страницу «О нас». Как только вы нажмете на элемент 'Страница ', вы увидите следующие параметры на панели слева:

Как только я нажимаю "НАЧАТЬ РЕДАКТИРОВАНИЕ ', выбранный макет страницы "Обо мне" загружается в редактор страниц Squarespace. Чтобы отредактировать элементы страницы, наведите указатель мыши на верхнюю часть страницы (которая находится прямо под навигацией), и вы увидите, что открылась следующая панель параметров:

Нажмите на 'РЕДАКТИРОВАТЬ'.

На этом этапе вы можете либо начать редактирование содержимого страницы, либо нажать на значок «+'подпишите вверху страницы, чтобы добавить к ней дополнительные элементы дизайна.

После добавления элемента на свой сайт его положение легко изменить с помощью простого перетаскивания.

Примечание:

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

(Хотя макеты по умолчанию отображаются красиво.)

Добавление других страниц аналогично добавлению страницы «О нас».

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

В конце этого шага все страницы вашего сайта должны быть готовы к перемещению в главное меню.

Но прежде чем сделать ход, удалите демонстрационные страницы.

Затем перетащите свои недавно созданные страницы в папку 'ВЕРХНЯЯ НАВИГАЦИЯ '.

После того, как вы очистили навигацию, пришло время работать со страницами.

2. Как добавить контент на страницы Squarespace:

Чтобы добавить контент (или настроить дизайн страницы), просто щелкните имя страницы.

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

3. Как настроить некоторые параметры страницы высокого уровня.

Настройки страницы высокого уровня могут помочь с:

Чтобы внести изменения на более высоком уровне на страницу или удалить ее, щелкните значок настроек рядом с названием страницы.

Кроме того, чтобы установить страницу в качестве домашней, вам необходимо открыть эти настройки для выбранной страницы и выбрать 'СОХРАНИТЬ КАК СТАРТОВУЮ СТРАНИЦУ' опцию.

Важная страница Squarespace: блог

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

Чтобы добавить сообщение, щелкните значок «+» в параметрах пункта меню блога.

Редактор сообщений довольно интуитивно понятен.

Внизу вы увидите настройки для добавления категории и тегов к вашему сообщению.

Доступные опции настройки позволяют:

• Добавление избранного изображения в сообщение
• Назначьте автора сообщения
• Напишите отрывок
• Отметить сообщение как избранное

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

Давайте теперь посмотрим на настройки Squarespace.

Шаг №4: Использование Squarespace: изучение настроек

Использовать настройки Squarespace очень просто. Они сгруппированы в 3 категории:

1. Общие
2. Cайт
3. Commerce

Из них 'Общее' Категория позволяет добавлять бизнес-информацию, такую ​​как название вашей компании, адрес, налоговый идентификатор и т. д.

ИТорговля ' настройки актуальны для тех, кто хочет запустить интернет-магазин или добавить магазин на свой сайт.

Из этих категорийИнтернет сайт' Категория - это та, о которой я хотел бы поговорить.

'Интернет сайт' настройки включают:

• Основная информация - Этот параметр помогает вам добавить отрывок о том, чему ваш сайт. Некоторые шаблоны отображают эту информацию, поэтому вам следует заполнить ее.
• Домен -  После того, как вы приобрели домен, вы должны вернуть этот параметр и указать свой сайт Squarespace на этот домен. Интеграция стороннего домена это ветер.
• Электронная почта - Следующий пункт - электронная почта. Здесь можно выполнить интеграцию корпоративной электронной почты Gmail.
• Подключенные аккаунты - Здесь вы можете связать свои учетные записи в социальных сетях со своим сайтом Squarespace. В следующий раз, когда вы добавите значки профилей социальных сетей в любом месте вашего сайта Squarespace, Squarespace будет использовать информацию из этого раздела и автоматически свяжет значки с вашими профилями.
• Маркетинг - В параметрах настройки маркетинга у вас есть настройки для SEO, социальных сетей и Google Adwords.
  Настройки SEO отсюда поможет вам добавить отрывок для SEO для вашего сайта. Этот отрывок виден пользователю на странице результатов поисковой системы. Вы также можете установить форматы URL-адресов для различных элементов вашего сайта. Настройки социальных сетей помогут вам решить, какие кнопки публикации вы хотите отображать на своем веб-сайте. Маркетинговая настройка Google Adwords предназначена для сайтов, которые используют планы Squarespace Business или Commerce.
• Блог - Настройки ведения блога помогают установить формат URL-адреса сообщения в блоге.
  Не меняйте формат по умолчанию - он уже удобен для чтения. Однако при желании вы можете удалить из него год, месяц и дату. Эти настройки также позволяют интегрировать подключение вашего блога с Disqus, службой комментирования. Таким образом, ваши пользователи смогут комментировать ваш контент через свои учетные записи Disqus. (Также есть система комментариев по умолчанию, если вам не нужен Disqus.)
  Параметры ведения блога также помогают разрешить поставщикам AMP показывать AMP-версию ваших сообщений в блоге. (Оптимизированные для AMP страницы - это те, которые показывают веб-страницы в уменьшенных версиях для мобильных посетителей - это помогает обеспечить невероятно быстрый просмотр на мобильных устройствах.)
• SSL - Вы можете выбрать между защищенной и небезопасной версией своего сайта в разделе Настройка SSL. Выберите безопасную версию, потому что Google предпочитает безопасные веб-сайты небезопасным.
• Продвинутый - Расширенные настройки позволяют импортировать контент сайта из других конструкторов сайтов или CMS. Он также позволяет экспортировать ваш сайт в WordPress.
  Если вы создаете настраиваемую страницу 404 для своего сайта, вы можете использовать расширенные настройки, чтобы отображать настроенную страницу 404 вместо страницы 404 по умолчанию.
  Вы также можете добавить номер своей учетной записи Google Analytics с помощью этих настроек. На ваш сайт будет автоматически установлен скрипт Google Analytics.

Вот и все.

Если вы следовали инструкциям этого руководства, к настоящему времени ваш первый функциональный (если не идеальный) веб-сайт Squarespace должен быть готов.

Первое, что нужно сделать после запуска вашего сайта Squarespace

Когда вы запускаете новый веб-сайт, ваша первая задача - проиндексировать его в Google.

Чтобы ускорить процесс индексации, вы должны отправить его карту сайта в Google Search Console.

Карту сайта веб-сайта Squarespace можно найти по адресу:

http://www.yourdomain.com/sitemap.xml

Скопируйте URL-адрес карты сайта своего сайта и отправьте его через Поиск Консоль.

Как создать веб-сайт Squarespace - завершение

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

Я надеюсь, что это руководство поможет вам создать приблизительную версию вашего первого сайта Squarespace менее чем за 10 часов (с учетом времени для покупки домена и прочего).

Примечание. Если вы ищете альтернативные платформы, вот список платформы для создания собственного веб-сайта.