Loncat ke Konten Utama

Divi tutorial: Cara menggunakan modul Tables Rate

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]

Lebih mudah dari sebelumnya untuk membuat grafik harga untuk produk Anda secara online. Buat tabel sebanyak yang Anda inginkan dan kontrol harga dan fitur masing-masing dengan modul Tables Rate dari tema WordPress Anda Divi. Anda bahkan dapat menyarankan rencana tertentu untuk meningkatkan konversi. Bahkan jika modul Anda menyertakan beberapa tabel penetapan harga, itu akan diperlakukan sebagai modul tunggal dan dapat ditempatkan di bawah ukuran kolom apa pun.

Cara menambahkan modul tabel tarif ke halaman Anda

Sebelum Anda dapat menambahkan modul grafik harga 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 Builder di 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.

Tabel Harga Modul

Setelah Anda memasukkan 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.

divi chart harga wordpress.png

Temukan modul tabel harga dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul dapat dicari, yang berarti Anda juga dapat mengetik kata "kartu tarif", kemudian klik "enter" untuk mencari dan secara otomatis menambahkan modul tabel harga! Setelah modul ditambahkan, Anda akan disambut oleh daftar opsi modul. Opsi-opsi ini dipisahkan menjadi tiga kelompok utama: Isi , Pembuahan et maju .

Use case: Tambahkan tabel harga untuk halaman produk

Saat Anda mempromosikan produk Anda di laman landas, bagan harga dapat secara efektif menampilkan opsi penetapan harga yang berbeda.

Dalam contoh ini, saya akan menambahkan modul grafik harga untuk menampilkan tiga rencana harga (atau tabel) dengan salah satu dari rencana ini yang menonjol sebagai rencana unggulan untuk meningkatkan konversi.

Tabel harga WordPress divi.jpg

Pertama, tambahkan bagian reguler baru ke halaman di mana tabel harga harus ditampilkan. Tambahkan baris lebar penuh (kolom 1) ke bagian dan sisipkan modul Tabel Penentuan Harga ke dalam baris.

garis meja harga divi.png

Dalam pengaturan tabel harga, pada tab Konten, klik + Tambahkan item baru untuk menambahkan tabel pertama Anda.

bagan harga kolom baru.png

Perbarui parameter tabel harga sebagai berikut:

Opsi konten

Judul: Mata Uang Pribadi: $ Oleh: Tahun Harga: 69 Teks Tombol: Isi Prasasti:
Akses ke semua tema Update tema abadi Dukungan teknis premium -Akses ke semua plugin -Lasayan file Photoshop -Tidak ada biaya tahunan
URL Tombol: [masukkan URL tombol] Latar belakang: #ffffff

Opsi desain

Warna teks harga: # 3e51b5 Gunakan gaya khusus untuk tombol: YES Warna teks tombol: #ffffff Warna tombol: #3e51b5 Lebar tombol: 0px

Simpan pengaturan

divi grafik harga wordpress example.png

Sekarang, gandakan tabel harga yang baru saja Anda buat dua kali untuk memiliki tiga tabel harga secara total.

pembuatan beberapa contoh tableau.jpg

Untuk tabel harga tengah, perbarui opsi berikut:

Tab konten

Judul: Harga Pengembang: 89 Konten: Akses ke semua tema Pembaruan Tema Abadi Akses Dukungan Teknis Premium ke semua file Photoshop berlapis - tanpa biaya tahunan URL Tombol: [masukkan URL tombol]

Tab desain

Warna teks: #0091ca Warna tombol: #0091ca

Untuk tabel harga ketiga, perbarui pengaturan sebagai berikut:

Tab konten

Judul: Untuk Harga Hidup: 249 Teks Tombol: Konten Mendaftar: Akses ke semua tema Pembaruan Tema Abadi Akses Dukungan Teknis Premium ke Semua Plugin Photoshop File Berlapis Tidak Ada Biaya Tahunan URL Tombol: [masukkan URL dari tombol]

Simpan pengaturan

Sekarang kembali ke pengaturan tabel harga dan perbarui yang berikut:

Opsi konten

Warna latar belakang tabel unggulan: #0091ca

Opsi desain

Warna bola: # 3e51b5 Warna tabel unggulan: #0091ca

hasil dari tabel harga divi.jpg

Simpan pengaturan

Sekarang kembali dan edit pengaturan bagian untuk memberikan bagian warna latar belakang #3e51b5.

