Jak dodać i animować logo SVG w globalnym nagłówku za pomocą kreatora motywów Divi i Anime.js

Twoje logo jest centralną częścią tożsamości Twojej marki. Dlatego prawie zawsze znajduje się w nagłówku każdej napotkanej witryny. Dodając logo do nagłówka, możesz przesłać plik PNG lub skorzystać z integracji SVG. Aby uzyskać bardziej spersonalizowane podejście, możesz również animować swoje logo SVG. Dokładnie to pokażemy w tym poście. Pokażemy Ci, jak najpierw dodać go do swojego globalnego nagłówka Divi, a następnie animować go za pomocą biblioteki Anime JS. W naszym przykładzie użyjemy prostego projektu, ale gdy uzyskasz podejście, możesz animować dowolne logo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na szablonie globalnego nagłówka, 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 pliki

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.

POBIERANIE

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!

1. Utwórz logo SVG w programie Adobe Illustrator i pobierz kod SVG

Otwórz program Illustrator i utwórz nowy dokument

W pierwszej części tego samouczka stworzymy proste logo w programie Adobe Illustrator. Jeśli masz już własne logo SVG, możesz go użyć. Alternatywnie możesz również uzyskać dostęp do przykładowego pliku programu Illustrator z logo w folderze pobierania powyżej. Jeśli wolisz stworzyć próbkę logo od podstaw, zacznij od dodania nowego dokumentu w proporcji 1:1.

• Szerokość: 500px
• Wysokość: 500px

Dodaj okrąg do istniejącej warstwy

Pierwszym elementem, który dodamy, jest okrąg. Użyjemy koloru wypełnienia pasującego do palety kolorów pakietu Spice Shop Layout Pack. Upewnimy się również, że okrąg jest centralnie wyrównany wewnątrz naszego płótna.

• Wypełnij: #0C1019
• Skok: brak

Utwórz nową warstwę i dodaj tekst logo

Następnie dodamy nową warstwę.

Użyjemy tej warstwy, aby dodać tekst logo.

• Czcionka: Montserrat
• Waga czcionki: czarny
• Rozmiar czcionki: 110 pkt

Utwórz kontury logo

Po zakończeniu modyfikowania tekstu logo możesz kliknąć element prawym przyciskiem myszy i kliknąć „Utwórz kontury”, aby zmienić tekst w kontur.

Wyrównaj kontury tekstu

Upewnimy się, że kontury tekstu są również wyrównane do środka.

Eksportuj jako SVG

Teraz, gdy mamy już wszystkie ścieżki, możemy wyeksportować SVG. Aby to zrobić, najedziemy na opcję „Plik” u góry, przejdź do „Eksportuj” i kliknij „Eksportuj jako…”.

Pobierz kod SVG

Po kliknięciu przycisku „Eksportuj” zobaczysz okno z dodatkowymi opcjami SVG. Tam będziesz mógł skopiować kod SVG. Upewnij się, że trzymasz SVG w pobliżu do późniejszego wykorzystania w tym samouczku.

2. Rozpocznij tworzenie globalnego/niestandardowego nagłówka w Divi Theme Builder

Przejdź do Divi Theme Builder i zacznij tworzyć globalny nagłówek

Teraz, gdy przeszliśmy przez pierwszą część tego samouczka, pobierając kod SVG naszego logo, nadszedł czas, aby przejść do Divi! Utworzymy nowy globalny nagłówek, przechodząc do Kreatora motywów w zapleczu WordPress.

Ustawienia sekcji

Kolor tła

Po wprowadzeniu szablonu globalnego nagłówka zauważysz sekcję. Otwórz tę sekcję i zastosuj kolor tła.

• Kolor tła: #eaeaea

Rozstaw

Przejdź do zakładki projektu i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy, przejdź do zakładki projekt i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 95%
• Maksymalna szerokość: 100%

Rozstaw

Usuń również wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Główny element

Aby upewnić się, że nasze kolumny pozostaną obok siebie na mniejszych ekranach, dodamy również jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Kolumna 1 Główny element

Następnie upewnimy się, że struktura kolumn (1/4 i 3/4) jest zachowana na mniejszych rozmiarach ekranu, dodając jeden wiersz kodu CSS do każdej kolumny z osobna. Zacznij od pierwszego.

width: 25% !important;

Kolumna 2 Główny element

Zrób to samo dla drugiej kolumny, ale użyj innego procentu szerokości.

width: 75% !important;

3. Dodaj logo SVG (moduł kodu wewnętrznego)

Dodaj moduł kodu do kolumny 1

Czas dodać moduły, zaczynając od pierwszego modułu kodu. Umieścimy ten moduł kodu w kolumnie 1 i użyjemy go do dodania naszego kodu SVG.

Dodaj skopiowany kod SVG

Zbuduj to

Po wklejeniu kodu SVG (patrz część 1 tego samouczka) do modułu kodu, pomaga to uporządkować wszystko, jak pokazano na poniższym zrzucie ekranu. W ten sposób będziesz mieć przejrzysty przegląd różnych elementów wewnątrz SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

Dodaj obrys i szerokość obrysu do elementów w kodzie CSS

