Loncat ke Konten Utama

Cara Menambahkan Judul dan Slogan Situs Dinamis ke Header Divi Global

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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 mengirimi Anda salinan Paket Tata Letak Halaman Arahan Divi Utama, bersama dengan banyak sumber daya, tip dan trik Divi gratis dan menakjubkan lainnya. Ikuti dan Anda akan menjadi master Divi 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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Sesuaikan judul divi

Dan, beberapa orang bahkan tidak menyadari tagline tersebut ada, apalagi meluangkan waktu untuk memperbaruinya. Selain itu, saat Anda menggunakan tema Divi, judul dan slogan situs tidak akan terlihat di situs Anda secara default, jadi mudah untuk mengabaikannya. Namun, judul dan tagline situs adalah bagian 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.

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 tersebut, dan cari file JSON templat situs web default.

Lalu pergi ke Divi> Pembuat Tema.

Klik ikon portabilitas di kanan atas. Di jendela pop-up portabilitas, pilih file JSON template 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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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.

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:

padding-bottom: 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;

Memperbarui Kolom dengan Tombol

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

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
0 saham
saham
menciak
Register