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

Krótka wycieczka do kierownika projektu

Data ostatniej aktualizacji: czerwca 15, 2022

Dotyczy:

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

Menedżer projektów HubSpot łączy w sobie wszystkie narzędzia potrzebne projektantom do tworzenia nowoczesnych witryn internetowych, a jednocześnie zapewnia marketerom elastyczność, której potrzebują przy tworzeniu treści.

W tym artykule poznasz wszystkie funkcje menedżera projektów.Jeśli szukasz konkretnych przykładów kodu i dokumentacji referencyjnej, zapoznaj się z dokumentacją HubSpot dokumentacja dla programistów.

Narzędzia wchodzące w skład menedżera projektów

Menedżer projektów łączy kilka ważnych narzędzi w jedną potężną aplikację:

  • Finder- miejsce do tworzenia i organizowania plików, szablonów, modułów i folderów.
  • Edytorukładu- edytor typu "przeciągnij i upuść" do tworzenia struktury szablonów stron, blogów, wiadomości e-mail i systemów.
  • Inspektor- w tym miejscu można edytować właściwości układu, modułu lub grupy.
  • Edytorkodu- zintegrowane środowisko programistyczne (IDE) dla całego kodu frontendowego (CSS, Javascript, a nawet własnych szablonów HTML).
  • Edytor modułów- niestandardowe moduły wielokrotnego użytku, które można skonfigurować w celu dodania do witryny zaawansowanych funkcji,którymi mogą zarządzać użytkownicy nietechniczni.
  • Menedżerplików- system hostingu plików dla wszystkich zasobów witryny.

Przejdź do swojego menedżera projektów, aby poznać te narzędzia.W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.

Finder

Finder to miejsce do zarządzania wszystkimi folderami, szablonami, modułami i plikami z kodem. Możesz organizować pliki i foldery w dowolny sposób, korzystając z interfejsu "przeciągnij i upuść". Kliknięcie na pliku powoduje rozwinięcie lub zwinięcie zawartych w nim plików.

Wszystkie Centrum marketingowe Konta Professional i Enterprise orazCentrum CMS KontaProfessional i Enterprise mają domyślnie folder @hubspot w menedżerze projektów. Folder ten zawiera wszystkie Twoje motywy i moduły domyślne, w tym moduły poczty elektronicznej typu "przeciągnij i upuść". Te motywy i moduły są tylko do odczytu, ale można je sklonować, jeśli chcesz je dostosować. Dowiedz się więcej o dostosowywaniu motywów i modułów domyślnych.

design-manager-hubspot-folder

KliknijPlik, aby utworzyć nowe pliki lub foldery, lub aby podjąć działania dotyczące zasobu aktualnie zaznaczonego w przeglądarce, takie jak usunięcie, sklonowanie lub zmiana nazwy zasobu. Aby zarządzać rozmieszczeniem plików i folderów, użyj opcji w sekcjiWidok. Możesz szybko zwinąć wszystkie foldery lub wyświetlić ostatnio edytowane lub usunięte aktywa.

design manager collapse and deselect folders

Uwaga: wyszukiwarka jest kontekstowa, co oznacza, że Twoje działania będą zawsze odnosiły się do wybranych folderów i plików. Aby utworzyć nowy plik lub folder w obrębie określonego folderu, kliknij ten folder w wyszukiwarce. Aby utworzyć nowy plik lub folder poza wszystkimi istniejącymi folderami, kliknij przycisk Widok, a następnie wybierz polecenieOdznacz wszystko.

