Cara Menambahkan & Menganimasikan Logo SVG Anda Di Dalam Header Global Anda dengan Pembuat Tema & Anime.js Divi

Logo Anda adalah bagian sentral dari identitas merek Anda. Itulah mengapa hampir selalu disertakan dalam header situs web apa pun yang Anda temui. Saat menambahkan logo ke header, Anda dapat memilih untuk mengunggah file PNG atau menggunakan integrasi SVG. Untuk pendekatan yang lebih disesuaikan, Anda juga dapat menganimasikan logo SVG Anda. Itulah tepatnya yang akan kami tunjukkan kepada Anda di pos ini. Kami akan menunjukkan cara menambahkannya ke header global buatan Divi terlebih dahulu, lalu menganimasikannya menggunakan perpustakaan Anime JS. Kami akan menggunakan desain sederhana untuk contoh kami, tetapi begitu Anda mendapatkan pendekatannya, Anda dapat menganimasikan logo apa pun!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Header Global GRATIS

Untuk mendapatkan template tajuk global, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buat Logo SVG di Adobe Illustrator & Dapatkan Kode SVG

Buka Illustrator & Buat Dokumen Baru

Di bagian pertama tutorial ini, kita akan membuat logo sederhana di dalam Adobe Illustrator. Jika Anda sudah memiliki logo SVG sendiri, jangan ragu untuk menggunakannya. Atau, Anda juga dapat mengakses file contoh logo Illustrator di folder unduhan di atas. Jika Anda lebih suka membuat sampel logo dari awal, mulailah dengan menambahkan dokumen baru dengan rasio 1:1.

• Lebar: 500 piksel
• Tinggi: 500px

Tambahkan Lingkaran ke Lapisan yang Ada

Elemen pertama yang akan kita tambahkan adalah lingkaran. Kami akan menggunakan warna isian yang cocok dengan palet warna Spice Shop Layout Pack. Kami juga akan memastikan lingkaran itu sejajar secara terpusat di dalam kanvas kami.

• Isi: #0C1019
• Stroke: Tidak ada

Buat Layer Baru & Tambahkan Teks Logo

Selanjutnya, kita akan menambahkan layer baru.

Kami akan menggunakan lapisan ini untuk menambahkan beberapa teks logo.

• Font: Montserrat
• Berat Huruf: Hitam
• Ukuran Huruf: 110pt

Buat Garis Besar untuk Logo

Setelah Anda selesai memodifikasi teks logo, Anda dapat mengklik kanan pada elemen dan klik "Buat Garis Besar" untuk mengubah teks menjadi garis besar.

Sejajarkan Garis Besar Teks

Kami akan memastikan garis besar teks juga rata tengah.

Ekspor sebagai SVG

Sekarang setelah kita memiliki semua jalur, kita dapat mengekspor SVG. Untuk melakukan itu, kami akan mengarahkan opsi "File" di bagian atas, pergi ke "Ekspor" dan klik "Ekspor Sebagai ...".

Dapatkan Kode SVG

Setelah Anda mengklik tombol "Ekspor", Anda akan melihat sebuah jendela muncul dengan beberapa opsi SVG tambahan. Di sana, Anda dapat menyalin kode SVG. Pastikan Anda menyimpan SVG untuk digunakan nanti di tutorial ini.

2. Mulai Membuat Header Global/Kustom di dalam Divi Theme Builder

Buka Divi Theme Builder & Mulai Membuat Header Global

Sekarang kita telah melalui bagian pertama dari tutorial ini, mendapatkan kode SVG logo kita, saatnya untuk beralih ke Divi! Kami akan membuat tajuk global baru dengan menavigasi ke Pembuat Tema di dalam Backend WordPress.

Pengaturan Bagian

Warna latar belakang

Setelah Anda memasukkan template header global, Anda akan melihat sebuah bagian. Buka bagian itu dan terapkan warna latar belakang.

• Warna Latar Belakang: #eaeaea

Jarak

Pindah ke tab desain dan hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris, buka tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 95%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default juga.

• Padding Atas: 0px
• Padding Bawah: 0px

Elemen Utama

Untuk memastikan kolom kita tetap bersebelahan pada ukuran layar yang lebih kecil, kita juga akan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Kolom 1 Elemen Utama

Selanjutnya, kami akan memastikan struktur kolom (1/4 dan 3/4) disimpan di ukuran layar yang lebih kecil dengan menambahkan satu baris kode CSS ke setiap kolom satu per satu. Mulailah dengan yang pertama.

width: 25% !important;

Kolom 2 Elemen Utama

Lakukan hal yang sama untuk kolom kedua, tetapi gunakan persentase lebar lainnya.

width: 75% !important;

3. Tambahkan Logo SVG (Modul Kode Di Dalam)

Tambahkan Modul Kode ke Kolom 1

Saatnya menambahkan modul, dimulai dengan Modul Kode pertama. Kami akan menempatkan Modul Kode ini di kolom 1 dan menggunakannya untuk menambahkan kode SVG kami.

Tambahkan Kode SVG yang Disalin

Struktur itu

Setelah Anda menempelkan kode SVG (lihat bagian 1 dari tutorial ini) di dalam Modul Kode, ini membantu untuk menyusun semuanya seperti yang ditunjukkan pada layar cetak di bawah ini. Dengan begitu, Anda akan memiliki gambaran yang jelas tentang berbagai elemen di dalam 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>

