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: marca 10, 2022

Dotyczy:

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

W narzędziu menedżera projektów można tworzyć własne, zakodowane moduły, aby dodawać zaawansowane funkcje do bloga, stron lub wiadomości e-mail.. Moduły niestandardowe oferują szeroki zakres funkcji, dzięki czemu zawartość może być w pełni w edytorze stron, wiadomości e-mail lub blogu.. Moduły niestandardowe można tworzyć od podstaw lub dodawać gotowe moduły z HubSpot Marketplace.

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

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 rozwijanePlik i wybierz opcjęNowy plik.

new-file

  • W oknie dialogowym kliknij menu rozwijane Co chcesz zbudować dzisiaj? i wybierz Moduł.

build-a-module

  • Kliknij przyciskNext (Dalej).
  • Wybierz, czy ten moduł będzie używany wszablonachstron,szablonachblogów i/lubszablonach wiadomości e-mail. Moduły używane w szablonach wiadomości e-mail nie mogą zawierać CSS ani JavaScript.
  • Wybierz, czy ten moduł będzie modułem lokalnymczyglobalnym. Jeśli utworzyszmodułglobalny, edycja zawartości tego modułu spowoduje aktualizację każdej lokalizacji, w której moduł jest używany.
  • Wprowadź nazwę pliku dla swojego modułu, a następnie kliknij przyciskUtwórz.

set-up-your-new-module

Oznacz swój moduł etykietą

Domyślnie edytor zawartości odwołuje się do modułu, używając nazwy nadanej 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ć, wpisując etykietę.

design-manager-label-module

Dodaj pola do modułu

Dodaj pola do modułu, aby ustawić jego zawartość lub styl i uczynić go edytowalnym w edytorze treści. Więcej informacji o dostępnych typach pól znajdziesz w naszej dokumentacji dla programistów.

  • W inspektorze modułu po prawej stronie kliknij menurozwijaneDodaj pole w sekcjiPola, a następnie wybierzpole, które chcesz dodać do swojego modułu.

module-add-field

  • Edytuj nazwę pola, klikającikonę ołówkaedytuj Aby edytowaćnazwę zmiennej HubL, wprowadź zmiany wpolu tekstowym Nazwa zmiennej HubL.

Dodaj domyślną zawartość pola

W sekcjiOpcje zawartościmożna dodać domyślną zawartość, która pojawi się, gdy moduł zostanie użyty 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 domyślnej zawartości to wybór domyślnego obrazu i ukrycie kontrolek rozmiaru.

field-content-options

Ustawianie opcji edytora pól

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

  • Ustaw to pole jako wymagane:użytkownik nie będzie mógł pozostawić pustego pola w edytorze treści.
  • Uniemożliwiaj edycję w edytorach treści: zawartość pola nie może być edytowana w edytorze treści; jest ona nadal edytowalna na poziomie szablonu. Opcja ta nie jest dostępna dlamodułów globalnych, których nie można edytować na poziomie strony.
  • Tekst pomocy Tooltip: dodaj tekst pomocy do pola, aby dać użytkownikom kontekst lub instrukcje. Tekst pomocy zostanie wyświetlony w podpowiedzi, gdy użytkownik najedzie na pole podczas edycji.

    custom-module-help-text
  • Tekst pomocy w linii: dodaj tekst pomocy do pola, aby dać użytkownikom kontekst lub instrukcje. Ten tekst pomocy pojawi się pod polem, gdy użytkownik będzie edytował moduł.

design-manager-module-field-options

Ustawianie warunków wyświetlania w terenie

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 menurozwijaneZmienna HubL, aby wybrać pole modułu, a następnie kliknij menu rozwijaneNie jest puste, aby wybrać warunek dla tego pola.
  • Jeśli wybierzesz warunekjest równy, wprowadźwartość lub regex.

W poniższym przykładzie warunki wyświetlania są ustawiane dla pola obrazu. Warunkiem jest to, że wartość w polu tekstowym o nazwie image_title musi być 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, kliknijprzełącznikznajdujący się po prawej stronie opcjiWarunki wyświetlania.

Ustawianie opcji wzmacniacza polowego

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

  • Wopcjach Repeaternależy wybraćminimalnąi/lubmaksimumliczbę wymaganych wystąpień tego pola.
  • Można również ustawićdomyślną liczbę obiektów, która będzie oznaczać liczbę wystąpień pola, które domyślnie pojawią się w module.

W poniższym przykładzie pole obrazu jest skonfigurowane jako suwak obrazu. Limity liczby obiektów są ustawione tak, abyw module pojawiały się co najmniej3pola obrazów, a maksymalnie 5pól obrazów. Użytkownik zobaczy domyślnie4pola obrazów w module i będzie mógł dodać jeszcze jedno pole obrazów lub usunąć jedno istniejące pole obrazów.

