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 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.
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, 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.
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.
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.
Saat mendesain halaman layanan Anda, Anda ingin memastikan bahwa pengunjung Anda memperhatikan semua layanan berbeda yang Anda sediakan. Dalam banyak kasus, ini hanya akan menjadi satu layanan spesifik yang mereka cari, tetapi jika Anda memberikan cara yang efisien dalam struktur layanan Anda, pengunjung Anda lebih cenderung memperlakukan mereka semua.
Dalam tutorial ini, kami akan menunjukkan cara berkreasi dengan efek gulir Divi dan membuat transisi layanan yang mulus. Anda juga dapat mendownload file JSON secara gratis!
Mari kita pergi.
Kemungkinan Hasil
Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.
1, buat ulang struktur elemen
Tambahkan bagian # 1
jarak
Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan ubah nilai padding pada ukuran layar yang berbeda.
Lapisan atas: 80px (desktop dan tablet), 0px (telepon)
Lapisan bawah: 80px
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan lebih banyak modul, buka parameter garis dan terapkan perubahan berikut pada parameter dimensi:
Gunakan lebar selokan khusus: Ya
Lebar selokan: 1
Lebar: 90%
Lebar maks: 1580px
jarak
Kemudian tambahkan margin atas dan bawah khusus.
Margin atas: 200px
Margin bawah: 200px
Tambahkan modul teks ke kolom 1
Tambahkan konten H2
Saatnya menambahkan modul, dimulai dengan modul teks di kolom 1. Masukkan konten H2 yang Anda inginkan.
Pengaturan teks H2
Buka tab desain modul dan ubah pengaturan teks H2 sebagai berikut:
Judul 2 Polisi: Triwulan
Header 2 Ukuran teks: 80px (desktop), 50px (tablet), 40px (telepon)
Tinggi baris 2 kepala: 1.2em
jarak
Kemudian tambahkan margin yang lebih rendah pada tablet dan telepon.
Margin bawah: 50 piksel (hanya tablet dan telepon)
Tambahkan modul teks ke kolom 2
Tambahkan konten
Mari beralih ke kolom kedua. Ada modul pertama yang kita butuhkan adalah modul teks dengan beberapa konten deskripsi.
Pengaturan teks
Beralih ke tab desain modul dan ubah pengaturan teks yang sesuai:
Font teks: kabin
Gaya font teks: huruf besar
Warna teks: # 000000
Ukuran teks: 18px (desktop), 15px (tablet), 13px (telepon)
Penempatan surat teks: 3px (desktop), 1px (tablet dan telepon)
Tinggi baris teks: 3em
Tambahkan modul pemisahan ke kolom 2
jarak penglihatan
Modul selanjutnya dan terakhir yang kita butuhkan pada kolom ini adalah modul separasi. Pastikan opsi "Tampilkan Pemisah" diaktifkan.
Tampilkan pemisah: Ya
Baris
Kemudian ubah warna garis modul.
Warna garis: # 000000
perekat
Kemudian buat beberapa perubahan pada parameter ukuran.
Berat pembagi: 3px
Lebar: 28%
jarak
Kami juga menambahkan margin teratas.
Margin atas: 10px
Tambahkan bagian # 2
jarak
Mari beralih ke bagian reguler berikutnya. Hapus bantalan atas default dari bagian tersebut.
Lapisan atas: 0px
overflows
Sembunyikan juga luapannya.
Overflow horisontal: disembunyikan
Overflow vertikal: disembunyikan
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris pertama menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan lebih banyak modul, buka parameter garis, akses parameter dimensi dan buat modifikasi berikut:
Gunakan lebar selokan khusus: Ya
Lebar selokan: 1
Menyamakan ketinggian kolom: Ya
Lebar: 90%
Lebar maks: 1580px
jarak
Kemudian hapus semua padding standar atas dan bawah.
Lapisan atas: 0px
Lapisan bawah: 0px
Pengaturan kolom 1
Warna latar belakang
Kemudian buka pengaturan untuk kolom 1 dan ubah warna latar belakang.
Warna Latar Belakang: # f7f7f7
jarak
Selesaikan pengaturan kolom dengan menambahkan nilai padding kustom pada ukuran layar yang berbeda.
Lapisan atas: 200px (meja), 100px (tablet dan telepon)
Lapisan bawah: 200px (meja), 100px (tablet dan telepon)
Bantalan kiri: 8%
Padding kanan: 8%
Pengaturan kolom 2
jarak
Lanjutkan dengan membuka pengaturan di kolom 2. Buka tab lanjutan dan tambahkan nilai padding kustom pada ukuran layar yang berbeda.
Lapisan teratas: 100px (desktop), 50px (tablet dan telepon)
Lapisan bawah: 200px
Padding kiri: 150 px (meja), 0 px (tablet dan telepon)
Tambahkan modul pemisahan ke kolom 1
jarak penglihatan
Pada kolom pertama, modul pertama yang kita butuhkan adalah modul separasi. Pastikan opsi "Tampilkan Pemisah" diaktifkan.
Tampilkan pemisah: Ya
Baris
Kemudian ubah warna garis modul.
Warna garis: # 000000
perekat
Juga buat perubahan pada parameter ukuran.
Berat pembagi: 3px
Lebar: 50%
Tambahkan modul teks ke kolom 1
Tambahkan konten H3
Modul berikutnya yang kita butuhkan dalam kolom 1 adalah modul teks dengan konten H3.
Pengaturan teks H3
Beralih ke tab desain modul dan ubah pengaturan teks H3:
Judul 3 Polisi: Triwulan
Warna teks item 3: # 000000
Item 3 Ukuran teks: 50px (desktop), 40px (tablet), 35px (telepon)
Tinggi baris 3 kepala: 1.1em
Tambahkan modul teks ke kolom 2
Tambahkan konten
Pada kolom kedua, modul pertama yang kita butuhkan adalah modul teks dengan beberapa konten deskripsi.
Pengaturan teks
Ubah pengaturan teks modul sebagai berikut:
Font teks: kabin
Gaya font teks: huruf besar
Ukuran teks: 18px (desktop), 15px (tablet), 13px (telepon)
Penempatan surat teks: 3px (desktop), 1px (tablet dan telepon)
Tinggi baris teks: 3em
Tambahkan modul tombol ke kolom 2
Tambahkan salinan
Modul berikutnya dan terakhir yang kita butuhkan adalah modul tombol. Masukkan salinan pilihan Anda.
Pengaturan tombol
Kemudian gaya tombolnya.
Gunakan gaya khusus untuk tombol: Ya
Ukuran teks tombol: 20 piksel
Warna teks tombol: #ffffff
Warna latar tombol: # 000000
Lebar batas tombol: 0px
Font Tombol: Triwulan
Berat font tombol: tebal
jarak
Tambahkan juga padding khusus.
Lapisan atas: 50px
Lapisan bawah: 50px
Padding kiri: 100px
Padding kanan: 100px
Posisi
Dan posisikan ulang tombol sesuai:
Posisi: Mutlak
Lokasi: kiri bawah
Kloning garis sebanyak yang diperlukan
Setelah Anda menyelesaikan seluruh baris dan semua modulnya, Anda dapat mengkloning seluruh baris tiga kali.
Ubah semua konten
Pastikan untuk mengedit semua konten dalam baris duplikat.
2. Terapkan efek gulir
Efek gulir baris pertama
Pergerakan horizontal
Setelah Anda menyelesaikan semua baris di bagian Anda, sekarang saatnya menambahkan efek scrolling. Buka baris pertama dari bagian tersebut dan tambahkan gerakan horizontal.
Aktifkan gerakan horizontal: Ya
Mulai offset: -5
Offset rata-rata: 0 (26%)
End offset: 0
Pemicu Efek Gerak: Bagian Tengah Elemen
Pudar masuk dan keluar
Juga gunakan efek fade masuk dan keluar.
Aktifkan fade in dan out: Ya
Opacity awal: 100%
Opacity rata-rata: 100% (pada 50%)
End opacity: 0% (hingga 53%)
Pemicu Efek Gerak: Bagian Tengah Elemen
Efek gulir baris tengah
Gerakan vertikal
Selanjutnya, kami akan menambahkan efek gulir ke semua baris antara baris pertama dan terakhir dari bagian tersebut. Pertama gunakan gerakan vertikal:
Aktifkan gerakan vertikal: Ya
Mulai offset: -4
Offset rata-rata: 0 (26%)
End offset: 0
Efek pemicu gerakan: bagian tengah elemen
Pudar masuk dan keluar
Aktifkan juga efek fade in dan out.
Aktifkan fade in dan out: Ya
Opacity awal: 0%
Opacity rata-rata: 100% (dari 27% hingga 50%)
Offset akhir: 0 (pada 53%)
Pemicu Efek Gerak: Bagian Tengah Elemen
Efek Gulir Baris Terakhir
Gerakan vertikal
Kemudian buka baris terakhir dari bagian dan tambahkan gerakan vertikal berikut:
Aktifkan gerakan vertikal: Ya
Mulai offset: -4
Offset rata-rata: 0 (26%)
End offset: 0
Pemicu Efek Gerak: Bagian Tengah Elemen
Pudar masuk dan keluar
Dengan efek memudar masuk dan keluar dan Anda selesai!
Aktifkan fade in dan out: Ya
Opacity awal: 0%
Opacity rata-rata: 100% (dari 27% hingga 50%)
End opacity: 100% (hingga 53%)
Pemicu Efek Gerak: Bagian Tengah Elemen
Hasil akhir
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
final pikiran
Dalam artikel ini, kami telah menunjukkan kepada Anda cara membuat transisi layanan yang indah dengan efek scrolling Divi. Bahkan sebelum satu servis menghilang, servis lainnya mulai muncul, memberikan transisi yang menyenangkan untuk dilihat. Pendekatan ini akan membantu Anda menyoroti setiap layanan pada tingkat individu. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
Saat membuat halaman Tentang Anda, Anda mungkin ingin memperkenalkan anggota tim Anda juga. Dengan demikian, Anda mengizinkan pengunjung untuk berinteraksi dengan orang-orang di belakang bisnis Anda. Jika Anda mencari cara untuk menghidupkan bagian anggota tim Anda pada gulungan, tutorial ini mungkin cocok untuk Anda. Kami akan membuat korsel anggota tim gulir otomatis yang bergerak saat pengunjung Anda menggulir laman.
Demonstrasi
Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.
Awal konsepsi
Tambahkan bagian baru
jarak
Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan tambahkan padding khusus pada ukuran layar yang berbeda.
Lapisan atas: 200px (meja), 100px (tablet dan telepon)
Lapisan bawah: 200px (meja), 100px (tablet dan telepon)
overflows
Untuk memastikan bahwa tidak ada bilah gulir horizontal yang muncul dalam desain kami, kami akan menyembunyikan luapan bagian di tab lanjutan.
Overflow horisontal: disembunyikan
Overflow vertikal: disembunyikan
Tambahkan baris # 1
Struktur kolom
Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris, alihkan ke tab desain, lalu ubah lebar dan lebar maksimum dalam pengaturan ukuran.
Lebar: 90%
Lebar maks: 1580px
jarak
Kami juga menambahkan lapisan atas dan bawah khusus.
Lapisan atas: 100px
Lapisan bawah: 100px
Tambahkan modul teks ke kolom
Tambahkan konten H2
Saatnya menambahkan modul, dimulai dengan modul teks pertama. Masukkan konten H2 pilihan Anda.
Pengaturan teks H2
Buka tab desain modul dan ubah pengaturan teks H2 sebagai berikut:
Judul font 2: Pasir hisap
Judul font 2: semi-tebal
Warna teks item 2: # 000000
Header 2 Ukuran teks: 70px (desktop), 50px (tablet), 40px (telepon)
Tambahkan modul pemisahan ke kolom
jarak penglihatan
Kemudian tambahkan modul pemisah. Pastikan opsi "Tampilkan Pemisah" diaktifkan.
Tampilkan pemisah: Ya
Baris
Kemudian buat beberapa perubahan pada pengaturan garis.
Warna garis: # edf000
Gaya garis: solid
Posisi Baris: Atas
perekat
Dan lengkapi parameter modul dengan memodifikasi parameter dimensi sesuai:
Berat pembagi: 20px
Lebar: 11%
Perataan modul: kiri
Tinggi: 20px
Tambahkan baris # 2
Struktur kolom
Ke baris berikutnya! Gunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul, buka parameter garis dan modifikasi parameter dimensi sebagai berikut:
Gunakan lebar selokan khusus: Ya
Lebar selokan: 2
Lebar: 100%
Lebar maks: 100%
jarak
Kemudian tambahkan padding kiri dan kanan pada layar yang lebih kecil saja.
Padding kiri: 5% (hanya tablet dan telepon)
Padding kanan: 5% (hanya tablet dan telepon)
Parameter kolom (5x)
Sekarang, dalam tiga langkah selanjutnya dari tutorial ini, kita akan membuat beberapa perubahan pada kolom. Terapkan tiga langkah ke setiap kolom di baris Anda.
Latar belakang gradien
Pertama, tambahkan latar belakang gradien ke setiap kolom.
Warna 1: rgba (255,255,255,0)
Warna 2: rgba (0,0,0,0,84)
Jenis gradien: linier
Posisi Mulai: 25%
Posisi Akhir: 86%
Tempatkan gradien di atas gambar latar belakang: Ya
Gambar latar belakang
Kemudian unggah gambar latar pilihan Anda. Gambar latar ini mewakili setiap anggota tim, jadi gunakan gambar yang berbeda untuk setiap kolom.
Ukuran Gambar Latar Belakang: Sampul
Posisi gambar latar belakang: Tengah
Elemen Utama
Selesaikan pengaturan kolom dengan menambahkan CSS khusus ke elemen tablet utama di setiap kolom. Baris kode CSS ini akan membantu kita menempatkan kolom satu di bawah yang lain pada tablet, alih-alih memiliki dua kolom secara berdampingan.
Untuk berbagi informasi tentang anggota tim, kami akan menggunakan modul Person. Tambahkan modul Orang pertama ke kolom 1 dan gunakan konten apa pun yang Anda inginkan.
Hapus gambar
Kemudian hapus gambar tersebut. Kami menggunakan gambar latar belakang kolom sebagai gantinya.
Gambar latar belakang
Kami kemudian akan menambahkan overlay gambar sebagai gambar latar belakang modul. Anda dapat menemukan yang kami gunakan dengan mengunduh folder di awal tutorial ini.
Ukuran Gambar Latar Belakang: Sampul
Posisi gambar latar belakang: Tengah
Pengaturan teks judul
Buka tab desain modul dan ubah pengaturan teks judul sebagai berikut:
Tingkat judul: H3
Font judul: Pasir hisap
Berat font judul: tebal
Warna teks judul: #ffffff
Ukuran teks judul: 230%
Pengaturan teks tubuh
Juga ubah pengaturan teks isi.
Font Tubuh: Buka Sans
Warna teks badan: #ffffff
Tinggi garis tubuh: 2,2 em
Pengaturan teks posisi
Kemudian buat beberapa perubahan pada pengaturan teks posisi.
Posisi Font: Buka Sans
Warna teks posisi: # edf000
jarak
Dan selesaikan pengaturan modul dengan menambahkan nilai padding kustom ke pengaturan jarak.
Lapisan atas: 70%
Bantalan bawah: 10%
Bantalan kiri: 10%
Padding kanan: 10%
Gandakan modul Person 4 kali
Setelah Anda menyelesaikan modul Person, Anda dapat mengkloning seluruh modul empat kali.
Tempatkan duplikat di kolom lainnya
Tempatkan modul duplikat di empat kolom baris yang tersisa. Pastikan untuk mengedit kontennya juga.
Ubah Baris menjadi Korsel Gulir Otomatis
Ubah ukuran garis # 2
Sekarang, untuk mengubah baris ini menjadi carousel anggota tim yang menggulir otomatis, kita perlu membuka kembali pengaturan baris dan mengubah lebar dan lebar maksimum dalam pengaturan ukuran.
Lebar: 180%
Lebar maksimum: 220% (meja), 100% (tablet dan telepon)
Tambahkan gerakan horizontal garis # 2
Selesaikan pengaturan garis dengan menambahkan gerakan horizontal ke pengaturan efek gulir di tab lanjutan dan selesai!
Aktifkan gerakan horizontal: Ya
Mulai offset:
Kantor: 2,5
Tablet dan telepon: 0
Offset rata-rata: 0 (40%)
End offset:
Kantor: -25 (pada 62%)
Tablet dan telepon: 0
Pemicu Efek Gerak: Bagian Tengah Elemen
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
Biro
final pikiran
Dalam tutorial ini, kami telah menunjukkan kepada Anda cara berkreasi dengan efek gulir bawaan Divi. Secara khusus, kami telah membuat ulang carousel anggota tim yang menggulir otomatis dan indah. Saat pengunjung menggulir ke bawah halaman, bagian lain dari carousel akan muncul.
Divi memungkinkan Anda mengontrol dan mendesain setiap detail situs web Anda, dari header hingga footer. Salah satu elemen yang paling banyak diklik dari situs web mana pun adalah ikon media sosial. Pemirsa yang terlibat ingin menemukan Anda di tempat lain dan mengenal Anda. Tentunya, Anda pasti ingin membuatnya semudah mungkin.
Jadi, kami akan menunjukkan kepada Anda cara mengaktifkan ikon media sosial tambahan di opsi tema Divi, cara menggunakan Divi Builder untuk menyisipkan ikon media sosial di mana saja pada halaman atau kiriman, dan cara memanfaatkan kekuatannya. dari tema Divi Builder untuk menambahkan ikon media sosial ke setiap sudut dan celah situs Anda.
Cara mudah mengaktifkan ikon media sosial tambahan di footer Divi
Cara termudah untuk menambahkan lebih banyak ikon media sosial ke situs Divi Anda adalah dengan membuka panel Opsi tema , mengaktifkan opsi untuk Facebook, Twitter, Instagram, dan RSS. Kemudian yang harus Anda lakukan adalah memasukkan URL profil Anda di kolom isian. Saat Anda melakukannya, Anda akan melihatnya muncul sebagai tautan ikon di footer situs Anda:
Di menu dasbor WordPress Anda, buka Divi - Opsi tema dan klik tab Général . Gulir ke bawah untuk melihat sakelar jaringan. Selain itu, tepat di bawah matikan tersebut, pastikan untuk memasukkan URL untuk setiap ikon sosial Divi yang Anda aktifkan. Jika tidak, ikon akan muncul, tetapi mengekliknya akan menyebabkan pengguna tidak ada di mana pun. Menggunakan sebuah # alih-alih URL akan membuat pengguna tetap di halaman daripada berpotensi mengarahkan mereka ke Halaman 404 .
Gulir ke akhir opsi tema Anda dan klik Simpan Perubahan . Sekarang Anda dapat pergi ke footer situs Anda dan klik pada ikon sosial untuk mengujinya!
Jika Anda tidak melihat ikon di footer Anda, pastikan untuk memeriksa penyesuai tema Anda di bawah Penampilan - Sesuaikan dan pastikan itu Tampilkan ikon sosial diperiksa di bawah opsi footer.
Namun, jika Anda menginginkan lebih banyak opsi untuk ikon footer sosial, terus gulir ke bawah ke bagian kami di Divi Theme Builder tempat kami membahas templat khusus dan default keseluruhan.
Cara menggunakan Divi Builder untuk menambahkan pelacak media sosial ke halaman atau mempublikasikan konten
Terkadang menempatkan ikon media sosial tambahan di antara blok teks, gambar, atau konten lain di badan halaman atau posting bisa sangat masuk akal. Halaman arahan Anda atau halaman Tentang, misalnya, akan menjadi tempat yang baik untuk menambahkan ikon sosial tambahan untuk memberi tahu pengunjung cara terhubung dengan Anda. Mereka pasti akan menonjol lebih dari sekedar menautkan ke profil sosial Anda menggunakan teks biasa. Selain itu, orang mencari ikon yang dapat dikenali.
Anda dapat menggunakan Divi Builder untuk memasukkan ikon media sosial langsung ke halaman atau posting Anda menggunakan pelacakan media sosial .
Setiap kali Anda membuat atau membuka halaman atau artikel yang ada di dashboard WordPress Anda, Anda akan melihat tombol ungu besar yang menanyakan apakah Anda ingin menggunakan Divi Builder atau tidak.
Dan tentu saja. Klik saja Gunakan Divi Builder untuk mulai membangun halaman Anda atau memposting dari awal (atau dari salah satu tata letak yang telah ditentukan ). Selain itu, Anda dapat menyertakan ikon media sosial Divi jika Anda menggunakan editor WordPress default. Yang perlu Anda lakukan hanyalah memasukkan satu blok Tata letak divi dan ikuti langkah-langkah yang sama seperti yang kita ikuti di bawah ini.
Anda dapat menggunakan alat ini untuk mendesain halaman atau posting Anda sesuai keinginan menggunakan modul pembuat halaman yang tersedia. Jika ini adalah pertama kalinya Anda menggunakan Divi Builder, Anda mungkin ingin melihat ikhtisar ini terlebih dahulu untuk mendapatkan pemahaman yang jelas tentang cara kerjanya.
Saat Anda siap untuk menambahkan ikon media sosial ke halaman Anda, klik lingkaran hitam + di bagian tempat Anda ingin meletakkan ikon media sosial Anda dan gulir hingga kotak pelacakan media sosial muncul.
Anda akan diminta untuk memilih jejaring sosial yang Anda inginkan sebelum Anda dapat mulai mempersonalisasikannya. Klik Tambahkan jejaring sosial baru .
Kemudian pilih satu dari daftar drop-down.
Dengan itu, tambahkan URL profil Anda. Secara opsional, Anda dapat memilih warna, gradien, latar belakang, dll. khusus untuk ikonnya.
Setelah Anda menambahkan jejaring sosial pertama Anda, Anda dapat terus menambahkan jejaring lain dengan mengikuti langkah-langkah yang sama ini. Semuanya akan terdaftar di bawah tab Isi dari pengaturan pelacakan media sosial . Anda dapat mengedit, menyalin, atau mengatur ulang dengan menyeret dan melepaskannya ke tempatnya.
Setelah Anda menambahkan jejaring sosial Anda, beralihlah ke tab Isi et Pembuahan untuk bermain dengan opsi penyesuaian lainnya. Anda dapat mengubah semuanya mulai dari bayangan kotak, radius batas, jarak, filter, dan bahkan animasi intro untuk modul ikon. Anda juga memiliki opsi untuk menyertakan tombol Mengikuti agar semua ikon Anda menarik lebih banyak perhatian padanya. Setelah Anda selesai, klik centang hijau .
Anda kemudian dapat memindahkan ikon di sekitar halaman Anda, mengerjakan spasi dan tata letaknya sesuai keinginan Anda. (Itu Opsi transformasi divi sungguh luar biasa untuk itu, omong-omong.) Ketika Anda puas dengan semua keputusan Anda, tekan tombol hijau Simpan (atau Publikasikan) tombol di pojok kanan bawah untuk mendaftarkan modul ikon media sosial baru Anda. Jika Anda tidak melihat tombol Publikasikan / Simpan, ketuk ellipsis ungu (tiga titik) di bagian tengah bawah layar untuk memperluas menu.
Setelah itu, ikon media sosial Anda akan tayang langsung di situs Anda.
Menggunakan Divi Theme Builder untuk menambahkan ikon media sosial
Seperti yang kami sebutkan di atas, Divi Theme Builder adalah alat canggih yang memberi Anda kendali penuh atas hampir setiap aspek situs Anda. Jadi, jika Anda ingin menambahkan ikon media sosial di mana saja, pembuat tema telah membantu Anda.
Untuk memulai dengan generator tema, buka Divi - Generator tema di dashboard WordPress Anda.
Ini sangat banyak tentang menambahkan ikon media sosial ke tata letak generator tema Divi yang ada. Atau yang baru! Tidak masalah apakah Anda menambahkan ke header, footer, atau keseluruhan isi situs Anda - atau bahkan kategori tertentu atau jenis halaman khusus lainnya. Anda akan mengikuti proses yang sama.
Pertama kita akan menemukan bagian yang ingin kita tambahkan. Sekali lagi, ini bisa bersifat global atau dipersonalisasi. Jika Anda belum pernah menggunakan pembuat tema sebelumnya, itu mudah. Kami akan menambahkan ikon media sosial ke setiap posting. Oleh karena itu, Anda dapat memulai dengan mengklik Tambahkan model baru dan memilih Semua pesan ou Pesan dalam kategori tertentu . Kemudian centang kategori yang ingin Anda sertakan. Kemudian klik Buat template .
Jika Anda sudah menyiapkan template, cukup klik Edit pensil atau klik dua kali pada bagian yang ingin Anda modifikasi.
Proses menambahkan ikon media sosial di sini sama seperti yang dijelaskan di atas di generator. Namun, karena Anda menggunakan pembuat tema alih-alih hanya mengedit satu halaman, ikon tidak akan muncul tepat di tempat yang Anda pilih. Template dapat ditambahkan ke header, footer, dan template global. Dan Anda dapat memilih bagaimana dan kapan mereka muncul tanpa harus mengkonfigurasinya sekali. Bukan halaman demi halaman, seperti yang Anda lakukan di atas.
Misalnya, jika kita ingin memasukkan ikon media sosial di bawah judul posting, tetapi di atas konten posting pada setiap posting blog yang kita terbitkan, kita tinggal menambahkan modul ke mengikuti jaringan sosial. Klik di lingkaran Noir + dan pilih di dialog Masukkan modul .
Kemudian cukup seret modul ke tempat Anda ingin ikon media sosial muncul. (Kami menggunakan mode wireframe untuk penempatan ini). Kemudian Anda hanya perlu menambahkan jejaring sosial yang ingin Anda tampilkan. Kemudian Anda menyesuaikan ukuran dan pewarnaan seperti yang Anda lakukan di atas.
Dan begitu saja, Anda menambahkan beberapa ikon media sosial ke generator tema Divi. Mereka akan muncul di setiap entri blog yang Anda buat (dalam contoh ini).
Dan jika Anda tidak menyukai tampilannya, generator tema mudah disesuaikan. Seret saja ke lokasi lain, seperti bagian atas bar samping.
Pastikan untuk mengklik tombol hijau Register di sudut. Sekarang setiap posting blog dengan template ini di situs akan diunggah dengan ikon media sosial Anda di bagian atas sidebar.
Menambahkan ikon media sosial ke header dan footer dengan Divi Theme Builder
Mungkin ikon media sosial default dalam pengaturan Divi tidak berfungsi untuk Anda atau tidak menawarkan penyesuaian yang cukup. Jika demikian, Anda selalu dapat menggunakan pembuat tema untuk menyesuaikannya dengan lebih lengkap.
Di template apa pun, Anda dapat menambahkan footer kustom. Ini akan menggantikan Divi default. Template apa pun tanpa template kustom akan menampilkan elemen tema default. Ikon media sosial mungkin berbeda dari arsip posting ke halaman, tergantung pada kebutuhan pengguna Anda.
Anda juga dapat menambahkan footer global yang akan diganti semua footer lain yang Anda buat. (Ini juga berlaku untuk badan dan header global).
Jika Anda telah merancang 4 footer khusus untuk Postingan, Halaman, Proyek, dan Kategori, tetapi kemudian membuat Footer Global, hanya Footer Global yang akan ditampilkan.
Template global bagus untuk ikon media sosial di seluruh situs, mungkin untuk surat kabar atau merek. Sementara templat yang dipersonalisasi dengan ikon sosial mungkin yang terbaik untuk pembuat individu yang merupakan bagian dari jaringan.
Dengan menggunakan Divi Builder for Custom Headers, Footers, dan Body Templates, Anda dapat menambahkan ikon media sosial ke hampir semua bagian Divi yang Anda inginkan. Anda tidak terbatas pada desain default atau harus menggali sistem file WordPress. Selain itu, dengan generator tema, Anda dapat menggunakan salah satu opsi desain Divi untuk mempercantik ikon media sosial dan membuatnya menonjol dengan cara yang benar untuk setiap audiens tertentu.
Kesimpulan
Saat Anda memiliki opsi footer Divi default, alat Divi Builder untuk posting dan halaman, kekuatan Divi Theme Builder, tidak ada alasan mengapa Anda perlu menginstal sebuah plugin untuk menambahkan ikon media sosial ke situs web Anda. Divi memberi Anda kendali penuh atas bagaimana ikon sosial Anda terlihat dan di mana mereka berada.
Apakah Anda perlu mempromosikan merek, penulis tamu, pembuat konten stabil, atau hanya tempat di mana Anda dapat ditemukan secara online, Divi memiliki cara untuk melakukannya. Kami sepihak, tetapi menurut kami ini adalah cara termudah, termudah, dan paling bergaya untuk menambahkan ikon media sosial ke situs web Anda.
Cara Anda mendesain halaman produk berdampak langsung pada perilaku pengunjung Anda. Desain halaman produk yang dibuat dengan baik dan dipersonalisasi dapat memudahkan pengunjung untuk memutuskan apakah mereka ingin membeli produk Anda. Jika Anda mencari cara untuk membuat halaman produk Anda lebih menarik, Anda mungkin akan menyukai tutorial ini.
Kami akan menunjukkan cara menyertakan kisi manfaat produk dinamis dalam desain Anda menggunakan Divi dan plugin Bidang Kustom Lanjutan. Kami akan mulai dengan membuat sekelompok bidang untuk keuntungan. Kami kemudian akan mengisi kolom kustom di halaman produk kami dan menyertakan konten dinamis di template halaman produk kami.
Kemungkinan Hasil
Sebelum kita menyelami tutorialnya, mari kita lihat sekilas hasil pada ukuran layar yang berbeda.
1. Instal plugin ACF dan plugin Field Field Manfaat Produk
Instal plugin Advanced Customs Fields
Untuk menampilkan berbagai manfaat produk di backend produk kami, kami akan menggunakan plugin Advanced Custom Fields gratis. Akses Anda Backend WordPress> Plugin> Tambah baru> Temukan plugin ACF> Pasang> Aktifkan .
Buka bidang khusus dan tambahkan grup bidang baru
Setelah Anda menginstal dan mengaktifkan plugin ACF, Anda akan dapat mengakses bidang khusus Anda dan menambahkan kelompok bidang baru.
Pengaturan grup bidang
Beri judul pada grup bidang baru Anda dan izinkan untuk muncul hanya di halaman produk.
"Jenis pesan" sama dengan "Produk"
Tambahkan bidang pertama
Lanjutkan dengan menambahkan bidang baru untuk judul manfaat produk pertama Anda.
Label Bidang: Judul Manfaat 1
Jenis bidang: teks
Ulangi langkah tersebut untuk bidang yang tersisa
Lakukan hal yang sama untuk manfaat lain dari produk dan deskripsinya. Semua bidang ini membutuhkan jenis bidang "Teks" yang ditetapkan padanya.
Judul layanan 1
Deskripsi manfaat 1
Judul layanan 2
Deskripsi manfaat 2
Judul layanan 3
Deskripsi manfaat 3
Judul layanan 4
Deskripsi manfaat 4
2. Tambahkan manfaat ke produk
Buka atau tambahkan produk baru
Setelah grup bidang dan bidang Anda dibuat, Anda dapat menambahkan manfaat produk ke produk Anda di tingkat individu. Buka produk pilihan Anda atau buat yang baru.
Isi bidang Manfaat Produk
Dan memenuhi manfaat produk.
3. Buat templat halaman produk di Divi Theme Builder
Pergi ke Pembuat Tema Divi dan tambahkan templat baru
Saatnya memulai dengan Divi! Untuk membuat template baru, buka Divi Theme Builder dan klik "Tambahkan template baru".
Gunakan templat pada semua produk
Kami menggunakan template ini di semua produk, tetapi silakan pilih produk dengan kategori atau label tertentu.
Masuk ke editor template tubuh model
Lalu masukkan tubuh model dengan mengklik "Tambahkan tubuh kustom" dan pilih "Buat tubuh kustom".
Edit bagian # 1
Warna latar belakang
Setelah masuk ke dalam editor template, Anda akan melihat bagian. Buka bagian itu dan ubah warna latar belakang menjadi hitam.
Warna Latar Belakang: # 000000
jarak
Pindah ke tab desain bagian dan tambahkan beberapa padding kustom atas dan bawah.
Lapisan Atas: 10px
Bantalan Bawah: 10px
Tambahkan baris baru
Struktur kolom
Mari kita lanjutkan dengan menambahkan baris baru ke bagian yang memiliki struktur berikut:
jarak
Tanpa menambahkan mod apa pun, mari buka pengaturan baris dan lakukan beberapa penyesuaian jarak.
Pakai Talang yang Dipersonalisasi: Ya
Lebar selokan: 1
Lebar: 90%
Lebar maksimum: 100%
jarak
Hapus semua jarak internal atas dan bawah.
Margin Internal Tinggi: 0px
Margin Internal Rendah: 0px
Tambahkan modul Pemberitahuan Woo Cart ke kolom
Konten Dinamis
Satu-satunya modul yang kita butuhkan pada baris dan bagian ini adalah modul Woo Cart Notice. Pastikan "Produk Ini" dipilih di bagian dinamis.
Produk: Produk Ini
Latar belakang warna
Kemudian buka pengaturan modul dan gunakan latar belakang transparan.
Warna Latar Belakang: rgba (0,0,0,0)
Pengaturan teks
Beralih ke tab "Desain" dan ubah font teks.
Font Teks: Karla
Pengaturan tombol
Selesaikan pengaturan plugin dengan menetapkan pengaturan gaya:
Gunakan Gaya Kustom Untuk Tombol: Ya
Tombol Ukuran Teks: 20px
Warna Teks Tombol: # 000000
Latar Belakang Tombol: # ffd623
Lebar batas tombol: 0px
Tombol pembatas bulat: 0px
Fon tombol: Oswald
Tombol Font Style: Shift
Margin Internal Tinggi: 20px
Margin Internal Rendah: 20px
Margin Internal Kiri: 50px
Margin Kanan Internal: 50px
Tambahkan bagian # 2
Latar belakang gradien
Tambahkan bagian reguler lain di bawah yang sebelumnya. Kemudian buka pengaturan dan gunakan latar belakang gradien sebagai berikut:
Warna 1: # 000000
Warna 2: #ffffff
Posisi awal:
Desktop: 30%
Tablet: 57%
Telepon: 54%
Posisi Akhir:
Desktop: 30%
Tablet: 57%
Telepon: 54%
jarak
Mari pergi ke tab Desain dan tambahkan margin internal yang tinggi.
Lapisan Atas: 150px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru dengan struktur yang sama seperti yang ditunjukkan di bawah ini:
perekat
Tanpa menambahkan mod apa pun, kami akan membuka pengaturan dan mengubah spasi sebagai berikut:
Gunakan talang khusus: Ya
Ruang selokan: 1
Lebar: 95%
Lebar maksimum: 2560px
Penyelarasan Baris: Tengah
Jarak
Kami akan menghapus margin internal atas juga.
Lapisan Atas: 0px
Elemen Utama
Dan untuk memusatkan konten kolom di Desktop, kita akan menggunakan dua baris kode CSS di elemen utama modul baris.
Desktop:
display: flex; menyelaraskan-item: pusat;
Tablet & Telepon:
display: block;
Tambahkan modul Woo Image ke kolom 1
Konten Dinamis
Saatnya menambahkan modul, kita akan mulai dengan modul Gambar Woo di kolom 1. Pastikan “Produk ini” dipilih.
Produk: Produk Ini
Efek animasi scrolling vertikal
Kami menambahkan gerakan halus ke gambar menggunakan efek gulir gerakan horizontal di tab lanjutan.
Aktifkan gerakan vertikal: Ya
Mulai offset:
Kantor: -4
Tablet dan telepon: 0
Offset rata-rata: 0
End offset: 0
Pemicu Efek Gerak: Bagian Tengah Elemen
Tambahkan modul judul Woo ke kolom 2
Konten dinamis
Di kolom 2, mod pertama yang kita butuhkan adalah mod judul Woo. Pastikan "Produk ini" dipilih di area konten dinamis.
Produk: Produk ini
Pengaturan teks judul
Lalu buka tab desain dan beri gaya teks judul sebagai berikut:
Font judul: Oswald
Gaya font judul: huruf besar
Warna teks judul: # ffd623
Ukuran teks judul: 80px
jarak
Lengkapi modul judul Woo dengan menambahkan margin kiri dan kanan.
Margin kiri: 5%
Margin kanan: 5%
Tambahkan modul deskripsi Woo ke kolom 2
Konten dinamis
Mari beralih ke modul berikutnya, yaitu modul deskripsi Woo. Kami menggunakan konten dinamis berikut untuk ini:
Produk: Produk ini
Jenis keterangan: Deskripsi singkat
Pengaturan teks
Beralih ke tab desain modul dan ubah pengaturan teks yang sesuai:
Font Teks: Karla
Warna teks: #dbdbdb
Ukuran teks: 17 px (desktop dan tablet), 15 px (telepon)
Tinggi baris teks: 1,9 em
perekat
Kemudian ubah lebar pada ukuran layar yang berbeda.
Lebar: 59% (desktop), 82% (tablet dan telepon)
jarak
Selesaikan modul deskripsi Woo dengan menambahkan nilai margin kustom di pengaturan jarak.
Margin atas: 50px
Margin bawah: 100px
Margin kiri: 5%
Margin kanan: 5%
Tambahkan modul Blurb ke kolom 2
Konten dinamis
Untuk menampilkan manfaat produk yang kami tambahkan di bagian pertama tutorial ini, kami akan menggunakan modul Blurb. Tambahkan modul Blurb pertama dan gunakan konten dinamis dari manfaat pertama yang dihasilkan untuk judul dan isi.
Judul: Judul Manfaat 1
Badan: Uraian Manfaat 1
Upload Gambar
Unggah gambar atau gunakan ikon pilihan Anda berikutnya. Anda dapat menemukan yang kami gunakan di seluruh tutorial ini di folder unduhan yang dapat Anda unduh di awal tutorial ini.
Pengaturan Gambar / Ikon
Pindah ke tab desain modul dan ubah pengaturan gambar / ikon sebagai berikut:
Penempatan Gambar / Ikon: Atas
Penjajaran Gambar / Ikon: Kiri
Pengaturan Teks Judul
Kami mengubah pengaturan teks judul selanjutnya.
Font Judul: Oswald
Judul Font Style: Huruf Besar
Judul Ukuran Teks: 25px
Pengaturan Teks Tubuh
Seiring dengan pengaturan teks tubuh.
Font Tubuh: Karla
Ukuran teks: 17 px (desktop dan tablet), 15 px (telepon)
Tinggi garis tubuh: 1,9 em
perekat
Lalu pergi ke pengaturan ukuran dan ubah lebarnya. Penting untuk menggunakan lebar utama kurang dari 50%, ini akan memungkinkan kita untuk menampilkan dua modul Blurb secara berdampingan di langkah berikutnya.
Lebar Gambar: 25%
Lebar: 49%
jarak
Kami juga akan menambahkan spasi di sekitar modul Blurb menggunakan nilai padding khusus pada ukuran layar yang berbeda.
Lapisan atas: 8%
Bantalan bawah: 8%
Padding kiri: 8% (desktop dan tablet), 2% (telepon)
Lapisan kanan: 8% (desktop dan tablet) 2% (telepon)
Elemen utama
Sekarang kita akan memastikan bahwa modul Ringkasan menampilkan teks di samping satu sama lain, dalam dua langkah. Pertama, kita akan memastikan lebar modul kurang dari 50% (seperti yang kita lakukan di langkah sebelumnya). Selanjutnya, kita akan menggunakan properti di baris tersebut. Kami akan menambahkan properti CSS ini pada elemen utama di bagian lanjutan.
display: inline-block;
Kloning modul ringkasan 3 kali
Setelah Anda menyelesaikan mod Blurb pertama, Anda dapat mengkloningnya tiga kali. Anda secara otomatis akan melihat bahwa modul Blurb muncul dalam sebuah grid.
Edit gambar modul Blurb
Edit gambar di setiap pod Blurb duplikat. Anda dapat menemukannya di folder unduhan yang mungkin telah Anda unduh di awal artikel ini.
Ubah konten dinamis dari modul Blurb
Juga modifikasi konten dinamis dari setiap modul Blurb duplikat.
Judul: Judul layanan (2,3 atau 4)
Badan: deskripsi keuntungan (2,3 atau 4)
Tambahkan batas ke modul Blurb satu per satu
Blurb pengaturan modul 1 perbatasan
Sekarang, untuk menyelesaikan mendesain grid kita, kita akan menambahkan batas ke modul Blurb pada tingkat individu. Buka mod Blurb pertama dan gunakan garis tepi lurus.
Lebar batas kanan: 1px
Warna tepi kanan: # ffd623
Tambahkan juga batas bawah ke modul Blurb pertama.
Lebar batas bawah: 1px
Warna batas bawah: # 000000
Blurb pengaturan modul 2 perbatasan
Kemudian buka modul Blurb kedua dan gunakan batas bawah.
Lebar batas bawah: 1px
Warna batas bawah: # 000000
Blurb pengaturan modul 3 perbatasan
Lengkapi desain kisi dengan menambahkan garis lurus ke modul Blurb ketiga.
Lebar batas kanan: 1px
Warna tepi kanan: # ffd623
Tambahkan Modul Tambahkan ke keranjang di kolom 2
Konten dinamis
Modul terakhir yang kita butuhkan dalam desain kita adalah modul Woo Add to Cart. Pastikan "Produk ini" dipilih di area konten dinamis.
Produk: Produk ini
Pengaturan bidang
Buka tab desain berikutnya dan ubah pengaturan bidang.
Warna latar belakang bidang: #ffffff
Warna teks bidang: # 000000
Bidang bundar: 0px (semua sudut)
Lebar batas bawah bidang: 1px
Warna batas bawah bidang: # 000000
Pengaturan tombol
Kemudian, gaya tombol sesuai:
Gunakan gaya khusus untuk tombol: Ya
Ukuran teks tombol: 20 piksel
Warna teks tombol: # 000000
Warna latar tombol: # ffd623
Lebar batas tombol: 0px
Jari-jari batas tombol: 0px
Fon tombol: Oswald
Gaya font tombol: huruf besar
Lapisan atas: 20px
Lapisan bawah: 20px
Padding kiri: 50px
Padding kanan: 50px
jarak
Dan lengkapi parameter modul dengan menambahkan nilai margin khusus.
Margin atas: 100px
Margin kiri: 5%
3. Simpan modifikasi generator tema dan pratinjau hasilnya
Setelah selesai mendesain templat halaman produk, Anda dapat menyimpan semua perubahan Pembangun Tema dan menampilkan hasilnya pada produk Anda!
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
final pikiran
Pada artikel ini, kami telah menunjukkan kepada Anda cara berkreasi dengan templat halaman produk Divi Anda berikutnya. Secara khusus, kami telah menunjukkan kepada Anda cara menyertakan kisi manfaat produk dinamis untuk menambahkan manfaat tambahan ke halaman produk Anda. Kami membuat tutorial ini menggunakan Divi yang dikombinasikan dengan plugin Advanced Custom Fields. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
Mode Gelap terus mendapatkan popularitas sebagai opsi yang nyaman bagi pengguna untuk menjelajahi web dengan lebih sedikit ketegangan pada mata. Mari kita hadapi itu, kita semua cenderung menghabiskan lebih banyak waktu untuk menatap layar daripada yang seharusnya, jadi kenyamanan tambahan apa pun pada pengalaman pengguna (seperti mode gelap) bisa sangat bermanfaat.
Sistem operasi, program, dan browser biasanya menyertakan kemampuan mode gelap bawaan, tetapi beberapa pengembang membawanya ke level lain dengan menyertakan pengalaman mode gelap khusus untuk situs web mereka. Idenya adalah untuk mengambil lebih banyak kendali atas tampilan situs web mereka dalam mode gelap tanpa harus berkompromi dengan branding dan / atau desain.
Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat sakelar mode gelap khusus di Divi dari awal tanpa plugin. Dengan fitur sakelar mode gelap ini, Anda akan memiliki kendali atas desain mode gelap dan memiliki pengalaman pengguna yang lebih baik yang disesuaikan dengan merek Anda.
Mari kita mulai!
penelitian
Berikut adalah pratinjau desain yang akan kami buat dalam tutorial ini.
Ini adalah mode kustom gelap toggle yang akan kita buat.
Dan inilah sebelum dan sesudah untuk mode gelap yang diterapkan ke salah satu tata letak kami yang telah ditentukan.
Dan inilah tombol mode gelap yang ditambahkan ke header global. Perhatikan bagaimana mode terang / gelap tetap ada saat Anda menjelajahi situs.
Bagian 1: Membangun saklar dari mode gelap
Di bagian pertama tutorial ini, kita akan membuat mode gelap beralih dengan halaman di Divi. Setelah sakelar dibuat dengan kode, Anda akan dapat menyimpannya di perpustakaan Divi dan menambahkannya ke tempat mana pun di situs web Anda.
Untuk memulai, tambahkan satu baris kolom ke bagian default saat membangun dari awal dengan Divi di ujung depan.
Tambahkan Modul Ringkasan
Untuk membangun custom toggle, kita akan merancang modul Blurb dengan sedikit CSS khusus.
Tambahkan modul teks presentasi baru ke baris.
Isi
Hapus konten dummy default untuk judul dan badan. Kemudian tambahkan ikon persegi di tempat gambar.
Pembuahan
Buka pengaturan desain dan perbarui yang berikut:
Warna Ikon: # 666666
Penjajaran gambar / ikon: kiri
Ukuran font ikon: 22 piksel
Lebar: 50px
Penyelarasan modul: pusat
Tinggi: 25px
Margin: 0px rendah
Sudut membulat: 4px
Lebar perbatasan: 2px
Warna tepi: # 666666
CSS khusus
Setelah desain dipasang, beralih ke tab lanjutan. Di bawah CSS Khusus, tambahkan CSS khusus berikut ke elemen utama untuk memastikan luapan tidak terhalang oleh gaya sudut membulat.
overflow: terlihat! penting;
Kemudian tambahkan CSS khusus berikut ke elemen After:
Ini menambahkan label ke modul Blurb yang akan kita ubah dari "terang" menjadi "gelap" saat klik.
Desain teks tubuh
Karena teks elemen semu posting mewarisi gaya teks tubuh, kita dapat menambahkan gaya teks tubuh menggunakan opsi Divi sebagai berikut:
Jenis Huruf Tubuh: Roboto
Warna teks isi: # 666666
Ukuran teks isi: 13px
Spasi huruf-huruf tubuh: 1px
Menambahkan kode khusus dengan modul kode
Untuk menambahkan kode yang diperlukan (CSS / JQuery) untuk mengoperasikan mode gelap toggle, kita akan menggunakan modul kode.
Buat modul kode baru di bawah modul Blurb di kolom yang sama.
Kemudian rekatkan kode berikut di area kode:
/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});
Menambahkan kelas CSS khusus
Kode kustom mengharuskan Anda untuk menambahkan kelas CSS kustom ke modul atau sakelar Blurb. Ini akan memungkinkan uraian untuk memicu fungsi beralih mode gelap dan saat diklik.
Blurb kelas modul
Buka pengaturan modul Blurb dan tambahkan kelas CSS khusus sebagai berikut:
Kelas CSS: et-dark-toggle
Kelas mampu mode gelap
Kita juga perlu menambahkan kelas CSS khusus ke setiap elemen Divi yang kita ingin memiliki kemampuan mode gelap. Setelah elemen memiliki kelas CSS, elemen tersebut akan mewarisi CSS "mode gelap" kustom dalam kode yang kami tambahkan setelah mode gelap diaktifkan. Metode ini memberi kita lebih banyak kendali atas desain mode gelap kita, karena beberapa elemen mungkin tidak memerlukan gaya dalam mode gelap.
Untuk memulai, kita dapat menambahkan mode gelap ke bagian yang berisi sakelar mode gelap kita.
Buka parameter bagian dan tambahkan kelas CSS berikut:
CSS Class: et-dark-mode-able
Bagian 2: Menambahkan Fitur Mode Gelap ke Halaman Divi
Sekarang setelah kita memiliki kode dan kelas CSS, kita siap untuk menerapkan fungsionalitas dan desain Mode Gelap ke seluruh halaman di Divi. Untuk melakukan ini, kami akan menggunakan tata letak Premade dari halaman landing aplikasi seluler.
Untuk menambahkan tata letak, buka menu pengaturan di bagian bawah pembuat visual dan klik ikon Tambahkan tata letak baru.
Kemudian pilih tata letak halaman landing aplikasi seluler dari tab Tata Letak Standar.
Pastikan opsi "Ganti konten yang ada" TIDAK dipilih. Anda tidak ingin menghapus bagian dengan sakelar mode gelap.
Karena gaya mode gelap hanya akan berlaku untuk elemen dengan kelas CSS "mampu dan-mode-gelap", kita dapat memilih untuk menambahkan ke halaman dengan cara yang berbeda.
Kami dapat menambahkan kelas CSS ke setiap elemen halaman secara individual.
Kita bisa memperluas kelas CSS ke elemen di seluruh halaman (itu akan lebih cepat daripada melakukannya secara manual). Misalnya, kita dapat membuka pengaturan bagian untuk bagian atas dan memperluas kelas CSS untuk bagian tersebut ke semua bagian halaman.
Kita dapat menambahkan kelas CSS ke default global elemen. Ini akan menerapkan kelas CSS ke semua elemen di seluruh situs, menambahkan kemampuan mode gelap di seluruh situs. Misalnya, kita dapat membuka pengaturan bagian dan mengklik ikon default global untuk mengubah default bagian global. Kemudian kita dapat menambahkan kelas CSS dan mendaftarkannya sebagai kelas CSS untuk semua bagian situs.
Menambahkan kelas CSS ke elemen halaman
Untuk contoh ini, kami akan memperbarui elemen halaman dengan menambahkan kelas CSS ke default global untuk bagian dan modul teks. Dan kami juga akan membuat beberapa penambahan ke elemen lain di halaman saat kami melanjutkan.
Semua bagian
Untuk menambahkan kelas CSS ke semua bagian, buka pengaturan bagian atas yang berisi sakelar mode gelap. Kemudian ubah bagian default global dan tambahkan kelas CSS berikut ke bagian default global:
CSS Class: et-dark-mode-able
Semua bagian khusus
Juga tambahkan kelas CSS ke default global di bagian khusus.
Modul teks
Kemudian buka pengaturan untuk salah satu modul teks di halaman dan tambahkan kelas CSS yang sama ke default teks global.
Untuk menguji hasilnya, buka halaman langsung dan klik pada mode gelap untuk beralih di bagian atas halaman.
Inilah tampilan halaman seharusnya dalam mode jernih.
Dan inilah tampilan halaman seharusnya dalam mode gelap.
Sumber Daya Tambahan
Berikut ini beberapa sumber lain yang mungkin menarik bagi Anda.
Melengkapi situs Divi Anda dengan sakelar mode gelap khusus bisa menjadi cara yang bagus untuk meningkatkan pengalaman pengguna dan membuat desain baru yang menyenangkan dan memanjakan mata. Semoga bermanfaat bagi Anda.
Kerahasiaan dan cookie: situs ini menggunakan cookie. Dengan melanjutkan menjelajahi situs ini, Anda menyetujui penggunaan kami atas situs ini.
Untuk mengetahui lebih lanjut, termasuk cara mengontrol cookie, lihat yang berikut ini:
Kebijakan cookie
