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.
Design Manager

Tworzenie i edycja modułów

Data ostatniej aktualizacji: stycznia 20, 2023

Dotyczy:

Wszystkie produkty i plany

W narzędziu menedżera projektu możesz tworzyć niestandardowe zakodowane moduły, aby dodać zaawansowane funkcje do swojego bloga, stron lub e-maili. Modułyniestandardowe oferują szeroki zakres funkcjonalności, dzięki czemu można wpełni dostosowaćzawartość w edytorze stron, wiadomości e-mail lub blogu. Możesz zbudować niestandardowe moduły od podstaw lub dodać wstępnie zbudowane moduły z HubSpot Marketplace.

Uwaga: tworzenie modułów wymaga znajomości HTML, CSS, HubL i menedżera projektów HubSpot. HubSpot zaleca współpracę z projektantem w celu utworzenia zakodowanych modułów.

Utwórz nowy moduł

  • W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
  • W górnej części findera kliknij menu rozwijane Plik i wybierz Nowy plik.

new-file

  • W oknie dialogowym kliknij menu rozwijane Co chciałbyś dziś zbudować? i wybierz Moduł.

build-a-module

  • Kliknij Next.
  • Zaznacz pole wyboru obok każdego typu zawartości, w której twój moduł będzie używany: strony, posty na blogu, listy na blogu, e-maile lub cytaty. Moduły używane w szablonach wiadomości e-mail nie mogą zawierać CSS ani JavaScript.

Uwaga: moduły niestandardowe do wykorzystania w wiadomościach e-mail można tworzyć tylko na kontach zsubskrypcją Marketing Hub Professional lub Enterprise .

  • Wybierz, czy ten moduł będzie modułem lokalnym czy globalnym. Jeśli utworzysz modułglobalny, edycja zawartości tego modułu zaktualizuje każdą lokalizację, w której moduł jest używany.
  • Wprowadź nazwę pliku dla swojego modułu, a następnie kliknij przycisk Utwórz.

set-up-your-new-module

Oznacz swój moduł

Domyślnie edytor treści odwołuje się do modułu używając nazwy, którą nadano mu w menedżerze projektów. Jeśli chcesz, aby Twój moduł używał innej nazwy w edytorze treści, możesz to zrobić, wprowadzając etykietę .

design-manager-label-module

Dodaj pola do swojego modułu

Dodaj pola do modułu, aby ustawić zawartość lub stylizację modułu i uczynić go edytowalnym w edytorze treści. Dowiedz się więcej o dostępnych typach pól w naszej dokumentacji dla deweloperów.

  • W inspektorze modułu po prawej stronie kliknij menu rozwijane Dodaj pole w sekcji Pola , a następnie wybierz pole, które chcesz dodać do swojego modułu.

module-add-field

  • Edytuj nazwę pola, klikającikonę ołówka edytuj obok nazwy pola. Aby edytowaćnazwę zmiennej HubL, wprowadź zmiany w polu tekstowym Nazwazmiennej HubL .

Dodaj domyślną zawartość pola

W sekcji Opcje zawartości możesz dodać domyślną zawartość, która pojawia się, gdy moduł jest używany w szablonach i edytorach zawartości. Opcje domyślnej zawartości będą się różnić w zależności od typu pola.

W poniższym przykładzie typ pola to pole obrazu, więc opcje dla domyślnej zawartości to wybór domyślnego obrazu i ukrycie kontrolek rozmiaru.

field-content-options

Ustawianie opcji edytora pól

W sekcji Opcje edytora możesz włączyć następujące opcje dotyczące sposobu, w jaki użytkownicy mogą edytować moduł w edytorze treści:

  • Uczyń to pole wymaganym: użytkownik nie będzie mógł pozostawić tego pola pustego w edytorze treści.
  • Uniemożliwiaj edycję w edytorach treści: zawartość pola nie może być edytowana w edytorze treści; nadal jest edytowalna na poziomie szablonu. Ta opcja nie jest dostępna dla modułów globalnych, które nie mogą być edytowane na poziomie strony.
  • Tekst pomocy Tooltip: dodaj tekst pomocy do pola, aby dać użytkownikom kontekst lub instrukcje. Ten tekst pomocy pojawi się w podpowiedzi, gdy użytkownik najedzie na pole podczas edycji.

    custom-module-help-text
  • Tekst pomocy inline: dodaj tekst pomocy do pola, aby dać użytkownikom kontekst lub instrukcje. Ten tekst pomocy pojawi się poniżej pola, gdy użytkownik edytuje moduł.

design-manager-module-field-options

Ustawianie warunków wyświetlania pola

Możesz użyć warunków wyświetlania pola, aby ustawić pole modułu tak, by pojawiało się tylko wtedy, gdy inne pole spełnia określone kryteria.

  • W sekcjiWarunki wyświetlania kliknij menurozwijane Zmienna HubL , aby wybrać pole modułu, a następnie kliknij rozwijane jest nie jest puste , aby wybrać warunek dla tego pola.
  • Jeśli wybierzesz warunek jest równy, wprowadź wartość lub regex.

W poniższym przykładzie, warunki wyświetlania są ustawiane dla pola obrazu. Warunkiem jest, aby wartość w polu tekstowym o nazwie image_title była równa Headshot, aby pole obrazu pojawiło się w module.

field-display-conditions

Warunki wyświetlania zostaną automatycznie włączone po ustawieniu warunku. Aby wyłączyć warunki wyświetlania, kliknij przełącznik z prawej strony opcji Warunki wyświetlania.

Ustawianie opcji repeatera polowego