field-repeater-options

Opcje repeatera zostaną automatycznie włączone po zmodyfikowaniu jednej z opcji. Aby wyłączyć opcje repeatera, kliknijprzełącznikznajdujący się po prawej stronieopcji Repeater Options.

Pola modułów grupowych

Po utworzeniu pól można pogrupować do 4 z nich, aby uporządkować je według ważności. Grupy pól mogą być używane do budowania własnej logiki pól. Dowiedz się więcej o grupach pól w module.

Aby pogrupować pola modułu:

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

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

Skopiuj i wklej fragmenty pól

  • Gdy będziesz gotowy do włączenia pola do modułu, skopiuj i wklej fragment pola do edytora HTML + HubLw module.
    • W inspektorze pól kliknijprzyciskKopiujfragment,znajdujący się po prawej stronienazwy zmiennej HubL pola.
    • Jeśli znajdujesz się w inspektorze modułu, najedź kursorem na pole i kliknij przyciskAkcje, a następnie wybierz opcjęKopiuj fragment.
  • Kliknij w miejscu, w którym chcesz dodać pole wedytorze HTML + HubL, a następnie wklej fragment, naciskając klawiszeCtrl+V lubCmd+V.

copy-paste-field-snippet

Zapisywanie składni modułu

W trakcie edycji modułu można zapisywać dodatkową składnię modułu w panelach edytoraHTML + HubL,CSS iJS.Więcej informacji natemat edytorakodu modułu i odniesienia doskładni modułu można znaleźć w dokumentacji projektanta HubSpot.

Dodaj tekst pomocy do modułu

W sekcji Opcje edytora dodaj tekst pomocy, aby zapewnić 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

Podgląd modułu

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

preview-module

Opublikuj swój moduł

Gdy już dodasz pola i napiszesz składnię modułu, możesz przystąpić do publikowania modułu. W prawym górnym rogu kliknij przycisk Opublikuj zmiany.

publish-module

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

  • Włączprzełącznik Udostępnijdla szablonóww prawym górnym rogu edytora, abyudostępnićten moduł do dodawania w szablonach.

content-toggle

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

make-module-available

Dodaj swój moduł do szablonu

Po opublikowaniu modułu można go używać na wszystkich 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ęDodajw górnej części 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

Aby dodać moduł do zakodowanego szablonu, można skopiować i wkleić fragment modułu do szablonu:

  • Aby skopiować fragment modułu z edytora modułów, w dolnej części prawego paska bocznego kliknij przyciskKopiuj fragment.

    module-editor-copy-snippet0
  • Aby skopiować fragment modułu z lewego paska bocznego menedżera projektów:
    • Na lewym pasku bocznym znajdź moduł niestandardowy.
    • Kliknij moduł prawym przyciskiem myszy, a następnie wybierz opcję Kopiuj wycinek. Możesz też zaznaczyć moduł, kliknąć przyciskAkcje w lewym górnym rogu i wybrać opcjęKopiuj wycinek.

      custom-module-copy-snippet00
  • W zakodowanym szablonie wklej fragment w odpowiednim miejscu.

    coded-template-paste-snippet0

Dodaj lub kup moduł z Marketplace

Oprócz tworzenia własnych modułów można dodawać lub kupować niestandardowe moduły utworzone przez innych użytkowników lub dostawców w serwisie HubSpot Marketplace.

  • W koncie HubSpot kliknij ikonę Marketplace marketplace w głównym panelu nawigacyjnym.
  • W sekcjiFiltruj produktypo lewej stronie kliknij przycisk rozwijanyWszystkie produktyw kategorii Kategoriai wybierz opcjęModuły. Możesz filtrować dostępne moduły według:
    • Cena:czy moduł jest darmowy, czy płatny
    • Funkcja: rodzaj funkcji, jakie zawiera moduł (np. kalkulator, galeria, mapa)
    • Współpracuje z: typ(y) szablonów, w których można zastosować moduł
    • Dostawca: dostawca(dostawcy), u którego oferowany jest moduł
  • Najedź kursorem na wybrany moduł i kliknij przycisk Wyświetl szczegóły.
  • Kliknij przyciskPobierz moduł za darmolubKup moduł za$w prawym górnym rogu.
    • Jeśli moduł jest darmowy, zostanie automatycznie dodany do Twojego menedżera projektów.
    • Jeśli moduł jest płatny, przejdź do wprowadzania szczegółów płatności. Po dokonaniu 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.