Witaj w nowym serwisie Brandprzewodnik! Ten artykuł, jak równieżRozpoczęcie od BrandguideiDekoracja Brandguide za pomocą CSSprzechodzą przez to, jak przenieść zawartość do nowego doświadczenia. Możliwości edycji Twojego istniejącego Brandguide zostaną przerwane 1 września 2023 r. 1 grudnia 2023 r. dotychczasowy edytor Brandguide nie będzie już dostępny.
Ten artykuł przejdzie Cię przez jak zbudować Twój Brandguide za pomocą stron, sekcji i bloków.
Strony
Najwyższy poziom organizacyjny Brandguide. Strony dodają się, aby utworzyć Brandguidy.
Dodawanie stron
- Przejdź do opcji Strony na pasku bocznym.
- Wybierz przycisk Dodaj stronę.
- Nazwij stronę i ustaw Slug.
- Wybierz, Zapisz i utwórz stronę.
Usuwanie stron
Na stronach i sekcjach flagi wybierz ikonę kosza obok strony, którą chcesz usunąć. Jeśli strona zostanie usunięta, akcja nie może zostać cofnięta, a bloki i sekcje umieszczone na stronie nie mogą zostać odzyskane.
Sekcje
Sekcje są organizacyjnym poziomem Brandguide który jest zagnieżdżone na stronach i składa się z bloków.
Bloki
Bloki są zagnieżdżone w sekcjach. Możesz zlokalizować bloki w bloku po lewej stronie. Bloki są składnikami Brandguide takimi jak obrazy, tekst, kolor i kod, które są dostępne w obszarze płótna jako zawartość.
Dodawanie bloków
- Przejdź dolewego paska bocznegoi wybierzopcję bloku.
- Spowoduje to uruchomienie opcji blokowania obrazów, tekstu, kodu i koloru. Treści, które możesz dodać, będą miały kropkową linię dookoła niej.
- Wybierz blok i przeciągnij go do obszaru płótna. Fioletowe liniena płótnie wskazują zatwierdzoną strefę upuszczenia.
- Zwolnij kliknięcie, aby upuścić blok do płótna.
Usuwanie bloków
- Wybierz ikonę kosza na bloku. Pamiętaj że po usunięciu bloku nie można go odzyskać.
Zmień kolejność bloków
Masz dwie opcje:
- Przeciągnij i upuść blok gdzieś indziej na stronie.
- Użyj strzałkipo prawej stronie zawartości bloku, aby przesunąć blok w górę i w dół strony.
Bloki obrazów
Bloki obrazów pozwalają na bezproblemowe dodawanie zawartości biblioteki do Twojej Brandguide. Oznacza to, że jeśli składnik aktywów zostanie zaktualizowany w Bibliotece, składnik aktywów zostanie automatycznie zaktualizowany również w Brandguide To doświadczenie jest wspierane przez CDN. Aby promować spójność marki, nie możesz przesłać zdjęć na zewnątrz bezpośrednio do Brandguide. Muszą one pochodzić z twojej biblioteki.
Obsługiwane typy obrazów
- APNG
- AVIF
- GIF
- JPEG
- PNG
- SVG
- WebP
Dodawanie obrazów
- Wybierz ikonę obrazu po lewej stronie.
- Inna ulotka pojawi się z doświadczeniem z biblioteką. Biblioteka lub Kolekcja powiązana z Twoją Brandguide pojawi się jako domyślna.
- Aby wybrać inną bibliotekę lub Kolekcję wybierz czarną strzałkę na górze flaszy.
- Znajdź obraz, którego chcesz użyć i dodaj go w jeden z następujących sposobów:
- Przeciągnij i upuść obraz na płótno.
- Przesuń kursor nad obrazem i wybierz menu elip i wybierz [+] Place.
- Przesuń kursor nad obrazem i wybierz elipsę, wybierz szczegóły widoku, a następnie wybierz [+] Place.
- Przesuń kursor nad obrazem i wybierz elipsę, wybierz szczegóły widoku, a następnie przeciągnij i upuść obraz.
Zmiana rozmiaru obrazu
- Najedź na obrazek i wybierz elipzę.
- Wybierz szczegóły widoku.
- Otwórz opcje umieszczenia.
- Zmień szerokość i wysokość obrazu.
- Wybierz miejsce.
Pamiętaj:jest to jedyny sposób na manipulowanie rozmiarem obrazu.
Bloki tekstowe
Dodanie tekstu do Twojej Brandguide można wykonać przeciągając i upuszczając blok tekstu na płótno.
Zmiana stylów tekstu
Gdy style tekstowe są modyfikowane na globalnym poziomie ustawień, będą miały wpływ na wszystko na poziomie Brandguide Po modyfikacji na poziomie bloku będą one miały wpływ tylko na ten konkretny blok.
Tekst domyślny
- Przejdź do ustawień.
- Wprowadź swój kod szesnastkowy w polu kolorów tekstowych.
To wpłynie na dowolny tekst na stronie, w tym bloki tekstowe.
Tekst na poziomie bloku
- Najedź na blok tekstowy.
- Edytor WYSIWYG wyświetli się na zmianę czcionek, rozmiarów, kolorów tekstu i formatowania, takich jak dodawanie znaków lub linków do tekstu.
- Zmiany tutaj wpłyną tylko na wybrany blok.
Typografia
Obecnie użytkowników nie jest w stanie przesłać ani zsynchronizować czcionek z biblioteką do Brandguide.Czcionki dostępne w liście rozwijanej pochodzą z Google Webfonts. Zaawansowani użytkownicy mogą dodawać czcionki firm trzecich za pomocą CSS. Aby uzyskać więcej informacji odwiedź Administrowanie Brandguide za pomocą artykułu CSS. Zespół wsparcia biblioteki nie będzie w stanie pomóc Ci w budowaniu własnego kodu.
Bloki kodu
Blok kodu działa ze standardowym HTML / CSS. Używanie tego bloku jest zalecane tylko wtedy, gdy posiadasz zaawansowaną wiedzę na temat CSS. Obsługa klienta nie będzie w stanie Ci pomóc podczas wdrażania własnego kodu w Brandguide. Kod zostanie wyczyszczony w celu zapobieżenia atakom XSS.
Edycja bloków kodu
Po dodaniu bloku HTML/CSS do strony możesz dodać własny kod do Brandguide. HTML zostanie dodany do konkretnej lokalizacji na stronie, a CSS będzie miał zastosowanie do wszystkich obszarów płótna które jest określony. Po zakończeniu kodu, wybierz ikonę oczu, aby wyświetlić zmiany.
CSS można również edytować na poziomie globalnym w ustawieniach, ponieważ najlepszą praktyką jest ustawianie tych stylów na najwyższym poziomie i kaskadowanie w dół.
Dodawanie wideo za pomocą HTML
Blok flyout nie obsługuje dodawania bloków treści wideo. Jednakże przy użyciu kodu wideo, wideo może być dodawane za pomocą niestandardowych zasobów HTML i wideo z biblioteki. Obsługa klienta nie będzie w stanie Ci pomóc podczas wdrażania własnego kodu w Brandguide.
- Otwórz modalny składnik aktywów dla filmu.
- Przejdź do zakładkiOsadź.
- Zlokalizuj kod osadzania wideo i wybierzKopiuj link.
- Wklej kod do bloku HTML.
Bloki kodu sanitarnego
Pewne kody i elementy w nich zostaną uszeregowane dla celów bezpieczeństwa przed atakami XSS.
Usuwanie bloków kodu
Usunięcie bloków kodu usunie blok i cały kod zapisany w bloku. CSS napisany na poziomie ustawień globalnych pozostanie bez edycji w ustawieniach.
Przenoszenie bloków kodu
Przenoszenie bloku kodu po zapisaniu kodu HTML i CSS może zniszczyć blok lub zamierzone efekty kodu. Aby uzyskać najlepsze wyniki, wpisz kod po ustawieniu pozycji bloków.
Dodanie bloków kolorów do Twojej Brandguide można wykonać przeciągając i upuszczając kolor na płótno.
Źródła kolorów
Blok kolorów pochodzi z biblioteki lub kolekcji powiązanych z Brandguide. Jeśli w Brandguide nie pojawią się żadne kolory, oznacza to, że żaden nie został dodany do Biblioteki lub Kolekcji. Aby dodać kolory, dodaj je jako zasób w bibliotece.
Synchronizowanie kolorów
Po zmianie kolorów na poziomie biblioteki zmiana będzie również automatycznie odzwierciedlana w Brandguide. Jeżeli w Bibliotece zostanie wprowadzona zmiana, a w Brandguide nie znajdzie odzwierciedlenia w niej zmiany, możesz ręcznie zsynchronizować przez wybierając okrągły przycisk synchronizacji w prawym górnym rogu flyoutu koloru.
Tryby kolorów
Możesz zmienić tryby kolorów wyświetlane zarówno na flyout jak i na płótnie.
- Wybierz ikonę ustawień w prawym górnym rogu flyoutu koloru.
- Wybierz pola wyboru, aby wyświetlić HEX, RGB i CMYK i wybierz Zapisz.
- Ikona kopii pojawi się obok wartości koloru.