Hanya itu saja. Sekarang Anda memiliki tabel harga dengan tiga opsi dengan opsi tengah ditetapkan sebagai item unggulan yang menonjol dari yang lain.

opsi tabel harga divi.jpg

Opsi konten untuk tabel harga

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.

opsi desain tabel harga.png

+ Tambahkan artikel baru

Di sinilah Anda menambahkan tabel harga baru ke modul Anda. Mengeklik "+ tambahkan item baru" akan membuka daftar baru opsi desain khusus untuk tabel harga ini. Lihat di bawah untuk masing-masing parameter tabel harga.

Setelah menambahkan tab pertama Anda, bilah abu-abu akan muncul dengan judul grafik harga Anda dalam bentuk label. Bilah abu-abu juga memiliki tiga tombol yang memungkinkan Anda untuk mengedit, menggandakan, atau menghapus tabel.

Tampilkan Bullet

Secara default, item dalam tabel harga ditampilkan sebagai daftar berpoin. Jika Anda ingin menghapus peluru dari daftar fitur, Anda dapat menonaktifkan opsi ini.

Warna latar belakang dari tabel unggulan

Setiap tabel harga dapat "disajikan". Lukisan-lukisan yang ditampilkan disorot di baris, yang membedakannya dari pilihan lain. Dengan menggunakan pengaturan ini, Anda dapat mengubah warna latar belakang hanya untuk tabel unggulan.

Warna latar belakang tajuk tabel

Di atas setiap tabel harga adalah area header yang menyertakan judul dan subjudul tabel Anda. Anda dapat mengontrol warna latar belakang area ini terlepas dari warna latar belakang dari tabel utama dengan memilih warna yang diinginkan di pemilih warna.

Tajuk tabel unggulan

Setiap grafik harga dapat "ditampilkan". Lukisan-lukisan yang ditampilkan disorot di baris, yang membedakannya dari pilihan lain. Dengan menggunakan pengaturan ini, Anda dapat mengubah warna latar belakang dari header hanya untuk tabel yang dipilih.

Warna latar belakang

Secara default, tabel harga memiliki warna latar belakang putih. Jika Anda ingin menggunakan warna yang berbeda untuk latar belakang grafik harga Anda, Anda dapat mengatur warna kustom Anda di sini menggunakan pemilih warna.

Label Admin

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 tabel harga

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.

pilihan desain array.png

penjajaran

Secara default, daftar fitur dijajarkan rata kiri dalam tabel penetapan harga. Jika Anda ingin menyelaraskannya, Anda dapat mengaktifkan opsi ini.

Hapus bayangan drop dari tabel unggulan

Secara default, tabel harga memiliki bayangan halus di balik setiap tabel. Jika Anda ingin menghapus bayangan ini, Anda dapat mengaktifkan opsi ini.

Artikel dari daftar di tengah

Di sini Anda dapat memilih untuk memusatkan item yang tercantum dalam tabel Anda.

Warna bola

Secara default, bullet dalam daftar tabel harga akan mewarisi warna aksen dari tema Anda. Jika Anda ingin menggunakan warna yang berbeda, Anda dapat mengaturnya di sini menggunakan pemilih warna.

Warna meja unggulan

Jika Anda ingin menggunakan warna yang berbeda untuk peluru di grafik harga, Anda dapat mengatur warna itu di sini menggunakan pemilih warna.

Warna teks dari header tabel unggulan

Opsi ini mengontrol warna warna teks dari header tabel Anda. Jika Anda mengubah warna latar belakang dari header tabel, Anda juga dapat mengubah opsi ini untuk memastikan keterbacaan.

Polisi yang memimpin

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

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]

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.

Warna teks dari tabel unggulan

Ini mengubah warna teks tubuh untuk lukisan unggulan Anda. Jika Anda mengubah warna latar belakang tabel Anda, Anda mungkin perlu mengubah opsi ini untuk memastikan keterbacaan.

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

Warna teks dari subtitle tabel

Ini mengubah warna teks subtitle untuk lukisan unggulan Anda. Jika Anda mengubah warna latar belakang tabel Anda, Anda mungkin perlu mengubah opsi ini untuk memastikan keterbacaan.

Font subtitle

Anda dapat mengubah font teks subtitle 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 garis bawah.

Ukuran font subtitle atau subtitle

