Tworzenie i edytowanie modułów w aplikacji Design Manager

Design manager umożliwia tworzenie niestandardowych modułów w celu dodania zaawansowanych funkcji do bloga, stron lub wiadomości e-mail. Moduły niestandardowe oferują szeroki zakres funkcji, dzięki czemu zawartość można w pełni dostosować w edytorze stron, wiadomości e-mail lub blogów.

Uwaga: tworzenie modułów wymaga znajomości HTML, CSS, HubL i design managera HubSpot. HubSpot zaleca współpracę z programistą w celu stworzenia zakodowanych modułów.

Tworzenie nowego modułu

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W górnej części wyszukiwarki kliknij menu rozwijane Plik i wybierz opcję Nowy plik.

3. W oknie dialogowym kliknij menu rozwijane What would you like to build today? i wybierz opcję Module.
4. Kliknij przycisk Dalej.
5. W polu Gdzie chcesz używać tego modułu zaznacz pole wyboru obok każdego typu treści, w której moduł będzie używany (np. Wpisy na blogu, E-maile lub Strony docelowe). 
6. W polu Zakres zawartości modułu wybierz opcję (np. Moduł lokalny lub Moduł globalny). Jeśli utworzysz moduł globalny, edycja zawartości tego modułu spowoduje aktualizację każdej lokalizacji, w której moduł jest używany. 
7. Wprowadź nazwę pliku dla modułu.
8. Aby zmienić lokalizację pliku modułu, kliknij przycisk Zmień w sekcji Lokalizacja pliku . W oknie Pop-up wybierz nową lokalizację , a następnie kliknij przycisk Wybierz.
9. Po zakończeniu kliknij przycisk Utwórz.
10. Kontynuuj edycję modułu.

Uwaga: moduły używane w wiadomościach e-mail mogą być tworzone tylko na kontach z subskrypcją Marketing Hub Professional lub Enterprise . Nie mogą one zawierać CSS ani JavaScript. 

Edycja modułu

Po utworzeniu modułu w Design Manager można dostosować jego funkcjonalność i wygląd. Etykieta modułu dla przejrzystości, dodawanie i konfigurowanie pól oraz dostosowywanie opcji edytora pól, takich jak domyślna zawartość. Ustaw warunki wyświetlania i opcje repeatera oraz pogrupuj powiązane pola w celu lepszej organizacji. Możesz także kopiować i wklejać fragmenty pól, pisać niestandardową składnię modułu, dodawać pomocny tekst instruktażowy i edytować typy szablonów, z którymi moduł może być używany.

Dodawanie etykiety do modułu

W Design Managerze można dodać lub zaktualizować etykietę dla modułu, aby pomóc użytkownikom zidentyfikować go w edytorze treści. Jeśli etykieta jest pusta, domyślnie wyświetlana jest nazwa modułu.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł , dla którego chcesz edytować etykietę.
3. W inspektorze wprowadź etykietę.

Dodawanie pól do modułu

Dodaj pola do modułu, aby ustawić jego zawartość lub styl i umożliwić jego edycję w edytorze zawartości. Dowiedz się więcej o dostępnych typach pól. 

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. W inspektorze, w sekcji Pola , kliknij menu rozwijane Dodaj pole . Następnie wybierz pole , które chcesz dodać do modułu.

4. Aby edytować nazwę pola, kliknij ikonę edit i wprowadź nową nazwę. Aby edytować nazwę zmiennej HubL, wprowadź nową nazwę w polu Nazwa zmiennej HubL . 

Dostosuj domyślną zawartość pola

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

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. W inspektorze, w sekcji Pola , najedź kursorem na pole i kliknij Edytuj.
4. W sekcji Opcje zawartości dodaj lub edytuj domyślne opcje zawartości. Dostępne domyślne opcje zawartości będą zależeć od wybranego typu pola.

Na przykład, dodając typ pola Data i godzina do modułu, można wybrać domyślną datę i godzinę. Można również wprowadzić domyślny interwał czasowy.

Ustawianie opcji edytora pól

