Mengetahui cara menambahkan judul dan slogan situs dinamis ke tajuk global Divi akan berguna saat membuat situs web Divi. Dan ada beberapa alasan bagus untuk melakukannya. Di satu sisi, tidak semua situs memiliki logo. Judul situs adalah pengganti logo yang bagus. Alasan lainnya adalah untuk meningkatkan merek Anda dengan memasukkan informasi penting di situs Anda di mana semua orang akan melihatnya.
Dalam tutorial ini, kami akan menunjukkan cara menambahkan judul dan slogan situs dinamis ke tajuk global Divi. Solusi ini akan secara dinamis mengekstrak judul dan tagline situs dari backend WordPress. Plus, Anda akan memiliki semua opsi desain Divi yang hebat untuk menyesuaikan judul dan slogan sesuka Anda!
Kemungkinan Hasil
Berikut adalah pratinjau desain yang akan kami buat dalam tutorial ini.
Perhatikan judul situs dan tagline di tengah atas header yang ditampilkan secara dinamis.
Download Gratis
Bergabunglah dengan Divi Newlsetter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi Ultimate, ditambah banyak lagi ressources, tips dan trik Divi gratis dan menakjubkan. Ikuti dan Anda akan menjadi Divi Master dalam waktu singkat. Jika Anda sudah berlangganan, cukup masukkan alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.DOWNLOAD
Untuk mengimpor template, buka Divi> Generator tema.
Klik ikon portabilitas di kanan atas halaman.
Di jendela pop-up portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, template header keseluruhan akan tersedia di Divi Theme Builder.
Berikut ini kami akan beralih ke desain.
Judul situs dan slogan di WordPress
Setiap situs WordPress memiliki judul situs dan tagline. Judul situs pada dasarnya adalah nama situs dan tagline adalah frasa singkat yang biasanya menjelaskan apa itu.
Tidak jarang menambahkan judul situs saat menginstal WordPress dan melupakannya.
Dan, sebagian orang bahkan tidak menyadari tagline itu ada, apalagi menyempatkan diri untuk mengupdatenya. Selain itu, saat menggunakan Tema Divi, judul situs dan semboyan tidak akan terlihat di situs Anda secara default, jadi mudah untuk mengabaikannya. Namun, judul dan tagline situs merupakan elemen penting dari situs web dan akan dikenali oleh mesin pencari.
Anda dapat mencari dan memperbarui judul situs dan tagline di WordPress kapan saja dengan membuka dasbor WordPress dan membuka Pengaturan> Umum.
Atau, Anda dapat mengambil rute lain menggunakan penyesuai tema untuk memperbarui judul situs di bawah pengaturan umum.
Sekarang kita tahu di mana judul situs dan slogan di backend WordPress, mari kita jelajahi bagaimana kita dapat menambahkannya ke header Divi!
Bagaimana cara menambahkan judul situs yang dinamis dan slogan ke header global di Divi
Mengimpor template tajuk global yang telah dirancang sebelumnya
Untuk tutorial ini, kita akan fokus pada cara menambahkan judul dan tagline situs dinamis ke tajuk yang ada daripada membuat tajuk lengkap dari awal. Ini akan menghemat waktu Anda dan meningkatkan kejelasan. Jadi, untuk memulai desain tajuk ini, kita akan mengimpor templat tajuk global yang telah ditentukan sebelumnya dari paket generator tema keempat .
Setelah Anda memilikinya mengunduh paket penciptaan tema , unzip file dan temukan file JSON dari templat situs web standar.
Lalu pergi ke Divi> Pembuat Tema.
Klik ikon portabilitas di kanan atas. Di jendela portabilitas pop-up, pilih file JSON dari templat situs web default dan klik tombol Impor.
Setelah template ditambahkan ke pembuat tema, hapus template footer dan klik untuk mengedit header keseluruhan.
Menambahkan tagline dan judul situs dinamis ke header
Di dalam editor tata letak template, Anda akan melihat header yang sudah dibuat sebelumnya. Kami dapat mulai membuat penyesuaian kami segera.
Pindahkan logo
Untuk memulai, seret modul gambar yang menampilkan logo (secara dinamis) dari kolom tengah baris atas ke kolom kiri baris atas.
Tambahkan modul ajakan bertindak untuk menampilkan judul situs dan slogan
Kemudian tambahkan modul Ajakan Bertindak baru ke kolom tengah dari baris atas (tempat logo berada).
Kami akan menggunakan modul Ajakan Bertindak untuk menampilkan judul dan tagline situs.
Tetapi sebelum Anda mulai menambahkan konten, pertama-tama pilih NO untuk menggunakan warna latar belakang.
Tambahkan judul situs dinamis
Di bawah pengaturan konten, arahkan kursor ke kotak entri judul dan klik ikon "Gunakan konten dinamis". Kemudian pilih "Judul Situs" dari daftar.
Tambahkan slogan situs dinamis
Kemudian, arahkan mouse ke atas area tubuh dan pilih ikon "Gunakan konten dinamis". Kemudian pilih "Slogan Situs" dari daftar.
Tambahkan tautan beranda dinamis
Judul situs biasanya dialihkan ke beranda saat diklik, terutama jika Anda mengganti logo. Untuk mengarahkan seluruh kursus ke halaman muka, tambahkan link halaman rumah sebagai konten dinamis ke URL link kursus.
Desain judul situs dan teks slogan
Sekarang judul situs dan tagline ditampilkan pada header secara dinamis. Yang harus kita lakukan sekarang adalah menambahkan beberapa style. Ingat, kita perlu menyesuaikan teks judul untuk merancang judul situs dan teks isi untuk merancang tagline.
Beralih ke tab desain, dan perbarui yang berikut:
- Font Judul: Heebo
- Judul Huruf Berat: Tebal
- Judul Font Style: TT
- Judul Ukuran Teks: 32px (desktop), 24px (tablet dan telepon)
- Spasi Surat Judul: 0.3em
- Jenis Huruf Tubuh: Roboto
- Gaya Fon Tubuh: miring
- Warna Teks Tubuh:
- Ukuran Teks Badan: 13px
- Spasi Huruf Tubuh: 0.1em
- Tinggi Garis Tubuh: 1em
Untuk membantu pemusatan, ambil padding default di bawah teks tubuh dengan menambahkan CSS khusus berikut ke Deskripsi Promo:
bantalan-bawah: 0px
Penyesuaian Desain Tambahan
Untuk bagian terakhir tutorial ini, kita akan membuat beberapa penyesuaian desain tambahan pada header untuk memastikan item tetap terpusat secara vertikal di setiap kolom dan untuk memberikan tombol desain yang unik. Kami juga akan menambahkan baris sebelum dan sesudah berlekuk ke tagline (hanya untuk iseng).
Memusatkan Kolom / Konten secara Vertikal
Sekarang baris atas adalah "Equalize Column Heights" aktif yang menggunakan properti flex. Kita dapat memanfaatkan ini dengan menambahkan potongan css kecil untuk memastikan semua kolom tetap vertikal di tengah baris. Untuk melakukan ini, buka pengaturan untuk baris paling atas dan tambahkan CSS berikut ke Elemen Utama:
menyelaraskan item: pusat;
Memperbarui Kolom dengan Tombol
Selanjutnya, buka pengaturan untuk kolom 3 di baris atas dan keluarkan warna latar belakang dan padding.
Memperbarui Latar Belakang Tombol
Kemudian buka pengaturan modul tombol dan perbarui latar belakang dengan gradien latar belakang baru sebagai berikut:
- Latar belakang gradien Warna kiri: #ffffff
- Warna gradien latar kanan: # 1dbf73
- Arah Gradien: 135deg
- Posisi Mulai: 10%
- Posisi Akhir: 0%
Menambahkan karakter sebelum dan sesudah ke slogan
Setiap item konten dinamis dapat diubah dengan mengklik ikon roda gigi. Untuk menambahkan karakter sebelum dan sesudah ke slogan, buka pengaturan modul ajakan bertindak yang berisi slogan dan klik ikon edit pada konten dinamis dari slogan situs. Kemudian tambahkan karakter ke entri sebelum dan sesudah.
Hasil akhir
Untuk melihat hasilnya, buka halaman mana saja di situs Anda. Anda akan melihat judul dan tagline situs dinamis ditampilkan dengan indah!
final pikiran
Sangat menyenangkan bahwa Anda dapat menyesuaikan keseluruhan tajuk dengan judul dan tagline situs yang dinamis. Ini sepertinya sesuatu yang akan berguna untuk banyak situs. Saya juga menyukai ide untuk memasukkan judul situs dan tagline selain logo untuk representasi merek yang lebih kuat.
Sumber: Tema yang Elegan