Jak wykorzystać Squarespace do zbudowania swojej pierwszej witryny internetowej

Squarespace jest jednym z fantastycznych twórcy stron internetowych. Jest to idealne rozwiązanie, jeśli używasz swojej witryny internetowej bez martwienia się o problemy z konfiguracją i konserwacją systemów CMS, takich jak WordPress.

Będziesz zaskoczony, jak szybko i łatwo możesz stworzyć wspaniałą stronę internetową z samą nazwą domeny i subskrypcją Squarespace.

W tym przewodniku Squarespace dla początkujących przyjrzymy się dokładnym krokom, które musisz wykonać, aby utworzyć i uruchom swoją pierwszą witrynę internetową.

Omówimy następujące komponenty Squarespace:

1. Projekt (dostosowywanie ogólnego wyglądu i sposobu działania witryny)
2. Strony (dodawanie treści do witryny)
3. Ustawienia (dostrajanie SEO i inne ustawienia biznesowe)

Kiedy zrozumiesz te komponenty, będziesz w stanie zbudować dowolną witrynę internetową za pomocą platformy.

Jak używać Squarespace… Przygotowanie przed rozpoczęciem

Zanim zaczniesz używać Squarespace do tworzenia swojej witryny, będziesz potrzebować kilku rzeczy:

1. Nazwa domeny

W ramach jednego z kroków konfiguracji naszej witryny połączymy nazwę domeny z kontem Squarespace.

Będziesz więc potrzebować nazwy domeny. Jeśli nie kupiłeś jeszcze nazwy domeny, kup ją teraz.

Możesz go też kupić w Squarespace, ale nie polecam tego.
Transfer domeny między dostawcami usług hostingowych, twórcami witryn lub systemami CMS jest zawsze łatwiejszy, gdy domena jest zarejestrowana w domenie zewnętrzny rejestrator domen.

NameCheap to doskonała usługa rejestratora nazw domen, która zapewnia konkurencyjne ceny i doskonałą obsługę. Sprawdź to, aby kupić nazwę domeny dla swojej witryny Squarespace.

Uwaga: jeśli potrzebujesz pomocy w rejestracja nazwy domeny dla Twojej witryny, pliki generatory nazw domen może pomóc.

2. Ogólne pojęcie o strukturze nawigacji w witrynie 

Znajomość struktury nawigacji witryny (lub jej elementów menu głównego) przed rozpoczęciem jej tworzenia przyspiesza ten proces. Więc weź papier i narysuj, jak będzie wyglądać menu Twojej witryny. To ćwiczenie pomoże w sfinalizowaniu różnych stron, które będziesz dodawać do swojej witryny.

Na przykład możesz dodać do swojej witryny niektóre z następujących stron:

3. Kopiowanie i grafika

Ostatnią rzeczą, której będziesz potrzebować przed rozpoczęciem tworzenia witryny, jest treść. Więc napisz wstępne wersje robocze wszystkich stron, które zamierzasz dodać.

Zbierz też wszystkie obrazy (lub filmy), których będziesz potrzebować, aby zbudować swoją witrynę Squarespace. Jeśli potrzebujesz wizerunki, też je zaaranżuj. Posiadanie odpowiednich zdjęć może: mają ogromny wpływ na konwersjach.

Posiadanie pod ręką całej zawartości i multimediów zajmie dużo czasu.

Zacznijmy teraz od zbudowania witryny.

(Jeśli zapisałeś się już na wersję próbną Squarespace, przejdź do pierwszej części przewodnika).

Jak stworzyć swoją pierwszą witrynę Squarespace

Krok 1: Rejestracja w witrynie Squarespace

Wszystkie plany Squarespace rozpoczynają się od bezpłatnego okresu próbnego. Aby zarejestrować się na bezpłatną wersję próbną, odwiedź Squarespace i wybierz opcję „UTWÓRZ STRONĘ":

Następnie wybierz szablon.