Możesz ustawić opcje repeatera dla swojego pola w sekcji Repeater Options . Repeatery to pola i grupy, które mogą tworzyć wiele obiektów i wyświetlać je za pomocą pętli for.

  • W sekcjiRepeater options wybierz minimalną i/lub maksymalną liczbę wymaganych instancji tego pola.
  • Możesz również wybrać ustawienie domyślnej liczby obiektów, która będzie liczbą instancji pola, które pojawią się domyślnie w module.

W poniższym przykładzie pole obrazu jest ustawione jako suwak obrazu. Limity liczby obiektów są ustawione tak, aby minimum 3 pola obrazu pojawiły się w module, do maksimum 5 pól obrazu. Użytkownik zobaczy 4 pola obrazu pojawiające się w module domyślnie i może wybrać, aby dodać jedno dodatkowe pole obrazu lub usunąć jedno istniejące pole obrazu.

field-repeater-options

Opcje repeaterów zostaną automatycznie włączone po zmodyfikowaniu jednej z opcji. Aby wyłączyć opcje repeatera, kliknij przełącznik z prawej strony opcji Repeater Options.

Pola modułów grupowych

Po utworzeniu pól, możesz pogrupować do 4 z nich razem, aby utrzymać pola zorganizowane według znaczenia. Grupy pól mogą być używane do budowania niestandardowej logiki pól. Dowiedz się więcej o grupach pól modułu.

Aby pogrupować pola modułów razem:

  • Kliknij Grupa w prawym pasku bocznym edytora modułów.

    design-manager-group-fields
  • Wybierz pola, które chcesz zgrupować.
  • Kliknij przycisk Utwórz grupę.

Skopiuj i wklej swoje fragmenty pola

  • Kiedy jesteś gotowy, aby włączyć pole do modułu, skopiuj i wklej fragment pola do edytora HTML + HubL modułu.
    • Jeśli jesteś w inspektorze pola, kliknij Kopiuj fragment po prawej stronie nazwy zmiennej HubL pola.
    • Jeśli jesteś w inspektorze modułu, najedź na pole i kliknijrozwijane Akcje, a następnie wybierz Kopiuj fragment.
  • Kliknij w miejsce, w którym chcesz dodać pole w edytorze HTML + HubL, a następnie wklej snippet, naciskając Ctrl+V lub Cmd+V.

copy-paste-field-snippet

Napisz składnię swojego modułu

Podczas edycji modułu możesz napisać dodatkową składnię modułu w panelach edytora HTML + HubL, CSS i JS . Dowiedz się więcej o edytorze kodu modułu i referencji składni modułu w dokumentacji projektanta HubSpot.

Dodaj tekst pomocy do swojego modułu

W sekcji Opcje edytora dodaj tekst pomocy, aby dać użytkownikom kontekst podczas edycji modułu. Tekst pomocy nie może być dłuższy niż 300 znaków.

design-manager-help-text

Gdy użytkownik edytuje moduł w edytorze treści, tekst pomocy pojawi się nad polami modułu.

page-editor-module-help-text

Zobacz swój moduł

Możesz podejrzeć, jak Twój moduł będzie wyglądał i funkcjonował w edytorze treści, klikając przycisk Podgląd w prawym górnym rogu edytora modułów. Podgląd Twojego modułu otworzy się w nowej karcie. Ten podgląd synchronizuje się z edytorem i będzie automatycznie odświeżany podczas pracy.

preview-module

Opublikuj swój moduł

Gdy skończysz dodawać pola i pisać składnię swojego modułu, możesz przystąpić do publikowania swojego modułu. W prawym górnym rogu kliknij przycisk Opublikuj zmiany.

publish-module

Udostępnij swój moduł dla szablonów

  • Przełącz przełącznik Make available for templates na górze po prawej stronie edytora, aby ten moduł był dostępny do dodania do twoich szablonów.

content-toggle

  • Wyłącz ten przełącznik, aby wprowadzić zmiany lub przetestować funkcjonalność modułu. Jeśli ten przełącznik jest wyłączony, Twój zespół zobaczy alert, że ten moduł nie jest dostępny dla szablonów.

make-module-available

Dodaj swój moduł do szablonu

Po opublikowaniu modułu, możesz go użyć na swoich stronach, dodając go do szablonu.

Aby dodać moduł do szablonu metodą przeciągnij i upuść:

  • W edytorze układów szablonów kliknij zakładkę Dodaj na górze inspektora układów, a następnie wyszukaj swój moduł. Utworzone przez Ciebie moduły niestandardowe można rozpoznać po ikonie modułu niestandardowego: customModules.
  • Przeciągnij i upuść moduł do szablonu.

add-custom-module

Czy aby dodać moduł do zakodowanego szablonu, można skopiować i wkleić snippet modułu do szablonu:

  • Aby skopiować snippet modułu z edytora modułów, na dole prawego paska bocznego kliknij przycisk Kopiuj snippet.

    module-editor-copy-snippet0
  • Aby skopiować snippet modułu z lewego paska bocznego menedżera projektu:
    • W lewym pasku bocznym zlokalizuj moduł niestandardowy.
    • Kliknij prawym przyciskiem myszy na moduł, a następnie wybierz Kopiuj wycinek. Alternatywnie możesz zaznaczyć moduł, a następnie kliknąć Akcje w lewym górnym rogu i wybrać Kopiuj snippet.

      custom-module-copy-snippet00
  • W zakodowanym szablonie wklej snippet tam gdzie trzeba.

    coded-template-paste-snippet0
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.