Rebranding witryny w 5 minut z atrybutami rozszerzonymi

Rebranding Twojej witryny nie wymaga pełnej przebudowy, choć często tak się czuje. Czcionki utknęły w osobnych częściach, kolory są rozłożone między sekcjami, a odstępy są ukryte w poszczególnych ustawieniach. Po aktualizacji strony głównej znajdują się inne strony potrzebujące tych samych zmian. To zwykła rutyna, ale jest szybszy sposób.

Z rozszerzonymi atrybutami w Divi 5 możesz stylizować jeden element i natychmiast zastosować wygląd do każdego podobnego modułu na rzędach, sekcjach, a nawet na całej stronie. Przejdźmy, jak go użyć, aby zmienić markę pełnej strony internetowej w ciągu kilku minut, a nie godzin.

Jakie są atrybuty rozszerzone w Divi 5

Atrybuty rozszerzone to funkcja Divi 5, która pozwala przyjmować projekt jednego modułu i zastosować go do innych elementów lub modułów wokół niego. Oznacza to, że jeśli zaprojektowałeś przycisk, nagłówek lub blok tekstowy, nie musisz odtwarzać tych stylów od zera, ponieważ możesz po prostu rozszerzyć je na inne elementy.

Oto jak to działa w praktyce. Zaczynasz od edytowania dowolnego modułu w The Visual Builder. Następnie, zamiast powtarzać moduł zmian według modułu, po prostu kliknij moduł prawym przyciskiem myszy i wybierz rozszerzenie atrybutów.

Divi zapyta, gdzie chcesz, aby te style poszły. Po potwierdzeniu wszystkie pasujące moduły przyjmują te same style. Rozszerzanie atrybutów nie poszukuje tego, co pasuje, ale kopiuje bieżący wygląd i stosuje go do wybranego celu.

To sprawia, że ​​jest to jeden z najszybszych sposobów wprowadzania zmian projektowych bez mikrozuszenia każdego bloku. Pomaga przekształcić powtarzającą się styl w jedną akcję, bez względu na to, czy budujesz od zera, czy przetwarzasz cały układ.

Jak rozszerzyć atrybuty pomaga szybciej zmienić markę witryny

Przejdziemy przez sposób, w jaki możesz używać samych atrybutów rozszerzonych, a także z ustawieniami grupowymi opcji, aby przyspieszyć proces rebrandingu witryny.

Używając atrybutów rozszerzonych w Divi 5

Proces jest prosty: Moduł Style One, kliknij prawym przyciskiem myszy, aby wybrać rozszerzenie atrybutów i rozszerzyć te wybory projektowe na każdy podobny moduł, bez otwierania dwukrotnego panelu jednego ustawienia. Przejdźmy przez to za pomocą prawdziwego przykładu.

Powiedz, że chcesz zmienić markę wszystkich przycisków wezwania do działania. Zacznij od stylizacji modułu jednego przycisku wewnątrz wizualnego budowniczego.

Po zakończeniu kliknij prawym przyciskiem myszy i wybierz rozszerzenie atrybutów. (Wybraliśmy atrybuty projektowania przycisku, ponieważ chcemy tylko przedłużyć style, a nie treść. Zauważysz również wiele opcji, które pomagają Ci mikro-wybór określonych właściwości.)

Panel atrybutów Extree zostanie otwarty i możesz wybrać spośród kilku różnych opcji, aby zdecydować, w jaki sposób i gdzie należy zastosować zmiany projektowe.

• (1) Rozciągnij od elementu: moduł, z którego rozciągasz, jak przycisk w naszym przypadku. Jest to automatycznie wypełnione na podstawie tego, co kliknąłeś prawym przyciskiem myszy.
• (2) Rozciągnij na lokalizację: Wybierz, jak daleko powinien posunąć się projekt. Wybraliśmy całą stronę, ponieważ chcemy, aby wszystkie przyciski ze strony się zmieniły.
• (3) Rozszerzaj typ elementu: Wybierz, które typy modułów powinny odbierać nowe style. Na przykład tylko moduły przycisków lub wszystkie podobne moduły.
• (4) Typ atrybutu, aby rozszerzyć: Określ, co chcesz skopiować. Wybraliśmy atrybuty projektowe i zostawiliśmy innych.
• (5) Grupa opcji Aby rozszerzyć: Zdecyduj, które grupy opcji (y) do zastosowania: tekst, przycisk, granica, odstępy itp.
• (6) Zmodyfikowane pola w celu rozszerzenia: Możesz również ograniczyć swój wybór tylko do jednej właściwości stylu lub wybrać wszystkie zmodyfikowane pola, aby rozszerzyć wszystkie wprowadzone zmiany.

Po wybraniu preferencji kliknij atrybuty rozszerzania, a nowe style zostaną zastosowane do wszystkich innych przycisków na stronie.

Czy zauważyłeś, jak nie było potrzeby wyszukiwania pasujących wartości? To dlatego, że rozszerzenie atrybutów nie obchodzi, jakie były oryginalne style. Kopiuje bieżący wygląd z wybranego modułu i wkleja go bezpośrednio do każdego podobnego modułu w wybranej lokalizacji.

