Cara Menambahkan Judul dan Slogan Situs Dinamis ke Header Divi Global

Cara Menambahkan Judul dan Slogan Situs Dinamis ke Header Divi Global

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.

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.

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:

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;

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

Cara Membuat Transisi Seamless dengan Efek Gulir di Divi

Cara Membuat Transisi Seamless dengan Efek Gulir di Divi

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.

Transisi antara bagian divi

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
Bagian parameter Divi

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
Konfigurasi jarak Divi

jarak

Kemudian tambahkan margin atas dan bawah khusus.

  • Margin atas: 200px
  • Margin bawah: 200px
Konfigurasi spasi baris Divi

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.

Layanan kami ditawarkan oleh para ahli saat ini

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
Kepala polisi divi

jarak

Kemudian tambahkan margin yang lebih rendah pada tablet dan telepon.

  • Margin bawah: 50 piksel (hanya tablet dan telepon)
Konfigurasi spasi teks Divi

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.

Isi kotak teks divi

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
Parameter teks Divi

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
Pembatas yang terlihat

Baris

Kemudian ubah warna garis modul.

  • Warna garis: # 000000
Latar belakang warna pembatas

perekat

Kemudian buat beberapa perubahan pada parameter ukuran.

  • Berat pembagi: 3px
  • Lebar: 28%
Ukuran pemisah Divi

jarak

Kami juga menambahkan margin teratas.

  • Margin atas: 10px
Jarak modul pemisah Divi

Tambahkan bagian # 2

jarak

Mari beralih ke bagian reguler berikutnya. Hapus bantalan atas default dari bagian tersebut.

  • Lapisan atas: 0px
Bagian 2 jarak divi

overflows

Sembunyikan juga luapannya.

  • Overflow horisontal: disembunyikan
  • Overflow vertikal: disembunyikan
Sembunyikan overflow modul divi

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris pertama menggunakan struktur kolom berikut:

Pilih tata letak divi

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
Bagian divi konfigurasi talang

jarak

Kemudian hapus semua padding standar atas dan bawah.

  • Lapisan atas: 0px
  • Lapisan bawah: 0px
Pengaturan jarak modul Divi 1 baris

Pengaturan kolom 1

Warna latar belakang

Kemudian buka pengaturan untuk kolom 1 dan ubah warna latar belakang.

  • Warna Latar Belakang: # f7f7f7
Konfigurasi latar belakang modul garis Divi

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 modul baris

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)
Pengaturan jarak modul Divi

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
Tampilkan pemisah divi 1

Baris

Kemudian ubah warna garis modul.

  • Warna garis: # 000000
Pengaturan pemisah Divi

perekat

Juga buat perubahan pada parameter ukuran.

  • Berat pembagi: 3px
  • Lebar: 50%
Ukuran pemisah Divi

Tambahkan modul teks ke kolom 1

Tambahkan konten H3

Modul berikutnya yang kita butuhkan dalam kolom 1 adalah modul teks dengan konten H3.

Pengaturan bagian konten Divi

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 modul teks Divi

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
Penyesuaian font cetakan teks Divi

Tambahkan modul tombol ke kolom 2

Tambahkan salinan

Modul berikutnya dan terakhir yang kita butuhkan adalah modul tombol. Masukkan salinan pilihan Anda.

Pengaturan konten modul teks

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
Pengaturan gaya tombol Divi
  • Font Tombol: Triwulan
  • Berat font tombol: tebal
Pengaturan warna tombol Divi

jarak

Tambahkan juga padding khusus.

  • Lapisan atas: 50px
  • Lapisan bawah: 50px
  • Padding kiri: 100px
  • Padding kanan: 100px
Pengaturan jarak tombol modul Divi

Posisi

Dan posisikan ulang tombol sesuai:

  • Posisi: Mutlak
  • Lokasi: kiri bawah
Penyesuaian posisi modul tombol Divi

Kloning garis sebanyak yang diperlukan

Setelah Anda menyelesaikan seluruh baris dan semua modulnya, Anda dapat mengkloning seluruh baris tiga kali.

Modul clone divi

Ubah semua konten

Pastikan untuk mengedit semua konten dalam baris duplikat.

Edit konten bagian divi

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
Terapkan efek gulir divi

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
Konfigurasi bagian animasi fade divi

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
Konfigurasi aniation scrolling Divi

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
Animasi garis memudar Divi

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
Animasi bergulir modul garis divi

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
Pengaturan animasi tampilan modul garis Divi

Hasil akhir

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

Demo terakhir

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.

Cara membuat korsel gulir anggota tim dengan Divi

