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: września 13, 2022

Dotyczy:

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Wcześniejsze konto Marketing Hub Basic

W narzędziu menedżera projektu można tworzyć niestandardowe kodowane moduły, aby dodać zaawansowane funkcje do swojego bloga, stron lub e-maili. Moduły niestandardowe oferują szeroki zakres funkcji, dzięki czemu zawartość może być w pełni dostosować treść w edytorze stron, wiadomości e-mail lub bloga. 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.

Proszę zwrócić uwagę:moduły niestandardowe do wykorzystania w wiadomościach e-mail można tworzyć tylko na kontach z subskrypcją Marketing HubProfessional 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 Create.

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

  • Edycja nazwy pola poprzez kliknięcieikony ołówkaedytuj Aby zmienić nazwęzmiennej HubL, wprowadź zmiany w polu tekstowym Nazwa zmiennej 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; jest nadal 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.

  • WWarunki wyświetlaniakliknij 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.

  • Wopcjach Repeater wybierz minimalną i/lubmaximumliczbę 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 będziesz gotowy do włączenia pola 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 kliknij Akcje, a następniewybierz Kopiuj fragment.
  • Kliknij w miejscu, 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 swoją składnię modułu

Podczas edycji modułu można 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 jest to potrzebne.

    coded-template-paste-snippet0

Dodaj lub kup moduł z Marketplace

Oprócz tworzenia własnych modułów można dodać lub zakupić niestandardowe moduły, które inni użytkownicy lub dostawcy utworzyli w HubSpot Marketplace.

  • W koncie HubSpot kliknij ikonę Marketplace marketplace w głównym panelu nawigacyjnym.
  • W sekcji Filtrowanie produktów po lewej stronie, kliknij w kategorii Wszystkie produkty i wybierz Moduły. Możesz filtrować dostępne moduły według:
    • Cena: czy moduł jest darmowy czy płatny
    • Funkcja: rodzaj funkcji, które zawiera moduł (np. kalkulator, galeria, mapa)
    • Współpraca z: typ(y) szablonów, w których moduł może być użyty
    • Dostawca: dostawca (dostawcy), u którego moduł jest oferowany.
  • Najedź na wybrany moduł i kliknij Wyświetl szczegóły.
  • Kliknij przycisk Pobierz moduł za darmo lub Kup moduł za $ w prawym górnym rogu.
    • Jeśli moduł jest darmowy, zostanie on automatycznie dodany do Twojego menedżera projektów.
    • Jeśli moduł jest płatny, przejdź do wprowadzenia szczegółów płatności. Po przetworzeniu płatności, moduł zostanie dodany do Twojego menedżera projektów.
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.