Tambahkan Stroke & Lebar Stroke ke Elemen dalam Kode CSS

Di Illustrator, kami hanya menggunakan warna isian untuk elemen yang kami tambahkan. Alasannya adalah karena kami ingin menghindari pembuatan jalur tambahan. Kode SVG tidak selalu dapat diprediksi seperti yang Anda kira, jadi membuat beberapa perubahan manual pada kode CSS seringkali dapat membantu menjaga jalur tetap sederhana. Untuk membuat hasil yang sama seperti pada pratinjau postingan ini, kita perlu menambahkan goresan pada kedua elemen kita. Untuk melakukannya, kita akan menambahkan baris kode CSS ke dua kelas di dalam kode kita. Kelas CSS "cls-1" yang dihasilkan di AI adalah singkatan dari lingkaran, kelas CSS "cls-2" mewakili garis besar teks.

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

Kurangi Radius Lingkaran

Karena kami telah menambahkan goresan ekstra ke lingkaran kami, lingkaran tampaknya menjangkau lebih jauh dari kanvas SVG (terlihat di samping), untuk memperbaikinya, kami hanya akan mengurangi radius di dalam tag lingkaran kami. Alih-alih menggunakan "232,5" yang asli, kami menurunkannya menjadi "225". Anda dapat menentukan sendiri nilai apa yang Anda sukai dengan bermain-main dengan angka ini dengan lembut.

• r=”225″

Ubah Pengaturan Modul Kode

Perekat

Sekarang setelah kode SVG kita ada, kita dapat membuat beberapa perubahan tambahan pada Modul Kode itu sendiri. Buka tab desain dan ubah lebar modul di berbagai ukuran layar.

• Lebar:
  • Desktop: 25%
  • Tablet: 50%
  • Telepon: 80%

Jarak

Kami juga menghasilkan tumpang tindih bawah dengan memodifikasi pengaturan spasi.

• Padding Atas: 5%
• Bantalan Bawah:
  • Desktop: -12%
  • Tablet: -20%
  • Telepon: -35%

4. Gunakan Anime.js untuk Menganimasikan Logo SVG Anda

Tambahkan Modul Kode Lain Di Bawah Yang Sebelumnya

Logo SVG kami telah ditambahkan ke header Divi kami! Di bagian selanjutnya dari tutorial ini, kita akan menganimasikan logo SVG menggunakan library Anime JS. Animasi gambar yang dapat Anda lihat di pratinjau adalah salah satu yang paling populer, tetapi Anda dapat membuat segala jenis animasi dengan perpustakaan ini. Tambahkan Modul Kode baru tepat di bawah yang sebelumnya.

Tambahkan Perpustakaan Anime

Hal pertama yang perlu Anda lakukan adalah menambahkan perpustakaan di dalam tag skrip.

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

Tambahkan Kode Animasi Garis Waktu Anime

Tepat di bawahnya, Anda harus menambahkan kode JS anime di antara tag skrip seperti yang ditunjukkan pada layar cetak di bawah ini:

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'],
});

});  
});

Setiap fungsi "tambah" mewakili animasi dalam garis waktu animasi. Anda dapat memodifikasi fungsi "tambah" ini sesuka Anda, menambah yang baru atau menghapus yang sekarang, pastikan bahwa fungsi tambah terakhir ditutup dengan benar dengan tanda ';' di akhir (seperti yang Anda lihat pada kode di atas). Anda dapat menambahkan properti CSS yang berbeda di dalam fungsi "tambah" ini. Anda dapat mengetahui lebih lanjut tentang properti dan bagaimana mereka digunakan dalam contoh dokumentasi anime.js.

5. Tambahkan Modul Menu ke Kolom 2

Satu-satunya elemen yang kita butuhkan untuk melengkapi header global kita adalah Modul Menu di kolom 2.

Pilih Menu

Pilih menu pilihan Anda.

Hapus Warna Latar Belakang

Kemudian, hapus warna latar belakang default.

Pengaturan Teks Menu

Pindah ke tab desain dan ubah pengaturan teks menu sebagai berikut:

• Warna Teks Menu: #000000
• Ukuran Teks Menu:
  • Desktop: 0.7vw
  • Tablet: 2.2vw
  • Telepon: 3vw
• Perataan Teks: Kanan

Pengaturan Teks Menu Dropdown

Ubah warna garis menu dropdown juga.

• Warna Garis Menu Dropdown: #ffffff

Pengaturan Ikon

Seiring dengan warna ikon menu hamburger.

• Warna Ikon Menu Hamburger: #0c1019

Perekat

Kemudian, buka pengaturan ukuran dan pastikan lebarnya "100%".

• Lebar: 100%

Posisi

Selesaikan pengaturan modul dengan memposisikan ulang modul di tab lanjutan.

• Posisi: Absolut
• Lokasi: Kanan Tengah

6. Simpan Semua Perubahan Pembuat Tema

Setelah Anda menyelesaikan seluruh desain tajuk global, Anda dapat menyimpan semua perubahan pembuat tema dan melihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana membawa header global Divi Anda selangkah lebih maju dalam perjalanan pengembangan web Anda. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menambahkan dan menganimasikan logo SVG Anda menggunakan Divi dan perpustakaan JavaScript Anime. Anda juga dapat mengunduh file JSON template header global secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.