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.

Edycja zawartości strony w obszarze "przeciągnij i upuść

Data ostatniej aktualizacji: kwietnia 17, 2023

Dostępne z każdą z następujących podpisów, z wyjątkiem miejsc, w których zaznaczono:

Wszystkie produkty i plany

W edytorze stron typu "przeciągnij i upuść" użytkownicy mogą zmieniać układ i stosować niestandardowe style do różnych sekcji strony. Edycja metodą przeciągania i upuszczania 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 typu "przeciągnij i upuść

Obszary typu "przeciągnij i upuść" składają się z modułów, które są blokami treści strony internetowej. Moduły mogą być ułożone w poziome rzędy lub pionowe kolumny, które następnie można pogrupować 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 strony internetowej. Niektóre moduły, jak np. moduły rich text, mogą zawierać wiele rodzajów treści.
  2. Wiersz: poziomy rząd modułów. Możesz zastosować stylizację do całego rzędu 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

Uporządkuj swoje treści

W edytorze paska bocznego możesz zobaczyć przegląd sekcji, wierszy, kolumn i modułów w swojej zawartości. Stamtąd możesz zmienić ich nazwę, edytować, klonować, usuwać lub ukrywać:

  • Przejdź do swojej zawartości:

    • Strony internetowe: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
    • Landing Pages: Na koncie HubSpot przejdź do Marketing > Strony docelowe.
  • Najedź na stronę i kliknij Edytuj.
  • W edytorze paska bocznego kliknij kartę Zawartość .
  • Możesz kontrolować, które elementy strony są widoczne w edytorze paska bocznego:
    • Aby wyświetlić tylko sekcje swojej strony, kliknij przycisk Zwiń wszystko. Spowoduje to zwinięcie wszystkich wierszy, kolumn i modułów, dzięki czemu w edytorze paska bocznego będą widoczne tylko sekcje.
    • Aby zobaczyć całą zawartość strony, kliknij przycisk Rozwiń wszystko. Spowoduje to wyświetlenie wszystkich sekcji, wierszy, kolumn i modułów w edytorze pasków bocznych.
    • Aby wyświetlić pojedynczy element strony lub kontener, kliknij znak plusa obok jego nazwy.
    • Aby ukryć element lub kontener, kliknij znak - minus obok jego nazwy.
  • Możesz także edytować, zmieniać nazwy, klonować, usuwać i ukrywać elementy strony:
    • Aby edytować element, kliknij jego nazwę.
    • Aby zmienić nazwę elementu, kliknij ellipses trzy kropki obok jego nazwy, a następnie wybierz Zmień nazwę [elementu]. W oknie dialogowym wprowadź nazwę elementu, a następnie kliknij przycisk Zapisz.
    • Aby sklonować element, kliknij na stronie ellipses trzy kropki obok jego nazwy, a następnie wybierz opcję Klonuj. W ten sposób zostanie utworzona dokładna kopia oryginalnego elementu sąsiadująca z nim.
    • Aby usunąć element, kliknij na stronie ellipses trzy kropki obok jego nazwy, a następnie wybierz Usuń.
    • Aby ukryć moduł, kliknij na stronie ellipses trzy kropki obok jego nazwy, a następnie wybierz Ukryj ten moduł. Spowoduje to ukrycie modułu w podglądzie strony, ale nie w edytorze paska bocznego. Aby wyświetlić ukryty moduł na stronie, kliknij na stronie ellipses trzy kropki obok jego nazwy, a następnie wybierz Pokaż ten moduł.

Użyj sekcji

W edytorze typu "przeciągnij i upuść" możesz tworzyć sekcje stron 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. Po utworzeniu sekcje mogą być używane na każdej stronie, która używa tego samego motywu i która obsługuje edycję metodą przeciągania i upuszczania. Zapisane sekcje, które zawierają inteligentne reguły, będą używać tych reguł, gdy zostaną dodane do strony.

Uwaga: jednorazowomożna zapisać nie więcej niż 50 sekcji wielokrotnego użytku w edytorze typu "przeciągnij i upuść ".Aby zapisać nową sekcję wielokrotnego użytku, usuń istniejącą sekcję wielokrotnego użytku.

Utwórz sekcję

