Loncat ke Konten Utama

Divi tutorial: Cara menggunakan modul Slide

Apakah Anda mencari tema dan plugin WordPress terbaik?

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

Divi memungkinkan Anda untuk menempatkan slider di bagian lebar penuh, sehingga kursor Anda menjangkau lebar penuh peramban. Slider (Diapos) Divi mendukung latar belakang paralaks serta latar belakang video!

gunakan slider pada divi.png

Cara menambahkan modul Diapo lebar penuh dari Divi

Sebelum Anda dapat menambahkan modul slider lebar penuh ke halaman Anda, Anda harus terlebih dahulu melompat ke Divi Builder. Setelah tema Divi dipasang di situs web Anda, Anda akan melihat sebuah tombol Gunakan Divi Builderdi atas penerbit 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 tombolnya Gunakan Visual Builder saat Anda menjelajahi situs web di latar depan jika Anda terhubung ke dasbor WordPress Anda.

gunakan divi.png pembangun visual

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, jangan lupa untuk menambahkan baris ke halaman Anda terlebih dahulu.

buat slide divi tutorial wordpress.png

Temukan modul kursor lebar dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul dapat dicari, yang berarti Anda juga dapat mengetikkan kata "Slide", dan kemudian klik Enter untuk secara otomatis menemukan dan menambahkan modul slider lebar-penuh! Setelah modul ditambahkan, Anda akan disambut oleh daftar opsi modul. Opsi-opsi ini dipisahkan menjadi tiga kelompok utama: Isi , Pembuahan et maju .

Use Case Example: Tambahkan Slider Fullwidth Hero Section ke Halaman Rumah Anda

Penggeser lebar penuh adalah cara yang bagus untuk menampilkan beberapa CTA di atas ambang beranda Anda. Kombinasi gambar dan konten benar-benar dapat memberikan nuansa profesional pada bagian Anda yang menonjol.

Untuk contoh ini, saya akan menambahkan slide selebar untuk dijadikan sebagai bagian utama di halaman beranda.

buat slide example.jpg lebar penuh

Menggunakan Visual Builder, tambahkan bagian Fullwidth ke bagian atas halaman web Anda. Kemudian masukkan modul Slider Fullwidth ke dalam bagian baru Anda. Di tab Konten Konten slide besar-lebar, klik + Tambahkan item baru untuk membuat slide pertama Anda.

buat slide divi.png

Dalam pengaturan slide slide pertama Anda, perbarui opsi-opsi berikut:

Opsi konten

En-kepala : [masukkan judul slide] Teks tombol : [masukkan teks tombol] Isi : [masukkan isi teks slide] URL tombol : [masukkan URL tujuan tombol Slide] Gambar latar belakang : [masukkan gambar yang akan berfungsi sebagai latar belakang untuk slide]

Opsi desain

Gunakan hamparan latar belakang : YA
Warna overlay latar belakang : rgba (0,0,0,0.2) Hamparan ini sedikit menggelapkan gambar latar belakang untuk membuat teks lebih mudah dibaca.

slide divi blogpascher.png

Simpan pengaturan slide

Sekarang gandakan slide yang baru saja Anda buat dan perbarui slide baru dengan konten baru jika diperlukan. Ulangi ini untuk semua slide yang ingin Anda tambahkan.

duplikat slide divi.png

Hanya itu saja. Untuk contoh ini, saya hanya menyertakan dua slide, tetapi hasilnya adalah kursor pahlawan lebar penuh yang efektif dengan beberapa ajakan bertindak yang melibatkan pengguna untuk mengklik tombol untuk informasi lebih lanjut. Karena ini adalah ajakan bertindak utama untuk situs web Anda, saya sarankan untuk melakukan tes terpisah pada slide full-width Anda menggunakan Divi Lead dan melihat mana yang terbaik konversi.

contoh slide divi dem.gif

Opsi Slide Konten Lengkap

Di tab konten, Anda akan menemukan semua elemen konten dari modul, seperti teks, gambar, dan ikon. Semua yang mengendalikan apa? muncul di modul Anda akan selalu ditemukan di tab ini.

salin bagian divi konten.png

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. Ketika 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 jarak. Ini adalah tab yang akan Anda gunakan untuk mengubah tampilan modul Anda. Setiap modul Divi memiliki daftar panjang parameter desain yang dapat Anda gunakan untuk mengubah apa pun.

slide bagian desain divi.png

Hapus bayangan batin

