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: października 18, 2021

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 budowania nowoczesnych stron internetowych, a jednocześnie zapewnia marketerom elastyczność, której oczekują podczas tworzenia treści.

W tym artykule zapoznasz się z wszystkimi funkcjami menedżera projektów.Jeśli szukasz konkretnych przykładów kodu i dokumentacji referencyjnej, sprawdź dokumentację HubSpot dokumentacja deweloperska.

Narzędzia zawarte w menedżerze projektu

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

  • Finder- przestrzeń do tworzenia i organizowania plików, szablonów, modułów i folderów.
  • Edytor układu- edytor typu "przeciągnij i upuść" do tworzenia struktury szablonów stron, blogów, e-maili i systemów.
  • Inspektor- w tym miejscu możesz edytować właściwości układu, modułu lub grupy.
  • Edytor kodu- zintegrowane środowisko programistyczne (IDE) dla całego Twojego kodu frontendowego (CSS, Javascript, a nawet Twoich własnych szablonów HTML).
  • Edytor modułów- niestandardowe moduły wielokrotnego użytku, które możesz skonfigurować, aby dodać zaawansowaną funkcjonalność do swojej witryny,która może być zarządzana przez użytkowników nietechnicznych.
  • Menedżer plików- system hostingu plików dla wszystkich zasobów Twojej 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 przestrzeń do zarządzania wszystkimi folderami, szablonami, modułami i plikami z kodem. Możesz organizować swoje pliki i foldery jak tylko chcesz, używając interfejsu "przeciągnij i upuść". Klikając na plik możesz rozwinąć lub zwinąć zawarte w nim pliki.

Wszystkie Hub marketingowy Konta Professional i Enterprise orazHub CMS KontaProfessional i Enterprise mają domyślnie folder @hubspot w menedżerze projektów. Folder ten zawiera wszystkie Twoje motywy i domyślne moduły, w tym moduły e-mailowe typu "przeciągnij i upuść". Te motywy i moduły są tylko do odczytu, ale mogą być klonowane, 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 na składniku aktywów aktualnie zaznaczonym w finderze, takie jak usunięcie, sklonowanie lub zmiana nazwy składnika. Użyj opcji w sekcjiWidok, aby zarządzać układem plików i folderów. Możesz szybko zwinąć wszystkie foldery lub wyświetlić ostatnio edytowane lub usunięte aktywa.

design manager collapse and deselect folders

Uwaga: finder jest kontekstowy, 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 będzie aktywne tylko wtedy, gdy plik lub folder jest aktualnie zaznaczony i zawiera opcje kontekstowe dla danego typu zasobu. Możesz 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 swojego zasobu.
  • Zmień nazwę: nadaj składnikowi aktywów nową nazwę.
  • Klonowanie do HTML: utwórz kopię zasobu w całości zakodowaną w HTML.
  • Kopiuj doportalu: utwórz kopię swojego zasobu i wyślij ją do innego konta HubSpot, do którego masz dostęp.
  • Utwórz stronę/email: utwórz nową treść używając tego szablonu.
  • Pokaż zależności: zobacz listę wszystkich treści HubSpot korzystających z pliku.
  • Pokaż historię rewizji: przeglądanie historii zapisanych wersji.
  • Kopiuj wycinek: użyj tego, aby szybko skopiować wycinek kodu twojegowłasnego modułu do schowka. Ta opcja pojawi się tylko wtedy, gdyklikniesz prawymprzyciskiem myszy na moduł.
  • Zablokuj folder: zablokuj folder, aby uniemożliwić użytkownikom edycję jego zawartości w menedżerze projektów. Zawartość zablokowanych folderów może być edytowana tylko w lokalnym środowisku programistycznym.
  • Usuń- usuń ten plik, folder, szablon lub moduł.

right-cilck

Zakładki

Kiedy klikniesz na nazwę szablonu, modułu lub pliku kodowanego, otworzy to twój wybór w zakładce w edytorze. Zakładki ułatwiają pracę wielozadaniową i przełączanie się pomiędzy różnymi szablonami i plikami kodowanymi. Możesz kliknąć prawym przyciskiem myszy na dowolnejzakładce, aby wyświetlić opcje zarządzania zakładkami w edytorze. Możesz przejrzeć pełną listę otwartych zakładek, klikającstrzałkę w dółpo prawej stronie.

