Jak przenieść nowy styl projektowania na inną stronę za pomocą funkcji wydajności Divi?

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowej Divi, pokażemy, jak przenieść nowy styl projektowania na inną stronę za pomocą pakietu Divi's Furniture Store Layout Pack. W przypadku wszystkich nowych pakietów układów, które się pojawiają, być może zechcesz zmienić styl istniejącej strony przy użyciu stylu nowego pakietu układów. Zamiast zastępować całą stronę, możesz również przenieść styl projektu, korzystając z funkcji wydajności Divi. Jedną z najnowszych opcji zawartych w programie Visual Builder jest funkcja kopiowania i wklejania między stronami. Umożliwi to wprowadzenie wielu zmian w całym układzie bez dotykania ustawień elementu projektu.

Ale oczywiście każdy układ jest wyjątkowy, co oznacza, że ​​będziesz musiał również wprowadzić pewne ręczne zmiany. Dobrą wiadomością jest to, że jednym kliknięciem możesz rozszerzyć te ręczne ustawienia na podobne elementy na stronie. Mam nadzieję, że ten post pomoże ci podążać za określoną strukturą podczas przenoszenia stylu projektowania.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wynik.

Zbliżać się

Struktury stron różnią się od siebie, dlatego ciężko jest całkowicie przenieść styl projektu jednym kliknięciem. Ale dzięki Divi możesz użyć funkcji wydajności, aby przyspieszyć proces. Połączymy funkcję kopiowania i wklejania między stronami, funkcję rozszerzania stylów oraz funkcję znajdowania i zastępowania, aby oszczędzić czas przy przenoszeniu stylu projektu na istniejącą stronę bez konieczności zmiany struktury strony.

Część 1: Otwieranie dwóch stron obok siebie

Zaczniemy od otwarcia dwóch stron obok siebie. Istniejąca strona i nowa strona zawierająca styl projektu, który chcemy zastosować. Weźmiemy stronę docelową pakietu układu sklepu z meblami (styl projektu, który chcemy zastosować do istniejącej strony) oraz stronę docelową pakietu układu firmy hostingowej (stronę, wokół której chcemy zmienić).

Część 2: Resetowanie niektórych ustawień sekcji

Druga część dotyczy resetowania niektórych ustawień sekcji. Ustawienia, które trzeba zresetować, różnią się w zależności od układu, ale zwykle obejmują ustawienia tła i ustawienia dzielnika.

Część 3: Korzystanie z funkcji kopiowania i wklejania między stronami Divi i rozszerzania stylów w sekcji bohaterów

Następnie możemy zacząć korzystać z funkcji kopiowania i wklejania między stronami Divi, aby zacząć zmieniać rzeczy. Naturalną rzeczą do zrobienia jest rozpoczęcie od sekcji bohaterów. Zmienimy każdy element projektu w sekcji bohatera na nowy styl projektu, kopiując ustawienia nowego stylu projektu i wklejając je na istniejącej stronie. Po wykonaniu tej czynności rozszerzymy te style na podobne elementy na stronie.

Część 4: Ręczne wprowadzanie zmian (zgodnie z układem) i używanie funkcji zwiększających wydajność

Jak wspomniano wcześniej, każdy układ jest wyjątkowy. Dlatego konieczne jest również ręczne wprowadzanie zmian na istniejącej stronie. Po wprowadzeniu kilku zmian możesz rozszerzyć styl lub użyć funkcji Znajdź i zamień, aby zastosować go do podobnych elementów na stronie.

Część 5: Dodaj cechy projektu

Wreszcie, możesz dodać pewne cechy projektowe również do istniejącej strony.

Część 1: Otwieranie dwóch stron obok siebie

Utwórz nową stronę za pomocą układu, korzystając ze strony docelowej pakietu układów sklepu meblowego