Secara default, bayangan internal ditampilkan di slider. Jika Anda ingin menonaktifkan bayangan ini, Anda dapat melakukan ini menggunakan pengaturan ini.

efek Parallax

Mengaktifkan opsi ini akan memberikan gambar latar Anda posisi tetap saat Anda menggulir. Perlu diingat bahwa ketika pengaturan ini diaktifkan, gambar Anda skala gambar Anda ke ketinggian browser.

Font tajuk

Anda dapat mengubah font teks header Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font besar 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 dengan menggunakan huruf tebal, miring, huruf besar, dan bergaris bawah.

slide bagian desain font lentete.png

Ukuran font header

Di sini Anda dapat menyesuaikan ukuran teks header Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks atau memasukkan nilai ukuran teks yang diinginkan langsung ke bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Warna teks header

Secara default, semua warna teks Divi muncul dalam warna putih atau abu-abu gelap. Jika Anda ingin mengubah warna teks header Anda, pilih warna yang diinginkan dalam color picker menggunakan opsi ini.

Jarak kop surat

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks header Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Ketinggian garis tajuk

Ketinggian baris memengaruhi ruang di antara setiap baris teks header Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan rentang slider untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di baris tersebut. field input di sebelah kanan kursor. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Polisi Tubuh

Anda dapat mengubah font tubuh Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font besar 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 dengan menggunakan huruf tebal, miring, huruf besar, dan bergaris bawah.

Ukuran font tubuh

Di sini Anda dapat menyesuaikan ukuran teks tubuh Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks atau memasukkan nilai ukuran teks yang diinginkan langsung ke bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

bagian desain slide modul divi.png

Warna teks badan

Secara default, semua warna teks Divi muncul dalam warna putih atau abu-abu gelap. Jika Anda ingin mengubah warna teks Anda, pilih warna yang diinginkan di pemilih warna menggunakan opsi ini.

Spasi huruf tubuh

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Ketinggian garis tubuh

Tinggi garis memengaruhi ruang di antara setiap baris teks di tubuh Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan rentang slider untuk menyesuaikan ruang atau masukkan ukuran ruang yang diinginkan di bidang masukan terletak di sebelah kanan kursor. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

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 ruang dan ukuran slider secara keseluruhan, Anda dapat memasukkan nilai 100 px. Anda juga dapat memasukkan nilai persentase, misalnya 10%, untuk membuat ketinggian lebih dinamis.

Padding bawah

Pengaturan 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 ruang dan ukuran slider secara keseluruhan, Anda dapat memasukkan nilai 100 px. Anda juga dapat memasukkan nilai persentase, misalnya 10%, untuk membuat ketinggian lebih dinamis.

Divi: Tema WordPress terbaik sepanjang masa!

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

Gunakan gaya khusus untuk tombol

Mengaktifkan opsi ini akan mengungkap pengaturan kustomisasi yang berbeda untuk tombol yang dapat Anda gunakan untuk mengubah tampilan tombol pada modul Anda.

Ukuran teks tombol

Pengaturan ini dapat digunakan untuk menambah atau mengurangi ukuran teks di tombol. Tombol berubah ketika ukuran teks meningkat dan menurun.

Warna teks tombol

Secara default, tombol mengadopsi warna aksen tema Anda seperti yang didefinisikan di customizer tema. Opsi ini memungkinkan Anda menetapkan warna teks khusus ke tombol pada modul ini. Pilih warna kustom Anda menggunakan pemilih warna untuk mengubah warna tombol.

warna tombol divi.png

Warna latar tombol

Secara default, tombol memiliki warna latar belakang transparan. Ini dapat diubah dengan memilih warna latar belakang yang diinginkan di pemilih warna.

Lebar batas tombol

Semua tombol Divi memiliki perbatasan 2px default. Perbatasan ini dapat ditingkatkan atau diturunkan dengan menggunakan parameter ini. Perbatasan dapat dihapus dengan memasukkan nilai 0.

Warna batas tombol

Secara default, tombol membatasi perubahan ke warna aksen tema Anda seperti yang didefinisikan di customizer tema. Opsi ini memungkinkan Anda menetapkan warna batas kustom ke tombol pada modul ini. Pilih warna kustom Anda dengan menggunakan pemilih warna untuk mengubah warna batas tombol.

Radius batas tombol

Jari-jari perbatasan mempengaruhi kebulatan sudut tombol Anda. Secara default, tombol di Divi memiliki radius perbatasan kecil yang mengelilingi sudut-sudut piksel 3. Anda dapat mengurangi nilai ini ke 0 untuk membuat tombol persegi atau meningkatkannya secara signifikan untuk membuat tombol dengan tepi melingkar.

