Zacznij tutaj

Stylizacja

Zabierzmy się za stylizację szablonu.

Kolory

Szablon Web3 X jest zbudowany przy użyciu Color Swatches, co oznacza, że możesz łatwo edytować kolorowy swatch, który będzie aktualizowany w całej witrynie.

Aby to zrobić, wystarczy przejść do zakładki Styl w prawym pasku bocznym, a następnie przewinąć do Kolory w sekcji Typografia, a jeśli klikniesz kolor, będziesz mógł zobaczyć wszystkie swatche kolorów i edytować je, aby być aktualizowane site-wide do dowolnego koloru potrzebne.

Czcionki

Szablon Web3 X używa jednej czcionki na całej stronie i jest ona ustawiona w selektorze Body (All Pages), więc oznacza to, że możesz łatwo zaktualizować czcionkę na całej stronie jednym kliknięciem.

Na dowolnej stronie, wystarczy kliknąć pomarańczową opcję selektora w prawym górnym rogu zakładki Styl, a następnie wybrać Body (All Pages). Gdy już to zrobisz, możesz przejść do sekcji Typografia poniżej i zmienić czcionkę na dowolną dla Twojej marki biznesowej.

W przypadku, gdy potrzebujesz niestandardowej lub premium czcionki, która nie jest dostępna w Webflow, zawsze możesz przejść do Ustawienia projektu > Czcionki i będziesz mógł przesłać niestandardowe czcionki lub połączyć swoje konto Adobe Fonts.

Grafika i ikony

Niektóre ikony lub grafiki w szablonie są normalnymi obrazkami/grafikami, więc zauważysz, że podczas aktualizacji wszystkich kolorów, te nadal będą miały kolor szablonu.

Dzieje się tak, ponieważ te grafiki są obrazami (PNG, JPG, SVG, itp.), więc aktualizacja CSS (stylizacji) Webflow nie będzie miała na nie wpływu. Jeśli chcesz ponownie wykorzystać te grafiki, zawsze możesz je pobrać i edytować za pomocą dowolnego oprogramowania do projektowania (tj. Photoshop, Illustrator, Sketch, Figma, itp.) lub bezpośrednio przesłać własne obrazy/grafiki, które pasują do Twojej marki.

Strony statyczne

Treści statyczne to wszystkie treści, które nie są oparte na CMS, czyli nie są dynamiczne (jak np. Blog Post).

Możesz łatwo zidentyfikować całą tę zawartość, ponieważ jest ona wyświetlana jako szara w lewym pasku bocznym Nawigatora, a po kliknięciu lub najechaniu na nią pojawia się niebieska obwódka.

Jeśli chcesz edytować ten typ treści, możesz po prostu kliknąć go dwukrotnie i będziesz mógł bezpośrednio wpisać właśnie tam.

Dynamiczna zawartość (CMS)

Treść dynamiczna to wszystkie treści, które są dynamiczne i będą automatycznie generowane na podstawie treści dodanych w sekcji CMS w lewym pasku bocznym (tuż pod ikoną Strony).

Możesz łatwo zidentyfikować to wszystko, ponieważ jest pokazane jako fioletowe w lewym pasku bocznym Nawigatora, a także pokazuje fioletowe obramowanie, gdy klikniesz lub najedziesz na niego.

Ta treść powinna być aktualizowana bezpośrednio w sekcji CMS. Ma to na celu ułatwienie aktualizacji, ponieważ bardzo prawdopodobne jest, że będzie ona wymagała ciągłej aktualizacji (np. dodanie nowego wpisu na blogu).

Ponadto, jeśli chcesz edytować kompletną, automatycznie wygenerowaną stronę CMS (na przykład Blog Post), znajdziesz tę stronę dostępną do edycji na dole wszystkich stron w sekcji Strony w lewym pasku bocznym.

Produkty (eCommerce)

Produkty lub treści eCommerce funkcjonują w podobny sposób jak dynamiczna zawartość CMS, jednak jest to skupione wyłącznie na produktach eCommerce.

Zawartość eCommerce można zidentyfikować w podobny sposób jak zawartość CMS, ponieważ jest ona również wyświetlana jako fioletowa w lewym pasku bocznym Nawigatora, a także z fioletowym obramowaniem po kliknięciu lub najechaniu na nią.

Ta treść powinna być aktualizowana bezpośrednio w zakładce eCommerce w lewym pasku bocznym. Ma to na celu ułatwienie Ci aktualizacji, ponieważ bardzo prawdopodobne jest, że będzie ona musiała być stale aktualizowana (np. zmiana ceny produktu lub dodanie większej ilości towaru).

Ponadto, jeśli chcesz edytować autogenerowaną stronę eCommerce produktu, znajdziesz tę stronę dostępną do edycji prawie na dole wszystkich stron tuż nad stronami kolekcji CMS.

Przydatne uwagi

Oprócz podstawowych wyjaśnień, którymi podzieliliśmy się powyżej, tutaj dzielimy się kilkoma wskazówkami i poradami, które pochodzą z najczęstszych pytań, jakie otrzymujemy.

Interakcje

Jeśli chcesz edytować dowolną Interakcję szablonu (np. usunąć efekt pojawienia się), możesz łatwo zidentyfikować elementy, które mają interakcje, ponieważ mają one małą ikonę Interakcji (mały grzmot) w lewym pasku bocznym Nawigatora.

Jeśli klikniesz tę małą ikonę Interakcje, otworzysz kartę Interakcje prawego paska bocznego dla tego elementu, gdzie możesz edytować interakcję.

Widok z telefonu komórkowego lub tabletu

Za każdym razem, gdy dokonujesz zmiany (na przykład tworzysz nowy projekt sekcji), dobrą praktyką jest przejście do górnej nawigacji Viewportu i sprawdzenie, jak to wygląda na Tablecie i Mobile.

Jeśli edytujesz tylko sekcję Szablonu z zaktualizowanym tekstem lub obrazkami i nie wymazujesz żadnej klasy Szablonu, nie powinno to być potrzebne, jednak jeśli dostosowujesz szablon głębiej, edytujesz klasy lub tworzysz nowe sekcje, zawsze dobrze jest stale edytować widoki na urządzeniach mobilnych i tabletach, aby upewnić się, że wszystko wygląda idealnie.

Edycja Meta Title, Desc i Featured Image

Jeśli chcesz dostosować Tytuł, Opis i Obraz, który jest wyświetlany, gdy udostępniasz swoją stronę w dowolnym miejscu (tj. Facebook, Twitter, itp.), możesz łatwo przejść do sekcji Strony w lewym pasku bocznym, kliknij małą ikonę Ustawienia strony, którą chcesz dostosować, a wszystkie te ustawienia pojawią się.

Proszę pamiętać, że ważne jest, aby zmienić to na podstawie strony.

Kopie zapasowe

Jeśli coś pójdzie nie tak, na przykład, jeśli nie podoba Ci się, dokąd zmierza strona, jeśli usunąłeś kilka krytycznych klas, które były wymagane, aby szablon wyglądał ładnie, lub jeśli po prostu chcesz przejść do poprzedniej wersji z jakiegokolwiek powodu, zawsze możesz przejść do sekcji Kopie zapasowe.

Możesz go znaleźć w sekcji Ustawienia w lewym pasku bocznym, a następnie możesz po prostu zobaczyć wszystkie automatyczne lub ręczne kopie zapasowe. Przywrócenie do starej kopii zapasowej to tylko jedno kliknięcie.