Elastyczność rozciągania się na różne typy elementów w Divi 5

Udostępnianie aktualizacji projektowania nie powinno mieć ochoty odpraw. Ale zbyt często, nawet coś prostego, takiego jak zmiana stylu przycisku lub aktualizacja czcionki, oznacza ręczną edycję każdego modułu. Jest powolny, powtarzalny i łatwy do zepsucia.

Divi 5 naprawia to z atrybutami rozszerzonymi, ulepszoną wersją stylów Divi 4. Pozwala zastosować zmianę raz i rozszerzyć ją w dowolnym miejscu, nawet na różne typy elementów i modułów. W tym poście przyjrzymy się, w jaki sposób ta elastyczność może zaoszczędzić czas i posprzątać przepływ pracy.

Co to jest atrybuty rozszerzone w Divi 5?

Rozszerzenie atrybutów pozwala rozszerzyć style, treść lub ustawienia wstępne z jednego elementu na inne za pomocą kilku kliknięć bez konieczności ręcznej edycji każdego modułu.

Subskrybuj nasz kanał YouTube

Ale to nie jest twój typowy przepływ pracy kopiowania i wklejania (my też to, jeśli jesteś zainteresowany). Rozszerzenie atrybutów działa na różne typy elementów i modułów, a nie tylko identyczne. Na przykład możesz układać nagłówek raz i zastosować tę samą czcionkę do tytułu przełączającego, nazwa modułu lub nagłówek. Tak długo, jak dzielą tę samą grupę stylów, jak tekst, będą podążać za nimi.

I to się nie kończy. Możesz przedłużyć prawie wszystko, gdziekolwiek. Skopiuj kolor tła z jednej sekcji i zastosuj go do każdego wiersza, sekcji, kolumny lub modułu na swojej stronie.

Lub ponowne wykorzystanie stylów guzików w różnych modułach; Możesz przedłużyć style z wezwania do działania do formularza kontaktowego. Gdy zaczniesz go używać, zmienisz sposób myślenia o aktualizacjach. Nie będziesz już utknąć w kółko. Dzięki rozszerzonym atrybutom pozostaniesz spójny, zaoszczędzisz czas i przejdziesz przez zmiany układu szybciej i z większą kontrolą.

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

Rozszerzenie atrybutów jest proste w użyciu i zapewnia dużą elastyczność. Aby rozpocząć, po prostu kliknij prawym przyciskiem myszy element, który już zaprojektowałeś. Może to być moduł, kolumna, wiersz, a nawet cała sekcja. Z wyświetlonego menu wybierz rozszerz atrybuty.

