Tworzenie i edytowanie modułów w menedżerze projektów

Menedżer projektów umożliwia tworzenie niestandardowych modułów w celu dodawania 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 strony, wiadomości e-mail lub bloga.

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

Utwórz nowy moduł

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 Module.
4. Kliknij przycisk Dalej.
5. W polu Where would you like to use this module zaznacz pole wyboru obok każdego typu zawartości, w której moduł będzie używany (np. Blog posts, Emails lub Landing pages).
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 wyskakującym okienku 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 można tworzyć 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 menedżerze projektów można dostosować jego funkcjonalność i wygląd. Oznacz moduł dla przejrzystości, dodaj i skonfiguruj pola oraz dostosuj opcje edytora pól, takie jak zawartość domyślna. Ustawić warunki wyświetlania i opcje repeatera oraz pogrupować 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 menedżerze projektów można dodać lub zaktualizować etykietę modułu, aby pomóc użytkownikom zidentyfikować go w edytorze zawartoś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ć zawartość lub styl modułu 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ę edycji edit i wprowadź nową nazwę. Aby edytować nazwę zmiennej HubL, wprowadź nową nazwę w polu HubL variable name.

Dostosowywanie domyślnej zawartości pól

W sekcji Opcje zawartości można 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.

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 także 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 uczynić pole wymaganym, włącz przełącznik Uczyń to pole wymaganym. Uniemożliwi to użytkownikom pozostawienie pustego pola w edytorze treści.
5. Aby uniemożliwić edycję zawartości pola, włącz przełącznik Zapobiegaj edycji w edytorach zawartości. Zawartość pola można nadal dostosowywać w menedżerze projektów 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ę informacji 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 rozwij ane i wybierz opcję (np. Is equal to lub Is not empty). W zależności od wybranej opcji może być wymagane 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ą automatycznie włączane po skonfigurowaniu warunku. Aby wyłączyć warunki wyświetlania, należy wyłączyć przełącznik Warunki wyświetlania .

Ustawianie opcji repeatera pola

W sekcji Opcje repeatera można skonfigurować opcje repeatera dla pól i grup. Po włączeniu opcji repeatera wiele obiektów będzie tworzonych i wyświetlanych przy użyciu pętli for.

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 wystąpień pola w module aż do wartości maksymalnej.
5. Aby ustawić domyślną liczbę wyświetleń pola, wprowadź liczbę w polu Default object count.
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 tak, aby wyświetlać co najmniej trzy i maksymalnie pięć pól obrazu. Wartość czterech pól obrazu jest skonfigurowana jako 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.

Grupowanie pól modułów

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 pól modułu.

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 opcji edytora można dodać tekst pomocy, aby zapewnić użytkownikom kontekst podczas edytowania modułu. Tekst ten 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, dla których użytkownicy mogą używać modułu, takie jak posty na blogu lub strony docelowe. Możesz także włączać lub wyłączać 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. posty 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 stronach, włącz przełącznik Udostępnij dla szablonów i stron 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ć opcję 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ć fragment 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 Kopiuj fragment.
4. W edytorze modułów wklej fragment pola w wybranym miejscu w sekcji module.html (HTML. + HubL). Możesz użyć skrótu klawiaturowego Cmd+V lub Ctrl+V.

Pisanie składni modułu

Podczas edycji modułu można zapisać 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 publikowanie 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 Podgląd w prawym górnym rogu. Zostaniesz przekierowany do nowej karty przeglądarki, aby wyświetlić podgląd modułu. Podgląd ten jest zsynchronizowany 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 używać go we wszystkich szablonach, dodając go do szablonu typu "przeciągnij i upuść" lub niestandardowego szablonu zakodowanego w menedżerze projektów. 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 szablonu metodą przeciągnij i upuść w edytorze układu, kliknij kartę + Dodaj w górnej części inspektora.
   • W polu Wyszukaj wprowadź nazwę modułu. Aby zawęzić wyszukiwanie do modułów niestandardowych, kliknij menu rozwijane Filtruj według kategorii lub tagów i wybierz opcję Moduły niestandardowe.
   • Kliknij ikonę przeciągania i upuszczania dragHandleIcon i przenieś moduł w odpowiednie miejsce w edytorze układu.
4. Aby dodać moduł do niestandardowego szablonu:
   • Kliknij prawym przyciskiem myszy lub Ctrl+kliknięcie na module w wyszukiwarce i wybierz Kopiuj fragment. Alternatywnie, kliknij, aby otworzyć moduł, a następnie w sekcji Użycie szablonu inspektora kliknij Kopiuj fragment.
   • W niestandardowym szablonie wklej fragment 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 menedżerze projektów 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 wydarzenia". Spowoduje to zaktualizowanie pola nazwy zmiennej HubL do event_date_and_time.

• • Wybierz pole Kolor. Wprowadź nazwę "Timer Font Color". Spowoduje to zaktualizowanie pola nazwy zmiennej HubL do 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 następujący kod do sekcji module.html (HTML + HubL):

<!-- Ukryty zakres do przechowywania daty docelowej -->
<span id="target-date" style="display: none;"></span>.

<!-- Wyświetlanie licznika czasu -->
<div style="float: left; width: 100%; color: ;">.
<div class="time_container" style="margin-left: 30%;">.
<span id="days"></span><br>
Dni
</div>
<div class="time_container">
<span id="hours"></span><br>
Godziny
</div>
<div class="time_container">
<span id="minutes"></span><br>
Minuty
</div>
<div class="time_container">
<span id="seconds"></span><br>
Sekundy
</div>
</div>

4. Skopiuj i wklej następujący kod do sekcji module.css:

.time_container {
float: left;
width: 10%;
text-align: center;
}
.time_container span {
font-weight: bold;
font-size: 200%;
}

5. Skopiuj i wklej następujący kod do sekcji module.js:

// Funkcja obliczająca i wyświetlająca odliczanie
function updateCountdown() {
// Pobierz datę docelową z ukrytego zakresu
const targetDate = new Date(document.getElementById('target-date').textContent);
// Pobierz bieżącą datę
const currentDate = new Date();
// Obliczenie pozostałego czasu (w milisekundach)
const timeRemaining = targetDate - currentDate;
// Sprawdź, czy data docelowa minęła
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown expired';
return;
}
// Obliczenie pozostałych dni, godzin, minut i sekund
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Wyświetlanie odliczania
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// Aktualizuj odliczanie co sekundę
setInterval(updateCountdown, 1000);
// Początkowe wywołanie do natychmiastowej aktualizacji odliczania
updateCountdown();

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