Jarak dari huruf-huruf tombol

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks tombol Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Font Tombol

Anda dapat mengubah font teks tombol Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font besar 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 dengan menggunakan huruf tebal, miring, huruf besar, dan bergaris 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 yang akan digunakan di tombol Anda. Divi memiliki ikon yang berbeda untuk dipilih.

Tombol ikon warna

Pengaturan pengaturan ini akan mengubah warna ikon yang muncul di tombol Anda. Secara default, warna ikon sama dengan warna teks pada tombol Anda, tetapi pengaturan ini memungkinkan Anda menyesuaikan warna secara independen.

Tombol penempatan ikon

Anda dapat memilih untuk menampilkan ikon tombol Anda ke kiri atau kanan tombol Anda.

Hanya tampilkan ikon saat tombol berguling

Secara default, ikon tombol hanya ditampilkan selama rollover. Jika Anda ingin ikon selalu muncul, matikan pengaturan ini.

Arahkan warna teks pada tombol

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, warna itu akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.

Warna latar tombol hover

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, warna itu akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.

Tombol Border Hover Warna

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, warna itu akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.

Tombol Radius Hover Border

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang didefinisikan dalam parameter sebelumnya.

Menunjuk tombol spasi catatan

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang didefinisikan dalam parameter sebelumnya.

Opsi lanjutan modul slide full-width

Di tab lanjutan, Anda akan menemukan opsi yang mungkin lebih bermanfaat bagi perancang web yang berpengalaman, seperti atribut CSS dan HTML khusus. Di sini Anda dapat menerapkan CSS kustom ke salah satu dari banyak elemen modul. Anda juga dapat menerapkan kelas khusus dan ID CSS ke modul, yang dapat digunakan untuk menyesuaikan modul dalam file style.css dari tema anak Anda.

bagian muka modul slide divi.png

ID CSS

Masukkan pengenal CSS opsional yang akan digunakan untuk modul ini. ID dapat digunakan untuk membuat gaya CSS khusus atau untuk membuat tautan ke bagian tertentu dari 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 kustom yang Anda tambahkan ke halaman atau situs web Anda dengan menggunakan opsi tema Divi atau pengaturan halaman Divi Builder.

CSS Khusus

CSS kustom juga dapat diterapkan ke modul dan ke salah satu elemen internal modul. Di bagian CSS Kustom, Anda akan menemukan bidang teks tempat Anda dapat menambahkan lembar gaya CSS khusus secara langsung ke setiap elemen. Entri CSS dalam parameter ini sudah dibungkus dalam tag gaya. Jadi cukup masukkan 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 menentukan seberapa cepat kursor memudar di antara setiap slide, jika opsi 'Animasi Otomatis' diaktifkan di atas. Semakin tinggi angkanya, semakin lama jeda antara setiap rotasi.

Lanjutkan Auto slide di Hover

Mengaktifkan ini akan memungkinkan auto-slide untuk melanjutkan di hover mouse.

Sembunyikan konten di ponsel

Karena ukuran layar menjadi lebih kecil di perangkat seluler, layar real estat menjadi lebih berharga. Kadang-kadang ada baiknya untuk menonaktifkan beberapa elemen slider yang kurang penting untuk mengurangi ukuran slider dan membuatnya lebih mudah dibaca. Mengaktifkan pengaturan ini menyembunyikan teks teks kursor pada ponsel.

Sembunyikan CTA di seluler

Karena ukuran layar menjadi lebih kecil di perangkat seluler, layar real estat menjadi lebih berharga. Kadang-kadang ada baiknya untuk menonaktifkan beberapa elemen slider yang kurang penting untuk mengurangi ukuran slider dan membuatnya lebih mudah dibaca. Mengaktifkan pengaturan ini akan menyembunyikan panggilan kursor ke tombol aksi seluler.

Lihat gambar / video seluler

Karena ukuran layar menjadi lebih kecil di perangkat seluler, layar real estat menjadi lebih berharga. Kadang-kadang ada baiknya untuk menonaktifkan beberapa elemen slider yang kurang penting untuk mengurangi ukuran slider dan membuatnya lebih mudah dibaca. Mengaktifkan pengaturan ini akan menampilkan gambar slide dan video 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 di tablet, ponsel pintar atau desktop secara individual. Ini berguna jika Anda ingin menggunakan modul yang berbeda pada perangkat yang berbeda, atau jika Anda ingin menyederhanakan desain ponsel dengan menghilangkan elemen-elemen tertentu dari halaman.

