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: stycznia 20, 2023

Dotyczy:

Wszystkie produkty i plany

Menedżer projektów HubSpot łączy w sobie wszystkie narzędzia, których projektanci potrzebują do budowania najnowocześniejszych stron internetowych, a jednocześnie daje marketerom elastyczność, której pragną podczas tworzenia treści.

W tym artykule otrzymasz wycieczkę po wszystkich funkcjach menedżera projektów. Jeśli szukasz konkretnych przykładów kodu i dokumentacji referencyjnej, sprawdź dokumentację HubSpot dokumentacja dla deweloperów.

Narzędzia wchodzące w skład menedżera 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ładów - edytor typu "przeciągnij i upuść" do strukturyzacji szablonów stron, blogów, e-maili i systemów.
  • Inspektor - tutaj możesz edytować właściwości układu, modułu lub grupy.
  • Code Editor - 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 nadal może być zarządzana przez użytkowników nietechnicznych.
  • File Manager - system hostingu plików dla wszystkich zasobów Twojej witryny.

Przejdź do 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 Twoimi folderami, szablonami, modułami i zakodowanymi plikami. Możesz organizować swoje pliki i foldery jakkolwiek chcesz, używając interfejsu drag and drop findera. Kliknięcie na plik może rozwinąć lub zwinąć zawarte w nim pliki.

Wszystkie Hub marketingowy Konta Professional i Enterprise orazHub CMS Konta Professional i Enterprise mają domyślnie folder @hubspot w menedżerze projektów. Ten folder 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ć sklonowane, jeśli chcesz je dostosować. Dowiedz się więcej o dostosowywaniu motywów i modułów domyślnych.

design-manager-hubspot-folder

Kliknij Plik, aby utworzyć nowe pliki lub foldery, lub aby podjąć działania dotyczące zasobu aktualnie wybranego w wyszukiwarce, takie jak usunięcie, sklonowanie lub zmiana nazwy zasobu. Użyj opcji w sekcji Widok, aby zarządzać rozmieszczeniem plików i folderów. Możesz szybko zwinąć wszystkie foldery lub wyciągnąć 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 dotyczyć 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 Widok, a następnie wybierz Odznacz 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ąć prawym przyciskiem myszy bezpośrednio na zasobie, aby wykonać dowolne 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ę swojego zasobu w całości zakodowaną w HTML.
  • Kopia do portalu: utwórz kopię swojego zasobu i wyślij ją na inne konto HubSpot, do którego masz dostęp.
  • Utwórz stronę/email: utw órz nową treść przy użyciu tego szablonu.
  • Pokaż zależności: zobacz listę wszelkich treści HubSpot używających pliku używającego.
  • Pokaż historię rewizji: przeglądanie historii zapisanych wersji.
  • Kopiuj fragment: użyj tego, aby szybko skopiować fragment kodu twojego własnego modułu do schowka. Ta opcja pojawi się tylko po kliknięciu prawym przyciskiem myszy na moduł.
  • Zablokuj folder: zab lokuj 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

Tabs

Gdy klikniesz nazwę szablonu, modułu lub pliku kodowego, otworzy się on w zakładce edytora. Zakładki ułatwiają pracę wielozadaniową i przełączanie się pomiędzy różnymi szablonami i plikami kodowymi. Możesz kliknąć prawym przyciskiem myszy na dowolnej zakładce , aby wyświetlić opcje zarządzania zakładkami w edytorze. Możesz przejrzeć pełną listę otwartych zakładek, klikając strzałkę wdół po prawej stronie.

Aby dać sobie więcej miejsca do pracy w edytorze układu, możesz najpierw kliknąć ikonę zwijania,aby zwinąć finder. Możesz ponownie rozwinąć finder, klikając ikonę folderu.

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

Tworzenie nowych szablonów i plików