Teraz, gdy przeszliśmy przez część dotyczącą podejścia tego postu, zacznijmy korzystać z Divi! Dodaj nową stronę, korzystając ze strony docelowej pakietu układów sklepu z meblami.

Utwórz nową stronę za pomocą strony docelowej pakietu układu firmy hostingowej

Utwórz kolejną stronę, korzystając również ze strony docelowej pakietu układu firmy hostingowej. Zamienimy styl projektowania tego układu na projekt strony docelowej pakietu układów sklepu z meblami.

Część 2: Resetowanie niektórych ustawień sekcji

Resetuj specyficzne dla sekcji ustawienia strony docelowej firmy hostingowej

Otwórz sekcję bohaterów

Gdy masz już oba układy w pobliżu, kontynuuj, otwierając ustawienia sekcji bohaterów strony docelowej firmy hostingowej.

Zresetuj tło sekcji i rozszerz do wszystkich sekcji

Przejdź do ustawień tła i zresetuj opcje, klikając prawym przyciskiem myszy i klikając Resetuj tło. Gdy to zrobisz, możesz rozszerzyć te style tła na wszystkie sekcje na stronie, aby upewnić się, że żadna sekcja na stronie nie zawiera elementów tła.

Zresetuj dzielniki i rozszerz do wszystkich sekcji

Wykonaj te same czynności dla dzielników sekcji, aby upewnić się, że wszystkie dzielniki sekcji na stronie zniknęły.

Część 3: Korzystanie z funkcji kopiowania i wklejania między stronami Divi i rozszerzania stylów w sekcji bohaterów

Elementy sekcji bohatera kopiowania i wklejania na wielu stronach

Ustawienia sekcji

Czas zacząć korzystać z opcji kopiowania i wklejania na wielu stronach! Zmodyfikujemy każdy element projektu w sekcji bohaterów. Zacznij od skopiowania stylów sekcji bohaterów na stronie docelowej sklepu meblowego. Następnie wróć do strony docelowej firmy hostingowej i wklej skopiowane style sekcji.

Ustawienia wiersza

Zrób to samo dla rzędu.

Moduł tekstu tytułu

Skopiuj również style modułu tytułu Text Module i zastosuj je do tytułu strony docelowej firmy hostingowej.

Moduł tekstu podstawowego

Następnie otwórz opis modułu tekstowego i skopiuj style tekstu. Gdy to zrobisz, zastosuj je do modułu tekstowego na stronie firmy hostingowej.

Rozszerz style

Po zastosowaniu nowych stylów tekstu rozszerz te style na wszystkie moduły na stronie.

Zmień orientację tekstu tylnego na środek tam, gdzie jest to potrzebne

Zauważysz, że lewa orientacja tekstu zostanie zastosowana do wszystkich elementów projektu na całej stronie. Możesz zachować to w ten sposób lub ręcznie zmienić orientację tekstu.

Ustawienia przycisków

Ostatnim modułem w sekcji bohaterów, do którego będziesz musiał zastosować nowe style modułów, jest moduł przycisku.

Rozszerz style dla ustawień przycisków

Zamiast rozszerzać całe style modułu przycisku, rozszerzymy określone ustawienia przycisków.

Rozszerz style dla odstępów

Wraz z ustawieniami odstępów.

Rozszerz style dla Box Shadow

A także ustawienia cieni w pudełku.

Skopiuj i wklej pozostałe elementy raz + rozszerz styl

Rozdzielacz

Musimy również skopiować i wkleić style modułu rozdzielającego i zastosować je do rozdzielaczy na stronie docelowej firmy hostingowej.

Rozszerz style

Ponownie rozszerz style tego modułu na całą stronę.

Część 4: Ręczne wprowadzanie zmian (zgodnie z układem) i używanie funkcji zwiększających wydajność

Zmiany dotyczące układu

Znajdź i zamień czcionkę tytułu

