Dodawanie i przenoszenie sekcji oraz zmiana rozmiarów przeciąganiem

Moduł 3: Teksty, zdjęcia i sekcje · Czas czytania: 10 min

Cel lekcji: Po tej lekcji potrafią Państwo zbudować stronę z sekcji: dodać sekcję za pomocą wybieraka lub czatu, przenieść ją, skopiować i usunąć, przeciągnięciem zmienić odstępy i rozmiary, a także dla każdej sekcji wybrać kolumny, rogi, tło i widoczność na telefonie.

Kluczowe pojęcia: sekcja, Sekcje, Dodaj sekcję, forma, Sekcja poniżej, trzy projekty, Utwórz z AI, Edytuj sekcję, Odstęp, Odstęp między elementami, Kolumny, Rogi, Ukryj na telefonie, uchwyt, Własny HTML

Strona to stos sekcji

Każda strona Państwa witryny składa się z sekcji: poziomych pasów ułożonych jeden pod drugim. Na górze zwykle znajduje się Hero (duże otwarcie z nagłówkiem, tekstem i przyciskiem), pod nim na przykład Karty z Państwa usługami, Opinie, Godziny otwarcia, a na dole Kontakt. Kreator oferuje 35 rodzajów sekcji, każdy w jednej lub kilku formach: ta sama treść, inaczej ułożona.

Kto myśli w ten sposób, buduje lepszą stronę. Najważniejsze informacje prosimy umieścić na górze, jeden temat na sekcję, a na końcu to, co odwiedzający ma zrobić (zadzwonić, napisać e-mail, poprosić o wycenę). W przypadku Schildersbedrijf Example strona główna wygląda tak: Hero z przyciskiem "Poproś o wycenę", Karty z trzema usługami, Zdjęcie i tekst o sposobie pracy, Opinie, Pytania i Kontakt.

Dodawanie sekcji: trzy drogi

1. Samodzielny wybór w wybieraku (bezpłatnie)

Prosimy otworzyć panel Sekcje na pasku bocznym albo kliknąć w podglądzie Sekcja poniżej: ten przycisk znajduje się na pasku narzędzi wybranej sekcji oraz na linii z +, która pojawia się po najechaniu kursorem między dwie sekcje. Pod podglądem jest też przycisk Dodaj sekcję.

Wybierak pokazuje rodzaje sekcji w grupach: Popularne, Otwarcie i nagłówek, Tekst i historia, Usługi i produkty, Ceny i promocje, Zaufanie i zespół, Zdjęcia i wideo, Informacje praktyczne, Kontakt i wezwanie do działania oraz Własne i widżety. Jest też pole wyszukiwania ("Szukaj, na przykład opinie, ceny lub zespół"). Każdy rodzaj widzą Państwo jako podgląd we własnej identyfikacji wizualnej. Po kliknięciu rodzaju pojawiają się jego formy; jedną z nich wybierają Państwo przyciskiem Dodaj. Jeśli nie weszli Państwo do wybieraka z konkretnej sekcji, kreator zapyta "Gdzie ma się znaleźć ...?": prosimy kliknąć zieloną linię na stronie albo wybrać Na górze lub Na dole. Element można też przeciągnąć bezpośrednio z panelu na stronę.

To nic nie kosztuje. Nowa sekcja pojawia się z przykładowymi tekstami, które następnie zmieniają Państwo samodzielnie (lekcja 3.2) lub zlecają ich uzupełnienie AI (lekcja 3.1). Ważne: dopóki na stronie jest taki przykładowy tekst, kreator nie opublikuje strony. Pojawi się wtedy komunikat "Na stronie jest jeszcze przykładowy tekst. Najpierw należy go uzupełnić lub usunąć sekcję."

2. Prośba w czacie: trzy projekty

Jeśli wpiszą Państwo w czacie "Chcę sekcję z naszym sposobem pracy w czterech krokach", AI najpierw pokaże trzy pasujące projekty z biblioteki sekcji, w Państwa identyfikacji wizualnej. Wybierają Państwo przyciskiem Ten projekt lub klikają Niech AI wybierze. Następnie AI wypełnia sekcję treścią, jako propozycję. Ponieważ dochodzi nowa sekcja, kosztuje to 2 edycje.

Jeśli napiszą Państwo, że coś ma się znaleźć w istniejącej sekcji ("dodaj godziny otwarcia do bloku kontaktowego"), albo podadzą usługę taką jak Spotify lub Calendly z linkiem, kreator pomija trzy projekty: wtedy wiadomo, czego Państwo chcą.