Opsi konten untuk elemen modul slide full-width

modul elemen individu divi diapo.png

Judul

Setel teks judul kursor Anda di sini.

Teks tombol

Jika Anda ingin menampilkan tombol di bawah isi slide Anda, masukkan teks tombol di sini. Biarkan bidang ini kosong jika Anda tidak ingin menampilkan tombol.

Isi

Masukkan isi isi kursor Anda di sini. Perhatikan bahwa jumlah teks yang Anda masukkan di sini akan menentukan ketinggian slide Anda.

URL tombol

Jika Anda menampilkan tombol, masukkan URL web yang valid ke dalam bidang ini untuk mengatur tautan tujuan.

Seret 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 ditinggalkan dengan slide yang terpusat, hanya teks. Karena ketinggian setiap slide ditentukan oleh teks, jika gambar pada slide Anda cukup tinggi, maka akan jatuh di bawah bagian bawah slide, membuat gambar sejajar di bagian bawah.

tarik gambar divi.png

Perhatikan bahwa ketinggian slide dengan gambar slide dapat ditentukan oleh slide yang lebih besar di slider. Pastikan gambar pada slide Anda cukup besar agar pas jika Anda ingin gambar disejajarkan di bagian bawah. Agar mudah dibaca, gambar slide hanya muncul di kolom, kolom, atau kolom slider dari kolom 1. Demikian pula, gambar slide tidak akan ditampilkan pada lebar browser yang lebih kecil dari piksel 768. Lebar gambar slide didefinisikan di bawah ini. Sebaiknya gambar slide Anda setidaknya sama lebar.

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 ditinggalkan dengan slide yang terpusat, hanya teks. Karena ketinggian setiap slide ditentukan oleh teks, jika gambar pada slide Anda cukup tinggi, maka akan jatuh di bawah bagian bawah slide, membuat gambar sejajar di bagian bawah.

Buat Toko Online Anda dengan mudah

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

Jeda video

Izinkan video dijeda oleh pemain lain saat mereka mulai bermain

Gambar latar belakang

Jika diset, gambar ini akan digunakan sebagai latar belakang untuk 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 banyak salindia, kursor akan mengambil tinggi dari slide tertinggi.

Lebar kursor Anda ditentukan oleh lebar peramban. Berdasarkan ukuran layar standar, kami menyarankan agar gambar Anda setidaknya 1280px oleh 768px.

Posisi gambar latar belakang

Secara default, gambar latar belakang ditampilkan di tengah slide. Anda dapat menggunakan pengaturan ini untuk mengubah posisi di bagian 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 mereka mengisi seluruh slide. Namun, Anda dapat menggunakan opsi ini untuk mengubah perilaku default. "Cover" adalah perilaku default, yang mengukur gambar untuk menutupi seluruh area slide. "Fit" juga akan memaksa gambar untuk menutupi seluruh area, bagaimanapun, ini akan memaksa tinggi dan lebar gambar untuk menyesuaikan tinggi dan lebar slider. Ini dapat menghasilkan gambar yang terdistorsi, tetapi ini akan mencegah pemangkasan gambar. "Ukuran Aktual" tidak menskalakan 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 mengatur warna latar belakang.

Video latar belakang MP4

Semua video harus diunduh dalam format .MP4 .WEBM untuk memastikan kompatibilitas maksimum di semua browser. Unduh versi .MP4 di sini. Catatan penting: Latar belakang video dinonaktifkan dari perangkat seluler. Sebaliknya, gambar bkacground Anda akan digunakan. Untuk alasan ini, Anda perlu mengatur kedua gambar latar belakang dan video latar belakang untuk memastikan hasil yang lebih baik.

Video latar belakang WEBM

Semua video harus diunduh dalam format .MP4 .WEBM untuk memastikan kompatibilitas maksimum di semua browser. Unduh versi .WEBM di sini. Catatan penting: Latar belakang video dinonaktifkan dari perangkat seluler. Sebaliknya, gambar bkacground Anda akan digunakan. Untuk alasan ini, Anda perlu mengatur kedua gambar latar belakang dan video latar belakang untuk memastikan hasil yang lebih baik.

Lebar video latar

Agar video berukuran tepat, Anda harus memasukkan lebar yang tepat (dalam piksel) dari video Anda di sini.