W sekcji Opcje edytora można ustawić pole jako wymagane i uniemożliwić jego edycję w edytorze treści. Można również dostosować tekst pomocy. 

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. W inspektorze, w sekcji Pola , najedź kursorem na pole i kliknij Edytuj.
4. W sekcji Opcje edytora , aby ustawić pole jako wymagane, włącz przełącznik Ustaw to pole jako wymagane . Uniemożliwi to użytkownikom pozostawienie pustego pola w edytorze treści.
5. Aby zapobiec edycji zawartości pola, włącz przełącznik Zapobiegaj edycji w edytorach zawartości. Zawartość pola można nadal dostosowywać w Design Manager na poziomie szablonu. Ta opcja nie jest dostępna dla modułów globalnych.
6. Aby dodać kontekst lub instrukcje dotyczące korzystania z pola, wprowadź tekst w polu tekstowym pomocy Tooltip lub w polu tekstowym pomocy Inline .
   • Tekst pomocy w podpowiedzi: ten tekst pojawi się w podpowiedzi, gdy użytkownik najedzie kursorem na ikonę infoCircleIcon w edytorze treści.
   • Wbudowany tekst pomocy: ten tekst pojawi się pod polem, gdy użytkownik edytuje moduł w edytorze treści.

Ustawianie warunków wyświetlania pola

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

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. W inspektorze, w sekcji Pola , najedź kursorem na pole i kliknij Edytuj.
4. W sekcji Warunki wyświetlania kliknij menu rozwijane Zmienna HubL i wybierz zmienną. 
5. Kliknij drugie menu rozwijane i wybierz opcję (np. Is equal to lub Is not empty). W zależności od wybranej opcji może być wymaganych więcej pól warunków. Na przykład, jeśli wybierzesz Is equal to, wymagane będzie dodatkowe pole wartości.
6. Domyślnie warunki wyświetlania są włączane automatycznie po ich skonfigurowaniu. Aby wyłączyć warunki wyświetlania, wyłącz przełącznik Warunki wyświetlania .

Ustawianie opcji wzmacniacza pola

W sekcji Opcje repeatera można skonfigurować opcje repeatera dla pól i grup. Gdy opcje repeatera są włączone, wiele obiektów zostanie utworzonych i wyświetlonych za pomocą for pętli.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. W inspektorze, w sekcji Pola , najedź kursorem na pole i kliknij Edytuj.
4. W sekcji Repeater options wprowadź liczbę w polach Minimum i Maximum (opcjonalnie) . Spowoduje to ustawienie minimalnej liczby wyświetleń pola w module aż do wartości maksymalnej. 
5. Aby ustawić liczbę wyświetleń danego pola domyślnie, wprowadź liczbę w polu Domyślna liczba obiektów .
6. Domyślnie opcje repeatera są automatycznie włączane po skonfigurowaniu. Aby wyłączyć opcje repeatera, wyłącz przełącznik Opcje repeatera .

Na przykład opcje repeatera pola obrazu są zmieniane, aby wyświetlać co najmniej trzy i maksymalnie pięć pól obrazu. Wartość czterech pól obrazu jest skonfigurowana jako wartość domyślna. W edytorze treści użytkownik zobaczy domyślnie cztery pola obrazu i może dodać jeszcze jedno pole obrazu lub usunąć istniejące pole obrazu.

Pola modułu grupy

Po utworzeniu pól można je pogrupować, aby uporządkować je według przydatności. Grupy pól mogą być używane do tworzenia niestandardowej logiki pól. Można zgrupować maksymalnie cztery pola. Dowiedz się więcej o grupach modułów terenowych.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. W inspektorze, w sekcji Pola , kliknij menu rozwijane Akcje i wybierz Grupuj.
4. Wybierz jedno lub więcej pól do zgrupowania, a następnie kliknij przycisk Utwórz grupę.

Dodawanie tekstu pomocy do modułu

W sekcji Opcje edytora można dodać tekst pomocy, aby zapewnić użytkownikom kontekst podczas edytowania modułu. Ten tekst będzie wyświetlany nad polami w module. 

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. W inspektorze, w sekcji Opcje edytora , wprowadź tekst w polu Tekst pomocy wbudowanej .

Zarządzanie typami zawartości i dostępnością modułu

Dodaj lub usuń typy treści, do których użytkownicy mogą używać modułu, takie jak wpisy na blogu lub strony docelowe. Można również włączyć lub wyłączyć dostępność modułu w szablonach i na stronach.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. Aby edytować typy zawartości dla modułu, kliknij Typy zawartości poniżej nazwy modułu w inspektorze w prawym górnym rogu.

1. • W oknie dialogowym zaznacz lub usuń zaznaczenie pola wyboru obok każdego typu treści, w którym moduł będzie lub nie będzie używany (np. wpisy na blogu, wiadomości e-mail lub strony docelowe). 
   • Po zakończeniu kliknij przycisk Aktualizuj.

