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.

Template header global judul situs dinamis 6

Perhatikan judul situs dan tagline di tengah atas header yang ditampilkan secara dinamis.

Contoh modifikasi judul Divi

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.

Pilih template divi

Setelah selesai, template header keseluruhan akan tersedia di Divi Theme Builder.

Ubah header divi global

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.

Sesuaikan judul divi

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.

Pengaturan wordpress umum

Atau, Anda dapat mengambil rute lain menggunakan penyesuai tema untuk memperbarui judul situs di bawah pengaturan umum.

Sesuaikan identitas wordpress

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.

Impor model Divi

Setelah template ditambahkan ke pembuat tema, hapus template footer dan klik untuk mengedit header keseluruhan.

Hapus template dari footer

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).

Sesuaikan ajakan bertindak

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.

Konfigurasikan tindakan ajakan bertindak

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.

Template divi 1 dinamis

Tambahkan slogan situs dinamis

Kemudian, arahkan mouse ke atas area tubuh dan pilih ikon "Gunakan konten dinamis". Kemudian pilih "Slogan Situs" dari daftar.

Tambahkan slogan situs divi

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.

Tambahkan tautan ke beranda

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
Sesuaikan font judul divi

Untuk membantu pemusatan, ambil padding default di bawah teks tubuh dengan menambahkan CSS khusus berikut ke Deskripsi Promo:

bantalan-bawah: 0px
Tambahkan kode css divi khusus

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;
Judul dinamis di divi atas

Memperbarui Kolom dengan Tombol

Selanjutnya, buka pengaturan untuk kolom 3 di baris atas dan keluarkan warna latar belakang dan padding.

Sesuaikan tombol kontak divi

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%
Sesuaikan latar belakang tombol divi

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.

Tampilkan slogan divi

Hasil akhir

Untuk melihat hasilnya, buka halaman mana saja di situs Anda. Anda akan melihat judul dan tagline situs dinamis ditampilkan dengan indah!

Hasil akhir divi

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