Latar belakang ketinggian video

Agar video berukuran tepat, Anda harus memasukkan tinggi yang tepat (dalam piksel) dari video Anda di sini.

Opsi elemen desain elemen geser

bagian style module divi.png

Gunakan hamparan latar belakang

Saat diaktifkan, warna hamparan khusus akan ditambahkan di atas gambar latar belakang Anda dan di belakang konten slider Anda.

Warna overlay latar belakang

Gunakan pemilih warna untuk memilih warna untuk latar belakang.

Gunakan hamparan teks

Ketika opsi ini diaktifkan, warna latar belakang ditambahkan di belakang teks kursor untuk membuatnya lebih mudah dibaca pada gambar latar belakang.

Warna hamparan teks

Gunakan pemilih warna untuk memilih warna untuk hamparan teks.

Teks Overlay Border Radius

Jari-jari perbatasan mempengaruhi pembulatan sudut area overlay teks. Secara default, sudut memiliki sedikit tepi piksel 3. Anda dapat mengurangi nilai ini ke 0 untuk membuat kotak persegi panjang atau menambah nilainya untuk membuat sudutnya lebih bundar.

Panah Warna Kustom

Saat melayang di atas modul kursor, panah muncul untuk memungkinkan pengunjung menavigasi melalui setiap slide. Secara default, panah ini mewarisi warna teks utama slide. Namun, Anda dapat mengatur warna kustom untuk panah ini menggunakan pengaturan ini.

Warna Kustom Dot Nav

Di setiap penggeser, elemen navigasi titik muncul di bawah konten kursor. Elemen-elemen ini memungkinkan pengguna untuk menavigasi kursor. Anda dapat menentukan warna kustom untuk digunakan untuk item ini menggunakan pemilih warna dalam pengaturan ini.

Perataan vertikal dari gambar slide

Pengaturan ini menentukan perataan vertikal gambar slide Anda. Gambar Anda dapat dipusatkan secara vertikal atau sejajar di bagian bawah slide Anda.

Warna teks

Jika latar belakang slide Anda gelap, warna teks harus diatur ke "Light". Sebaliknya, jika latar belakang slide jelas, warna teks harus diatur ke "Gelap".

Font Header

Anda dapat mengubah font teks header Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font besar 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 dengan menggunakan huruf tebal, miring, huruf besar, dan bergaris bawah.

Ukuran font header

Di sini Anda dapat menyesuaikan ukuran teks header Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks atau memasukkan nilai ukuran teks yang diinginkan langsung ke bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Warna teks header

Secara default, semua warna teks Divi muncul dalam warna putih atau abu-abu gelap. Jika Anda ingin mengubah warna teks header Anda, pilih warna yang diinginkan dalam color picker menggunakan opsi ini.

warna dari bagian desain header modul dispo divi.png

Jarak kop surat

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks header Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Ketinggian garis tajuk

Ketinggian baris memengaruhi ruang di antara setiap baris teks header Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan rentang slider untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di baris tersebut. field input di sebelah kanan kursor. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Font Tubuh

Anda dapat mengubah font tubuh Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font besar 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 dengan menggunakan huruf tebal, miring, huruf besar, dan bergaris bawah.

Ukuran font tubuh

Di sini Anda dapat menyesuaikan ukuran teks tubuh Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks atau memasukkan nilai ukuran teks yang diinginkan langsung ke bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Warna teks badan

Secara default, semua warna teks Divi muncul dalam warna putih atau abu-abu gelap. Jika Anda ingin mengubah warna teks Anda, pilih warna yang diinginkan di pemilih warna menggunakan opsi ini.

Spasi huruf tubuh

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

garis tubuh modul divi diapo.png

Ketinggian garis tubuh

Tinggi garis memengaruhi ruang di antara setiap baris teks di tubuh Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan rentang slider untuk menyesuaikan ruang atau masukkan ukuran ruang yang diinginkan di bidang masukan terletak di sebelah kanan kursor. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Gunakan gaya khusus untuk tombol

Mengaktifkan opsi ini akan mengungkap pengaturan kustomisasi yang berbeda untuk tombol yang dapat Anda gunakan untuk mengubah tampilan tombol pada modul Anda.

Ukuran teks tombol

Pengaturan ini dapat digunakan untuk menambah atau mengurangi ukuran teks di tombol. Tombol berubah ketika ukuran teks meningkat dan menurun.

Warna teks tombol