Aby ułatwić ten krok, Squarespace grupuje swoje motywy w następujące kategorie:

Przykłady motywów Squarespace

Oto kilka projektów, które można znaleźć w motywach Squarespace. Kliknij poniższe miniatury, aby uzyskać bardziej przejrzysty widok.

Opis przejścia Squarespace rejestracji proces

Na potrzeby tego przewodnika skonfigurowałem go za pomocą mojego konta Squarespace.

Wybieram kategorię biznesową i wybieram szablon Montauk.

Po wybraniu szablonu Squarespace wyświetli krótki formularz rejestracyjny:

Po zakończeniu rejestracji zostaniesz przekierowany do 4-etapowego procesu personalizacji treści witryny Squarespace.

1. Wybór dla kogo jest przeznaczona witryna

2. O czym jest ta witryna?

3. Jakie są Twoje cele dla tej witryny?

4. Nazwanie witryny

Po wypełnieniu kwestionariusza personalizacji treści serwisu widzę następujący ekran.

Jak widać na zrzucie ekranu, po lewej stronie znajduje się panel z różnymi ustawieniami projektu i preferencjami. Po prawej stronie jest podgląd mojej witryny.

Krok 2: Korzystanie ze Squarespace (część 1): opcje projektowania

Squarespace ma 10 pozycji w ustawieniach projektu:

1. logo & Tytuł
2. szablon
3. Edytor stylów
4. Edytor stylów strony kasy
5. blokada ekranu
6. Pasek ogłoszeń
7. Mobilny pasek informacyjny
8. Odznaka Squarespace
9. Niestandardowe CSS
10. Zaawansowane

Przyjrzyjmy się szczegółowo każdemu z tych elementów.

1. Logo i tytuł

Nadaliśmy już naszej witrynie nazwę, więc w tym kroku dodam slogan. Ustawmy slogan na „Zasób dla początkujących użytkowników Squarespace.

Po kliknięciu przycisku jestem kierowany do narzędzia do tworzenia logo Squarespace.

To narzędzie do tworzenia logo umożliwia:

• Wybierz jedną z wielu ikon logo
• Utwórz tylko logo tekstowe
• Wybierz logo obrazu
• Zmień czcionkę i kolor tekstu logo
• Zobacz, jak logo będzie wyglądać na wizytówkach i innych materiałach brandingowych

Ogólnie rzecz biorąc, narzędzie do tworzenia logo Squarespace jest dość intuicyjne. Ma różne elementy projektu lub ikony na panelu po lewej stronie.

Kiedy szukałem słowa kluczowego 'stronie internetowej', Mam wiele wspaniałych ikon. Wybrałem ten, który widzisz po prawej stronie i zrobiłem logo obrazu.

Próbowałem pobrać logo w wysokiej rozdzielczości, ale redaktor poprosił mnie o założenie konta Squarespace, aby móc to zrobić.

Jednak w tym momencie można również pobrać wersję o niskiej rozdzielczości. Na razie wystarczy.

Po zakończeniu okresu próbnego Squarespace i uaktualnieniu do planu premium powinno być możliwe bezproblemowe pobranie wersji w wysokiej rozdzielczości. Gdy otrzymasz plik w wysokiej rozdzielczości, możesz przesłać go do swojej witryny Squarespace.

Kolejne dwie opcje w ramach tego elementu projektu to ustawienie ikony ulubionych i logo udostępniania społecznościowego. Jeśli je masz, świetnie. W przeciwnym razie przejdź do następnego ustawienia.

Aby zapisać wprowadzone dotychczas zmiany, kliknij przycisk „ZAPISAĆ' przycisk na górze panelu.

Uwaga: jeśli chcesz stworzyć niesamowitą ulubioną ikonę dla swojej witryny, oto lista bezpłatnych generator favicon możesz rzucić okiem.

2. Szablon

Podczas spotkania Członkom Konsorcjum zostały zaprezentowane 'Szablon'' zawiera wszystkie szablony, które są pobierane w witrynie Squarespace.

