Squarespace является одним из фантастических конструкторов сайтов,. Это идеально, если вы используете для своего веб-сайта, не желая беспокоиться о настройке и обслуживании.sslтаких CMS, как WordPress.
Вы будете удивлены тем, как быстро и легко вы можете создать великолепный веб-сайт, используя только доменное имя и Squarespace подписка.
В этом Squarespace для начинающих, мы рассмотрим точные шаги, которые необходимо предпринять для создания и запустите свой первый сайт.
Мы рассмотрим следующее Squarespace компоненты:
- Дизайн (настройка общего внешнего вида вашего сайта)
- Страницы (добавление контента на ваш сайт)
- Настройки (точная настройка SEO и других бизнес-настроек)
Как только вы разберетесь с этими компонентами, вы сможете создать любой веб-сайт, используя эту платформу.
Навигация
- Шаг №1: Зарегистрируйтесь в Squarespace
- Шаг № 2: Понимание Squarespace (Часть № 1): Варианты дизайна
- Шаг № 3: Понимание Squarespace (Часть № 2): Как работают «Страницы»
- Шаг № 4: Изучение Squarespace
- Заворачивать
Список инструментов
- Платформа - Squarespace
- Регистратор домена - Name Cheap
- (Это все, что вам нужно, просто!)
Как это работает? Squarespace… Подготовка перед началом
Прежде чем начать использовать Squarespace Чтобы создать свой веб-сайт, вам понадобится несколько вещей:
1. Доменное имя
В качестве одного из шагов по настройке веб-сайта мы свяжем ваше доменное имя с вашим Squarespace .
Итак, вам понадобится доменное имя. Если вы еще не приобрели доменное имя, приобретите его сейчас.
Вы можете купить его у Squarespace тоже, но я не буду рекомендовать это.
Перенос домена между хостинг-провайдерами, разработчиками веб-сайтов или CMS всегда проще, если домен зарегистрирован на сторонний регистратор доменов.
NameCheap — это отличная служба регистрации доменных имен, предлагающая конкурентоспособные цены и отличный сервис. Проверьте это, чтобы купить доменное имя для вашего Squarespace Веб-сайт.
Примечание. Если вам нужна помощь в регистрация доменного имени для вашего сайта эти генераторы доменных имен может помочь.
2. Примерное представление о структуре навигации вашего сайта.
Знание структуры навигации вашего сайта (или его пунктов главного меню) до начала его создания ускоряет процесс. Так что возьмите бумагу и нарисуйте, как будет выглядеть меню вашего сайта. Это упражнение поможет завершить работу над различными страницами, которые вы добавите на свой сайт.
Например, вы можете добавить на свой сайт некоторые из следующих страниц:
- Около
- Закажите
- Портфолио
- Услуги
- нанять
- Магазин
- Особенности
- Цены
- Команда
- Контакты
3. Копирование и графика
Последнее, что вам понадобится, прежде чем вы начнете создавать свой сайт, - это контент. Так что напишите черновики всех страниц, которые вы собираетесь добавить.
Кроме того, соберите все изображения (или видео), которые вам понадобятся для создания Squarespace Веб-сайт. Если тебе надо стоковые изображения, устроить и их тоже. Правильные изображения могут иметь огромное влияние по конверсиям.
Когда весь контент и медиа будут под рукой, понадобится много времени.
А теперь приступим к созданию сайта.
(Если вы уже подписались на Squarespace пробная версия, перейдите к первой части руководства.)
Как построить свой первый Squarespace веб-сайт Честного ЗНАКа
Шаг №1: Зарегистрируйтесь в Squarespace веб-сайт Честного ЗНАКа
Все Squarespace планы начинаются с бесплатной пробной версии. Чтобы подписаться на бесплатную пробную версию, посетите Squarespace и выберите вариант 'СОЗДАТЬ САЙТ ':
Далее выбираем шаблон.
Чтобы сделать этот шаг легким, Squarespace Груups его темы на следующие категории:
- Компании
- Портфели
- Блоги
- музыканты
- ресторан
- Организация мероприятий
- Персонал
Squarespace Образцы тем
Вот несколько дизайнов, которые вы можете найти на Squarespace темы. Нажмите на следующие миниатюры, чтобы получить более четкое представление.
Прохождение Squarespace регистрация процесс подготовки
Для целей этого пошагового руководства я настроил его, используя Squarespace .
Я выбираю бизнес-категорию и выбираю шаблон Montauk.
Как только вы выберете шаблон, Squarespace покажет вам короткую форму регистрации:
После завершения регистрации вы будете перенаправлены на 4-этапную Squarespace процесс персонализации контента сайта.
1. Выбор того, для кого предназначен сайт
2. О чем этот сайт?
3. Каковы ваши цели для этого сайта?
4. Название сайта
После заполнения анкеты по персонализации содержания сайта я вижу следующий экран.
Как вы можете видеть на скриншоте слева, есть панель с различными настройками дизайна и предпочтениями. А справа - превью моего сайта.
Шаг № 2: Использование Squarespace (Часть № 1): Варианты дизайна
Squarespace имеет 10 элементов в настройках дизайна:
- Логотип и название
- шаблон
- Редактор стилей
- Редактор стилей страницы оформления заказа
- Блокировка экрана
- Панель объявлений
- Мобильная информационная панель
- Squarespace Значок
- Пользовательские CSS
- Продвинутый
Давайте подробно рассмотрим каждый из этих элементов.
1. Логотип и название
Мы уже дали нашему сайту имя, поэтому на этом этапе я добавлю слоган. Давайте установим слоган на 'Ресурс для Squarespace для начинающих.
Как только я нажимаю на кнопку, я перенаправляюсь на Squarespaceинструмент для создания логотипов.
Этот инструмент для создания логотипов позволяет:
- Выбирайте из множества значков логотипов
- Создайте просто текстовый логотип
- Выберите графический логотип
- Измените шрифт и цвет текста логотипа
- Предварительный просмотр того, как логотип будет выглядеть на визитных карточках и других материалах для брендинга.
В целом, SquarespaceИнструмент для создания логотипов довольно интуитивно понятен. Он имеет различные элементы дизайна или значки на панели с левой стороны.
Когда я искал ключевое слово 'интернет сайт', У меня много отличных иконок. Я выбрал тот, который вы видите справа, и сделал графический логотип.
Я попытался загрузить версию логотипа в высоком разрешении, но редактор предложил мне подписаться на Squarespace счет, чтобы иметь возможность это сделать.
Но, тем не менее, здесь можно скачать версию с низким разрешением. Пока этого достаточно.
Как только Squarespace пробная версия заканчивается, и вы переходите на премиум-план, вы сможете без проблем загрузить версию с высоким разрешением. Когда вы получите файл с высоким разрешением, вы можете загрузить его на свой Squarespace сайт.
Следующие два параметра в этом элементе дизайна - это установка значка и логотипа социального обмена. Если они у вас есть, отлично. В противном случае перейдите к следующей настройке.
Чтобы сохранить изменения, которые вы внесли на данный момент, нажмите кнопку "СПАСТИ' кнопку в верхней части панели.
Примечание. Если вы хотите создать отличный значок для своего веб-сайта, вот список бесплатных генератор значков вы можете посмотреть.
2. Шаблон
Наблюдения и советы этой статьи мы подготовили на основании опыта команды 'Шаблон' показывает все шаблоны, загруженные внутри Squarespace сайт.
Прямо сейчас, как видите, мой список шаблонов включает только шаблон Montauk потому что это шаблон, с которым я подписался при настройке пробной версии.
Если вас устраивает выбранный вами шаблон, переходите к следующему шагу. Или вы можете загрузить больше шаблонов.
Совет
- Не тратьте время на загрузку и переключение шаблонов на этом этапе, потому что это не поможет.
- Только после того, как вы создадите свой сайт и загрузите на него контент, вы сможете понять, как различные шаблоны отображают ваш контент.
- С демонстрационным контентом и изображениями много разобраться не получится.
Как узнать, что Squarespace шаблон, который использует веб-сайт
Если вы видите Squarespace шаблон, который вам нравится, и вам интересно, какую тему он использует, вот как это узнать,
- Щелкните страницу правой кнопкой мыши> Просмотреть исходный код / источник страницы
- Вы заметите <!– This is Squarespace. --> в верхней части кода, чтобы указать, что это Squarespace веб-сайт Честного ЗНАКа
- Нажмите 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редактор страницы. Чтобы редактировать элементы страницы, hover в верхней части страницы (которая находится прямо под навигацией), и вы увидите, что откроется следующая панель параметров:
Нажмите на 'РЕДАКТИРОВАТЬ'.
На этом этапе вы можете либо начать редактирование содержимого страницы, либо нажать на значок «+'подпишите вверху страницы, чтобы добавить к ней дополнительные элементы дизайна.
После добавления элемента на свой сайт его положение легко изменить с помощью простого перетаскивания.
Примечание:
Если вы настроите макеты по умолчанию и добавите различные элементы, включая элемент распорки, иногда ваш мобильный предварительный просмотр может выглядеть забавно - более того, интервал между различными элементами может выглядеть немного необычным.
(Хотя макеты по умолчанию отображаются красиво.)
Добавление других страниц аналогично добавлению страницы «О нас».
На данный момент лучше всего использовать макеты по умолчанию, если вы хотите, чтобы сайт заработал очень быстро.
В конце этого шага все страницы вашего сайта должны быть готовы к перемещению в главное меню.
Но прежде чем сделать ход, удалите демонстрационные страницы.
Затем перетащите свои недавно созданные страницы в папку 'ВЕРХНЯЯ НАВИГАЦИЯ '.
После того, как вы очистили навигацию, пришло время работать со страницами.
2. Как добавить контент в Squarespace страницы:
Чтобы добавить контент (или настроить дизайн страницы), просто щелкните имя страницы.
После того, как вы нажмете, загрузится редактор страницы, и вы сможете заменить содержимое шаблона содержимым, написанным на этапах подготовки.
3. Как настроить некоторые параметры страницы высокого уровня.
Настройки страницы высокого уровня могут помочь с:
- Заголовок навигации
- Название
- Описание (часто используется для SEO)
- URL-слизень
- Заглавное изображение
- Код отслеживания
Чтобы внести изменения на более высоком уровне на страницу или удалить ее, щелкните значок настроек рядом с названием страницы.
Кроме того, чтобы установить страницу в качестве домашней, вам необходимо открыть эти настройки для выбранной страницы и выбрать 'СОХРАНИТЬ КАК СТАРТОВУЮ СТРАНИЦУ' опцию.
Важным Squarespace страница: блог
Хотя вы можете добавить блог как простую страницу в Squarespace, вам может потребоваться сделать несколько дополнительных настроек для него.
Чтобы добавить сообщение, щелкните значок «+» в параметрах пункта меню блога.
Редактор сообщений довольно интуитивно понятен.
Внизу вы увидите настройки для добавления категории и тегов к вашему сообщению.
Наблюдения и советы этой статьи мы подготовили на основании опыта команды Опции настройки позволяют:
- Добавление избранного изображения в сообщение
- Назначьте автора сообщения
- Напишите отрывок
- Отметить сообщение как избранное
Надеюсь, что с указанным выше разделом у вас будет готовый великолепно выглядящий веб-сайт с вашим контентом и даже блог.
Давайте теперь посмотрим на Squarespace настройки.
Шаг № 4: Использование Squarespace: изучение настроек
. Squarespaceнастройки просты. Они сгруппированы в 3 категории:
- Общие
- Cайт
- Commerce
Из них 'Общее' Категория позволяет добавлять бизнес-информацию, такую как название вашей компании, адрес, налоговый идентификатор и т. д.
ИТорговля ' настройки актуальны для тех, кто хочет запустить интернет-магазин или добавить магазин на свой сайт.
Из этих категорийИнтернет сайт' Категория - это та, о которой я хотел бы поговорить.
'Интернет сайт' настройки включают:
- Основная информация - Этот параметр помогает вам добавить отрывок о том, чему ваш сайт. Некоторые шаблоны отображают эту информацию, поэтому вам следует заполнить ее.
- Домен - После того, как вы приобрели домен, вы должны вернуться к этой настройке и указать свой Squarespace сайт на этот домен. Интеграция стороннего домена это ветер.
- Электронная почта - Следующий пункт - электронная почта. Здесь можно выполнить интеграцию корпоративной электронной почты Gmail.
- Подключенные аккаунты - Вы можете связать свои аккаунты в социальных сетях с Squarespace сайт здесь. В следующий раз, когда вы добавите значки профилей социальных сетей в любое место на вашем Squarespace сайта, Squarespace будет использовать информацию из этого раздела и автоматически свяжет значки с вашими профилями.
- Маркетинг - В параметрах настройки маркетинга у вас есть настройки для SEO, социальных сетей и Google Adwords.
Настройки SEO отсюда поможет вам добавить выдержку SEO для вашего сайта. Этот отрывок виден пользователю на странице результатов поисковой системы. Вы также можете установить форматы URL для различных элементов на вашем сайте. Настройки социальных сетей помогут вам решить, какие кнопки общего доступа вы хотите показывать на своем веб-сайте. Маркетинговая настройка Google Adwords предназначена для сайтов, использующих SquarespaceБизнес или коммерческие планы. - Блог - Настройки ведения блога помогают установить формат 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.
A Squarespace карту сайта можно найти по адресу:
http://www.yourdomain.com/sitemap.xml
Скопируйте URL-адрес карты сайта своего сайта и отправьте его через Поиск Консоль.
Как построить Squarespace сайт - подведение итогов
Создание Squarespace веб-сайт, а также настройка и доведение его до совершенства не должны занимать у вас больше недели. Как только вы закончите, вам не нужно беспокоиться об обновлениях, взломе, хостинге или чем-то еще; Squarespace будет управлять вашим сайтом для вас.
Я надеюсь, что это руководство поможет вам создать грубую версию вашего первого Squarespace сайта менее чем за 10 часов (с учетом времени на покупку домена и прочего).
Примечание. Если вы ищете альтернативные платформы, вот список платформы для создания собственного веб-сайта.