Secara default, tombol mengadopsi warna aksen tema Anda seperti yang didefinisikan di customizer tema. Opsi ini memungkinkan Anda menetapkan warna teks khusus ke tombol pada modul ini. Pilih warna kustom Anda menggunakan pemilih warna untuk mengubah warna tombol.

Warna latar tombol

Secara default, tombol memiliki warna latar belakang transparan. Ini dapat diubah dengan memilih warna latar belakang yang diinginkan di pemilih warna.

Tombol Lebar Perbatasan

Semua tombol Divi memiliki perbatasan 2px default. Perbatasan ini dapat ditingkatkan atau diturunkan dengan menggunakan parameter ini. Perbatasan dapat dihapus dengan memasukkan nilai 0.

Warna batas tombol

Secara default, tombol membatasi perubahan ke warna aksen tema Anda seperti yang didefinisikan di customizer tema. Opsi ini memungkinkan Anda menetapkan warna batas kustom ke tombol pada modul ini. Pilih warna kustom Anda dengan menggunakan pemilih warna untuk mengubah warna batas tombol.

Radius batas tombol

Jari-jari perbatasan mempengaruhi kebulatan sudut tombol Anda. Secara default, tombol di Divi memiliki radius perbatasan kecil yang mengelilingi sudut-sudut piksel 3. Anda dapat mengurangi nilai ini ke 0 untuk membuat tombol persegi atau meningkatkannya secara signifikan untuk membuat tombol dengan tepi melingkar.

modul tombol konfigurasi divi.png

Jarak dari huruf-huruf tombol

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks tombol Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.

Buat blog Anda dengan mudah dengan SiteGround

SiteGround memungkinkan Anda membuat blog WordPress hanya dengan beberapa klik. Nama domain gratis, hosting aman, SSL, transfer, dan banyak lagi ... [Direkomendasikan]

Font Tombol

Anda dapat mengubah font teks tombol Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font besar 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 dengan menggunakan huruf tebal, miring, huruf besar, dan bergaris 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 yang akan digunakan di tombol Anda. Divi memiliki ikon yang berbeda untuk dipilih.

Tombol ikon warna

Pengaturan pengaturan ini akan mengubah warna ikon yang muncul di tombol Anda. Secara default, warna ikon sama dengan warna teks pada tombol Anda, tetapi pengaturan ini memungkinkan Anda menyesuaikan warna secara independen.

Tombol penempatan ikon

Anda dapat memilih untuk menampilkan ikon tombol Anda ke kiri atau kanan tombol Anda.

Hanya tampilkan ikon saat tombol berguling

Secara default, ikon tombol hanya ditampilkan selama rollover. Jika Anda ingin ikon selalu muncul, matikan pengaturan ini.

Arahkan warna teks pada tombol

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, warna itu akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.

Warna latar tombol hover

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, warna itu akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.

Tombol Border Hover Warna

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, warna itu akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.

Tombol Radius Hover Border

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang didefinisikan dalam parameter sebelumnya.

Menunjuk tombol spasi catatan

Ketika tombol tersebut diterbangkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang didefinisikan dalam parameter sebelumnya.

Opsi kursor lanjutan. Lebar Penuh

bagian muka modul slide elemen individual divi.png

CSS Khusus

CSS kustom juga dapat diterapkan ke modul dan ke salah satu elemen internal modul. Di bagian CSS Kustom, Anda akan menemukan bidang teks tempat Anda dapat menambahkan lembar gaya CSS khusus secara langsung ke setiap elemen. Entri CSS dalam parameter ini sudah dibungkus dalam tag gaya. Jadi cukup masukkan aturan CSS yang dipisahkan oleh titik koma.

Teks alternatif dari gambar

Teks alternatif menyediakan semua informasi yang diperlukan jika gambar tidak memuat, tidak 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.

Tutorial Divi lainnya

Artikel ini berisi komentar 2
  1. Halo! terima kasih untuk artikel kamu. masalah saya adalah tidak adanya tampilan video latar belakang di ponsel, klien saya benar-benar menginginkannya. Saya pikir saya menemukan jawaban saya karena menurut artikel Anda, di "Lanjutan" ada kemungkinan untuk mengaktifkan video seluler yang dinonaktifkan secara default. tapi saya tidak menemukan kemungkinan ini di divi saya. Terima kasih atas jawabannya ...

    Yanis

Tinggalkan komentar

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

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

Kembali ke atas
7 saham
saham4
menciak1
Register2
Ada apa