Cara membuat korsel gulir anggota tim dengan Divi

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.

Gulir anggota tim divi

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)
Konfigurasi parameter

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
Konfigurasi overflow

Tambahkan baris # 1

Struktur kolom

Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Pilih tata letak divi

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
Parameter garis Divi

jarak

Kami juga menambahkan lapisan atas dan bawah khusus.

  • Lapisan atas: 100px
  • Lapisan bawah: 100px
Konfigurasi divi spasi baris

Tambahkan modul teks ke kolom

Tambahkan konten H2

Saatnya menambahkan modul, dimulai dengan modul teks pertama. Masukkan konten H2 pilihan Anda.

Temui Tim

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)
Spasi teks Divi

Tambahkan modul pemisahan ke kolom

jarak penglihatan

Kemudian tambahkan modul pemisah. Pastikan opsi "Tampilkan Pemisah" diaktifkan.

  • Tampilkan pemisah: Ya
Tampilkan pemisah divi

Baris

Kemudian buat beberapa perubahan pada pengaturan garis.

  • Warna garis: # edf000
  • Gaya garis: solid
  • Posisi Baris: Atas
Gaya spasi Divi

perekat

Dan lengkapi parameter modul dengan memodifikasi parameter dimensi sesuai:

  • Berat pembagi: 20px
  • Lebar: 11%
  • Perataan modul: kiri
  • Tinggi: 20px
Mengukur modul garis divi

Tambahkan baris # 2

Struktur kolom

Ke baris berikutnya! Gunakan struktur kolom berikut:

Konfigurasi kolom Divi

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%
Konfigurasi lebar talang

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)
Konfigurasi gaya spasi baris

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.

Konfigurasi baris parameter Divi

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
Konfigurasi kolom belakang Divi

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
Tambahkan gambar latar belakang kolom divi

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.

lebar: 100%! penting; margin: 50px 0px 50px 0px! penting;
Kode kolom divi css

Tambahkan modul orang ke kolom

Tambahkan konten

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.

Nama orang divi

Hapus gambar

Kemudian hapus gambar tersebut. Kami menggunakan gambar latar belakang kolom sebagai gantinya.

Hapus gambar divi

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
Konfigurasi latar belakang modul orang

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%
Kustomisasi judul modul Divi

Pengaturan teks tubuh

Juga ubah pengaturan teks isi.

  • Font Tubuh: Buka Sans
  • Warna teks badan: #ffffff
  • Tinggi garis tubuh: 2,2 em
Kustomisasi tubuh Divi

Pengaturan teks posisi

Kemudian buat beberapa perubahan pada pengaturan teks posisi.

  • Posisi Font: Buka Sans
  • Warna teks posisi: # edf000
Posisi Divi

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%
Jarak modul orang Divi

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)
Spasi modifikasi baris divi

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
Konfigurasi animasi scrolling Divi

penelitian

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

Biro

Gulir anggota tim divi

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.

Bagaimana cara menambahkan lebih banyak ikon media sosial ke Divi

Bagaimana cara menambahkan lebih banyak ikon media sosial ke Divi

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:

Ikon sosial divi

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 .

Opsi tema divi

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.

Divi wordpress

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.

Pembuatan artikel Divi

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.

Tata letak Divi Gutenberg

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.

Penyisipan modul mengikuti di media sosial

Anda akan diminta untuk memilih jejaring sosial yang Anda inginkan sebelum Anda dapat mulai mempersonalisasikannya. Klik Tambahkan jejaring sosial baru .

Tambahkan modul sosial jejaring sosial divi

Kemudian pilih satu dari daftar drop-down.

Tambahkan jejaring sosial baru

Dengan itu, tambahkan URL profil Anda. Secara opsional, Anda dapat memilih warna, gradien, latar belakang, dll. khusus untuk ikonnya.

Sesuaikan tombol jejaring sosial

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.

Sesuaikan ikon sosial

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 .

Ikuti kami tombol divi

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.

Tombol Divi ikuti kami

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.

Pembangun Divi

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 .

Tambahkan model divi

Jika Anda sudah menyiapkan template, cukup klik Edit pensil atau klik dua kali pada bagian yang ingin Anda modifikasi.

Tata letak Divi

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 .

Pilih modul sosial

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.

Modul media ikon sosial divi

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

Penampilan divi dengan tombol share

Dan jika Anda tidak menyukai tampilannya, generator tema mudah disesuaikan. Seret saja ke lokasi lain, seperti bagian atas bar samping.

Pindah modul berbagi sosial Divi

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.

ikon bilah sisi

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.

Personalisasi tema tata letak divi

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.