Jak widzisz, w tej chwili moja lista szablonów zawiera tylko szablon Montauk ponieważ jest to szablon, z którego korzystałem podczas ustawiania mojej wersji próbnej.

Jeśli jesteś zadowolony z wybranego szablonu, przejdź do następnego kroku. Możesz też pobrać więcej szablonów.

Wskazówka

• Nie trać czasu na pobieranie i zmianę szablonów w tym momencie, ponieważ nie będzie to pomocne.
• Dopiero po zaprojektowaniu witryny i przesłaniu do niej treści będziesz w stanie zrozumieć, w jaki sposób różne szablony wyświetlają Twoje treści.
• Nie będziesz w stanie wiele dowiedzieć się z treścią demonstracyjną i obrazami.

Jak dowiedzieć się, jakiego szablonu Squarespace używa witryna internetowa

Jeśli widzisz szablon Squarespace, który Ci się podoba, i zastanawiasz się, jakiego motywu używa, oto jak się dowiedzieć:

1. Kliknij stronę prawym przyciskiem myszy> Wyświetl źródło / źródło strony
2. Zauważysz  u góry kodu, aby wskazać, że jest to witryna Squarespace
3. Naciśnij Ctrl + F, aby wyszukać na stronie: szablonid i skopiuj kod

Szablon, Montauk, którego używam, ma identyfikator szablonu: 50521cf884aeb45fa5cfdb80. Spróbuj sam. 

Po znalezieniu identyfikatora szablonu możesz odwołać się do Rodzina szablonów Squarespace aby przejść do oficjalnej strony demonstracyjnej Squarespace.

3. Edytor stylów

Podczas spotkania Członkom Konsorcjum zostały zaprezentowane Edytor stylów służy do dostosowywania ustawień szablonu, takich jak czcionki, kolor tytułu, pozycja logo, zawartość stopki i kilka innych.

Każdy szablon będzie oferował różne opcje dostosowywania w Edytor stylów.

Ale ponieważ wszystkie szablony Squarespace są zaprojektowane do perfekcji, radziłbym trzymać się z daleka od tej sekcji, chyba że oczywiście jesteś projektantem!

4. Edytor stylów strony zamówienia

Podczas spotkania Członkom Konsorcjum zostały zaprezentowane Edytor stylów strony kasy pomaga w dostosowaniu ustawień strony kasy. To ustawienie jest szczególnie przydatne w przypadku witryn Squarespace, które mają sklepy lub są witrynami sklepów.

5. Ekran blokady

Squarespace umożliwia blokowanie stron hasłem. Wszystkie takie strony nie wyświetlają zawartości, ale pokazują ekran blokady.

Jeśli nie dostosujesz blokada ekranu w ogóle, oto jak to będzie wyglądać.

5. Pasek ogłoszeń

Podczas spotkania Członkom Konsorcjum zostały zaprezentowane Pasek ogłoszeń pozwala dodać przyklejone powiadomienie w górnej części witryny. Jest to doskonała funkcja, która przyciąga uwagę czytelników do niektórych ważnych treści.

Po włączeniu Pasek ogłoszeń, możesz dodać swoją wiadomość i link, w który użytkownicy powinni kliknąć.

Jak widać na powyższym zrzucie ekranu, możesz otworzyć link w nowym oknie.

6. Mobilny pasek informacyjny

Jak sama nazwa wskazuje, Mobilny pasek informacyjny wyświetla się przed użytkownikami mobilnymi i może być używany do wyświetlania adresu e-mail, numeru telefonu, lokalizacji i godzin pracy.

Squarespace pobiera te informacje ze swojego 'Informacje biznesowe' sekcja, którą zobaczymy później.  

7. Odznaka Squarespace

Squarespace dodaje swoją markę (znaczek) do wszystkich utworzonych za jej pomocą witryn.