To sprawia, że ​​jest to tak przydatne do pakietów układu i istniejących stron internetowych. Rozszerzanie atrybutów zapewnia całkowitą kontrolę za pomocą jednego modułu w stylu i jednym kliknięciu, niezależnie od tego, czy dostosowujesz rozmiary czcionek, aktualizujesz kolory, czy ulepszanie odstępów.

Dowiedz się wszystkiego o rozszerzonych atrybutach

Korzystanie z ustawień wstępnych grup opcji z atrybutami rozszerzonymi

Kiedy pracujesz na stronie internetowej z wieloma stronami, nie wystarczy po prostu skopiować style wizualnie. Chcesz systemu, który się trzyma, i tam wchodzą ustawienia wstępne.

Presete pozwalają zapisać grupę stylów w dowolnym module i ponownie wykorzystać je w całej stronie. Połącz to z atrybutami rozszerzonymi, a masz szybki, elastyczny sposób na rebrand nie tylko jedną stronę, ale całą stronę internetową. Ta kombinacja pomaga również zabezpieczyć swoją witrynę w przyszłości, tak że jeśli chcesz ponownie zmienić markę, możesz łatwo zmodyfikować ustawienia wstępne i wszystkie moduły, w których są używane, również aktualizuje.

Wróćmy do przykładu przycisku, aby zrozumieć, jak to działa.

Zaprojektowaliśmy jeden przycisk z nowym wyglądem. Teraz, zamiast rozszerzyć ustawienia jako wartości statyczne, zapiszemy je jako ustawienia wstępne.

Tutaj pojawiają się atrybuty rozszerzone. Po kliknięciu rozszerzonych atrybutów zobaczysz zapisane ustawienia wstępne. Wybierz indywidualnie, jeśli chcesz rozszerzyć tylko wybrane ustawienia wstępne lub wybierz wstępne ustawienia przycisków Exten, aby przenieść wszystkie.

Kiedy rozszerzysz, Divi nie tylko kopiuje wygląd; Stosuje zapisane ustawienie za kulisami. Tak więc każdy inny przycisk, którego dotyka, teraz używa tego samego ustawienia.

Po co dodawać kolejny krok? To tutaj korzyści dla przyszłości witryny. Załóżmy, że w ciągu najbliższych kilku miesięcy zdecydujesz się później ulepszyć styl guziki. Czy chciałbyś ponownie przedłużyć style? Nie, prawda?

Cóż, nawet nie musisz, ponieważ musisz aktualizować ustawienie wstępne tylko raz. Ponieważ wszystkie moduły przycisków zostały zbudowane z tym samym ustawieniem, każda instancja korzystająca z niego automatycznie.

Ponadto, po zapisaniu, wstępne ustawienia grup opcji są również dostępne na innych stronach. Więc kiedy skończysz rebrandować swoją stronę główną i przenieś się do innych, po prostu zastosujesz zapisane ustawienia wstępne i przedłużysz je w kilka minut.

Dlatego korzystanie z ustawień wstępnych grup z atrybutami rozszerzonymi jest bardziej innowacyjnym sposobem rebrandii. Otrzymujesz spójność wizualną i system, który jest łatwy do aktualizacji bez ponownego przerażenia pracy.

Dowiedz się wszystkiego o ustawieniach grup opcji

Chcesz spróbować samodzielnie? Będziesz potrzebować Divi 5, który wprowadza atrybuty, wstępne ustawienia grup opcji i wiele innych funkcji na nowy budowniczy. Został przeprojektowany z podłoża, aby uzyskać prędkość, kontrolę i płynniejszy przepływ pracy.

Jak zmienić markę witryny z rozszerzonymi atrybutami

Teraz, gdy widziałeś, jak działają atrybuty rozszerzone i jak łączy się z ustawieniami grupowymi opcji, czas zastosować go do prawdziwej strony internetowej.

Do tego przeglądu użyjemy pakietu układu oprogramowania AI. To kompletna strona internetowa z stronami takimi jak dom, o kontakcie i cena. Nie dążymy do pełnego przeglądu tutaj. To tylko lekka rebrand, taka, jak zwykle robilibyśmy w naszych comiesięcznych aktualizacjach.

Aby rozpocząć, spójrz na elementy, które definiują tożsamość wizualną witryny, takie jak przyciski, nagłówki, bludy i tekst nadwozia. Moduły te pojawiają się na wielu stronach i niosą większość osobowości marki. Po przywróceniu kilku z nich, rozszerzyć atrybuty pozwalają naciskać te zmiany wszędzie, gdzie się pojawią.

Przejdźmy dokładnie, co aktualizować.

Wizualnie rebrandowe moduły kluczowe w całym układzie

Zaczniemy od strony głównej, ponieważ nadaje ton reszcie strony. Większość stron internetowych powtarza te same wzorce projektowe na wielu stronach, więc po aktualizacji strony głównej będziesz miał podstawę do wszystkiego innego.