4. Aby zarządzać dostępnością modułu w szablonach lub na stronach, należy włączyć przełącznik Make available for templates and pages w prawym górnym rogu. Aby przetestować funkcjonalność modułu lub wyłączyć jego dostępność w szablonach i na stronach, należy wyłączyć przełącznik Udostępnij w szablonach i na stronach . 

Uwaga: wyłączenie opcji Udostępnij dla szablonów lub stron nie spowoduje usunięcia modułu z istniejących szablonów lub stron.

Kopiowanie i wklejanie fragmentów pól

Podczas włączania pola do modułu, można skopiować i wkleić fragmenty pola do sekcji module.html (HTML + HubL) w edytorze modułów.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. W inspektorze najedź kursorem na pole modułu i kliknij menu rozwijane Akcje w sekcji Pola . Następnie wybierz opcję Kopiuj fragmenty. 
4. W edytorze modułów wklej fragmenty pól w wybranym miejscu w sekcji module.html (HTML. + HubL) . Można użyć skrótu klawiaturowego Cmd+V lub Ctrl+V. 

Składnia modułu zapisu

Podczas edytowania modułu, możesz napisać składnię modułu w sekcjach module.html (HTML + HubL), module.css i module.js edytora modułów. Dowiedz się więcej o edytorze modułów i przeglądzie modułów.

Podgląd i publikacja modułu

Po zakończeniu edycji modułu, w tym dodawaniu pól i pisaniu składni modułu, można wyświetlić podgląd i opublikować moduł. 

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć moduł.
3. Aby wyświetlić podgląd modułu, kliknij przycisk Podgląd w prawym górnym rogu. Zostaniesz przekierowany do nowej karty przeglądarki, aby wyświetlić podgląd modułu. Podgląd ten synchronizuje się z edytorem modułów i będzie automatycznie odświeżany po wprowadzeniu zmian.
4. Aby opublikować moduł, kliknij przycisk Opublikuj zmiany. 

Dodawanie modułu do szablonu

Po opublikowaniu modułu można go używać we wszystkich szablonach, dodając go do szablonu typu "przeciągnij i upuść" lub niestandardowego szablonu zakodowanego w Design Manager. Aby dodać moduły w edytorze zawartości, dowiedz się więcej o dodawaniu i edytowaniu modułów w edytorze zawartości.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij, aby otworzyć szablon.
3. Aby dodać moduł do edytora wykorzystującego przeciąganie i upuszczanie w szablonie, kliknij zakładkę + Dodaj w górnej części inspektora.
   • W polu wyszukiwania wprowadź nazwę modułu. Aby zawęzić wyszukiwanie do modułów niestandardowych, kliknij menu rozwijane Filtruj według kategorii lub tagów i wybierz Moduły niestandardowe.
   • Kliknij ikonę dragHandleIcon i przenieś moduł na odpowiednią pozycję w edytorze układu.
4. Aby dodać moduł do szablonu o niestandardowym kodzie:
   •  Kliknij prawym przyciskiem myszy lub Ctrl+klik na moduł w wyszukiwarce i wybierz Kopiuj fragmenty. Alternatywnie, kliknij, aby otworzyć moduł, a następnie w sekcji Użycie szablonu inspektora kliknij Kopiuj fragmenty.
   • W szablonie z kodem niestandardowym wklej fragment kodu modułu w edytorze kodu.
5. Po zakończeniu kliknij przycisk Opublikuj zmiany w prawym górnym rogu.

Przykład: Tworzenie modułu odliczania

1. Utwórz moduł w Design Manager i nazwij go"Countdown Timer".
2. W inspektorze, w sekcji Pole , kliknij menu rozwijane Dodaj pole.

• • Wybierz pole Data i godzina . Wprowadź nazwę "Data i godzina zdarzenia". Spowoduje to zaktualizowanie pola nazwy zmiennej HubL do wartości event_date_and_time.

• • Wybierz pole Kolor . Wprowadź nazwę "Timer Font Color". Spowoduje to zaktualizowanie pola nazwy zmiennej HubL do wartości timer_font_color.

Uwaga: nazwy zmiennych HubL muszą być zgodne z nazwami zmiennych zawartymi w poniższej sekcji kodu module.html (HTML + HubL).

3. W edytorze modułów skopiuj i wklej poniższy kod do odpowiedniejsekcji :

4. Po zakończeniu wyświetl podgląd i opublikuj moduł.
5. Kontynuuj dodawanie modułu do szablonu.