Proste i kreatywne sposoby wyświetlania logo firmy w Divi

Istnieje wiele powodów, dla których warto wyświetlać logo firmy na swojej stronie internetowej. Sekcja „Polecane w” logo firmy może mieć wpływ na potencjalnych inwestorów lub partnerów. Lub sekcja „Nasi klienci obejmują” może stanowić cenny dowód społeczny wśród odwiedzających. Ale bez względu na powód, ważne jest, aby wiedzieć, jak dodać te logo do swojej witryny. W tym samouczku omówię trzy różne metody dodawania logo firmy do Twojej witryny za pomocą Divi. Pokażę ci nawet, jak dodać galerie logo do dowolnego modułu Divi!

Oto, co zostanie omówione w tym samouczku:

• Przygotowywanie obrazów logo
• Używanie modułu Divi Gallery do wyświetlania logo za pomocą prostego przeciągania i upuszczania
• Używanie osadzania galerii WordPress do wyświetlania logo
• Używanie Divi Builder do tworzenia niestandardowego układu logo

Zacznijmy!

zapowiedź

Oto rzut oka na kilka projektów możliwych przy użyciu technik przedstawionych w tym samouczku.

Przygotowywanie obrazów logo

Przygotowując swoje logo do wyświetlania w witrynie, ważne jest, aby poświęcić trochę czasu na ustawienie rozmiaru obrazów za pomocą edytora zdjęć przed dodaniem ich do witryny. Dzięki temu zaoszczędzisz sobie bólu głowy związanego z dostosowywaniem rozmiaru i pozycjonowaniem logo za pomocą niestandardowych szerokości, dopełnienia lub marginesów. Zaufaj mi. Nie chcesz iść tą drogą, jeśli nie musisz.

Ponieważ każde logo ma inny rozmiar, jest prawie niemożliwe, aby wszystkie miały dokładne wymiary. Tutaj przydaje się edytor zdjęć. Na przykład, korzystając z programu Photoshop, możesz utworzyć nowy plik i ustawić wymiary dokumentu na dowolny rozmiar, jaki mają mieć wszystkie obrazy logo (w tym przypadku 226 pikseli na 100 pikseli).

Następnie dodaj obraz logo do dokumentu i zmień rozmiar oraz umieść obraz bezpośrednio na środku. Upewnij się, że jest to plik obrazu png z przezroczystym tłem.

Następnie wyeksportuj obraz jako plik png, aby zachować przezroczyste tło.

Następnie powtórz ten proces dla pozostałych logo.

Możesz zachować oryginalny kolor logo lub użyć edytora zdjęć, aby zmienić je na dowolny kolor. Jeśli planujesz dodać swoje logo za pomocą Divi (tj. modułu obrazów lub galerii obrazów), zawsze możesz użyć wbudowanych efektów filtrów Divi, aby dostosować również kolory.

Subskrybuj nasz kanał YouTube

#1 Używanie modułu Divi Gallery do wyświetlania logo firmy (proste przeciąganie i upuszczanie)

Ta pierwsza metoda dodawania logo firmy do witryny za pomocą Divi jest tak prosta, jak to tylko możliwe. Korzystając z funkcji przeciągnij i upuść Divi, możesz przeciągnąć wszystkie logo firmy do Divi Builder, aby natychmiast utworzyć i galerię obrazów, aby wyświetlić swoje logo w siatce.

Aby to zrobić, utwórz nową stronę i wdróż Divi Builder, aby zbudować na interfejsie. Wybierz opcję „Buduj od podstaw”. Po uruchomieniu kreatora Divi otwórz folder zawierający wszystkie obrazy i wybierz je. Następnie po prostu przeciągnij je do okna przeglądarki za pomocą Divi Builder.

Divi automatycznie doda te obrazy do nowego modułu galerii i otworzy Ustawienia galerii, aby szybko rozpocząć proces dostosowywania.

Ponieważ dodaję 8 obrazów logo i nie chcę pokazywać żadnych tytułów, podpisów ani paginacji, mogę zaktualizować następujące elementy:

Liczba obrazów: 8
Pokaż tytuł i podpis: NIE
Pokaż paginację: NIE

Domyślnie moduł galerii doda nakładkę z ikoną dla każdego obrazu. Możesz dostosować ustawienia nakładki dla koloru ikony powiększenia, koloru nakładki po najechaniu kursorem lub ikony po najechaniu kursorem.

Aby zachować czystość i prostotę, możesz pozbyć się nakładki po najechaniu, ustawiając Kolor ikony powiększenia i Kolor nakładki najechania na przezroczysty.

Następnie możesz zapoznać się ze wszystkimi opcjami projektowania, aby stworzyć niepowtarzalne projekty dla swojej galerii obrazów. Na przykład możesz dodać obramowanie z subtelnym cieniem pudełkowym.