Aby dać sobie więcej miejsca do pracy w edytorze układu, możesznajpierwkliknąćikonę zwijania,aby zwinąć kontrol. Możesz ponownie rozwinąć findera, klikając ikonęfolderufolder.

Tworzenie nowych szablonów i plików

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

  • Drag and drop: szablon zbudowany poprzez dodawanie modułów do intuicyjnego interfejsu drag and drop.
  • HTML & HUBL: własny szablon stworzony w edytorze kodu przy użyciu HTML, CSS i Javascript.
  • Arkusz stylów: zakodowany plik CSS, który może być użyty do stylizacji modułów i plików.
  • JavaScript: zakodowany plik Javascript, który może być zastosowany do modułów i plików.
  • Moduł: niestandardowy moduł, który może być dodany do szablonu.

Edytor układu

Edytor układu jest interfejsem typu "przeciągnij i upuść" dla struktury i domyślnej zawartości Twoich stron i e-maili. Zobaczysz nazwy swoich modułów i grup, wraz z klasą ciała zastosowaną 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 funkcjonalności 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 zgrupować,sklonowaćlub zmienić typ modułu, albo użyćskrótów klawiaturowych, aby wykonać te same czynności. Kliknij przyciskPodglądw prawym górnym rogu, aby wyświetlić podgląd swojej pracy i przetestować układ na różnych rozmiarach ekranu.

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 czystego znacznika HTML, który jest responsywny dziękiwbudowanemuCSS.

Dowiedz się więcej otworzeniu i edycji szablonów orazdodawaniu stylów do szablonów.

Inspektor

Inspektor pozwala na dodawanie i edycję komponentów w szablonie lub module. Jest on kontekstowo zależny od zadania, które wykonujesz i typu pliku. Na przykład:

  • Gdy komponent jest wybrany w edytorze przeciągnij i upuść, inspektor pokaże wszystkie cechy i opcje tego komponentu.
  • Gdy w edytorze przeciągnij i upuść nie jest wybrany żaden komponent, inspektor pokaże opcje dla samego szablonu.
  • Podczas edycji modułu, inspektor pozwala na edycję i dodawanie pól.

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

W przypadku szablonów typu przeciągnij i upuść, zakładka+ Dodajjest używana do dodawania nowych komponentów do układu.ZakładkaEdycjawinspektorze może być używana do przypisywania własnych klas CSS, edytowania domyślnej zawartości lub dołączania zakodowanych plików.

Inspektor zawiera górną nawigację, która pomaga szybko poruszać 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żesz użyć inspektora, aby dodać nowe pola lub odnośniki do zakodowanych plików.Możesz także 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żesz także znaleźć snippety i więcej szczegółów o tym, jak te niestandardowe zakodowane zasoby mogą być użyte w twoich 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 także 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

Podczas gdy szablony HubSpot typu "przeciągnij i upuść" zawierają wielestandardowych modułówdo wyboru, projektanci mogą czasami potrzebować bardziej niestandardowych rozwiązań projektowych.Modułysą komponentami wielokrotnego użytku, zakodowanymi na zamówienie, składającymi się z pól HTML iHubL, CSS i Javascript. Moduły te mogą być dodawane do szablonu i dostosowywane w edytorze stron bez użycia kodu.

Użyj inspektora, aby dodać pola, dołączyć zakodowane pliki lub dodać znaczniki, aby uporządkować swoje zasoby. Podobnie jak w edytorze kodu, możesz na bieżąco podglądać swoją pracę na ekranie o różnych rozmiarach. Możesz także określić domyślną zawartość dla pól modułu, zablokować domyślną zawartość lub uczynić określone pola modułu wymaganymi.

Menedżer plików

Menedżer plikó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 kreatywnych zasobów lub szybko przesłać nowe pliki bez konieczności opuszczania aplikacji.

file-manager