StronaAkcjeMenu Akcje jest aktywne tylko wtedy, gdy jest zaznaczony plik lub folder, i zawiera opcje kontekstowe dla danego typu zasobu. Można również kliknąćprawymprzyciskiem myszy bezpośrednio na zasób, aby wykonać jedną z poniższych czynności:

  • Klonowanie: tworzenie kopii pliku, folderu lub szablonu.
  • Przenieś: wybierz nowy folder dla swoich zasobów.
  • Zmień nazwę: nadaj składnikowi aktywów nową nazwę.
  • Klonowanie do HTML: tworzenie kopii zasobu w całości zakodowanej w HTML.
  • Kopiuj doportalu: utwórz kopię zasobu i wyślij ją na inne konto HubSpot, do którego masz dostęp.
  • Utwórz stronę/email: utwórz nową część zawartości przy użyciu tego szablonu.
  • Pokaż zależne: wyświetlenie listy wszystkich treści HubSpot korzystających z tego pliku.
  • Pokaż historię rewizji: przeglądanie historii zapisanych wersji.
  • Kopiuj fragment: użyj tej opcji, aby szybko skopiować fragment koduwłasnego modułu do schowka. Ta opcja pojawi się tylko po kliknięciuprawymprzyciskiem myszy na moduł.
  • Zablokuj folder: zablok owanie folderu w celu uniemożliwienia użytkownikom edycji jego zawartości w menedżerze projektów. Zawartość zablokowanych folderów może być edytowana tylko w lokalnym środowisku programistycznym.
  • Usuń- usunięcie tego pliku, folderu, szablonu lub modułu.

right-cilck

Zakładki

Gdy klikniesz nazwę szablonu, modułu lub pliku kodowego, Twój wybór zostanie otwarty w zakładce edytora. Zakładki ułatwiają pracę wielozadaniową i przełączanie się między różnymi szablonami i plikami kodowymi. Klikając prawym przyciskiem myszy dowolną kartę, można wyświetlić opcje zarządzania zakładkami w edytorze. Pełną listę otwartych kart można przejrzeć, klikając strzałkęwdół poprawej stronie.

Aby zapewnić sobie więcej miejsca do pracy w edytorze układu, możesz najpierwkliknąć ikonęzwijania,aby zwinąć kontrol. Możesz ponownie rozwinąć kontrolkę, klikając ikonęfolderu.

2021-12-16_16-33-42 (2)

Tworzenie nowych szablonów i plików

Aby utworzyć nowyszablon,moduł lubzakodowany plik, kliknij Plik>Nowy plikw lewym górnym rogu wyszukiwarki. Masz możliwość utworzenia dowolnego z następujących typów zasobów:

  • Przeciągnij i upuść: szablon zbudowany przez dodanie modułów do intuicyjnego interfejsu typu "przeciągnij i upuść".
  • HTML i HUBL: niestandardowy szablon utworzony w edytorze kodu przy użyciu HTML, CSS i Javascript.
  • Arkusz stylów: zakodowany plik CSS, który może być używany do stylizacji modułów i plików.
  • JavaScript: zakodowany plik skryptu Javascript, który można zastosować do modułów i plików.
  • Moduł: niestandardowo zakodowany moduł, który można dodać do szablonu.

Edytor układu

Edytor układu to interfejs typu "przeciągnij i upuść", który pozwala określić strukturę i domyślną zawartość stron i wiadomości e-mail. Widoczne są nazwy modułów i grup oraz klasa zawartości zastosowana do każdego komponentu. Możesz modyfikować każdy moduł lub grupę, klikając go w celu edycji w inspektorze po prawej stronie lub klikając prawym przyciskiem myszy na komponent, aby uzyskać dostęp do funkcji inspektora.

Przeciągnij i upuść komponenty w edytorze układu, aby dostosować ich rozmieszczenie i rozmiar w szablonie. W lewym górnym rogu znajdują się przyciskiCofnijiPonów, które pomogą Ci szybko przywrócić wprowadzone zmiany.Możesz także kliknąć prawymprzyciskiem myszymoduł, aby szybko go pogrupować,sklonowaćlubzmienić typ modułu, albo użyćskrótów klawiaturowychdowykonania tych samych czynności. Kliknij przyciskPodglądw prawym górnym rogu, aby wyświetlić podgląd swojej pracy i przetestować układ na ekranach o różnych rozmiarach.

