Przejdź do treści
Uwaga: Tłumaczenie tego artykułu jest podane wyłącznie dla wygody. Tłumaczenie jest tworzone automatycznie za pomocą oprogramowania tłumaczącego i mogło nie zostać sprawdzone. W związku z tym, angielska wersja tego artykułu powinna być uważana za wersję obowiązującą, zawierającą najnowsze informacje. Możesz uzyskać do niej dostęp tutaj.
Landing Pages

Edytuj zawartość strony w obszarze przeciągnij i upuść

Data ostatniej aktualizacji: października 19, 2021

Dotyczy:

Wszystkie produkty i plany

W edytorze stron typu "przeciągnij i upuść" użytkownicy mogą zmieniać układ i stosować własne style do różnych sekcji strony. Edycja metodą przeciągnij i upuść jest dostępna dla stron utworzonych za pomocą szablonów startowych, niektórych szablonów motywów oraz szablonów kodowanych z obszarami przeciągania i upuszczania.

Zrozumienie edytora przeciągania i upuszczania

Obszary przeciągania i upuszczania składają się z modułów, które są blokami zawartości strony. Moduły mogą być ułożone w poziome rzędy lub pionowe kolumny, które następnie mogą być pogrupowane w sekcje.

Tworząc wiersze, kolumny i sekcje, możesz zmieniać układ lub stosować stylizację do wielu modułów jednocześnie. Dowiedz się więcej o dostosowywaniu stylów dla zawartości typu "przeciągnij i upuść".

  1. Moduł: indywidualny blok zawartości witryny. Niektóre moduły, takie jak moduły bogatego tekstu, mogą zawierać wiele typów zawartości.
  2. Wiersz: poziomy rząd modułów. Możesz zastosować stylizację do całego wiersza lub zmienić jego położenie na stronie.
  3. Kolumna: pionowy stos wielu modułów. Możesz zastosować stylizację do całej kolumny lub zmienić jej położenie na stronie.
  4. Sekcja: grupa wielu wierszy lub kolumn, która zajmuje całą szerokość strony. Możesz zastosować stylizację do całej sekcji lub zmienić jej położenie na stronie.

edit-drag-and-drop-areas-in-page-editor

Używanie sekcji

W edytorze przeciągnij i upuść możesz tworzyć sekcje strony wielokrotnego użytku, przeciągając moduły na pusty układ sekcji. Programiści mogą również tworzyć te sekcje, korzystając z naszej dokumentacji dla programistów. Raz utworzone sekcje mogą być używane na każdej stronie, która obsługuje edycję metodą przeciągnij i upuść. Zapisane sekcje, które zawierają inteligentne reguły, będą używać tych reguł, gdy zostaną dodane do strony.

Uwaga:nie więcej niż 25 sekcji wielokrotnego użytku może być zapisanych z edytora przeciągania i upuszczania w tym samym czasie. Aby zapisać nową sekcję wielokrotnego użytku, usuń istniejącą sekcję wielokrotnego użytku.

Tworzenie sekcji

  • Przejdź do swojej zawartości:

    • Website Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
    • Landing Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony docelowe.
  • Najedź kursorem na stronę i kliknij przyciskEdytuj.
  • W edytorze treści najedź kursorem na dwie sekcje i kliknijikonę +plus.

add-a-page-section

  • W prawym panelu kliknij kartę Układyi wybierzukład dla swojej sekcji.

add-blank-layout-to-page

  • W edytorze treści przeciągnijmoduł nad układ i upuść go w odpowiednim miejscu. Powtórz czynność dla każdego modułu Twojej sekcji.

drag-and-drop-onto-layout

  • Najedź kursorem na sekcję i kliknijikonę w dółKarat w dół, a następnie wybierzZapisz sekcję.

save-a-section

Proszę zwrócić uwagę:istniejące sekcje stron oraz te utworzone bez layoutu również można zapisać jako sekcje wielokrotnego użytku.


  • W prawym panelu wprowadźnazwę i opis sekcji, a następnie kliknij przyciskZapisz.

Dodawanie sekcji

  • Przejdź do swojej zawartości:

    • Website Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
    • Landing Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony docelowe.
  • Najedź kursorem na stronę i kliknij przyciskEdytuj.
  • W edytorze treści najedź kursorem na dwie sekcje i kliknijikonę +plus.

add-a-page-section

  • W prawym panelu najedź kursorem na sekcję i kliknij przycisk Wybierz. Sekcje zapisane w edytorze metodą przeciągnij i upuść pojawią się w sekcji Zapisane sekcje, a sekcje utworzone przez programistów - wsekcji Sekcje tematyczne.
  • Dodanie zapisanej sekcji, która zawiera inteligentne reguły , spowoduje zastosowanie tych reguł do nowo dodanej sekcji. Sekcje te będą oznaczone jako Inteligentne .
  • Aby usunąć sekcję, kliknijikonę +plusa służącą do dodawania sekcji, a następnie najedź na sekcję i kliknijikonę usuwania. W oknie dialogowym kliknij przyciskUsuń.

add-smart-section

Edycja wierszy, kolumn lub sekcji

  • W edytorze stron najedź kursorem na wiersz, kolumnę lub sekcję, a następnie kliknij ikonę Usuń.kliknij ikonę edytuj edit ikonę edycji.
  • Aby dostosować wyściełanie i marginesy wokół wiersza, kolumny lub sekcji, kliknij przycisk Wyrównanie i odstępy w edytorze pasków bocznych.
  • Aby edytować tło obszaru, kliknijprzyciskTło w edytorze paska bocznego i wybierzopcję stylizacji:
    • Brak:usuń wszystkie kolory tła lub obrazy.
    • Kolor:ustawienie pojedynczego koloru jako tła. Wprowadźwartość heksadecymalnąlub kliknijpróbnikkolorówi wybierzkolor,a następnie wprowadźwartość przezroczystości.
    • Obraz: ustawianie obrazu jako tła. Aby dodać nowy obraz, kliknijprzyciskPrześlij, aby dodać obraz z komputera, lub kliknij przyciskPrzeglądaj obrazy, aby wybrać obraz zplików.
    • Gradient: ustaw dwa kolory zanikające razem jako tło. Kliknij naKierunekmenu rozwijane i wybierzkierunek gradientu. Dla każdego koloru wpiszwartość heksadecymalnąlub kliknijpróbnikkolorówi wybierzkolor,a następnie wpiszwartość przezroczystości.
edit-background-for-a-page-section
  • Aby utworzyć kopię istniejącego elementu, najedź na niego i kliknijikonę duplikatu ccclone.
  • Aby usunąć element ze strony, najedź naniego i kliknijikonęusuwania .

edit-column-icons

Dodawanie i edytowanie modułów

  • Przejdź do swojej zawartości:

    • Website Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
    • Landing Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony docelowe.
  • Najedź kursorem na stronę i kliknij przyciskEdytuj.
  • W edytorze treści kliknij moduł w edytorze paska bocznego, a następnie przeciągnij go na miejsce na stronie.
  • Aby dopasować szerokość modułu, kliknij pionowy podział między kolumnami i przeciągnij go na miejsce.

adjust-column-size-in-drag-and-drop-editor

  • Aby dostosować zawartość w obrębie modułu, najedź na moduł i kliknij ikonę:
    • edit Edytuj moduł: edytuj zawartość modułu
    • clonduplicate Sklonuj moduł: utwórz kopię tego modułu na stronie.
    • usuń Usuń moduł: usuń ten moduł ze strony.

edit-module-icons