Aby stworzyć nowy szablon, moduł lub zakodowany plik, kliknij Plik >Nowy plik w lewym górnym rogu wyszukiwarki. Masz możliwość utworzenia dowolnego z następujących typów aktywów:

  • Drag and drop: szablon zbudowany poprzez dodanie modułów do intuicyjnego interfejsu drag and drop.
  • HTML & HUBL: własny szablon stworzony w edytorze kodu przy użyciu HTML, CSS i Javascript.
  • Stylesheet: 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ć stosowany do modułów i plików.
  • Moduł: niestandardowo zakodowany 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 do 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ść elementy w edytorze układu, aby dostosować ich położenie i rozmiar w szablonie. W lewym górnym rogu znajdują się przyciski Cofnij i Ponów, które pomogą Ci szybko przywrócić wprowadzone zmiany. Możesz także kliknąć prawym przyciskiem myszymoduł , aby szybko go zgrupować ,sklonować lub zmienić typ modułu. Kliknij przycisk Podgląd w 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 Twoje moduły metodą "przeciągnij i upuść" do czystego znacznika HTML, który jest responsywny dzięki wbudowanemu CSS.

Dowiedz się więcej o tworzeniu i edycji szablonów oraz dodawaniu stylów do szablonu.

Inspektor

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

  • Kiedy komponent jest wybrany w edytorze drag & drop, inspektor pokaże wszystkie cechy i opcje tego komponentu.
  • Gdy w edytorze drag & drop nie jest wybrany żaden komponent, w inspektorze pojawią się opcje dotyczące 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 + Dodaj służy do dodawania nowych komponentów do układu.Zakładka Edycja winspektorze może być użyta do przypisania niestandardowych klas CSS, edycji domyślnej zawartości lub dołączenia zakodowanych plików.

Inspektor zawiera nawigację w postaci okruszka chleba na górze, która pomaga szybko poruszać się między zasobami, modułami, grupami i szablonami, nad którymi aktualnie pracujesz.

W przypadku niestandardowych, zakodowanych szablonów i modułów HTML & HUBL, możesz użyć inspektora, aby dodać nowe pola lub połączyć się z zakodowanymi plikami. Możesz również dodać tagi filtrujące, aby wskazać typ zawartości i funkcję zakodowanych szablonów i modułów, aby ułatwić ich przeszukiwanie w wyszukiwarce. Możesz również znaleźć snippety i więcej szczegółów na temat tego, jak te niestandardowe zakodowane zasoby mogą być używane w twoich szablonach.

Edytor kodu

Edytor kodu HubSpot to potężne IDE, które umożliwia kodowanie plików CSS, plików Javascript, a nawet szablonów HTML. Podczas kodowania lub edycji arkuszy stylów, można na żywo podglądać efekty zmian na różnych rozmiarach ekranu. Edytor kodu wykorzystuje także wiele innych przydatnych funkcji IDE, takich jak kolorowe klasy, sprawdzanie błędów, podświetlanie 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.

Uwaga: domyślnie HubSpot automatycznie minimalizuje JavaScript i CSS zawarte w menedżerze projektów, aby usunąć niepotrzebne spacje, przerwy w liniach i komentarze. Dotyczy to również kodu JavaScript i CSS przesłanego do menedżera projektów za pośrednictwem CLI. Oznacza to, że nie należy dodawać już zminiaturyzowanego kodu bezpośrednio do menedżera projektów.

Dowiedz się więcej o minifikacji JavaScript i CSS.

design-manager-code-editor-example

Edytor modułów

Chociaż szablony HubSpot typu "przeciągnij i upuść" zawierają wiele standardowych modułów do wyboru, projektanci mogą czasami potrzebować bardziej niestandardowych rozwiązań projektowych.Moduły to wielokrotnego użytku niestandardowe komponenty składające się z pól HTML i HubL, CSS i Javascript. Moduły te można dodawać do szablonu i dostosowywać w edytorze stron bez użycia kodu.

Użyj inspektora, aby dodać pola, dołączyć zakodowane pliki lub dodać tagi, 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ść pól modułu, zablokować domyślną zawartość lub sprawić, by określone pola modułu były wymagane.

Menedżer plików

Menedżer plików HubSpot przechowuje wszystkie aktywa, których używasz do tworzenia treści. To narzędzie umożliwia przesyłanie plików PDF, obrazów, filmów, plików audio, czcionek i innych. Możesz uzyskać dostęp do swoich aktywów kreatywnych lub szybko przesłać nowe pliki bez konieczności opuszczania aplikacji.

file-manager

Czy ten artykuł okazał się pomocny?
Niniejszy formularz służy wyłącznie do przekazywania opinii dotyczących dokumentacji. Dowiedz się, jak uzyskać pomoc dotyczącą HubSpot.