Jak zamienić układy Divi w makiety wielokrotnego użytku?

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy, jak przekształcić układy w makiety wielokrotnego użytku za pomocą pakietu Divi Food Catering Layout Pack. Modele szkieletowe świetnie nadają się do rozpoczęcia procesu budowania strony internetowej. Pomagają Ci zdecydować o ogólnej strukturze i stylu projektowania strony internetowej. Mogą również pomóc uzyskać opinię klienta na temat stylu projektowania bez konieczności wcześniejszego dostosowywania wszystkiego.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w to, przyjrzyjmy się efektowi końcowemu, który stworzymy.

Zmień układ w model szkieletowy

Strona docelowa Open Food Catering z Visual Builder

Śmiało i otwórz stronę docelową, którą utworzyłeś za pomocą pakietu Divi's Food Catering Layout Pack.

Usuń obrazy tła sekcji i nagłówka o pełnej szerokości, kolory tła i tła gradientowe

Pierwszym krokiem do stworzenia makiety jest usunięcie wszystkich obrazów tła, tła gradientowego i kolorów tła sekcji na stronie oraz modułu nagłówka o pełnej szerokości w sekcji bohatera.

Zamiast tego nadaj naprzemiennym sekcjom szary kolor tła

Aby pomóc w określeniu różnych sekcji w projekcie strony, nadaj każdej z naprzemiennych sekcji kolor tła „#f9f9fb”. Później, gdy użyjesz modelu szkieletowego do utworzenia strony, będziesz mógł użyć funkcji Znajdź i zamień, aby bezproblemowo dodać paletę kolorów do swojej strony.

Usuń wszystkie kolory w elementach projektu za pomocą filtra zmodyfikowanych stylów

Włącz filtr zmodyfikowanych stylów w module przycisków

Pozbędziemy się również używanej palety kolorów. W ten sposób nie będziemy mieć na to wpływu podczas tworzenia strony. Otwórz jeden z modułów przycisków na swojej stronie i włącz filtr zmodyfikowanych stylów, aby zobaczyć wszystkie bieżące ustawienia.

Daj moduł przycisku ciemne tło i kolor obramowania

Zmień kolor tła przycisku i kolor obramowania przycisku na „#2b2b2b”.

Kopiuj style przycisków i zastosuj do innych przycisków

Kontynuuj, kopiując style przycisków, klikając prawym przyciskiem myszy ustawienia przycisku i klikając „Kopiuj style przycisków”. Następnie dodaj style przycisków do każdego z pozostałych modułów przycisków na stronie.

Usuń dodatkowe ustawienia projektu (takie jak cień pudełka)

Usuń cień pola przycisków

Usuwamy również dodatkowe elementy, takie jak Box Shadow. Otwórz ten sam moduł przycisku, nad którym pracowałeś i całkowicie usuń cień pudełka.

Ustawienia cieni w polu modułu przycisku kopiowania

Skopiuj Style Shadow Box tego modułu przycisku i dodaj go również do pozostałych modułów przycisków.

Usuń ręcznie cień pudełka w sekcji Bohater i kontakt

Jedyne dwa przyciski, które wymagają ręcznego usunięcia cienia pudełka, to ten zawarty w module nagłówka o pełnej szerokości i module kontaktu. Przyciski te są częścią modułu z kilkoma elementami projektu, dlatego musimy je usunąć ręcznie.

Nadaj wyróżnionej sekcji ten sam kolor tła co wezwania do działania

Następnie przewiń w dół, aż natkniesz się na sekcję „podświetlone”. W tym przypadku użyj koloru tła sekcji „#2b2b2b”. Ten sam kolor został użyty do CTA.

Określ wymiary obrazu

Przejdź do Biblioteki mediów

Aby całkowicie usunąć temat układu naszego układu, zastąpimy wszystkie moduły obrazu symbolami zastępczymi zawierającymi wymagane wymiary obrazu. Aby znaleźć te wymiary, przejdź do Biblioteki multimediów.

Otwórz używane obrazy indywidualnie

Otwórz każdy z obrazów znajdujących się na Twojej stronie osobno.

Zapisz różne wymiary obrazów na stronie

Gdy to zrobisz, będziesz mógł zobaczyć w szczególności wymiary tego obrazu. Śledź wszystkie potrzebne wymiary na swojej stronie, zapisując je gdzieś przed przejściem do następnego kroku.

Utwórz symbole zastępcze z wymiarami

Otwórz Photoshopa

Czas stworzyć symbole zastępcze! Otwórz Photoshopa lub inne oprogramowanie do edycji obrazów.

Twórz nowe projekty dla wymiarów