Wszystkie układy szablonów HubSpot są responsywne, co oznacza, że automatycznie dostosowują się do różnych rozmiarów ekranu. Edytor ten kompiluje moduły metodą "przeciągnij i upuść" do postaci czystego znacznika HTML, który dzięki wbudowanemuCSSstajesię responsywny.

Dowiedz się więcej na temattworzenia i edytowania szablonów orazdodawania stylów do szablonów.

Inspektor

Inspektor umożliwia dodawanie i edytowanie komponentów w szablonie lub module. Jego działanie jest kontekstowo zależne od wykonywanego zadania i typu pliku. Na przykład:

  • Po wybraniu komponentu w edytorze przeciągnij i upuść w inspektorze zostaną wyświetlone wszystkie cechy i opcje tego komponentu.
  • Jeśli w edytorze przeciągania i upuszczania nie zostanie wybrany żaden komponent, w inspektorze zostaną wyświetlone opcje dotyczące samego szablonu.
  • Podczas edycji modułu inspektor umożliwia edytowanie i dodawanie pól.

W zależności od typu modułu wybranego w szablonie, w inspektorze mogą być dostępne różne opcje.

W przypadku szablonów typu "przeciągnij i upuść" zakładka+ Dodajsłuży do dodawania nowych komponentów do układu.Zakładka Edycjawinspektorze służy do przypisywania niestandardowych klas CSS, edytowania domyślnej zawartości lub dołączania zakodowanych plików.

Inspektor zawiera w górnej części nawigację w postaci okruszków, która ułatwia szybkie poruszanie się między zasobami, modułami, grupami i szablonami, nad którymi aktualnie pracujesz.

W przypadku niestandardowo zakodowanych szablonów i modułów HTML & HUBL można użyć inspektora, aby dodać nowe pola lub łącza do zakodowanych plików.Można również dodać znaczniki filtrujące, aby wskazać typ zawartości i funkcję zakodowanych szablonów i modułów, dzięki czemu będą one łatwiejsze do wyszukania w wyszukiwarce. Można również znaleźć fragmenty i więcej szczegółów na temat tego, jak te niestandardowe zakodowane zasoby mogą być używane w szablonach.

Edytor kodu

Edytor kodu HubSpot to potężne IDE,które pozwala na kodowanieplików CSS,Javascript, a nawetszablonów HTML. Podczas kodowania lub edycji arkuszy stylów można na żywo podglądać efekty wprowadzonych zmian na ekranach o różnych rozmiarach. Edytor kodu korzysta również z wielu innych przydatnych funkcji IDE, takich jak kolorowe klasy, sprawdzanie błędów, kolorowanie składni, automatyczne zapisywanie, automatyczne zamykanie znaczników, automatyczne wcięcia i wiele innych.

Dowiedz się więcej o tym,jak korzystać z edytora kodu.

design-manager-code-editor-example

Edytor modułów

Szablony HubSpot typu "przeciągnij i upuść" zawierają wielestandardowych modułówdo wyboru, jednak projektanci mogą czasami potrzebować bardziej niestandardowych rozwiązań.Modułysą komponentami wielokrotnego użytku, kodowanymi na zamówienie, składającymi się z pól HTML iHubL, CSS i Javascript. Moduły te można dodawać do szablonów i dostosowywać w edytorze stron bez użycia kodu.

Za pomocą inspektora możesz dodawać pola, dołączać zakodowane pliki lub dodawać znaczniki, aby uporządkować swoje zasoby. Podobnie jak w edytorze kodu, możesz na bieżąco podglądać swoją pracę na ekranach o różnych rozmiarach. Możesz także określić domyślną zawartość pól modułu, zablokować domyślną zawartość lub sprawić, by określone pola modułu były wymagane.

Menedżer plików

Menedżerplików wHubSpot przechowuje wszystkie zasoby, których używasz do tworzenia treści. Narzędzie to pozwala na przesyłanie plików PDF, obrazów, filmów, plików audio, czcionek i innych. Możesz uzyskać dostęp do swoich zasobów kreatywnych lub szybko przesyłać nowe pliki bez konieczności opuszczania aplikacji.

file-manager

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