3. Utworzenie własnego elementu

Nie ma tego, czego Państwo szukają? Na górze wybieraka znajduje się Własna sekcja tworzona przez AI. Prosimy opisać, co odwiedzający mają móc zrobić, na przykład kalkulator cen lub krótki quiz, i kliknąć Utwórz z AI. Kosztuje to 2 edycje, ponieważ dochodzi nowy element.

Przenoszenie, kopiowanie i usuwanie

Prosimy najechać kursorem na sekcję. Pojawi się pasek narzędzi z przyciskami Zmień z AI, W górę, W dół, Duplikuj, Sekcja poniżej i Usuń oraz uchwyt do przeciągania sekcji ("Przeciągnij tę sekcję w inne miejsce"). Przy Usuń kreator najpierw pyta "Na pewno?". Również pojedyncze elementy w rzędzie, na przykład jedną kartę lub jedną opinię, można przeciągać, duplikować i usuwać.

Wszystkie te przyciski są bezpłatne. Każda czynność tworzy nową wersję ("Przeniesiono sekcję (wersja ...)"), więc omyłkowo usuniętą sekcję przywrócą Państwo w Wersje (lekcja 3.5). Usunięcie za pomocą polecenia w czacie kosztuje natomiast edycję, dlatego lepiej użyć przycisku.

Zmiana rozmiarów przeciąganiem

Po najechaniu w podglądzie na sekcję, zdjęcie lub tekst pojawiają się uchwyty. Przeciąganie jest bezpłatne i odbywa się bez AI:

• Dolna krawędź sekcji: więcej lub mniej odstępu nad sekcją i pod nią.
• Hero: zwiększenie lub zmniejszenie wysokości.
• Zdjęcie: szersze lub węższe, wyższe lub niższe (forma), bardziej zaokrąglone lub prostsze rogi oraz punkt ostrości (lekcja 3.3).
• Blok tekstu: szerszy lub węższy (prawa krawędź).
• Nagłówek: większy lub mniejszy oraz odstęp pod nim.
• Rząd kart lub kolumn: szerokość całego rzędu.

Dwukrotne kliknięcie uchwytu przywraca rozmiar domyślny; w przypadku Hero kreator ponownie sam dobiera wysokość.

Dlaczego przeciąganie jest lepsze niż prośba "zrób to większe": od razu widać efekt, nic to nie kosztuje, a AI przy okazji nie zmienia tekstu.

Edytuj sekcję: ustawienia jednej sekcji

Prosimy kliknąć sekcję i wybrać Edytuj sekcję. Otworzy się okno z następującymi ustawieniami:

Poniżej znajdują się te same przyciski co na pasku narzędzi (W górę, W dół, Duplikuj, Sekcja poniżej, Usuń), a pod napisem "Lub zapytaj AI o coś innego:" pole tekstowe na polecenie dla AI dotyczące tylko tej sekcji.

Kilka rad. Prosimy stosować różne tła na przemian (jasny panel, brak, odcień), aby odwiedzający widzieli, gdzie kończy się dany temat. W rzędzie kart warto używać najwyżej trzech lub czterech kolumn; na telefonie i tak ułożą się one jedna pod drugą. Z opcji Ukryj na telefonie prosimy korzystać oszczędnie: nigdy nie należy ukrywać danych kontaktowych ani niczego, czego potrzebuje odwiedzający na telefonie. Aby sprawdzić wygląd, prosimy wybrać Telefon na górnym pasku.

Własny HTML

W grupie Własne i widżety znajduje się też Własny HTML: sekcja, do której sami wklejają Państwo kod HTML i w razie potrzeby CSS. Po jej umieszczeniu zmieniają ją Państwo przyciskiem Edytuj HTML w sekcji. Kolory i czcionki odpowiadają Państwa identyfikacji wizualnej dzięki zmiennym, takim jak var(--acc), var(--tekst) i var(--kop-font). Kod CSS obowiązuje tylko w tej sekcji.

Ograniczenia są celowe: skrypty, ramki iframe i formularze tu nie działają. Do odtwarzacza, kalendarza, mapy lub formularza z innej usługi służy Widżet (lekcja 4.3). Własny HTML jest dla osób znających HTML; dla wszystkich pozostałych szybszą drogą są zwykłe sekcje i AI.