(Możesz także kliknąć prawym przyciskiem myszy bezpośrednio w określonej grupie ustawień, takiej jak czcionka lub odstępy. Otwiera to panel atrybutów rozszerzonych z już wybraną grupą, co sprawia, że proces ten jest szybszy i bardziej precyzyjny, gdy wiesz dokładnie, na co celujesz.

Po otwarciu panelu atrybutów rozszerzania decydujesz, co przedłużyć i gdzie go zastosować.

Zobaczysz kilka jasnych opcji:

• (1.) Rozciągnij od elementu: element, który zaprojektowałeś i chcesz skopiować.
• (2.) Rozszerzenie na lokalizację: Wybierz, jak daleko powinny posunąć się zmiany. Tylko bieżąca sekcja, wiersz nadrzędny lub pełna strona.
• (3.) Rozszerzenie typu elementu: Wybierz typ elementu, który chcesz celować, takie jak tylko moduły tekstowe lub wszystkie moduły.
• (4.) Typ atrybutu, aby rozszerzyć: Wybierz, co skopiować: projekt, treść, ustawienia wstępne lub dowolna ich mieszanka.
• (5.) Grupa opcji do rozszerzenia: Skoncentruj się na określonej grupie ustawień, takich jak tekst, granica lub przycisk.
• (6.) Zmodyfikowane pola w celu rozszerzenia: Możesz zastosować tylko pola, które zmieniłeś, albo uwzględnić wszystko.

Oto szybki przykład. Powiedzmy, że zaprojektowałeś nagłówek do modułu tekstowego i chcesz, aby ta sama czcionka zastosowana jest do innych nagłówków w tej samej sekcji. Ustaw lokalizację na sekcję nadrzędną , typ elementu na tekst, a następnie wybierzesz grupę opcji ciała (ponieważ chcemy tylko przenieść style nadwozia).

Po zastosowaniu każdy pasujący moduł tekstowy w tej sekcji aktualizuje się o tej samej stylizacji czcionki.

To sprawia, że rozszerzenie atrybutów jest szczególnie przydatne. Nie utkniesz w kopiowaniu całych projektów. Możesz wybrać dokładnie to, co chcesz przedłużyć, tylko jedną grupę lub wiele właściwości jednocześnie. Możesz nawet przenosić zarówno treść, jak i projektowanie w zupełnie inny moduł.

Ale jeśli ustawienia na początku wydają się wiele, zrozum, że jest to całkowicie normalne. Może być konieczne przetestowanie kilku kombinacji, aby zrozumieć, w jaki sposób zakresy, typy elementów i grupy ustawień działają razem. Po kliknięciu staje się jednym z najbardziej wydajnych narzędzi w przepływie pracy Divi.

W sekcji po następnej przejdziemy przez praktyczne przykłady, aby pokazać, jak to wszystko się łączy. Gdy zrozumiesz, jak działa każde ustawienie, rozszerzenie atrybutów staje się potężnym narzędziem do budowania spójnych projektów bez powtarzania tej samej pracy.

Dowiedz się wszystkiego o rozszerzonych atrybutach Divi 5

Jak rozszerzyć atrybuty Divi 5 wylecza style Divi 4

Jeśli korzystałeś z Divi 4, prawdopodobnie znasz STYLE. Umożliwia kopiowanie ustawień projektowania z jednego elementu do drugiego, ale tylko w tym samym rodzaju elementu. To sprawiło, że było to pomocne w przypadku szybkich poprawek, ale ograniczanie bardziej złożonych aktualizacji.

Divi 5 atrybuty rozszerzają ten pomysł znacznie dalej. Nie tylko kopiuje projekt, ale także z treścią i ustawieniami , co daje pełną kontrolę nad tym, co jest stosowane i gdzie. Możesz nawet wybrać określone właściwości do rozszerzenia , takie jak tylko kolor tła lub promień graniczny, bez wpływu na nic innego.

Nie jesteś już zablokowany w pasujących typach modułów lub powtarzanie tych samych zmian w układzie. Rozszerz atrybuty pozwala dokładnie wybrać, co ponownie użyć i jak daleko powinien posunąć się, czy to w różnych sekcjach, czy na całej stronie. Jest zbudowany, aby dostosować się do twojego przepływu pracy i uczynić stylizację szybciej, mądrzejszą i bardziej konsekwentną.

EXTER ATRYBUTY są dostępne w Divi 5 - Pobierz najnowszą wersję, aby wypróbować już teraz.

5 Praktyczne przykłady tego, co możesz rozszerzyć (i jak)

Do tej pory rozmawialiśmy o tym, jakie atrybuty mogą zrobić. Teraz spójrzmy na to, jak możesz go użyć. Te przykłady przechodzą różne kombinacje ustawień, które możesz spróbować zaoszczędzić czas i bardziej efektywnie zastosować aktualizacje.

1. Rozszerz style na różne typy elementów

Rozszerzenie atrybutów nie blokuje Cię w stałej hierarchii. Możesz zastosować style na różnych poziomach układu, niezależnie od tego, czy przechodzisz z sekcji do modułu, czy z rzędu do kolumny.

Ułatwia to tworzenie połączeń wizualnych w całym układzie. Moduł referencyjny może pasować do sekcji, w której siedzi. Wezwanie do modułu akcji może odbierać style z powyższego wiersza. Nie ograniczasz się do rozszerzenia stylów między podobnymi elementami, o ile mają one grupę stylów. W zależności od potrzeb projektowych możesz przejść od szerokiego do określonego lub odwrotnie.

Rozciągający się od sekcji do kolumny

Załóżmy, że dodałeś subtelny promień granicy do sekcji, aby zmiękczyć krawędzie układu. Wewnątrz tej sekcji masz kolumnę z obrazem tła i chcesz, aby odzwierciedlała te same zaokrąglone zakątki dla spójności wizualnej.

Zamiast ręcznie ponownie nakładać promień, po prostu kliknij sekcję prawym przyciskiem myszy, wybierz rozszerzenie atrybutów , ustaw typ elementu na kolumnę i wybierz granicę z grup opcji.

Kolumna odziedziczy ten sam promień granicy, więc obraz tła lub zagnieżdżony układ nie łamie przepływu wizualnego.

Rozciągający się od sekcji do rzędu

Innym przykładem jest rozszerzenie wyściółki z sekcji do rzędów lub innych sekcji w celu utrzymania spójnej białej przestrzeni. Kliknij sekcję prawym przyciskiem myszy, wybierz rozszerzenie atrybutów , ustaw typ elementu na wiersz i wybierz odstępy od grup opcji.

Wszystkie wiersze dziedziczą teraz te same wartości wyściółki, co daje konsekwentne odstępy strony.

Rozciągający się od sekcji do modułu

Powiedzmy, że sekcja ma już pochodzenie, granicę lub odstępycie. Zamiast odtwarzać te style gdzie indziej, możesz przekazać je bezpośrednio do innego elementu, nawet jeśli jest zagnieżdżony w środku lub umieszczony poza tym sekcją.

Na przykład, jeśli sekcja ma żądane tło w referencji, po prostu użyj atrybutów rozszerzonych. Wybierz referencje jako typ elementu, ustaw zakres na całą stronę i upewnij się, że wybrane są atrybuty tła .

Po zastosowaniu referencje dziedziczy to tło bez konieczności ręcznych edycji.

W projektowaniu stron internetowych spójne szczegóły wizualne, takie jak kolory tła, granice i odstępy, pomagają wszystko połączyć. Dzięki atrybutom rozszerzonym możesz łatwo przenieść tę konsystencję w całym układzie i stworzyć wypolerowane wrażenia na marce bez rozpoczęcia od zera za każdym razem.

Rozciągający się od kolumny do wiersza

Na przykład można również zastosować się do odwrotnego podejścia od kolumny do wiersza. Załóżmy, że dodałeś czystą, solidną linię, aby oprawić kolumny. Jeśli chcesz, aby rząd był częścią noszenia tego samego stylizacji granicznej dla spójności wizualnej, możesz natychmiast ponownie wykorzystać te style. Wystarczy rozszerzyć grupę opcji granicznych na rząd nadrzędny.

Rząd podnosi te same ustawienia graniczne, tworząc wyraźne połączenie wizualne między nimi. Działa to szczególnie dobrze podczas budowania warstwowych sekcji lub układów pudełkowych, które opierają się na spójnych konturach lub separatorach.

To tylko kilka kombinacji, które można również odwrócić . W praktyce możesz rozszerzyć style na prawie dowolny poziom układu. Rozszerzanie atrybutów zapewnia pełną elastyczność, od stosowania odstępów kolumnowych do modułów w środku, po przenoszenie cieni sekcji do rzędów lub przycisków. Możesz także:

• Skopiuj promieniowanie graniczne z rzędu i zastosuj go do modułu
• Ponownie wykorzystaj animację transformacji z modułu między kolumnami
• Rozszerz wyrównanie czcionki z sekcji do wszystkich modułów tekstowych w środku
• Zastosuj filtry obrazu z jednej kolumny do drugiej, aby uzyskać spójny styl
• Jeśli dwa elementy mają grupę stylów i kontekst, rozszerzyć atrybuty, prawdopodobnie mogą sobie z tym poradzić.

Celem nie jest zapamiętywanie wszystkich kombinacji, ale eksperymentowanie i odkrycie, co działa dla twojego układu. Gdy zaczniesz myśleć o ruchach wielokrotnego użytku zamiast jednorazowych edycji, twój przepływ pracy naturalnie staje się szybszy, czystszy i bardziej konsekwentny.

2. Rozszerz style na różne typy modułów

Rozszerz atrybuty rozpoznaje grupy współdzielonych stylów, takie jak przycisk, dzięki czemu możesz zastosować ten sam styl w różnych modułach w zaledwie kilka krokach.

Załóżmy na przykład, że zaprojektowałeś przycisk, który kochasz i chcesz użyć go w formularzu kontaktowym. Zamiast go ręcznie wyposażać, kliknij prawym przyciskiem oryginalny przycisk, wybierz rozszerzenie atrybutów , wybierz grupę opcji przycisku i ustaw typ elementu na formularz kontaktowy . Następnie ustaw zakres na całą stronę .

Projekt natychmiast przeniesie się do przycisku przesłania formularza kontaktowego bez ręcznego ulepszenia.

Możesz również powtórzyć proces innych modułów. Jeśli chcesz rozszerzyć ten sam styl przycisku na optin e -mail, po prostu zmień typ elementu na e -mail optin , a przycisk będzie pasował automatycznie.

Ten rodzaj stylizacji między modułami modułu modułowego oszczędza godziny podczas pracy z układami ciężkimi guzikami. Ponieważ Divi traktuje przyciski jako część wspólnej grupy, możesz stylizować raz i ponownie używać w dowolnym miejscu bez łamania spójności.

3. Zapisz i rozszerz wstępne ustawienia grup opcji

Rozszerzone atrybuty działają również z ustawieniami wstępnymi, umożliwiając ponowne wykorzystanie zapisanych stylów w całym układzie.

Wyobraź sobie na przykład, że zaprojektowałeś kolumnę z zaokrąglonymi zakątkami, subtelną granicą i miękkim cieniem. Oszczędzasz to jako ustawienie graniczne , aby użyć go ponownie później.

Opcja wstępnego przedłużonego granicy pojawia się tylko wtedy, gdy element ma zapisane ustawienia wstępne.

Teraz, zamiast ręcznie stosować ten wstępnie ustawiony na inne kolumny, możesz go rozszerzyć na jeden krok. Po prostu kliknij oryginalną kolumnę prawym przyciskiem myszy, wybierz rozszerzenie atrybutów i wybierz rozszerzenie ustawień z panelu.

Po wybraniu ustawić typ elementu na kolumnę i zakres na sekcję nadrzędną lub całą stronę , w zależności od tego, gdzie chcesz go zastosować. Postarowany styl jest natychmiast przenoszony do innych kolumn bez ponownego ustawiania.

Ułatwia to utrzymanie spójności układu, zwłaszcza podczas pracy z niestandardowymi stylami granic, cieniami lub innym projektem zgrupowanym pod ustawieniem.

4. Styl raz, a następnie przedłużyć tylko to, co zmieniłeś

Podczas budowania układu od zera, stylizacja każdego elementu indywidualnie może wydawać się nieograniczona. Rozszerzanie stylów jednej nieruchomości na raz, takie jak First Shadow, następnie granica, a następnie odstępy, tylko spowalnia cię.

W tym miejscu pojawia się opcja wszystkich zmodyfikowanych pola .

Na przykład powiedzmy, że dodałeś miękką obramowanie i lekki cień do jednego obrazu w galerii.

Aby zastosować ten sam wygląd wszystkich innych obrazów, kliknij prawym przyciskiem myszy obraz w stylu, wybierz rozszerzenie atrybutów i wybierz wszystkie zmodyfikowane pola w zmodyfikowanych polach, aby rozszerzyć kolumnę.

Przeniesie się tylko właściwości, które zmieniłeś. Wszystko inne pozostaje nietknięte. Utrzymuje to spójność projektu bez zastępowania innych ustawień, i jest to jeden z najłatwiejszych sposobów przyspieszenia stylizacji masowej bez utraty kontroli.

5. Rozszerz style wewnątrz jednego modułu

Rozszerzone atrybuty działają nie tylko między modułami, ale także w nich. Weźmy na przykład moduł akordeonu. Jeśli kiedykolwiek zaprojektowałeś jeden przedmiot, a następnie musiałeś powtórzyć te zmiany jeszcze pięć razy, wiesz, jak to może być żmudne.

Teraz musisz tylko stylizować pierwszy przedmiot i rozszerzyć style.

Po zastosowaniu projektu, wystarczy otwórz panel atrybutów Exten, wybierz moduł akordeonu i wybierz określone zmodyfikowane pola, które chcesz zastosować do reszty.

Po potwierdzeniu wszystkie inne elementy w tym samym module aktualizują automatycznie. Jest to szybki sposób na utrzymanie spójności stylizacji i zastosowanie zmian we wszystkich elementach za pomocą jednego działania.

Rozszerz atrybuty odblokowuje prawdziwą elastyczność projektowania

Atrybuty Divi 5 dają szybszy, bardziej skoncentrowany sposób wprowadzania zmian projektowych. Od przycisków i nagłówków po granice, treści, a nawet zagnieżdżone elementy, masz pełną kontrolę nad tym, co zostaje skopiowane i dokąd zmierza.

Działa w różnych modułach, sekcjach układu i poziomach projektowania, jednocześnie utrzymując płynne i wydajne przepływ pracy. Ale możesz w to uwierzyć tylko wtedy, gdy spróbujesz sam. Więc eksperymentuj z rozszerzeniem atrybutów w Divi 5 już dziś i podziel się z nami swoimi doświadczeniami poniżej!