Podczas spotkania Członkom Konsorcjum zostały zaprezentowane Odznaka Squarespace Ustawienia pozwalają włączyć lub wyłączyć plakietkę Squarespace, dostosować jej położenie i dostosować ustawienia wyświetlania.

8. niestandardowe CSS

Jeśli chcesz dostosować swój szablon poza czcionką, kolorami i innymi domyślnymi opcjami dostosowywania, musisz skorzystać z pomocy Niestandardowe CSS.

Pamiętaj, że dodawanie niestandardowy CSS może zepsuć projekt szablonu - niezalecane.

9. zaawansowany

Podczas spotkania Członkom Konsorcjum zostały zaprezentowane Zaawansowane opcja pozwala dodać więcej czcionek z Typekit do Twojej witryny Squarespace. Plik Zaawansowane ustawienia mają również zaawansowane ustawienia szablonów.

Na tym kończy się część projektowa witryny Squarespace.

Następnie przyjrzymy się stronom Squarespace i sposobom ich wykorzystania do przesyłania treści do świeżo zaprojektowanej witryny.

Krok # 3: Korzystanie z Squarespace (część # 2): Jak 'O Nas'pracy w Squarespace

Po wybraniu szablonu, dostosowaniu go i dodaniu tytułu i logo witryny, czas zacząć dodawać zawartość.

Strony Squarespace umożliwiają:

• Dodaj strony (i treść) do swojej witryny (na przykład: Informacje, Kontakt i nie tylko)
• Dodaj bloga do swojej witryny
• Dodaj sklep do swojej witryny
• Zbuduj główne menu swojej witryny

Zacznijmy od menu głównego.

Gdy po raz pierwszy uzyskasz dostęp do ustawień stron, zauważysz, że 'NAJWYŻSZA NAWIGACJA ' pokazuje pozycje menu z wersji demonstracyjnej.

Na razie chciałbym, abyś po prostu zapomniał o stronach z demo i zaczął dodawać własne strony.

Squarespace przygotował gotowe szablony dla każdej strony, której zwykle potrzebuje witryna.

Na przykład w przypadku stron takich jak Informacje, Funkcje, Sklep, Kontakt i nie tylko - masz już gotowe układy stron, które możesz po prostu załadować do swojej witryny.

1. Jak dodać stronę do gotowego szablonu

Zobaczmy, jak dodać stronę do gotowego szablonu.

Jak widać na poniższym zrzucie ekranu, istnieją dwa znaki „+”, na które można kliknąć, aby dodać stronę do witryny.

Klikając pierwszą opcję, dodajesz nie tylko stronę, ale także dodajesz ją do menu głównego swojej witryny.

Po kliknięciu drugiej opcji po prostu dodajesz stronę.

Proponuję rozpocząć dodawanie strony od drugiej opcji. Po zakończeniu tworzenia stron usuń wszystkie strony demonstracyjne i przeciągnij wszystkie świeżo wygenerowane strony i upuść je pod NAJWYŻSZA NAWIGACJA.

Dodajmy stronę „Informacje”. Po kliknięciu elementu 'Strona', w panelu po lewej stronie zobaczysz następujące opcje:

Kiedy kliknę „ZACZNIJ EDYTOWAĆ ', wybrany układ strony o mnie zostanie załadowany w edytorze stron Squarespace. Aby edytować elementy strony, najedź kursorem na górę strony (tuż pod nawigacją), a otworzy się następujący panel opcji:

Kliknij 'EDYTOWAĆ'.

W tym momencie możesz rozpocząć edycję zawartości strony lub kliknąć przycisk „+'u góry strony, aby dodać do niej więcej elementów projektu.

Po dodaniu elementu do witryny można łatwo zmienić jego położenie za pomocą prostej funkcji „przeciągnij i upuść”.

Uwaga:

Jeśli dostosujesz domyślne układy i dodasz różne elementy, w tym element dystansowy, czasami podgląd na telefonie komórkowym może wyglądać śmiesznie - co więcej, odstępy między różnymi elementami mogą wyglądać nieco inaczej.