Tambahkan footer divi global

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.

Pembuatan kisi manfaat dinamis untuk produk WooCommerce

Pembuatan kisi manfaat dinamis untuk produk WooCommerce

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.

Hasil yang mungkin divi

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 .

Instal plugin bidang kustom lanjutan

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.

Buat bidang acf

Pengaturan grup bidang

Beri judul pada grup bidang baru Anda dan izinkan untuk muncul hanya di halaman produk.

  • "Jenis pesan" sama dengan "Produk"
Tambahkan aturan

Tambahkan bidang pertama

Lanjutkan dengan menambahkan bidang baru untuk judul manfaat produk pertama Anda.

  • Label Bidang: Judul Manfaat 1
  • Jenis bidang: teks
Tambahkan bidang ac
Kustomisasi bidang Divi

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
Konfigurasikan bidang acf

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.

Kreasi produk Divi

Isi bidang Manfaat Produk

Dan memenuhi manfaat produk.

Isi bidang keuntungan divi

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

Pembangun tema Divi

Gunakan templat pada semua produk

Kami menggunakan template ini di semua produk, tetapi silakan pilih produk dengan kategori atau label tertentu.

Tambahkan semua produk woocommerce

Masuk ke editor template tubuh model

Lalu masukkan tubuh model dengan mengklik "Tambahkan tubuh kustom" dan pilih "Buat tubuh kustom".

Membangun tubuh divi

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
Konfigurasi latar belakang bagian Divi

jarak

Pindah ke tab desain bagian dan tambahkan beberapa padding kustom atas dan bawah.

  • Lapisan Atas: 10px
  • Bantalan Bawah: 10px
Konfigurasi jarak bagian Divi

Tambahkan baris baru

Struktur kolom

Mari kita lanjutkan dengan menambahkan baris baru ke bagian yang memiliki struktur berikut:

Konfigurasi tata letak modul baris

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%
Pengaturan jarak modul baris

jarak

Hapus semua jarak internal atas dan bawah.

  • Margin Internal Tinggi: 0px
  • Margin Internal Rendah: 0px
Pengaturan jarak modul garis Divi

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
Pengaturan woo cart pemberitahuan modul divi

Latar belakang warna

Kemudian buka pengaturan modul dan gunakan latar belakang transparan.

  • Warna Latar Belakang: rgba (0,0,0,0)
Woo cart module pengaturan divi

Pengaturan teks

Beralih ke tab "Desain" dan ubah font teks.

  • Font Teks: Karla
Pengaturan font modul Divi

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
Pengaturan warna modul pemberitahuan gerobak Woo
  • Fon tombol: Oswald
  • Tombol Font Style: Shift
Penyesuaian desain warna modul pemberitahuan gerobak Woo
  • Margin Internal Tinggi: 20px
  • Margin Internal Rendah: 20px
  • Margin Internal Kiri: 50px
  • Margin Kanan Internal: 50px
Modul desain konfigurasi woo cart pemberitahuan

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%
Penyesuaian belakang modul garis Divi

jarak

Mari pergi ke tab Desain dan tambahkan margin internal yang tinggi.

  • Lapisan Atas: 150px
Konfigurasi jarak modul garis Divi

Tambahkan baris baru

Struktur kolom

Lanjutkan dengan menambahkan baris baru dengan struktur yang sama seperti yang ditunjukkan di bawah ini:

Konfigurasi gaya garis Divi

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
Modul divi konfigurasi talang

Jarak

Kami akan menghapus margin internal atas juga.

  • Lapisan Atas: 0px
Konfigurasi jarak modul Divi

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;
Pengaturan gaya modul garis Divi

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
Pengaturan modul gambar produk Woocommerce

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
Penyesuaian modul gambar Divi

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
kotak manfaat produk

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
Penyesuaian desain modul judul Divi

jarak

Lengkapi modul judul Woo dengan menambahkan margin kiri dan kanan.

  • Margin kiri: 5%
  • Margin kanan: 5%
Pengaturan modul judul Divi

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 modul deskripsi produk

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
Deskripsi modul penyesuaian warna divi

perekat

Kemudian ubah lebar pada ukuran layar yang berbeda.

  • Lebar: 59% (desktop), 82% (tablet dan telepon)
Penyesuaian lebar modul ringkasan Divi

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%
Modul deskripsi produk Divi

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
Pengaturan teks modul ringkasan Divi

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.

Konfigurasi divi ringkasan modul gambar

Pengaturan Gambar / Ikon

Pindah ke tab desain modul dan ubah pengaturan gambar / ikon sebagai berikut:

  • Penempatan Gambar / Ikon: Atas
  • Penjajaran Gambar / Ikon: Kiri