Di sini Anda dapat menyesuaikan ukuran teks sub-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 dari sub-header

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

Spasi huruf sub-header

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks subjudul Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran jarak 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 sub-header

Ketinggian baris mempengaruhi ruang antara setiap baris teks subtitle Anda. Jika Anda ingin menambah ruang di antara setiap baris, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran jarak 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.

Mata Uang dan Frekuensi Mata Uang

Anda dapat mengubah font teks mata uang dan frekuensi Anda dengan memilih font yang Anda inginkan 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 dan Frekuensi Font Mata Uang

Di sini Anda dapat menyesuaikan ukuran mata uang dan teks frekuensi 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 dan frekuensi teks mata uang

Secara default, semua warna teks Divi muncul dalam warna putih atau abu-abu gelap. Jika Anda ingin mengubah warna mata uang dan teks frekuensi Anda, pilih warna yang Anda inginkan dalam pemilih warna menggunakan opsi ini.

Jarak huruf dan mata uang

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin meningkatkan ruang antara setiap huruf dalam mata uang dan teks frekuensi Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran jarak 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 mata uang frekuensi

Ketinggian baris mempengaruhi ruang antara setiap baris mata uang dan teks frekuensi Anda Jika Anda ingin meningkatkan ruang di antara setiap baris, gunakan rentang slider untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di lapangan masukan ke 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.

Harga Warna Unggulan

Ini mengubah warna harga untuk lukisan unggulan Anda. Jika Anda mengubah warna latar belakang tabel Anda, Anda mungkin perlu mengubah opsi ini untuk memastikan keterbacaan.

Harga Polisi

Anda dapat mengubah font teks harga 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 garis bawah.

Harga Ukuran Font

Di sini Anda dapat menyesuaikan ukuran teks harga 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.

Harga warna teks

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

Jarak huruf harga

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks harga Anda, gunakan rentang slider 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 harga

Ketinggian baris memengaruhi ruang di antara setiap baris teks harga Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran spasi 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 perbatasan

Mengaktifkan opsi ini akan menempatkan batas di sekitar modul Anda. Perbatasan ini dapat dikustomisasi menggunakan parameter kondisional berikut.

Warna perbatasan

Opsi ini memengaruhi warna batas Anda. Pilih warna kustom di pemilih warna untuk menerapkannya ke perbatasan Anda.

Lebar perbatasan

Secara default, batas memiliki lebar piksel 1. Anda dapat meningkatkan nilai ini dengan menyeret penggeser rentang atau memasukkan nilai khusus di bidang masukan di sebelah kanan bilah geser. Unit pengukuran khusus didukung, yang berarti Anda dapat mengubah unit default "px" menjadi sesuatu yang lain, seperti em, vh, vw dll.

Gaya batas

Borders mendukung delapan gaya berbeda: solid, dotted, double, groove, crest, key, dan start. Pilih gaya yang Anda inginkan dari menu drop-down untuk menerapkannya ke perbatasan Anda.

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.

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, batas tombol berubah menjadi 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.

Polisi Boutton

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

Tambahkan ikon tombol

Dinonaktifkan, pengaturan ini akan menghapus ikon dari tombol Anda. Secara default, semua tombol Divi menampilkan ikon panah.

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.

Warna ikon tombol

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.

Menempatkan ikon tombol

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 saat rollover. Jika Anda ingin ikon selalu muncul, matikan pengaturan ini.

Warna teks di flyover 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.

Buat Toko Online Anda dengan mudah

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

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 kartu tarif tingkat lanjut

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.

opsi lanjutan divi price chart.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.

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 dari tabel harga individu

tabel harga bagian individu.png

Judul

Judul yang Anda masukkan di sini akan digunakan untuk opsi harga (Premium) ini.

anak judul

Subtitle yang Anda masukkan di sini akan muncul di bawah judul Anda.

Merancang

Masukkan simbol mata uang yang Anda inginkan di sini.

oleh

Jika harga Anda didasarkan pada langganan, masukkan siklus langganan di sini (misalnya, Tahun).

prix

Masukkan nilai produk di sini.

Teks tombol

Tentukan teks tombol di sini.

Isi

Bidang ini adalah tempat Anda dapat memasukkan daftar fitur yang datang atau tidak disertakan dengan produk Anda. Pisahkan setiap item daftar menjadi baris baru dan mulailah setiap baris dengan simbol + atau -. A + menetapkan fungsi yang disertakan, sementara A - menetapkan karakteristik yang dikecualikan.