(Jednak domyślne układy renderują się pięknie).

Dodawanie innych stron jest podobne do dodawania strony z informacjami.

Na razie najlepiej używać domyślnych układów, jeśli chcesz, aby witryna działała bardzo szybko.

Pod koniec tego kroku powinieneś mieć wszystkie strony swojej witryny gotowe do przeniesienia do menu głównego.

Ale przed przeniesieniem usuń strony demonstracyjne.

Następnie przeciągnij i upuść nowo utworzone strony do „NAJWYŻSZA NAWIGACJA '.

Po wyczyszczeniu nawigacji czas zająć się stronami.

2. Jak dodawać zawartość do stron Squarespace:

Aby dodać treść (lub dostosować wygląd strony), po prostu kliknij nazwę strony.

Po kliknięciu wczytuje się edytor stron i możesz zamienić zawartość szablonu na treść, którą napisałeś w krokach przygotowawczych.

3. Jak skonfigurować ustawienia strony wysokiego poziomu

Wysokopoziomowe ustawienia strony mogą pomóc w przypadku:

Aby wprowadzić zmiany na wyższym poziomie na stronie lub ją usunąć, kliknij ikonę ustawień obok nazwy strony.

Ponadto, aby ustawić stronę jako stronę główną, musisz otworzyć te ustawienia dla wybranej strony i wybrać opcję „USTAW JAKO STRONĘ DOMOWĄ' opcja.

Ważna strona Squarespace: blog

Chociaż możesz dodać bloga jako prostą stronę w Squarespace, może być konieczne wprowadzenie kilku dodatkowych ustawień.

Aby dodać post, kliknij znak „+” w opcjach pozycji menu bloga.

Edytor postów jest dość intuicyjny.

U dołu zobaczysz ustawienia dodawania kategorii i tagów do swojego posta.

Podczas spotkania Członkom Konsorcjum zostały zaprezentowane Opcje ustawienia pozwalają:

• Dodaj wyróżniony obraz do posta
• Przypisz autora do posta
• Napisz fragment
• Oznacz post jako polecany

Miejmy nadzieję, że dzięki powyższej sekcji będziesz mieć świetnie wyglądającą witrynę internetową z zawartością, a nawet blogiem.

Przyjrzyjmy się teraz ustawieniom Squarespace.

Krok 4: Korzystanie ze Squarespace: eksploracja ustawień

Korzystanie z ustawień Squarespace jest łatwe. Są podzielone na 3 kategorie:

1. Ogólne warunki
2. Strona internetowa
3. Handel

Spośród nich „Generał' kategoria umożliwia dodanie informacji o firmie, takich jak nazwa firmy, adres, identyfikator podatkowy i inne.

I 'Handel' ustawienia są istotne dla osoby, która chce prowadzić sklep internetowy lub dodać sklep do swojej witryny.

Spośród tych kategorii „Stronie internetowej' kategoria to ta, o której chciałbym porozmawiać.

"Stronie internetowej' ustawienia obejmują:

• Podstawowe informacje - To ustawienie pomaga dodać fragment informacji o tym, o czym jest Twoja witryna. Niektóre szablony wyświetlają te informacje, więc należy je wypełnić.
• Domena -  Po zakupie domeny wróć do tego ustawienia i wskaż w witrynie Squarespace tę domenę. Integracja domeny zewnętrznej to pestka.
• E-maile - Następna pozycja to E-mail. Integrację z biznesową pocztą e-mail Gmail można przeprowadzić tutaj.
• Połączone konta - Tutaj możesz połączyć swoje konta w mediach społecznościowych ze swoją witryną Squarespace. Następnym razem, gdy dodasz ikony profili mediów społecznościowych w dowolnym miejscu na swojej stronie Squarespace, Squarespace wykorzysta informacje z tej sekcji i automagicznie połączy ikony z Twoimi profilami.
• Marketing - W opcjach ustawień marketingowych masz ustawienia dla SEO, mediów społecznościowych i Google Adwords.
  Ustawienia SEO stąd pomoże Ci dodać fragment SEO dla Twojej witryny. Ten fragment jest widoczny dla użytkownika na stronie wyników wyszukiwania. Możesz także ustawić formaty adresów URL różnych elementów w swojej witrynie. Ustawienia mediów społecznościowych pomogą Ci zdecydować, które przyciski udostępniania chcesz wyświetlać w swojej witrynie. Ustawienie marketingowe Google Adwords jest przeznaczone dla witryn korzystających z planów biznesowych lub handlowych Squarespace.