W programie Illustrator użyliśmy tylko kolorów wypełnienia dla dodanych elementów. Powodem tego jest to, że chcemy uniknąć generowania dodatkowych ścieżek. Kod SVG nie zawsze jest tak przewidywalny, jak mogłoby się wydawać, więc wprowadzenie pewnych ręcznych zmian w kodzie CSS może często pomóc w utrzymaniu prostych ścieżek. Aby uzyskać taki sam wynik, jak w podglądzie tego posta, musimy dodać obrys do obu naszych elementów. Aby to zrobić, dodamy wiersze kodu CSS do dwóch klas w naszym kodzie. Klasa CSS „cls-1”, która została wygenerowana w AI, oznacza koło, klasa CSS „cls-2” reprezentuje kontury tekstu.

stroke: #0c1019;
stroke-width: 3px;

Zmniejsz promień okręgu

Ponieważ dodaliśmy dodatkowy obrys do naszego okręgu, okrąg wydaje się sięgać dalej niż płótno SVG (widoczne po bokach), aby to naprawić, po prostu zmniejszymy promień wewnątrz naszego znacznika okręgu. Zamiast używać oryginalnego „232.5”, obniżamy go do „225”. Możesz sam określić, jaką wartość preferujesz, delikatnie bawiąc się tym numerem.

• r=”225”

Modyfikuj ustawienia modułu kodu

Rozmiary

Teraz, gdy nasz kod SVG jest już gotowy, możemy wprowadzić dodatkowe zmiany w samym module kodu. Przejdź do zakładki projektowania i zmień szerokość modułu na różnych rozmiarach ekranu.

• Szerokość:
  • Komputer stacjonarny: 25%
  • Tablet: 50%
  • Telefon: 80%

Rozstaw

Generujemy również dolne nakładanie się, modyfikując ustawienia odstępów.

• Górna wyściółka: 5%
• Dolna wyściółka:
  • Komputer stacjonarny: -12%
  • Tablet: -20%
  • Telefon: -35%

4. Użyj Anime.js do animowania logo SVG

Dodaj kolejny moduł kodu poniżej poprzedniego

Nasze logo SVG zostało dodane do naszego nagłówka Divi! W następnej części tego samouczka będziemy animować logo SVG za pomocą biblioteki Anime JS. Animacja rysunkowa, którą można zobaczyć w podglądzie, jest jedną z ich najpopularniejszych, ale za pomocą tej biblioteki możesz tworzyć dowolne animacje. Dodaj nowy moduł kodu tuż pod poprzednim.

Dodaj bibliotekę anime

Pierwszą rzeczą, którą musisz zrobić, to dodać bibliotekę wewnątrz znaczników skryptu.

• src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

Dodaj kod animacji na osi czasu anime

Tuż pod nim musisz dodać kod anime JS między tagami skryptu, jak pokazano na poniższym zrzucie ekranu:

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

Każda funkcja „dodaj” reprezentuje animację na osi czasu animacji. Możesz dowolnie modyfikować te funkcje „dodawania”, dodawać nowe lub usuwać obecne, po prostu upewnij się, że ostatnia funkcja dodawania jest poprawnie zamknięta za pomocą ';' na końcu (jak widać w powyższym kodzie). Możesz dodać różne właściwości CSS w tych funkcjach „dodaj”. Możesz dowiedzieć się więcej o właściwościach i sposobie ich użycia w przykładach dokumentacji anime.js.

5. Dodaj moduł menu do kolumny 2

Jedynym elementem, którego potrzebujemy do uzupełnienia naszego globalnego nagłówka, jest moduł menu w kolumnie 2.

Wybierz menu

Wybierz wybrane menu.

Usuń kolor tła

Następnie usuń domyślny kolor tła.

Ustawienia tekstu menu

Przejdź do zakładki projektu i zmodyfikuj ustawienia tekstu menu w następujący sposób:

• Kolor tekstu menu: #000000
• Rozmiar tekstu menu:
  • Komputer stacjonarny: 0,7vw
  • Tablet: 2.2vw
  • Telefon: 3vw
• Wyrównanie tekstu: do prawej

Menu rozwijane Ustawienia tekstu

Zmień też kolor linii menu rozwijanego.

• Kolor linii menu rozwijanego: #ffffff

Ustawienia ikon

Wraz z kolorem ikony menu hamburgera.

• Kolor ikony menu hamburgerów: #0c1019

Rozmiary

Następnie przejdź do ustawień rozmiaru i upewnij się, że szerokość wynosi „100%”.

• Szerokość: 100%

Pozycja

Uzupełnij ustawienia modułu, zmieniając położenie modułu w zakładce Zaawansowane.

• Pozycja: bezwzględna
• Lokalizacja: środek po prawej

6. Zapisz wszystkie zmiany w kreatorze motywów

Po ukończeniu całego projektu globalnego nagłówka możesz zapisać wszystkie zmiany w kreatorze motywów i wyświetlić wynik na swojej stronie!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak posunąć globalny nagłówek Divi o krok dalej w swojej podróży do tworzenia stron internetowych. Mówiąc dokładniej, pokazaliśmy, jak dodawać i animować logo SVG za pomocą Divi i biblioteki Anime JavaScript. Udało Ci się również bezpłatnie pobrać plik JSON szablonu globalnego nagłówka! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.