Loncat ke Konten Utama

Divi tutorial: Cara menggunakan modul Slide

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

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!

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 masuk ke Divi Builder. Setelah tema Divi dipasang di situs web Anda, Anda akan melihat sebuah 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 ketika Anda menelusuri situs web Anda di latar depan jika Anda terhubung ke dashboard 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, ingatlah untuk menambahkan baris ke halaman Anda terlebih dahulu.

buat slide tutorial divi di wordpress.png

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.

buat slide lebar-penuh example.jpg

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.

buat slide divi.png

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.

slide divi blogpascher.png

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.

duplikat slide divi.png

Itu saja. Untuk contoh ini, saya hanya menyertakan dua slide, tetapi hasilnya adalah slider pahlawan lebar penuh yang efisien dengan beberapa ajakan bertindak yang melibatkan pengguna untuk mengeklik tombol untuk informasi lebih lanjut. Karena ini adalah ajakan bertindak utama Anda untuk situs web Anda, saya sarankan untuk melakukan pengujian terpisah pada slide lebar penuh Anda menggunakan Divi Leads dan lihat mana yang mengonversi yang terbaik.

contoh slide divi dem.gif

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.

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

slide bagian desain divi.png

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.

slide bagian desain font lentete.png

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.

bagian desain slide modul divi.png

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.

Buat situs web Anda dengan Elementor dengan mudah

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

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 tombol divi.png

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.

bagian muka modul slide divi.png

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

modul elemen individu divi diapo.png

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.

tarik gambar divi.png

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.

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]

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

bagian style module divi.png

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.

warna dari bagian desain header modul dispo divi.png

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.

garis tubuh modul divi diapo.png

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.

modul tombol konfigurasi divi.png

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.

Buat Toko Online Anda dengan mudah

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

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

bagian muka modul slide elemen individual divi.png

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.

Tutorial Divi lainnya

Artikel ini berisi komentar 5

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

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

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
6 saham
saham4
menciak
Register2