Czas zacząć wprowadzać ręczne zmiany! Pierwszą rzeczą, którą zrobimy, jest dopasowanie czcionki. Otwórz moduł tekstowy na stronie i znajdź czcionkę Rubik, która jest używana na całej stronie. Następnie kliknij Znajdź i zamień i zamień czcionkę na Montserrat.

Znajdź i zamień grubość czcionki tytułu

Zrób to samo dla grubości czcionki. Zamiast używać Średni, wybierz Lekki.

Znajdź i zamień zaokrąglone rogi

Usuwamy również zaokrąglone obramowania rogów na całej stronie, używając funkcji Znajdź i zamień i stosując „0px” do każdego z rogów na stronie.

Zresetuj ustawienia tła CTA i rozszerz styl w sekcji

Kontynuuj, odnajdując moduły wezwania do działania na stronie i zresetuj ustawienia tła pierwszego modułu. Następnie rozszerz te style na wszystkie wezwania do działania w tej sekcji.

Znajdź i zamień kolor tła CTA w sekcji

Gdy to zrobisz, pojawi się domyślny kolor tła. Znajdź i zamień ten kolor i zmień go na „#1a2545” w całej sekcji.

Znajdź i zamień kolor tekstu CTA w sekcji

Zamień również kolor tekstu na „Jasny” w całej sekcji.

Zmień ustawienia przycisku tabeli cen

Następnie przejdź do tabel cenowych na stronie i zmień ustawienia przycisków:

• Kolor tła przycisku: #ef6f49
• Szerokość obramowania przycisku: 8px
• Kolor obramowania przycisku: #ef6f49
• Promień obramowania przycisku: 0px
• Odstępy między literami przycisków: 2px (domyślnie), 1px (najechanie)
• Czcionka przycisku: Montserrat
• Grubość czcionki: pół pogrubiona
• Styl czcionki: wielkie litery
• Wyrównanie przycisków: w lewo

Rozszerz style dla tabel cenowych i modułów CTA

Rozszerz nowe ustawienie przycisku na wszystkie tabele cenowe i moduły wezwania do działania na całej stronie.

Część 5: Dodaj cechy projektu

Kolor tła sekcji #1

W ostatniej części tego samouczka ręcznie dodamy niektóre cechy projektu. Obejmuje to między innymi ustawienia tła. Otwórz sekcję zaznaczoną na poniższym zrzucie ekranu i zmień kolor tła.

• Kolor tła: #f7f3ec

Kolor tła sekcji #2

Zrób to samo dla poniższej sekcji.

• Kolor tła: #f7f3ec

Tło gradientowe sekcji #1

Następnie znajdź sekcję na poniższym zrzucie ekranu i dodaj gradientowe tło.

• Kolor 1: #ffffff
• Kolor 2: #1a2545
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 55%
• Pozycja końcowa: 55%

Tło gradientowe sekcji #2

Użyj innego tła gradientowego dla poniższej sekcji:

• Kolor 1: rgba (210,218,228,0,38)
• Kolor 2: #ffffff
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 45%
• Pozycja końcowa: 45%

Tło gradientowe sekcji #3

Na koniec dodaj również liniowe tło gradientowe do ostatniej sekcji na stronie.

• Kolor 1: #ffffff
• Kolor 2: #f7f3ec
• Pozycja startowa: 40%
• Pozycja końcowa: 40%

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi.

Końcowe przemyślenia

W tym poście pokazaliśmy, jak przenieść styl projektowania układu za pomocą funkcji wydajności Divi. W tym samouczku wykorzystano nową funkcję kopiowania i wklejania między stronami, która jest częścią nowego programu Visual Builder. Ten samouczek jest częścią naszej ciągłej inicjatywy projektowej Divi, w której każdego tygodnia staramy się dodawać coś dodatkowego do twojego zestawu narzędzi projektowych. Jeśli masz jakieś pytania lub sugestie, zostaw sekcję komentarzy poniżej!