Utwórz stronę z szablonem startowym
Data ostatniej aktualizacji: stycznia 20, 2023
Dotyczy:
Wszystkie produkty i plany |
Możesz użyć szablonu startowego do zbudowania prostej strony internetowej lub strony docelowej. Ten artykuł opisuje, jak stworzyć nową stronę, dostosować jej wygląd i opublikować stronę przy użyciu szablonu startowego.
Uwaga: szablony startowe nie obsługują inteligentnej zawartości, modułów niestandardowych, personalizacji, dostępu do kodu źródłowego w modułach tekstowych, stron chronionych hasłem ani zaawansowanych opcji, takich jak zamiana szablonów i dostęp do kodu HTML nagłówka.
Tworzenie strony z szablonem startowym
Aby utworzyć nowy landing page z szablonem startowym:
-
Przejdź do swojej zawartości:
- Strony witryny: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
- Landing Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony docelowe.
- W prawym górnym rogu kliknij menu rozwijane Utwórz i wybierz stronę internetową lub stronę lądowania.
- Na ekranie wyboru szablonów u góry strony pojawią się szablony z Twojej aktywny motywstrony pojawią się na górze strony, a wszystkie inne szablony znajdą się w sekcjiInne szablony na dole. Kliknijszablon. Jeśli nie wybrałeś aktywnego motywu, zostaniesz poproszony o jego wybranie lub kliknij Pomiń do szablonów, aby wybrać istniejący szablon.
- Aby utworzyć stronę z wybranym szablonem, kliknij Wybierz ten szablon w prawym górnym rogu. Aby wyświetlić podgląd strony na telefonie komórkowym lub komputerze stacjonarnym, kliknij Podgląd.
Edycja zawartości strony
Szablony startowe zawierają bloki zawartości strony internetowej zwane modułami. Moduły te można układać w poziome wiersze lub pionowe kolumny.
Możesz grupować wiersze i kolumny w sekcje elementów. Grupując elementy razem, możesz zastosować style tła do całego obszaru strony. Elementy te można również przeciągać i upuszczać, aby zmienić układ strony. Dowiedz się więcej o edytowaniu zawartości strony w obszarze przeciągania i upuszczania.
Aby dostosować wygląd strony na urządzeniach mobilnych, kliknij w edytorze paska bocznegoikonę ediEditdla urządzeń mobilnych.
Dostosuj czcionki, kolory i przyciski
Aby dostosować domyślne style dla swojego szablonu startowego, kliknij zakładkę Motyw w edytorze paska bocznego. Możesz także dostosować kolor tła lub obraz dla konkretnego wiersza, kolumny lub sekcji
strony.
Typografia
W sekcji Typografia edytuj czcionki i style czcionek zastosowane do treści strony i nagłówków. Wszystkie czcionki Google są obsługiwane.- Tekst ciała: dostosuj czcionkę, rozmiar czcionki i kolory czcionek dla głównej części strony.
- Kliknij menu rozwijane Tekst strony i wybierz czcionkę
-
- Klikaj strzałki , aby dostosować rozmiar czcionki.
- Kliknij próbnik kolorów i wybierz kolor dla swojej czcionki. Aby ustawić kolor niestandardowy, kliknij kartę Zaawansowane i wprowadź wartość szesnastkową
.
- Nagłówki: dostosuj czcionkę i kolor dla tekstu w modułach ze znacznikiem nagłówka.
- Kliknij menu rozwijane Nagłówki i wybierz czcionkę .
- Kliknij próbnik kolorów i wybierz kolor czcionki. Aby ustawić niestandardowy kolor, kliknij kartę Zaawansowane i wprowadź wartość szesnastkową
.
- Tekst linku: dostosuj czcionki i kolory stosowane do linków na stronie.
- Kliknij menu rozwijane Tekst lin ku i wybierz czcionkę .
- Kliknij próbnik kolorów i wybierz kolor łącza. Aby ustawić niestandardowy kolor, kliknij kartę Zaawansowane i wprowadź wartość szesnastkową .
- Kliknij menu rozwij ane i wybierz styl
-
- Dostosuj kolor i przejrzystość swoich linków, gdy są one najechane, kliknięte i już odwiedzone:
- Kolor najechania linku: kliknij próbnik kolorów i wybierz kolor linku dla sytuacji, gdy odwiedzający najeżdża na link. Aby zmienić przezroczystość koloru, wpisz wartość procentową
- Dostosuj kolor i przejrzystość swoich linków, gdy są one najechane, kliknięte i już odwiedzone:
-
-
- Aktywny kolor linku: kliknij próbnik kolorów i wybierz kolor linku, który ma być używany, gdy link jest klikany. Aby zmienić przezroczystość koloru, wpisz wartość procentową
-
-
-
- Kolor linku odwiedzanego: kliknij próbnik kolorów i wybierz kolor linku dla sytuacji, gdy link został już kliknięty przez odwiedzającego. Aby zmienić przezroczystość koloru, wpisz wartość procentową
-
Formularze i przyciski
W sekcji Formularze i przyciski dostosuj sposób, w jaki przyciski proste i przyciski wysyłania formularzy są stylizowane na stronie.- Kolor tła przycisków: dostosuj kolor stosowany do tła przycisków.
- Wprowadź wartość szesnastkową lub kliknij próbnik kolorów i wybierz kolor .
- Aby ustawić przezroczystość koloru tła przycisków, wpisz wartość procentową
w tym polu.
- Kolor tekstu przycisku: dostosuj kolor stosowany do tekstu przycisków na swojej stronie.
- Wprowadź wartość szesnastkową lub kliknij próbnik kolorów, aby wybrać kolor tekstu.
- Aby ustawić przezroczystość koloru tła przycisku, wpisz w polu wartość procentową
.
- Promień narożnika przycisku: dostosuj, jak okrągłe lub kwadratowe są przyciski na Twojej stronie.
- Wprowadź wartość w polu lub kliknij i przeciągnij suwak do nowej pozycji.
- Wyższa wartość oznacza, że przyciski na Twojej stronie będą miały bardziej okrągłe krawędzie, podczas gdy wartość zero oznacza, że Twoje przyciski będą prostokątne.
Uwaga: HubSpot zaleca zachowanie spójnych kolorów, czcionek i stylów w oparciu o ustawienia na karcie Projektowanie. Możesz zastąpić domyślne style dla poszczególnych modułów w zakładce Opcje
na lewym panelu.Podgląd i publikacja strony
Zanim strona zostanie uruchomiona, kliknij przycisk Podgląd w prawym górnym rogu, aby sprawdzić, jak strona będzie wyglądać na komputerach stacjonarnych i urządzeniach mobilnych. Po uzyskaniu satysfakcjonującego podglądu strony kliknij przycisk Opublikuj
w prawym górnym rogu.
Thank you for your feedback, it means a lot to us.
Powiązana treść
-
Eksportuj swoją zawartość i dane
Dowiedz się, jak eksportować zawartość i dane HubSpot z konta, takie jak strony, kontakty i pliki. Uwaga:...
Baza wiedzy -
Skonfiguruj pojedyncze logowanie (SSO), aby uzyskać dostęp do prywatnych treści
Pojedyncze logowanie (SSO) to sposób bezpiecznego logowania się do różnych aplikacji za pomocą jednej nazwy...
Baza wiedzy -
Spersonalizuj swoje treści
Dzięki tokenom personalizacji możesz pokazywać spersonalizowane treści swoim kontaktom w oparciu o wartości...
Baza wiedzy