Szerokość obramowania obrazu: 1px
Kolor obramowania obrazu: #dddddd
Cień pola obrazu: patrz zrzut ekranu

Oto jak wyglądałby ostateczny projekt w różnych rozmiarach przeglądarki.

A ponieważ tę galerię można dodać do dowolnej struktury kolumn, możesz łatwo tworzyć unikalne układy logo swojej firmy. Oto przykład układu dwukolumnowego z modułem tekstowym po lewej stronie i modułem galerii obrazów (z logo) po prawej stronie. Dodałem gradient tła, aby pokazać inny wygląd.

#2 Korzystanie z galerii WordPress Embed do wyświetlania logo firmy (z dowolnym modułem Divi)

Możesz także dodać logo firmy do swojej witryny za pomocą skrótu galerii obrazów WordPress. Jest to zaskakująco łatwe i doskonale nadaje się do logo, ponieważ w większości przypadków nie trzeba dodawać niestandardowych stylów do obrazów. Wspaniałą cechą tej metody jest to, że możesz wdrożyć do 9 kolumn dla swoich logo, które skalują się w oknie przeglądarki, co pozwala zachować strukturę kolumn również na urządzeniach mobilnych.

Oto jak to zrobić.

W Divi Builder utwórz nową sekcję o strukturze kolumnowej jedna czwarta trzy czwarte.

Załóżmy, że chcesz umieścić tekst po lewej stronie logo firmy w sześciokolumnowej galerii. Najpierw dodaj moduł tekstowy w lewej kolumnie i zaktualizuj następujące elementy:

Treść: „Jak w opisie”
Czcionka tekstu: Montserrat
Grubość czcionki tekstu: pogrubiona
Rozmiar tekstu: 26px
Orientacja tekstu: środek

Teraz dodaj kolejny moduł tekstowy w prawej kolumnie. Pod zakładką treści usuń fałszywą treść, która się tam znajduje, i kliknij przycisk "Dodaj multimedia" u góry pola edytora treści.

Spowoduje to wyświetlenie wyskakującego okna Media Gallery. Następnie kliknij link Utwórz galerię po lewej stronie wyskakującego okienka. Następnie wybierz obrazy logo, które chcesz umieścić w galerii (w tym przykładzie używam ośmiu obrazów). Kliknij przycisk Utwórz galerię.

Spowoduje to wyświetlenie strony Edytuj galerię w wyskakującym okienku. Zaktualizuj ustawienia Galerii na prawym pasku bocznym w następujący sposób:

Link do: Brak
Kolumny: 8 (powinno być równe liczbie zdjęć w galerii, aby pozostały w jednej linii)
Rozmiar: pełny rozmiar

Następnie kliknij przycisk Utwórz nową galerię.

Spowoduje to osadzenie niezbędnego krótkiego kodu galerii wbudowanego w WordPress i wyświetlenie galerii w module tekstowym.

Teraz otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Ustaw pełną szerokość tego wiersza: TAK
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 1
Wyrównaj wysokości kolumn: TAK

Dzięki tej konfiguracji masz więcej miejsca na logo, aby oddychać. Teraz wystarczy tylko dostosować tekst po lewej stronie, aby był wyrównany w pionie z logo po prawej stronie. Aby to osiągnąć, możesz dodać niezbędne niestandardowe wypełnienie do lewej kolumny, ale aby zagwarantować, że oba moduły pozostaną wyśrodkowane w pionie, możesz dodać następujący niestandardowy kod CSS do elementu głównego na karcie Zaawansowane ustawienia wierszy.

align-items: center;

Ten CSS działa, ponieważ ustawiliśmy Wyrównanie wysokości kolumn na TAK, włączając w ten sposób właściwość „display:flex” dla wiersza. Aby uzyskać więcej informacji na ten temat, sprawdź, jak wyrównać zawartość w pionie w Divi.

Aby usunąć szarą ramkę wokół naszych obrazów, musimy dodać następujący fragment kodu CSS do naszych ustawień strony:

.gallery img {
border: none !important;
}

Oto ostateczny projekt.

Tutaj jest z czarnym tłem dodanym do rzędu.

Na urządzeniach mobilnych kolumny nie ulegają zerwaniu na żadnym rozmiarze ekranu. Obrazy po prostu skalują się do mniejszego rozmiaru. Przyznaję. Osiem kolumn to prawdopodobnie za dużo na smartfonie, ponieważ obrazy stają się bardzo małe.

Osadź galerie logo w dowolnym module Divi

Ponieważ jest to embed shortcode, możesz dodać tę galerię do prawie każdego modułu Divi, co otwiera wiele różnych możliwości.

Na przykład możesz dodać obrazy logo wewnątrz przełącznika, akordeonu, a nawet modułu kart.

Oto przykład tego, jak by to wyglądało, gdy dodasz skrót do galerii wordpress swoich logo do dwóch różnych zakładek.
W tym przykładzie wybrałem 6 logo z 3 kolumnami dla każdej galerii.