Po zeskanowaniu układu zidentyfikowaliśmy najbardziej widoczne elementy, które kształtują wygląd marki. Są to przyciski, nagłówki, blaszki, tekst nadwozia i obrazy. Ponieważ już przemianowaliśmy nasze przyciski, zaczniemy od nagłówków.

Moduły nagłówki rebrandii

Najpierw dostosuj dowolny moduł nagłówka, aby odzwierciedlić nową markę. Zacznę od H4S.

Gdy będziesz zadowolony ze stylizacji, kliknij moduł prawym przyciskiem myszy i wybierz rozszerzenie atrybutów . Wybierz zakres całej strony i typu modułu do tekstu . Zastosuj zmianę na wszystkie moduły H4 na stronie.

Podobnie, zmieniasz markę H1, H2 i H4, aby zjednoczyć typografię i nadać swojej witrynie konsekwentny głos za pomocą kilku kliknięć bez ręcznego przywracania każdego modułu nagłówka.

Rebranding Body Tekst dla lepszej czytelności

Teraz zaktualizujmy tekst nadwozia. Zacznij od wybrania dowolnego modułu tekstowego z blokiem akapitowym. Dostosuj ton swojej marki. Gdy jesteś zadowolony ze zmian, kliknij moduł prawym przyciskiem myszy i wybierz rozszerzenie atrybutów . Wybierz zastosowanie aktualizacji wszystkich modułów tekstowych na stronie.

Daje to akapitom spójny styl na stronie w kilka sekund i eliminuje potrzebę edycji każdego z nich indywidualnie.

Rebranding Borders Borders

Następnie chcę dodać granicę, aby usprawnić wszystkie moje moduły Blurb. Więc stylizuję jedną kolumnę, a następnie kliknę prawym przyciskiem myszy kolumnę w zakładce projektu wiersza i wybierz style kopiowania . Następnie wklej style do następnej kolumny i tak dalej.

Zauważysz, że zmieniłem układ wiersza na Flex, a Divi automatycznie wyrównałem wysokości kolumn, utrzymując wyrównane blaszki bez względu na to, ile zawierają one. Działa to, ponieważ Divi obsługuje teraz funkcje FlexBox, które pomagają szybciej budować responsywne, inteligentne układy.

Zmień markę innych stron przy użyciu zapisanych ustawień wstępnych

Teraz, gdy strona główna jest aktualizowana, nie musisz powtarzać procesu od zera. Możesz zduplikować sekcje lub wiersze na inne strony, lub ponieważ zapisałeś swoje nowe style jako wstępne ustawienia grup opcji, jesteś już ustawiony.

Twoje zapisane ustawienia wstępne pojawią się na wszystkich stronach.

Wszystko, co musisz zrobić, to zastosować je w razie potrzeby i użyć rozszerzonych atrybutów, aby natychmiast popchnąć style. Nie ma ręcznych edycji i powtarzających się prac projektowych.

Możesz postępować zgodnie z tym samym procesem, aby zmienić markę innych stron na swojej stronie internetowej.

Rozszerzenie atrybutów daje elastyczność ponownego marnowania marki. Są świetne, gdy chcesz wizualnie wyposażony w moduły na stronie.

Ale jeśli chcesz zamienić określoną wartość, taką jak kod sześciokątny, rozmiar czcionki lub jednostka odstępów, na różne moduły, chcesz spróbować znaleźć i wymienić. Działa szczególnie dobrze w przypadku pakietów układu, które wykorzystują hardkodowane wartości. Możesz użyć i wymienić, aby zamienić osoby na zapisane zmienne projektowe, aby uzyskać większą elastyczność w przyszłych aktualizacjach.

Wskazówka: Użyj atrybutów rozszerzonych ze zmiennymi projektowymi

Rozszerz atrybuty nie tylko kopiuj style statyczne; Może również przenieść zapisane zmienne projektowe. Na przykład, jeśli przypisałeś zmienną czcionki nagłówka do jednego modułu tekstowego, możesz rozszerzyć ustawienia tego modułu na wszystkie inne moduły tekstowe na stronie. Zamiast każdego nagłówka niosącego wartości hardkodowane, wszystkie dziedziczą tę samą zmienną.

Oznacza to, że przyszłe aktualizacje są jeszcze łatwiejsze: dostosuj zmienną raz w menedżerze zmiennej, a każdy rozszerzony moduł automatycznie aktualizuje. Jest to potężny sposób łączenia rozszerzania atrybutów ze zmiennym systemem Divi 5 do skalowalnej kontroli całej marki.

Rozszerz atrybuty pozwala rebrandować bez przebudowy

Rebranding nie musi oznaczać odbudowy. Z rozszerzonymi atrybutami stylizujesz jeden moduł i stosujesz ten wygląd do reszty, przecinając godziny edycji do sekund.

Niezależnie od tego, czy pracujesz z pakietem układu, czy aktualizujesz witrynę na żywo, Divi 5 daje najszybszy sposób odświeżenia projektu bez dotykania każdego elementu.