Modul penyesuaian Divi

Pengaturan Teks Judul

Kami mengubah pengaturan teks judul selanjutnya.

  • Font Judul: Oswald
  • Judul Font Style: Huruf Besar
  • Judul Ukuran Teks: 25px
Konfigurasikan font modul ringkasan divi

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
Mengonfigurasi div ringkasan modul teks i

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%
Konfigurasikan ukuran modul ringkasan divi

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)
Konfigurasikan jarak modul ringkasan divi

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;
Tambahkan modul divi kode css

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.

Bagian divi nama produk

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.

Gambar modul ringkasan Divi

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)
Aturan modul ringkasan Divi

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
Modul ringkasan konfigurasi perbatasan bulat

Tambahkan juga batas bawah ke modul Blurb pertama.

  • Lebar batas bawah: 1px
  • Warna batas bawah: # 000000
Konfigurasikan margin bawah divi
Blurb pengaturan modul 2 perbatasan

Kemudian buka modul Blurb kedua dan gunakan batas bawah.

  • Lebar batas bawah: 1px
  • Warna batas bawah: # 000000
Ringkasan modul batas konfigurasi
Blurb pengaturan modul 3 perbatasan

Lengkapi desain kisi dengan menambahkan garis lurus ke modul Blurb ketiga.

  • Lebar batas kanan: 1px
  • Warna tepi kanan: # ffd623
kotak manfaat produk

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
Tambahkan ke pengaturan modul kartu divi

Pengaturan bidang

Buka tab desain berikutnya dan ubah pengaturan bidang.

  • Warna latar belakang bidang: #ffffff
  • Warna teks bidang: # 000000
Konfigurasi modul warna gaya tambahkan ke keranjang divi
  • Bidang bundar: 0px (semua sudut)
  • Lebar batas bawah bidang: 1px
  • Warna batas bawah bidang: # 000000
Konfigurasi spasi bagian divi

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
Konfigurasi desain tombol divi
  • Fon tombol: Oswald
  • Gaya font tombol: huruf besar
Konfigurasi tombol divi
  • Lapisan atas: 20px
  • Lapisan bawah: 20px
  • Padding kiri: 50px
  • Padding kanan: 50px
Konfigurasikan ukuran modul divi

jarak

Dan lengkapi parameter modul dengan menambahkan nilai margin khusus.

  • Margin atas: 100px
  • Margin kiri: 5%
Konfigurasi jarak divi

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!

Simpan desain divi
Simpan modifikasi divi

penelitian

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

Hasil demo

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.

Bagaimana menerapkan mode gelap di situs Anda dengan Divi

Bagaimana menerapkan mode gelap di situs Anda dengan Divi

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.

Alihkan mode gelap

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.

Bagian Divi

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.

Modul ringkasan Divi

Pembuahan

Buka pengaturan desain dan perbarui yang berikut:

  • Warna Ikon: # 666666
  • Penjajaran gambar / ikon: kiri
  • Ukuran font ikon: 22 piksel
Konfigurasi ikon Divi
  • Lebar: 50px
  • Penyelarasan modul: pusat
  • Tinggi: 25px
Konfigurasi ukuran Divi
  • Margin: 0px rendah
  • Sudut membulat: 4px
  • Lebar perbatasan: 2px
  • Warna tepi: # 666666
Konfigurasi perbatasan Divi

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:

konten: "light"; posisi: absolut; kiri: -35px; atas: 0px;

Ini menambahkan label ke modul Blurb yang akan kita ubah dari "terang" menjadi "gelap" saat klik.

Tombol sakelar Divi

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
Tombol alih font

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.

Tambahkan modul kode

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
Kode css divi

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 divi pemilih css

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.

Pilih tata letak divi 1

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.

  1. Kami dapat menambahkan kelas CSS ke setiap elemen halaman secara individual.
  2. 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.
  3. 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.

Tambahkan ke semua bagian khusus

Modul teks

Kemudian buka pengaturan untuk salah satu modul teks di halaman dan tambahkan kelas CSS yang sama ke default teks global.

Tambahkan ke modul teks

Untuk menguji hasilnya, buka halaman langsung dan klik pada mode gelap untuk beralih di bagian atas halaman.

Inilah tampilan halaman seharusnya dalam mode jernih.

Mode jelas

Dan inilah tampilan halaman seharusnya dalam mode gelap.

Mode gelap

Sumber Daya Tambahan

Berikut ini beberapa sumber lain yang mungkin menarik bagi Anda.

final pikiran

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.