URL tombol

Di bagian bawah setiap tabel, Anda dapat memasukkan tombol Ajakan Bertindak dengan memasukkan URL Web yang valid ke dalam bidang ini. Tinggalkan ini dan
Kosongkan bidang teks tombol jika Anda tidak ingin memiliki tombol di tabel harga Anda.

Warna latar belakang

Atur warna latar belakang khusus untuk modul Anda atau biarkan kosong untuk menggunakan warna default.

Opsi desain untuk tabel harga individual

harga kolom kolom style divi.png

Jadikan tabel ini ditampilkan

Pilih untuk meletakkan tabel harga ini di depan atau tidak dengan menu drop-down ini. Ini akan memungkinkan lukisan untuk berdiri keluar dari yang lain.

Warna artikel dikecualikan

Untuk item dalam daftar Anda yang telah ditetapkan sebagai dikecualikan dengan menggunakan simbol -, Anda dapat menyesuaikan warnanya menggunakan pengaturan ini. Misalnya, Anda mungkin ingin mengubah warna menjadi merah atau mengurangi opacity mereka untuk secara visual menunjukkan bahwa item dikecualikan dari paket saat ini.

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.

Jarak huruf di header

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.

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.

Font subtitle

Anda dapat mengubah font teks subtitle 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 subtitle

Di sini Anda dapat menyesuaikan ukuran teks sub-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 subtitle

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

Jarak huruf subtitle

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks subjudul Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran jarak 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 subtitle

Ketinggian baris mempengaruhi ruang antara setiap baris teks subtitle Anda. Jika Anda ingin menambah ruang di antara setiap baris, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran jarak 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.

Mata Uang dan Frekuensi Mata Uang

Anda dapat mengubah font teks mata uang dan frekuensi Anda dengan memilih font yang Anda inginkan 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 untuk Mata Uang dan Frekuensi

Di sini Anda dapat menyesuaikan ukuran mata uang dan teks frekuensi 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 untuk mata uang dan frekuensi

Secara default, semua warna teks Divi muncul dalam warna putih atau abu-abu gelap. Jika Anda ingin mengubah warna mata uang dan teks frekuensi Anda, pilih warna yang Anda inginkan dalam pemilih warna menggunakan opsi ini.

Jarak huruf dan mata uang

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin meningkatkan ruang antara setiap huruf dalam mata uang dan teks frekuensi Anda, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran jarak 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.

Mata uang dan garis frekuensi

Ketinggian baris mempengaruhi ruang antara setiap baris mata uang dan teks frekuensi Anda Jika Anda ingin meningkatkan ruang di antara setiap baris, gunakan rentang slider untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di lapangan masukan ke 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.

Kebijakan harga

Anda dapat mengubah font teks harga 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 harga

Di sini Anda dapat menyesuaikan ukuran teks harga 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.

Harga warna teks

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

Jarak huruf harga

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks harga Anda, gunakan rentang slider 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 harga

Ketinggian baris memengaruhi ruang di antara setiap baris teks harga Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran spasi 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.

Lebar Batas Tombol

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

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]

Warna batas tombol

Secara default, batas tombol berubah menjadi 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 ke 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.

Warna ikon tombol

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.

Menempatkan tombol 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 saat rollover. Jika Anda ingin ikon selalu muncul, matikan pengaturan ini.

Warna teks di flyover 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 pada flyover

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

Warna batas di jalan layang

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

Radius batas tombol pada ikhtisar

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

Jarak dari huruf-huruf tombol pada flyover

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

Opsi Tabel Opsi Harga Individu Opsi Lanjutan

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

Tutorial Divi lainnya

Artikel ini berisi komentar 2
  1. Halo,
    Terima kasih atas artikel yang sangat spesifik dan terperinci ini. Saya baru menggunakan pembangun DIVI dan saya menemukan bahwa setelah membuat kartu tarif 3 saya, tampilan seluler adalah bencana (2 kolom ekstra-sempit dan yang ketiga pada baris ...).
    Apakah ada cara (selain menduplikasi tabel dan menyembunyikannya) untuk mengatur ini seperti pada Bootstrap misalnya (beri kolom lebar 33% di desktop dan 100% di seluler)?
    Merci pour votre aide.

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
saham2
menciak1
Register3
Ada apa