Divi memungkinkan Anda untuk menempatkan slider di bagian lebar penuh, membuat slider Anda menjangkau seluruh lebar browser. Penggeser Divi (Slide) mendukung latar belakang paralaks, serta latar belakang video!
Cara menambahkan modul Diapo lebar penuh dari Divi
Sebelum Anda dapat menambahkan modul slider lebar penuh ke halaman Anda, Anda harus terlebih dahulu masuk ke Divi Builder. sekali Tema Divi diinstal pada Anda situs jaringan, Anda akan melihat tombol Gunakan Divi Builderdi atas editor posting setiap kali Anda membuat halaman baru. Klik tombol ini untuk mengaktifkan Divi Builder dan mengakses semua modul Divi Builder. Kemudian klik tombolnya Gunakan Visual Builder untuk memulai generator dalam mode visual. Anda juga dapat mengklik tombol tersebut Gunakan Visual Builder saat Anda menelusuri situs jaringan di latar depan jika Anda masuk ke dasbor WordPress Anda.
Setelah Anda berada di Visual Builder, Anda dapat mengklik tombol plus abu-abu untuk menambahkan modul baru ke halaman Anda. Modul baru hanya dapat ditambahkan di dalam baris. Jika Anda memulai halaman baru, ingatlah untuk menambahkan baris ke halaman Anda terlebih dahulu.
Temukan modul slider lebar-penuh dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul dapat dicari, yang berarti Anda juga dapat mengetik kata "Slide" lalu klik enter untuk mencari dan menambahkan modul slider lebar-penuh secara otomatis! Setelah modul ditambahkan, Anda akan disambut oleh daftar opsi modul. Opsi-opsi ini dipisahkan menjadi tiga kelompok utama: Isi , Pembuahan et maju .
Contoh Kasus Penggunaan: Menambahkan Bagian Pahlawan Penggeser Lebar Penuh ke Halaman Beranda Anda
Penggeser lebar penuh adalah cara terbaik untuk menampilkan beberapa CTA di atas ambang beranda Anda. Kombinasi gambar dan konten benar-benar dapat memberikan kesan profesional yang menonjol pada bagian Anda.
Untuk contoh ini, saya akan menambahkan slide dengan lebar penuh untuk berfungsi sebagai bagian utama di halaman beranda.
Menggunakan Visual Builder, tambahkan bagian Lebar Penuh di bagian atas halaman web Anda. Kemudian masukkan modul Penggeser Lebar Penuh ke bagian baru Anda. Pada tab konten dari pengaturan slide lebar penuh, klik + Tambahkan item baru untuk membuat slide pertama Anda.
Dalam pengaturan slide slide pertama Anda, perbarui opsi berikut:
Opsi konten
En-kepala : [masukkan judul slide]
Teks tombol : [masukkan teks tombol]
Isi : [masukkan isi teks slide]
URL tombol : [masukkan URL tujuan dari tombol Slide]
Gambar latar belakang : [masukkan gambar yang akan berfungsi sebagai latar belakang untuk slide]
Opsi desain
Gunakan hamparan latar belakang : YA
Warna hamparan latar belakang : rgba (0,0,0,0.2) overlay ini sedikit menggelapkan gambar latar belakang agar teks lebih mudah dibaca.
Simpan pengaturan slide
Sekarang duplikat slide yang baru saja Anda buat dan perbarui slide baru dengan konten baru sesuai kebutuhan. Ulangi ini untuk semua slide yang ingin Anda tambahkan.
Itu saja. Untuk contoh ini, saya hanya menyertakan dua slide, namun hasilnya adalah penggeser pahlawan lebar penuh yang efektif dengan beberapa ajakan bertindak yang membuat pengguna mengeklik tombol untuk informasi lebih lanjut. Karena ini adalah ajakan bertindak utama Anda situs jaringan, Saya sarankan menjalankan tes terpisah pada slide lebar penuh Anda menggunakan Divi Leads dan melihat mana yang menghasilkan konversi terbaik.
Opsi Slide Konten Lengkap
Di tab Content, Anda akan menemukan semua elemen konten dari modul, seperti teks, gambar, dan ikon. Semua itu mengontrol apa? muncul di modul Anda akan selalu ditemukan di tab ini.
panah
Pilih apakah Anda ingin menampilkan panah navigasi kiri dan kanan.
kontrol
Pilih apakah atau tidak untuk menampilkan tombol lingkaran / indikator slide di bagian bawah kursor.
Label Administrator
Ini akan mengubah label modul di konstruktor untuk memudahkan identifikasi. Saat Anda menggunakan tampilan WireFrame di Visual Builder, label ini muncul di blok modul antarmuka Divi Builder.
Opsi Desain Modul Slide
Di tab Desain, Anda akan menemukan semua opsi gaya modul, seperti font, warna, ukuran, dan spasi. Ini adalah tab yang akan Anda gunakan untuk mengubah tampilan modul Anda. Setiap modul Divi memiliki daftar panjang pengaturan desain yang dapat Anda gunakan untuk mengubah apa pun.
Hapus bayangan batin
Secara default, bayangan internal ditampilkan di kursor. Jika Anda ingin mematikan bayangan ini, Anda dapat melakukannya dengan menggunakan pengaturan ini.
efek Parallax
Mengaktifkan opsi ini akan memberi gambar latar belakang Anda posisi tetap saat Anda menggulir. Ingatlah bahwa ketika pengaturan ini diaktifkan, gambar Anda akan menskalakan gambar Anda ke ketinggian browser.
Font header
Anda dapat mengubah fonta teks header Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font hebat yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, huruf besar, dan garis bawah.
Ukuran font tajuk
Di sini Anda dapat menyesuaikan ukuran teks header Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks Anda atau langsung memasukkan nilai ukuran teks yang diinginkan ke dalam bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Warna Teks Tajuk
Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna teks header, pilih warna yang diinginkan dari color picker menggunakan opsi ini.
Spasi huruf header
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf di teks header, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Tinggi Baris Tajuk
Tinggi baris memengaruhi ruang antara setiap baris teks header Anda.Jika Anda ingin menambah ruang di antara setiap baris, gunakan bilah geser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di kolom input di sebelah kanan kursor. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Polisi Tubuh
Anda dapat mengubah font tubuh Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font hebat yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, huruf besar, dan garis bawah.
Ukuran font tubuh
Di sini Anda dapat menyesuaikan ukuran teks tubuh Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks Anda atau langsung memasukkan nilai ukuran teks yang diinginkan ke dalam bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Warna teks badan
Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna teks Anda, pilih warna yang diinginkan dari color picker menggunakan opsi ini.
Spasi huruf tubuh
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks Anda, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Ketinggian garis tubuh
Ketinggian garis memengaruhi ruang antara setiap baris teks di tubuh Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan bilah geser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan terletak di sebelah kanan kursor. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Padding atas
Parameter ini mengontrol ruang internal antara bagian atas modul dan konten teks dalam modul. Jika Anda ingin menambah atau mengurangi ruang ini, masukkan nilai yang Anda inginkan di sini. Misalnya, untuk mengurangi spasi dan ukuran kursor secara keseluruhan, Anda dapat memasukkan nilai 100px. Anda juga dapat memasukkan nilai persentase, misalnya 10%, untuk membuat ketinggian lebih dinamis.
Padding bawah
Parameter ini mengontrol ruang internal antara bagian bawah modul dan konten teks dalam modul. Jika Anda ingin menambah atau mengurangi ruang ini, masukkan nilai yang Anda inginkan di sini. Misalnya, untuk mengurangi spasi dan ukuran kursor secara keseluruhan, Anda dapat memasukkan nilai 100px. Anda juga dapat memasukkan nilai persentase, misalnya 10%, untuk membuat ketinggian lebih dinamis.
Gunakan gaya khusus untuk tombol
Mengaktifkan opsi ini mengungkapkan berbagai pengaturan kustomisasi tombol yang dapat Anda gunakan untuk mengubah tampilan tombol modul Anda.
Ukuran teks tombol
Pengaturan ini dapat digunakan untuk menambah atau mengurangi ukuran teks di tombol. Tombol menyesuaikan saat ukuran teks bertambah dan berkurang.
Warna teks tombol
Secara default, tombol mengadopsi warna aksen tema Anda seperti yang ditentukan dalam Penyesuai Tema. Opsi ini memungkinkan Anda untuk menetapkan warna teks kustom ke tombol modul ini. Pilih warna kustom Anda menggunakan color picker untuk mengubah warna tombol.
Warna latar tombol
Secara default, tombol memiliki warna latar transparan. Ini dapat diubah dengan memilih warna latar belakang yang diinginkan dari pemilih warna.
Lebar batas tombol
Semua tombol Divi memiliki batas 2px secara default. Perbatasan ini dapat ditingkatkan atau dikurangi menggunakan pengaturan ini. Perbatasan dapat dihapus dengan memasukkan nilai 0.
Warna batas tombol
Secara default, batas tombol mengadopsi warna aksen tema Anda seperti yang ditentukan dalam Penyesuai Tema. Opsi ini memungkinkan Anda untuk menetapkan warna tepi kustom ke tombol modul ini. Pilih warna kustom Anda menggunakan color picker untuk mengubah warna batas tombol.
Radius batas tombol
Jari-jari perbatasan memengaruhi kebulatan sudut tombol Anda. Secara default, tombol di Divi memiliki radius batas kecil yang membulatkan sudut sebesar 3 piksel. Anda dapat mengurangi nilai ini menjadi 0 untuk membuat tombol persegi atau meningkatkannya secara signifikan untuk membuat tombol dengan tepi melingkar.
Jarak dari huruf-huruf tombol
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks tombol Anda, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung unit pengukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.
Font Tombol
Anda dapat mengubah fonta teks tombol Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font hebat yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, huruf besar, dan garis bawah.
Tambahkan ikon tombol
Dinonaktifkan, pengaturan ini akan menghapus ikon dari tombol Anda. Secara default, semua tombol Divi menampilkan ikon panah di hover.
Ikon tombol
Jika ikon diaktifkan, Anda dapat menggunakan pengaturan ini untuk memilih ikon mana yang akan digunakan di tombol Anda. Divi memiliki ikon berbeda untuk dipilih.
Tombol ikon warna
Menyesuaikan parameter ini akan mengubah warna ikon yang muncul di tombol Anda. Secara default, warna ikon sama dengan warna teks tombol Anda, tetapi pengaturan ini memungkinkan Anda menyesuaikan warna secara mandiri.
Tombol penempatan ikon
Anda dapat memilih untuk menampilkan ikon tombol Anda di sebelah kiri atau kanan tombol Anda.
Tampilkan hanya ikon saat mengarahkan tombol
Secara default, ikon tombol hanya ditampilkan saat melayang. Jika Anda ingin ikon selalu muncul, matikan pengaturan ini.
Arahkan warna teks pada tombol
Saat tombol diarahkan oleh mouse pengunjung, warna ini akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.
Warna latar tombol hover
Saat tombol diarahkan oleh mouse pengunjung, warna ini akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.
Tombol Border Hover Warna
Saat tombol diarahkan oleh mouse pengunjung, warna ini akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.
Tombol Radius Hover Border
Saat tombol digerakkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang ditentukan di pengaturan sebelumnya.
Menunjuk tombol spasi catatan
Saat tombol digerakkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang ditentukan di pengaturan sebelumnya.
Opsi lanjutan modul geser lebar penuh
Pada tab lanjutan, Anda akan menemukan opsi yang mungkin berguna bagi desainer web yang lebih berpengalaman, seperti atribut CSS dan HTML khusus. Di sini Anda dapat menerapkan CSS khusus ke salah satu dari banyak elemen modul. Anda juga dapat menerapkan kelas dan ID CSS khusus ke modul, yang dapat digunakan untuk menyesuaikan modul dalam file style.css tema anak Anda.
ID CSS
Masukkan ID CSS opsional untuk digunakan untuk modul ini. ID dapat digunakan untuk membuat gaya CSS kustom atau untuk menautkan ke bagian tertentu halaman Anda.
Kelas CSS
Masukkan kelas CSS opsional yang akan digunakan untuk modul ini. Kelas CSS dapat digunakan untuk membuat gaya CSS khusus. Anda dapat menambahkan beberapa kelas, dipisahkan oleh spasi. Kelas-kelas ini dapat digunakan dalam tema anak Divi Anda atau di lembar gaya CSS khusus yang Anda tambahkan ke halaman Anda atau ke situs web Anda menggunakan opsi tema Divi atau pengaturan halaman Divi Builder.
CSS khusus
CSS khusus juga dapat diterapkan ke modul dan bagian internal modul mana pun. Di bagian CSS Khusus, Anda akan menemukan bidang teks tempat Anda dapat menambahkan lembar gaya CSS khusus langsung ke setiap elemen. Entri CSS dalam pengaturan ini sudah dibungkus dalam tag gaya. Jadi masukkan saja aturan CSS yang dipisahkan oleh titik koma.
Animasi otomatis
Jika Anda ingin kursor meluncur secara otomatis, tanpa pengunjung harus mengklik tombol berikutnya, aktifkan opsi ini, kemudian sesuaikan kecepatan putaran di bawah jika Anda mau.
Kecepatan animasi otomatis (dalam md)
Di sini Anda dapat menunjukkan seberapa cepat kursor memudar di antara setiap slide, jika opsi 'Animasi otomatis' diaktifkan di atas. Semakin tinggi angkanya, semakin lama jeda di antara setiap rotasi.
Lanjutkan Auto slide di Hover
Mengaktifkan ini akan memungkinkan auto-slide untuk melanjutkan di hover mouse.
Sembunyikan konten di ponsel
Saat ukuran layar menjadi lebih kecil di perangkat seluler, real estate layar menjadi lebih berharga. Terkadang ada baiknya untuk menonaktifkan beberapa elemen kursor yang kurang penting untuk mengurangi ukuran kursor dan membuatnya lebih mudah dibaca. Mengaktifkan pengaturan ini menyembunyikan konten teks kursor di ponsel.
Sembunyikan CTA di seluler
Saat ukuran layar menjadi lebih kecil di perangkat seluler, real estate layar menjadi lebih berharga. Terkadang ada baiknya untuk menonaktifkan beberapa elemen kursor yang kurang penting untuk mengurangi ukuran kursor dan membuatnya lebih mudah dibaca. Mengaktifkan setelan ini akan menyembunyikan tombol ajakan bertindak kursor di ponsel.
Lihat gambar / video di ponsel
Saat ukuran layar menjadi lebih kecil di perangkat seluler, real estate layar menjadi lebih berharga. Terkadang ada baiknya untuk menonaktifkan beberapa elemen kursor yang kurang penting untuk mengurangi ukuran kursor dan membuatnya lebih mudah dibaca. Mengaktifkan pengaturan ini akan menampilkan gambar dan video slide di ponsel (dinonaktifkan secara default).
jarak penglihatan
Opsi ini memungkinkan Anda untuk mengontrol perangkat tempat modul Anda muncul. Anda dapat memilih untuk menonaktifkan modul Anda pada tablet, smartphone atau desktop satu per satu. Ini berguna jika Anda ingin menggunakan mod berbeda pada perangkat berbeda, atau jika Anda ingin menyederhanakan desain seluler dengan menghilangkan elemen tertentu dari laman.
Opsi konten untuk elemen modul slide lebar penuh
Judul
Setel teks judul kursor Anda di sini.
Teks tombol
Jika Anda ingin menampilkan tombol di bawah konten slide Anda, masukkan teks tombol di sini. Kosongkan bidang ini jika Anda tidak ingin menampilkan tombol.
Isi
Masukkan konten tubuh kursor Anda di sini. Perhatikan bahwa jumlah teks yang Anda masukkan di sini akan menentukan tinggi slide Anda.
URL tombol
Jika Anda menampilkan tombol, masukkan URL web yang valid ke dalam bidang ini untuk mengatur tautan tujuan.
Tarik gambar
Jika Anda menambahkan gambar slide, gambar itu akan muncul di sebelah kiri teks slide Anda di atas latar belakang slide Anda. Jika Anda tidak menentukan gambar slide, Anda akan berada di sebelah kiri dengan slide hanya teks di tengah. Karena tinggi setiap slide ditentukan oleh teks, jika gambar slide Anda cukup tinggi, itu akan jatuh di bawah bagian bawah slide, membuat gambar sejajar di bagian bawah.
Perhatikan bahwa ketinggian slide dengan gambar slide dapat ditentukan dengan slide yang lebih tinggi di slider. Pastikan gambar slide Anda cukup besar agar pas jika Anda ingin gambar sejajar di bagian bawah. Untuk alasan keterbacaan, gambar slide hanya muncul di kolom, kolom, atau slider lebar 1 kolom. Demikian pula, gambar slide tidak akan ditampilkan pada browser dengan lebar lebih kecil dari 768 piksel. Lebar gambar slide ditentukan di bawah. Kami menyarankan agar gambar slide Anda setidaknya selebar.
Slide video
Jika Anda menambahkan video slide, itu akan muncul di sebelah kiri teks slide Anda di atas latar belakang slide Anda. Jika Anda tidak menentukan video slide, Anda akan berada di sebelah kiri dengan slide hanya teks di tengah. Karena tinggi setiap slide ditentukan oleh teks, jika gambar slide Anda cukup tinggi, itu akan jatuh di bawah bagian bawah slide, membuat gambar sejajar di bagian bawah.
Jeda video
Izinkan video dijeda oleh pemain lain saat mereka mulai diputar
Gambar latar belakang
Jika disetel, gambar ini akan digunakan sebagai latar belakang modul ini. Untuk menghapus gambar latar belakang, cukup hapus URL dari bidang pengaturan.
Ketinggian slide ditentukan oleh jumlah teks yang Anda tambahkan. Jika Anda memiliki beberapa slide, slider akan mengambil ketinggian dari slide tertinggi.
Lebar kursor Anda ditentukan oleh lebar browser. Berdasarkan ukuran layar standar, kami menyarankan agar gambar Anda setidaknya berukuran 1280px kali 768px.
Posisi gambar latar belakang
Secara default, gambar latar belakang ditampilkan di tengah slide. Anda dapat menggunakan pengaturan ini untuk mengubah penempatan di atas, bawah, kiri, kanan, atau di salah satu dari empat sudut slide.
Ukuran gambar latar belakang
Secara default, gambar latar belakang akan diperbesar secara proporsional untuk memastikan bahwa gambar tersebut memenuhi seluruh slide. Namun, Anda dapat menggunakan opsi ini untuk mengubah perilaku default. "Cakupan" adalah perilaku default, yang menskalakan gambar untuk menutupi seluruh area slide. "Fit" juga akan memaksa gambar untuk menutupi seluruh area, namun, ini akan memaksa tinggi dan lebar gambar agar sesuai dengan tinggi dan lebar kursor. Ini dapat menyebabkan gambar terdistorsi, tetapi ini akan mencegah gambar dipotong. "Actual Size" tidak mengubah skala gambar dan menampilkannya pada ukuran aslinya.
Warna latar belakang
Jika Anda hanya ingin menggunakan latar belakang warna solid untuk slide Anda, gunakan pemilih warna untuk menyetel warna latar belakang.
Video latar belakang MP4
Semua video harus diunduh dalam kedua format .MP4 .WEBM untuk memastikan kompatibilitas maksimum di semua browser. Unduh versi .MP4 di sini. Catatan Penting: Latar belakang video dinonaktifkan dari perangkat seluler. Sebagai gantinya, gambar bkacground Anda akan digunakan. Untuk alasan ini, Anda harus menyetel gambar latar dan video latar belakang untuk memastikan hasil yang lebih baik.
Video latar belakang WEBM
Semua video harus diunduh dalam kedua format .MP4 .WEBM untuk memastikan kompatibilitas maksimum di semua browser. Unduh versi .WEBM di sini. Catatan Penting: Latar belakang video dinonaktifkan dari perangkat seluler. Sebagai gantinya, gambar bkacground Anda akan digunakan. Untuk alasan ini, Anda harus menyetel gambar latar dan video latar belakang untuk memastikan hasil yang lebih baik.
Lebar latar belakang video
Agar video berukuran benar, Anda harus memasukkan lebar yang tepat (dalam piksel) video Anda di sini.
Latar belakang ketinggian video
Agar video berukuran benar, Anda harus memasukkan ketinggian yang tepat (dalam piksel) video Anda di sini.
Opsi desain elemen elemen slide
Gunakan hamparan latar belakang
Saat diaktifkan, warna overlay kustom akan ditambahkan di atas gambar latar belakang dan di belakang konten slider Anda.
Warna overlay latar belakang
Gunakan pemilih warna untuk memilih warna latar belakang.
Gunakan hamparan teks
Jika opsi ini diaktifkan, warna latar belakang ditambahkan di belakang teks kursor agar lebih mudah dibaca di gambar latar belakang.
Warna hamparan teks
Gunakan pemilih warna untuk memilih warna untuk hamparan teks.
Teks Overlay Border Radius
Jari-jari batas memengaruhi kebulatan sudut area hamparan teks. Secara default, sudut memiliki tepi yang agak membulat sebesar 3 piksel. Anda dapat mengurangi nilai ini menjadi 0 untuk membuat kotak persegi panjang atau menambah nilai untuk membuat sudut lebih membulat.
Panah Warna Kustom
Saat Anda mengarahkan kursor ke modul slider, panah muncul untuk memungkinkan pengunjung menavigasi melalui setiap slide. Secara default, panah ini mewarisi warna teks utama slide. Namun, Anda dapat menentukan warna kustom untuk panah ini menggunakan pengaturan ini.
Warna Kustom Dot Nav
Di setiap kursor, item navigasi titik muncul di bawah konten kursor. Elemen ini memungkinkan pengguna untuk menavigasi kursor. Anda dapat menentukan warna khusus yang akan digunakan untuk elemen-elemen ini menggunakan pemilih warna dalam pengaturan ini.
Penjajaran vertikal gambar slide
Pengaturan ini menentukan perataan vertikal dari gambar slide Anda. Gambar Anda dapat dipusatkan secara vertikal atau disejajarkan di bagian bawah slide Anda.
Warna teks
Jika latar belakang slide Anda gelap, warna teks harus disetel ke "Terang". Sebaliknya, jika latar belakang slide terang, warna teks harus disetel ke "Gelap".
Font Header
Anda dapat mengubah fonta teks header Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font hebat yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, huruf besar, dan garis bawah.
Ukuran font tajuk
Di sini Anda dapat menyesuaikan ukuran teks header Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks Anda atau langsung memasukkan nilai ukuran teks yang diinginkan ke dalam bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Warna Teks Tajuk
Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna teks header, pilih warna yang diinginkan dari color picker menggunakan opsi ini.
Spasi huruf header
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf di teks header, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Tinggi Baris Tajuk
Tinggi baris memengaruhi ruang antara setiap baris teks header Anda.Jika Anda ingin menambah ruang di antara setiap baris, gunakan bilah geser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di kolom input di sebelah kanan kursor. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Font Tubuh
Anda dapat mengubah font tubuh Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font hebat yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, huruf besar, dan garis bawah.
Ukuran font tubuh
Di sini Anda dapat menyesuaikan ukuran teks tubuh Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks Anda atau langsung memasukkan nilai ukuran teks yang diinginkan ke dalam bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Warna teks badan
Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna teks Anda, pilih warna yang diinginkan dari color picker menggunakan opsi ini.
Spasi huruf tubuh
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks Anda, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Ketinggian garis tubuh
Ketinggian garis memengaruhi ruang antara setiap baris teks di tubuh Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan bilah geser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan terletak di sebelah kanan kursor. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Gunakan gaya khusus untuk tombol
Mengaktifkan opsi ini mengungkapkan berbagai pengaturan kustomisasi tombol yang dapat Anda gunakan untuk mengubah tampilan tombol modul Anda.
Ukuran teks tombol
Pengaturan ini dapat digunakan untuk menambah atau mengurangi ukuran teks di tombol. Tombol menyesuaikan saat ukuran teks bertambah dan berkurang.
Warna teks tombol
Secara default, tombol mengadopsi warna aksen tema Anda seperti yang ditentukan dalam Penyesuai Tema. Opsi ini memungkinkan Anda untuk menetapkan warna teks kustom ke tombol modul ini. Pilih warna kustom Anda menggunakan color picker untuk mengubah warna tombol.
Warna latar tombol
Secara default, tombol memiliki warna latar transparan. Ini dapat diubah dengan memilih warna latar belakang yang diinginkan dari pemilih warna.
Tombol Lebar Perbatasan
Semua tombol Divi memiliki batas 2px secara default. Perbatasan ini dapat ditingkatkan atau dikurangi menggunakan pengaturan ini. Perbatasan dapat dihapus dengan memasukkan nilai 0.
Warna batas tombol
Secara default, batas tombol mengadopsi warna aksen tema Anda seperti yang ditentukan dalam Penyesuai Tema. Opsi ini memungkinkan Anda untuk menetapkan warna tepi kustom ke tombol modul ini. Pilih warna kustom Anda menggunakan color picker untuk mengubah warna batas tombol.
Radius batas tombol
Jari-jari perbatasan memengaruhi kebulatan sudut tombol Anda. Secara default, tombol di Divi memiliki radius batas kecil yang membulatkan sudut sebesar 3 piksel. Anda dapat mengurangi nilai ini menjadi 0 untuk membuat tombol persegi atau meningkatkannya secara signifikan untuk membuat tombol dengan tepi melingkar.
Jarak dari huruf-huruf tombol
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks tombol Anda, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung unit pengukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.
Font Tombol
Anda dapat mengubah fonta teks tombol Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font hebat yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, huruf besar, dan garis bawah.
Tambahkan ikon tombol
Dinonaktifkan, pengaturan ini akan menghapus ikon dari tombol Anda. Secara default, semua tombol Divi menampilkan ikon panah di hover.
Ikon tombol
Jika ikon diaktifkan, Anda dapat menggunakan pengaturan ini untuk memilih ikon mana yang akan digunakan di tombol Anda. Divi memiliki ikon berbeda untuk dipilih.
Tombol ikon warna
Menyesuaikan parameter ini akan mengubah warna ikon yang muncul di tombol Anda. Secara default, warna ikon sama dengan warna teks tombol Anda, tetapi pengaturan ini memungkinkan Anda menyesuaikan warna secara mandiri.
Tombol penempatan ikon
Anda dapat memilih untuk menampilkan ikon tombol Anda di sebelah kiri atau kanan tombol Anda.
Tampilkan hanya ikon saat mengarahkan tombol
Secara default, ikon tombol hanya ditampilkan saat melayang. Jika Anda ingin ikon selalu muncul, matikan pengaturan ini.
Arahkan warna teks pada tombol
Saat tombol diarahkan oleh mouse pengunjung, warna ini akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.
Warna latar tombol hover
Saat tombol diarahkan oleh mouse pengunjung, warna ini akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.
Tombol Border Hover Warna
Saat tombol diarahkan oleh mouse pengunjung, warna ini akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.
Tombol Radius Hover Border
Saat tombol digerakkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang ditentukan di pengaturan sebelumnya.
Menunjuk tombol spasi catatan
Saat tombol digerakkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang ditentukan di pengaturan sebelumnya.
Opsi kursor lanjutan Fullwidth
CSS khusus
CSS khusus juga dapat diterapkan ke modul dan bagian internal modul mana pun. Di bagian CSS Khusus, Anda akan menemukan bidang teks tempat Anda dapat menambahkan lembar gaya CSS khusus langsung ke setiap elemen. Entri CSS dalam pengaturan ini sudah dibungkus dalam tag gaya. Jadi masukkan saja aturan CSS yang dipisahkan oleh titik koma.
Teks Gambar Alternatif
Teks alt memberikan semua informasi yang diperlukan jika gambar tidak dimuat, ditampilkan dengan benar, atau dalam situasi lain di mana pengguna tidak dapat melihat gambar. Ini juga memungkinkan gambar untuk dibaca dan dikenali oleh mesin pencari.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorial” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Tutorial Divi lainnya
- 5 website untuk restoran penggunaan Divi tema
- Bagaimana cara menambahkan teks pada produk Divi WooCommerce
- Cara mengubah warna menu antara halaman Divi
- Cara mempersonalisasi kisi-kisi blog dengan Divi
- Cara menggunakan peran Divi editor pada WordPress
- Cara membuat slider Divi layar penuh
- Cara mengubah warna menu antara halaman Divi
- Fitur yang Anda mungkin tidak tahu tentang Divi
- Cara menggunakan Divi Builder di WordPress
- Cara menggunakan modul gulir video Divi
- Cara menggunakan modul Flip Divi Builder
- Bagaimana cara menambahkan modul testimonial pada Divi Builder
- Cara menggunakan modul teks Divi
- Cara membuat slider di Divi
- Cara mengedit peran pengguna Divi
- Cara menggunakan modul Divi Social Media
- Cara menggunakan modul shop pada tema WordPress Divi
- Cara menggunakan modul sidebar Divi
- Cara menggunakan Modul Tabel Divi Price
- Cara menggunakan modul judul publikasi Divi
- Bagaimana cara menambahkan modul video Divi
- Cara menggunakan modul navigasi artikel
- Cara menggunakan modul pencarian Divi
- Cara menggunakan modul dompet Divi
- Cara menggunakan modul orang di Divi Builder
- Cara menggunakan modul dompet dengan filter Divi
- Cara menggunakan modul slider lebar penuh
- Cara menggunakan Modul Gambar Divi Builder
- Cara menggunakan modul navigasi penuh lebar dari Divi Builder
- Cara menggunakan modul galeri gambar
- Cara menggunakan Modul Full-Width Divi Builder Card
- Cara menggunakan Modul Portofolio Full Full Divi
- Cara menggunakan modul header penuh lebar Divi
- Cara menggunakan Modul Divi Counter
- Cara menggunakan slider artikel di Divi Builder
- Cara menggunakan modul Divi Email Optin
Halo,
Terima kasih banyak untuk tutorial ini. Saya mengaku tersesat dan gagal melakukan sesuatu yang seharusnya sederhana secara alkitabiah:
hapus satu (atau lebih) slide tambahan di tayangan slide divi saya
Saya tentu saja telah melihat bahwa dalam daftar slide dari tayangan slide yang dibuat, di sebelah kanan setiap baris yang sesuai dengan slide, kami menemukan ikon "tempat sampah" dan tiga titik kecil: tetapi mengklik tempat sampah... menambahkan salinan slide saat ini! dan menu konteks tidak berisi baris yang memungkinkan penghapusan.
Saya menemukan di suatu tempat (saya tidak ingat di mana) bahwa saya harus "memposisikan diri saya di slide yang akan dihapus" (pastikan itu ada di layar) tetapi itu tidak mengubah apa pun.
Saya bekerja di Mac dalam sistem Mojave. Dan saya mencoba terhubung ke WordPress di Firefox seperti di Chrome
Terima kasih banyak atas bantuan yang Anda bisa ... dan maaf untuk pertanyaan bodoh seperti itu
Halo
Terima kasih untuk tutorial ini, sangat lengkap!
Apakah Anda tahu apakah mungkin untuk mengubah atau bahkan menghapus animasi dari teks? karena tidak default itu pergi dari bawah ke atas pada gambar latar belakang dan menurut saya tidak terlalu indah.
terima kasih
Bonjour Olivier,
Apakah Anda melihat pengaturan teks yang dimaksud?
Halo,
Apakah mungkin mengklik tombol slide mengarahkan ulang link URL ke tab baru?
Terima kasih sebelumnya atas lampu Anda!
Halo! terima kasih atas artikel anda. masalah saya adalah video latar belakang tidak muncul di ponsel, klien saya benar-benar menginginkannya. Saya pikir saya telah menemukan jawaban saya karena menurut artikel Anda, dalam "Lanjutan" ada kemungkinan untuk mengaktifkan video di ponsel yang dinonaktifkan secara default. tapi saya tidak menemukan kemungkinan ini di divi saya. Terima kasih atas jawaban Anda…
Yanis
Halo Yanis,
Apakah Divi Anda mutakhir?