Pułapki

• Pozostawienie przykładowego tekstu w sekcji z wybieraka: wtedy nie można opublikować strony.
• Zbyt wiele sekcji. Długiej strony z dziesięcioma sekcjami nikt nie czyta. Prosimy usunąć to, co nic nie wnosi. Strona może mieć najwyżej 40 sekcji, ale tylu nigdy Państwo nie będą potrzebować.
• Ustawianie odstępów przez czat. To kosztuje edycje i jest mniej precyzyjne niż przeciąganie.
• Sprawdzanie tylko na komputerze. Kolumny, odstępy i ukrywanie działają na telefonie inaczej.
• Usuwanie przez czat, choć przycisk Usuń jest bezpłatny.

W kreatorze: jak to zrobić

1. Prosimy kliknąć w podglądzie Sekcja poniżej lub otworzyć Sekcje.
2. Wybrać grupę, rodzaj i formę, a następnie kliknąć Dodaj.
3. Zastąpić przykładowe teksty samodzielnie lub z pomocą AI.
4. Przenieść sekcję przyciskami W górę, W dół lub uchwytem; duplikować lub usuwać za pomocą paska narzędzi.
5. Przeciągnąć dolną krawędź, aby zmienić odstęp; dwukrotnie kliknąć, aby wrócić do ustawienia domyślnego.
6. Otworzyć Edytuj sekcję, aby ustawić tło, kolumny, rogi, wysokość Hero i Ukryj na telefonie.
7. Sprawdzić wygląd w widoku Telefon.

Podsumowanie

• Strona to stos sekcji; 35 rodzajów, każdy w jednej lub kilku formach.
• Dodawanie przez wybierak jest bezpłatne i daje przykładowy tekst, który trzeba zastąpić przed publikacją; przez czat otrzymują Państwo trzy projekty, a kosztuje to 2 edycje.
• Przenoszenie, duplikowanie, usuwanie i zmiana rozmiarów przeciąganiem są bezpłatne; dwukrotne kliknięcie uchwytu przywraca ustawienie domyślne.
• Edytuj sekcję pozwala ustawić tło, odstęp, odstęp między elementami, kolumny, rogi, wysokość Hero i Ukryj na telefonie.
• Własny HTML jest możliwy, ale bez skryptów, ramek iframe i formularzy; do tego służy widżet.

Quiz

Zadanie

Zadanie D3.4: Jedna sekcja więcej, jedna mniej. Prosimy poprawić układ strony głównej za pomocą przycisków i uchwytów, bez zbędnych poleceń dla AI.

Lista kontrolna:

• [ ] zapisano sekcje strony głównej od góry do dołu;
• [ ] dodano jedną sekcję przez wybierak i zastąpiono cały przykładowy tekst;
• [ ] przyciskiem Usuń usunięto lub scalono jedną sekcję, która nic nie wnosiła;
• [ ] przeniesiono jedną sekcję przyciskami W górę, W dół lub uchwytem;
• [ ] przeciągnięciem zmieniono odstęp co najmniej jednej sekcji i raz przywrócono go dwukrotnym kliknięciem;
• [ ] w Edytuj sekcję zmieniono tło lub kolumny;
• [ ] obejrzano stronę w widoku Telefon.

Pytania:

1. Jak wyglądała kolejność sekcji przed zmianą i po niej oraz dlaczego wybrali Państwo taką kolejność?
2. Którą sekcję Państwo usunęli i czego odwiedzającemu teraz nie brakuje?
3. Ile edycji kosztowało Państwa to zadanie i który krok przez czat kosztowałby edycje?

Po kliknięciu "gotowe" zobaczą Państwo przykładową odpowiedź: z Hero, Liczby, Karty, Opinie, Kontakt na Hero, Karty, Zdjęcie i tekst (sposób pracy), Opinie, Pytania, Kontakt, tak aby usługi były od razu pod otwarciem; sekcja Liczby zniknęła, ponieważ liczby były wymyślone; zadanie kosztowało 0 edycji, podczas gdy usunięcie lub nowa sekcja przez czat kosztowałyby 1 lub 2.

Więcej informacji

• Bezpłatny kurs Widoczność w internecie 3.2: Nagłówki i struktura strony
• Bezpłatny kurs Widoczność w internecie 4.2: Najpierw mobile i viewport
• Sitebuilder i AI Builder: które narzędzie wybrać i jak je otworzyć?