Optymalizacja obrazu logo witryny Divi za pomocą globalnych ustawień wstępnych
Opublikowany: 2020-09-25Optymalizacja logo witryny w Divi jest ważną częścią projektu witryny. Ale nie musi to być tajemnicze lub zniechęcające przedsięwzięcie. W rzeczywistości Divi czyni to całkiem prostym dzięki Divi Theme Builder i wszystkim dostępnym wbudowanym opcjom projektowania.
W tym samouczku pokażemy, jak zoptymalizować swoje logo z odpowiednim rozmiarem, położeniem i stylem w Divi. Następnie pokażemy, jak zapisać te projekty jako globalne ustawienia wstępne, których możesz użyć do przyszłego rozwoju.
Wskoczmy!
Pobierz układ ustawień wstępnych obrazu logo ZA DARMO
Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.
Pobierz za darmo
Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.
Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!
Aby użyć tego układu obrazu logo w globalnym nagłówku, musisz najpierw zaimportować go do biblioteki Divi w następujący sposób:
- Przejdź do Divi > Biblioteka Divi.
- Kliknij przycisk importu/eksportu u góry strony.
- Wybierz zakładkę Importuj w wyskakującym okienku przenośności
- Wybierz Importuj ustawienia wstępne
- Kliknij przycisk Importuj
Następnie przejdź do kreatora motywów i edytuj globalny nagłówek. Dodaj moduł obrazu, w którym chcesz umieścić logo, i użyj ustawień wstępnych, aby odpowiednio stylizować i umieszczać logo.
Rozmiary logo
Zanim przejdziemy do optymalizacji obrazu logo za pomocą Divi, ważne jest, aby rozważyć optymalizację rozmiaru obrazu logo przed przesłaniem go do modułu obrazu. Nie chcesz przesyłać obrazu logo o wymiarach 1920 na 1080 pikseli do swojej witryny, jeśli planujesz wyświetlać to logo w rozdzielczości 100 na 50 pikseli. Jasne, istnieją sposoby na zmianę rozmiaru obrazu logo po fakcie (np. Wtyczki srcset i image optimiztion). Nie jest to jednak najlepsza praktyka, ponieważ może to prowadzić do wolniejszego ładowania strony. I spójrzmy prawdzie w oczy, Twoje logo jest zbyt ważne, aby zadowalać się niechlujnymi skrótami.
Oto lista typowych rozmiarów obrazów logo, które należy wziąć pod uwagę:
Dla układu poziomego:
- 250 pikseli x 150 pikseli
- 350 pikseli x 75 pikseli
- 400 pikseli x 100 pikseli
Dla układu pionowego (kwadratowego):
- 160 pikseli x 160 pikseli (duży)
- 60 pikseli x 60 pikseli (mały)
Możesz potrzebować większego rozmiaru logo, niż mogłoby się wydawać.
Często potrzebne jest mniejsze logo na pulpicie i większe na tablecie (lub nawet telefonie). W Divi często układy kolumn układają się w układ jednokolumnowy na wyświetlaczach tabletów i telefonów. A ponieważ szerokości przeglądarki tabletu zwykle mają maksymalną szerokość 980 pikseli, co jest znacznie większym pojemnikiem na Twoje logo niż na komputerze. Dlatego może być konieczne wybranie większego rozmiaru logo i dostosowanie maksymalnej wysokości lub szerokości do urządzenia. Jeśli prześlesz logo, które jest mniejsze niż potrzebujesz na tablecie, nie możesz zwiększyć rozmiaru bez pogorszenia przejrzystości obrazu. Krótko mówiąc, upewnij się, że logo jest tak duże, jak największy rozmiar wyświetlacza we wszystkich szerokościach przeglądarki.
Optymalizacja rozmiaru i pozycji logo witryny Divi za pomocą globalnych ustawień wstępnych
Edycja globalnego logo nagłówka
Aby rozpocząć, przejdź do Divi Theme Builder, przechodząc do Divi> Theme Builder. Następnie kliknij, aby zbudować nowy globalny nagłówek w domyślnym szablonie witryny.
Następnie wybierz opcję „Buduj od podstaw”.
W tym samouczku zamierzamy zoptymalizować logo dołączone do niestandardowego globalnego nagłówka za pomocą Divi Theme Builder. Zapraszamy do korzystania z istniejącego projektu nagłówka lub importu jednego z naszych gotowych szablonów globalnego nagłówka (i stopki) z naszego bloga. Aby wszystko było proste, zbudujemy naprawdę prosty układ nagłówka z logo i menu.
Dodaj układ wierszy i kolumn
W edytorze globalnego układu nagłówka dodaj jedną czwartą, trzy czwarte, wiersz kolumny.
W prawej kolumnie dodaj moduł obrazu jako element zastępczy, aby pomóc nam zwizualizować umieszczenie logo w nagłówku.
Dodaj moduł obrazu, aby wyświetlić obraz logo
Dodaj moduł obrazu do lewej kolumny.
Korzystanie z modułu obrazu dla logo
W przypadku bardziej tradycyjnych projektów nagłówków możesz skorzystać z modułu menu Divi, aby wyświetlić swoje logo. Jednak dzięki możliwościom dynamicznej zawartości Divi możesz wyświetlać logo swojej witryny za pomocą dowolnej liczby modułów Divi. Zasadniczo możesz wyświetlić swoje logo w dowolnym miejscu, w którym możesz wyświetlić obraz w Divi. Na przykład możesz wybrać wyświetlanie logo witryny na obrazie modułu notki lub nawet jako obraz tła, jeśli chcesz. W tym samouczku skoncentrujemy się na wykorzystaniu modułu obrazu do wyświetlania logo witryny. Dzięki temu logo może być całkowicie oddzielnym elementem (nie połączonym z innymi elementami w module, takimi jak moduł menu lub moduł notatek). Ponadto moduł obrazu jest zbudowany do stylizowania obrazów, co daje nam wiele dodatkowych opcji projektowania stylizacji naszego obrazu logo. Przejdź do końca artykułu, aby dowiedzieć się, jak dodać logo witryny jako dynamiczny obraz.
Ponieważ zamierzamy przetestować kilka różnych rozmiarów obrazów logo, zamiast dynamicznego logo witryny przykleimy zwykłe obrazy do naszych przykładów.
Przykład 1: Tworzenie globalnego ustawienia wstępnego logo wyrównanego do lewej
W tym pierwszym przykładzie zbudujemy proste ustawienie dla logo wyrównanego do lewej o wymiarach 60 na 60 pikseli.
Otwórz ustawienia modułu obrazu i prześlij obraz logo 60 na 60 pikseli do modułu obrazu.
Zaktualizuj ustawienia projektu obrazu w następujący sposób:
- Wyrównanie obrazu: Środek
- Maksymalna szerokość: 60px
- Wyrównanie modułu (pulpit): W lewo
- Wyrównanie modułu (tablet i telefon): Środek
Mimo że jest to projekt dla logo wyrównanego do lewej, wyrównanie obrazu jest ustawione do środka, ponieważ wyrównanie obrazu różni się od wyrównania modułu. Wyrównanie obrazu jest wyśrodkowane w module. A ponieważ moduł ma maksymalną szerokość 60 pikseli, wyrównanie obrazu naprawdę nie ma znaczenia, ponieważ wyrównanie modułu będzie teraz dyktować wyrównanie obrazu logo.
Jest to przydatne, jeśli chcesz dodać obraz tła do logo lub zaokrąglić pojemnik. Zasadniczo sprawia to, że kontener obrazu logo ma taki sam rozmiar jak sam obraz logo.
Zwróć uwagę, że wyrównanie modułu zostało zmienione na środek na tablecie, ponieważ kolumny będą układać się w stos na telefonie komórkowym.
Utwórz nowe ustawienie z bieżących stylów
Po zakończeniu projektowania logo możesz utworzyć globalne ustawienie wstępne dla modułu obrazu, klikając menu ustawień wstępnych i wybierając opcję „Utwórz nowe ustawienie wstępne z bieżących stylów”.
Nadaj predefiniowanemu obrazowi logo unikalną nazwę. W takim przypadku możemy nadać mu nazwę „Logo Left (60px na 60px)”, aby dokładnie poinformować nas, jakiego rozmiaru obrazu użyć i jak logo zostanie wyrównane po wybraniu ustawienia wstępnego.
Przykład 2: Tworzenie globalnego ustawienia wstępnego logo wyrównanego do prawej
W następnym przykładzie utworzymy globalne ustawienie domyślne logo wyrównane do prawej. Będzie to łatwe dzięki naszemu obecnemu projektowi i gotowemu ustawieniu. Po prostu zmień układ kolumn na trzy czwarte jednej czwartej, przesuń menu do lewej kolumny i przesuń logo do prawej kolumny.
Otwórz ustawienia modułu obrazu zawierającego właśnie utworzone ustawienie obrazu logo.
Następnie zaktualizuj ustawienia projektu, aby zmienić wyrównanie modułu na prawo.
Wystarczająco proste. Teraz kliknij listę rozwijaną ustawień wstępnych i utwórz nowe ustawienie wstępne z bieżących stylów.
Nadaj ustawieniem nazwę „Logo Right (60px na 60px)”.
Przykład 3: Tworzenie wyśrodkowanego globalnego ustawienia logo
W następnym przykładzie zbudujemy globalne ustawienie wyśrodkowanego logo. Ponieważ jest to wyśrodkowane logo, w naszym przykładzie możemy użyć większego logo.
Najpierw zmień układ kolumn na strukturę 0jedna czwarta, połowa, jedna czwarta, aby mieć większą kolumnę w środku na logo. Następnie przenieś logo do środkowej kolumny
Prześlij nowy obraz logo o wymiarach 250 na 150 pikseli.
Na karcie projekt zaktualizuj następujące elementy:
- Maksymalna szerokość: 250px
- Wyrównanie modułu: Środek
Następnie dodaj nowe globalne ustawienie wstępne z bieżących stylów.
I nadaj mu nazwę „Centrum logo (250px na 150px).
Przykład 4: Tworzenie globalnego ustawienia wstępnego z dużym logo wyrównanym do lewej
W następnym przykładzie stworzymy ustawienie wstępne dla większego logo wyrównanego do lewej (400px na 100px).
Ponieważ logo ma mieć szerokość 400 pikseli, chcemy mieć strukturę kolumnową, która zapewni logo potrzebnej przestrzeni.
Wróćmy do dwukolumnowej struktury z logo po lewej stronie i menu po prawej. Zmieńmy jednak strukturę na jedną trzecią dwie trzecie.
To da nam kolumnę o szerokości około 320px, jeśli zachowamy domyślną maksymalną szerokość rzędu 1080px.
Otwórz ustawienia modułu obrazu i dodaj obraz logo o wymiarach 400 na 100 pikseli.
Na karcie projekt zaktualizuj następujące elementy:
- Maksymalna szerokość: 400px
- Wyrównanie modułu (pulpit): lewy
- Wyrównanie modułu (tablet): środek
Jak wspomniałem, kolumna ma maksymalną szerokość 320px, co oznacza, że obraz logo nie będzie w stanie rozciągnąć się do pełnej szerokości na pulpicie. Będzie jednak mógł działać na tablecie po ułożeniu kolumn. Z tego powodu chcemy ustawić maksymalną szerokość obrazu na 400px.
Teraz logo jest nieco większe na tablecie i jest wyśrodkowane.
Następnie dodaj nowe globalne ustawienie wstępne z bieżących stylów.
Nadaj mu nazwę „Logo Left (400px na 100px)” i zapisz ustawienie wstępne.
Przykład 5: Tworzenie logo wyrównanego do lewej z globalnym ustawieniem efektów najechania
W tym ostatnim przykładzie dodamy kilka efektów najechania na logo wyrównane do lewej i zapiszemy je jako nowe ustawienie globalne.
Zwykle ludzie łączą swoje logo ze stroną główną. Dodanie efektu najechania może poprawić UX, czyniąc jego klikalność bardziej oczywistą.
W tym przykładzie użyjemy obrazu logo 60px na 60px z ustawieniem „Logo Left (60px na 60px)”. Otwórz ustawienia obrazu i wybierz ustawienie wstępne z listy.
Teraz możemy dostosować ustawienia wstępne za pomocą niektórych stylów efektów najechania, zanim zapiszemy je jako nowe ustawienie wstępne.
Zaktualizuj następujące elementy:
- Zaokrąglone rogi: 50%
- Cień pudełka: patrz zrzut ekranu
- Pozycja pozioma cienia pudełka: 0px
- Pozycja pionowa cienia pudełka: 0px (komputer) 5px (najechanie)
- Kolor cienia: #ac3cf7
Następnie dodaj następujący obrót transformacji po najechaniu kursorem:
- Przekształć Obróć oś Z (najechanie): 90deg
Następnie utwórz nowe ustawienie wstępne z bieżących stylów i nazwij je „Logo Left z najechaniem (60px na 60px)”.
Oto wynik.
Dodawanie dynamicznego logo witryny do modułu obrazu
Aby dynamicznie dodać logo witryny do modułu obrazu, najpierw musisz się upewnić i przesłać logo witryny w opcjach motywu Divi.
Pamiętaj o rozmiarze logo, które wybierasz.
Następnie przejdź do modułu obrazu zawierającego globalne ustawienie wstępne i otwórz ustawienia. Usuń bieżący obraz, a następnie kliknij ikonę zawartości dynamicznej. Z menu wybierz Logo witryny.
Teraz Twój moduł graficzny będzie dynamicznie pobierał logo Twojej witryny.
Nie zapomnij również dodać do logo dynamicznego linku do strony głównej.
Końcowe przemyślenia
Mam nadzieję, że ten samouczek pomoże usprawnić proces dodawania logo do nagłówków Divi. Zaczyna się od optymalizacji rozmiaru obrazu logo, zanim jeszcze prześlesz go do motywu Divi. Następnie możesz użyć wbudowanych ustawień projektowych Divi, aby dostosować rozmiar i położenie obrazu dla różnych układów kolumn i różnych urządzeń.
Oczywiście każda strona internetowa będzie wymagała własnego, unikalnego stylu, a niektóre z nich będą wyłamywać się z wytycznych przedstawionych w tych przykładach. Jestem jednak przekonany, że dzięki kilku poprawkom możesz z łatwością tworzyć nowe ustawienia wstępne dla dowolnego unikalnego układu!
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!