• Blogowanie - Ustawienia blogowania pomagają ustawić format adresu URL posta na blogu.
  Nie zmieniaj domyślnego formatu - jest już przyjazny dla czytelnika. Jeśli jednak chcesz, możesz usunąć z niego rok, miesiąc i datę. Te ustawienia umożliwiają również integrację połączenia Twojego bloga z usługą komentowania Disqus. W ten sposób Twoi użytkownicy będą mogli komentować Twoje treści za pośrednictwem swoich kont Disqus. (Istnieje również domyślny system komentowania, jeśli nie chcesz Disqus).
  Ustawienia blogów pomagają również w umożliwieniu dostawcom AMP wyświetlania wersji AMP Twoich postów na blogu. (Strony zoptymalizowane pod kątem AMP to takie, które wyświetlają stonowane wersje stron internetowych użytkownikom mobilnym - pomaga to w oferowaniu niesamowicie szybkiego przeglądania na urządzeniach mobilnych).
• SSL - Możesz wybrać między zabezpieczoną i niezabezpieczoną wersją swojej witryny pod Ustawienie SSL. Wybierz wersję zabezpieczoną, ponieważ Google woli bezpieczne witryny niż niezabezpieczone.
• Zaawansowane - Zaawansowane ustawienia umożliwiają importowanie zawartości witryny z innych kreatorów witryn lub systemów CMS. Pozwala także wyeksportować witrynę do WordPress.
  Jeśli utworzysz niestandardową stronę 404 dla swojej witryny, możesz użyć ustawień zaawansowanych, aby wyświetlić dostosowaną stronę 404 zamiast domyślnej strony 404.
  Możesz również dodać swoje Google Analytics numer konta za pośrednictwem tych ustawień. Spowoduje to automatyczne zainstalowanie skryptu Google Analytics w Twojej witrynie.

to jest to!

Jeśli postępujesz zgodnie z instrukcjami tego przewodnika, Twoja pierwsza funkcjonalna (jeśli nie idealna) witryna internetowa Squarespace powinna być już gotowa.

Pierwsza rzecz do zrobienia po uruchomieniu witryny Squarespace

Po uruchomieniu nowej witryny, pierwszym zadaniem jest zaindeksowanie jej przez Google.

Aby przyspieszyć proces indeksowania, musisz przesłać mapę witryny do Google Search Console.

Mapę witryny Squarespace można znaleźć pod adresem:

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

Skopiuj więc adres URL mapy witryny i prześlij go przez Szukaj Console.

Jak stworzyć witrynę Squarespace - podsumowanie

Stworzenie strony internetowej Squarespace oraz ulepszenie i dostosowanie jej do perfekcji nie powinno zająć Ci więcej niż tydzień. Gdy skończysz, nie musisz się martwić o aktualizacje, włamania, hosting ani cokolwiek innego; Squarespace będzie zarządzać Twoją witryną.

Mam nadzieję, że ten przewodnik umożliwi Ci zbudowanie przybliżonej wersji Twojej pierwszej witryny Squarespace w mniej niż 10 godzin (uwzględniając czas potrzebny na zakup domeny i inne rzeczy).

Uwaga: jeśli szukasz alternatywnych platform, oto lista platformy do budowy własnej strony internetowej.