Możesz zapisać sekcję, aby można ją było ponownie wykorzystać na innych stronach używających tego samego motywu.

  • Przejdź do swojej zawartości:

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

add-a-page-section

  • W prawym panelu kliknij kartę Układy i wybierz układ dla swojej sekcji.

add-blank-layout-to-page

  • W edytorze treści przeciągnij moduł nad układ i upuść go na miejsce. Powtórz to dla każdego modułu twojej sekcji.

drag-and-drop-onto-layout

  • Najedź na sekcję i kliknij ikonę downCarat w dół, a następnie wybierz opcję Zapisz sekcję.

save-a-section

Uwaga: istniejące sekcje strony oraz te utworzone bez układu można również zapisać jako sekcje wielokrotnego użytku .


  • W prawym panelu wprowadź nazwę i opis dla swojej sekcji, a następnie kliknij przycisk Zapisz.

Dodaj lub usuń sekcję

  • Przejdź do swojej zawartości:

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

add-a-page-section

  • W prawym panelu najedź na sekcję i kliknij przycisk Wybierz. Sekcje zapisane z edytora metodą przeciągnij i upuść pojawią się w sekcji Zapisane sekcje, natomiast sekcje utworzone przez deweloperów pojawią się w sekcji Tematy.
  • Dodanie zapisanej sekcji, która zawiera reguły inteligentne , spowoduje zastosowanie tych reguł do nowo dodanej sekcji. Sekcje te będą oznaczone jako inteligentne .
  • Aby usunąć sekcję, kliknijikonę plusa przy dodawaniu sekcji, a następnie najedź na sekcję i kliknij ikonę usuwania delete. W oknie dialogowym kliknij przycisk Usuń.

add-smart-section

Edycja wierszy, kolumn lub sekcji

  • W edytorze stron najedź na wiersz, kolumnę lub sekcję, a następniekliknij ikonę edycjiedit .
  • Aby dostosować padding i marginesy wokół wiersza, kolumny lub sekcji, kliknij Wyrównanie i odstępy w edytorze paska bocznego.
  • Aby edytować tło obszaru, kliknij przycisk Tło w edytorze paska bocznego i wybierz opcję stylizacji :
    • Brak: usuwanie wszelkich kolorów tła lub obrazów.
    • Kolor: ustawienie pojedynczego koloru jako tła. Wprowadź wartość heksadecymalną lub kliknijpróbnik kolorów i wybierz kolor , a następnie wprowadź wartość przezroczystości.
    • Obraz: ustawienie obrazu jako tła. Aby dodać nowy obraz, kliknij przycisk Prześlij, aby dodać obraz z komputera, lub kliknij przycisk Przeglądaj obrazy, aby wybrać obraz z plików.
    • Gradient: ustawienie dwóch kolorów zanikających razem jako tła. Kliknij menu rozwijane Kierunek i wybierz kierunek gradientu. Dla każdego koloru wprowadź wartość heksadecymalną lub kliknijpróbnik kolorów i wybierz kolor , a następnie wprowadź wartość przezroczystości .
edit-background-for-a-page-section
  • Aby wykonać kopię istniejącego elementu, najedź na niego i kliknijikonę duplicate ccclone.
  • Aby usunąć element ze strony, najedźna niego i kliknijikonę usuwania delete .

edit-column-icons

Dodawanie i edycja modułów

  • Przejdź do swojej zawartości:

    • Strony internetowe: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
    • Landing Pages: Na koncie HubSpot przejdź do Marketing > Strony docelowe.
  • Najedź na stronę i kliknij Edytuj.
  • W edytorze treści kliknij moduł w edytorze paska bocznego, a następnie przeciągnij go na miejsce na stronie.
  • Aby dostosować 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 niego i kliknij ikonę:
    • edit Edycja modułu: edycja zawartości modułu
    • clonduplicate Clone module: utwórz kopię tego modułu na stronie.
    • delete Usuń moduł: usuń ten moduł ze strony.

edit-module-icons

Czy ten artykuł okazał się pomocny?
Niniejszy formularz służy wyłącznie do przekazywania opinii dotyczących dokumentacji. Dowiedz się, jak uzyskać pomoc dotyczącą HubSpot.