Może się to przydać w przypadku witryn wymagających dużej liczby logo.

#3 Używanie Divi Builder do tworzenia niestandardowego układu logo firmy

Jeśli chcesz być bardziej kreatywny dzięki układom logo swojej firmy, możesz użyć Divi Builder do zaprojektowania niemal wszystkiego, co możesz sobie wyobrazić. Element wierszowy Divi obsługuje układy kolumn do 6 kolumn, co jest więcej niż wystarczające dla większości układów logo firmy. Podoba mi się układ 6-kolumnowy i 4-kolumnowy najlepiej w przypadku logo w dużej mierze ze względu na to, jak reagują na urządzeniach mobilnych.

W poniższym projekcie pokażę Ci kilka wskazówek, jak przenieść układy logo Twojej firmy na wyższy poziom.

Najpierw zacznijmy od stworzenia nowej sekcji z sześciokolumnowym wierszem.

Zanim zaczniemy dodawać cokolwiek do naszych kolumn, przejdź do ustawień wierszy i zaktualizuj następujące elementy:

Szerokość niestandardowa: 90%
Szerokość rynny: 1
Wyrównaj wysokości kolumn: TAK

Niestandardowa wyściółka: góra 4vw, dół 4vw

Zapisz ustawienia.

Następnie dodaj moduł obrazu do pierwszej kolumny, a następnie wybierz jeden z obrazów logo.

Następnie kontynuuj dodawanie obrazów logo do każdej kolumny w następujący sposób:

Kolumna 1: 1 logo
Kolumna 2: 2 logo
Kolumna 3: 3 logo
Kolumna 4: 3 logo
Kolumna 5: 2 logo
Kolumna 6: 1 logo

Teraz dzięki tej konfiguracji możesz dostosować wyrównanie w pionie za pomocą fragmentu niestandardowego kodu CSS. Jeśli chcesz wyśrodkować zawartość w pionie, możesz dodać ten sam fragment kodu CSS, który dodaliśmy, aby wyśrodkować tekst w pionie obok galerii logo w punkcie 2 powyżej. Otwórz ustawienia wiersza i dodaj następujący kod CSS do elementu głównego.

align-items: center;

Jak widać, tworzy to zaokrąglony układ logo.

Ale w przypadku tego układu wyrównuję moduły do ​​dolnej części rzędu. Zastąp więc fragment „align-items: center” następującym:

align-items: flex-end;

Spowoduje to wyrównanie wszystkich modułów na dole wiersza, co będzie dobrze współpracować z sekcją Dzielniki, którą dodamy.

Teraz jesteśmy gotowi, aby dostosować naszą sekcję. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Tło: #2a3443

Styl Top Divider: patrz zrzut ekranu
Kolor górnego dzielnika: rgba (255,255,255,0,03)
Wysokość górnego rozdzielacza: 13vw
Top Divider Flip: pionowy

Niestandardowe dopełnienie: 0px na górze, 0px na dole

W naszym nagłówku utworzymy nową sekcję i umieścimy ją nad sekcją, którą właśnie utworzyliśmy. Utwórz nową zwykłą sekcję o jednokolumnowej strukturze wierszy.

Zaktualizuj ustawienia sekcji w następujący sposób:

Kolor tła: #2a3443

Styl dolnego rozdzielacza: patrz zrzut ekranu
Kolor dolnego rozdzielacza: rgba (238,238,238,0,09)
Wysokość dolnej przegrody: 13vw

Niestandardowe wypełnienie: 0px dół

Teraz zapisz ustawienia i dodaj moduł tekstowy do wiersza i zaktualizuj następujące elementy:

Do treści dodaj:

<h2>As Featured In</h2>

Czcionka nagłówka 2: Montserrat
Grubość czcionki nagłówka 2: pogrubiona
Nagłówek 2 Wyrównanie tekstu: do środka
Kolor tekstu nagłówka 2: #ffffff
Rozmiar tekstu nagłówka 2: 32px

Margines niestandardowy: 0px dół

Na koniec dodaj moduł graficzny pod modułem tekstowym z logo firmy, które chcesz wyróżnić spośród innych. Następnie zaktualizuj następujące elementy:

Wyrównanie obrazu: środek
Margines niestandardowy: -75px

Sprawdź efekt końcowy.

Końcowe przemyślenia

Tworzenie sekcji na swojej stronie internetowej dla logo firmy jest w rzeczywistości dość proste. Po uzyskaniu odpowiedniego rozmiaru obrazów logo za pomocą edytora zdjęć, Divi może zająć się resztą. Metody opisane w tym samouczku powinny dać wszystko, czego potrzebujesz, aby stworzyć układ, który chcesz osiągnąć przy minimalnym wysiłku. A mając moc Divi w swoim kącie, powinieneś dobrze się bawić, tworząc własne unikalne układy.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!