Utwórz nowy projekt dla każdego zestawu wymiarów, który masz na swojej stronie. W naszym przypadku potrzebujemy osobnego projektu dla każdego z poniższych wymiarów:

• 800x1029
• 400 x 400
• 48x48

Wybierz szary kolor

Wybierz „#e7e8ed” jako swój kolor.

Odblokuj warstwę tła

Odblokuj również warstwę tła.

Wybierz narzędzie Wiadro z farbą i dodaj kolor do warstwy

Następnie użyj narzędzia Wiadro z farbą, aby pokolorować płótno na szaro.

Dodaj tekst z wymiarami

Aby ułatwić śledzenie wymiarów obrazu, możesz również dodać wymiary pośrodku symbolu zastępczego. W ten sposób będziesz wiedzieć, jakich wymiarów obrazu potrzebujesz na swojej stronie po edycji obrazów, którymi je zastąpisz.

Zapisz dla sieci

Gdy skończysz, zapisz obraz zastępczy do internetu.

Powtórz dla każdego z wymiarów obrazu na stronie

Powtórz te kroki dla każdego zestawu wymiarów na swojej stronie. Na tej stronie potrzebne będą w sumie trzy różne zestawy:

• 800 x 1029 (sekcja o nas
• 400 x 400 (sekcja galerii)
• 48 x 48 (ikony)

Zastąp obrazy symbolami zastępczymi

Po wyeksportowaniu wszystkich symboli zastępczych obrazów kontynuuj i zastąp obrazy.

Łatwe ponowne użycie modelu szkieletowego

Utwórz mapę szkieletową na komputerze

Po zakończeniu tworzenia modelu szkieletowego zaleca się zapisanie gdzieś jego wyglądu. Utwórz nowy folder gdzieś na swoim komputerze.

Układ przechwytywania ekranu i zapisywanie lokalnie

Następnie użyj wybranego dodatku/rozszerzenia do przechwytywania ekranu, aby przechwycić swoją stronę. Na poniższych obrazach użyliśmy dodatku FireShot do przeglądarki Mozilla Firefox. Upewnij się, że zapisując zrzut ekranu, nadaj mu odpowiednią nazwę.

Zapisz układ w bibliotece pod tą samą nazwą

Użyj tej samej nazwy, której użyłeś do zrzutu ekranu, aby zapisać układ szkieletu w bibliotece Divi. Dzięki temu możesz przyjrzeć się modelowi szkieletowemu na komputerze przed przesłaniem go na jedną ze swoich stron.

Zmień ustawienia projektu dla spersonalizowanego szkieletu

Dodaj dzielniki sekcji

Nie jesteś ograniczony do tworzenia jednego szkieletu na stronę. Możesz łatwo dostosować ustawienia projektu, aby utworzyć nowe modele krawędziowe. Możesz na przykład pobawić się przekładkami sekcji, aby stworzyć niepowtarzalne projekty.

Baw się z typografią

Włącz Znajdź i zamień w czcionce nagłówka

Możesz też pobawić się typografią. Otwórz moduł nagłówka o pełnej szerokości w sekcji bohatera i kliknij prawym przyciskiem myszy czcionkę tytułu. Kontynuuj, włączając funkcję Znajdź i zamień.

Zmień czcionkę

Zmień czcionkę używaną na Twojej stronie na inną, a otrzymasz zupełnie nowy szkielet!

Zapisz oddzielne elementy projektu za pomocą kategorii

Kliknij ikonę „Dodaj do biblioteki”

Inną rzeczą, którą możesz zrobić, to osobno zapisać poszczególne elementy projektu na swojej stronie. Załóżmy na przykład, że chcesz stworzyć kolekcję sekcji bohaterów, możesz łatwo dodać sekcję bohaterów do biblioteki Divi.

Dodaj nową kategorię i nadaj elementowi projektu nazwę

Aby uzyskać bardziej zorganizowaną strukturę, kontynuuj, dodając nową kategorię sekcji o nazwie „Sekcje bohaterów”, dzięki czemu możesz łatwo znaleźć wybraną sekcję bohaterów i przeglądać wszystkie projekty, które masz w sklepie.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi.

Końcowe przemyślenia

W tym poście na blogu dotyczącym przypadków użycia pokazaliśmy, jak przekształcić układy Divi w makiety wielokrotnego użytku. Przekształcenie układów w makiety pomaga zachować ogólny obraz tego, jak ma wyglądać struktura witryny. Znakomicie nadają się również do przybliżenia klientowi stylu projektowania w pierwszym etapie procesu tworzenia strony internetowej. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy!