Loncat ke Konten Utama

Tutorial Divi: Cara menggunakan modul koneksi (Masuk)

Divi: tema WordPress termudah untuk digunakan

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]

Modul login (login) menampilkan formulir login WordPress, gaya Divi, di mana saja di halaman Anda. Jika Anda menggunakan WordPress dengan ruang anggota, maka menambahkan formulir login langsung ke halaman bisa sangat berguna (alih-alih mengarahkan orang ke formulir masuk WordPress yang menggunakan gaya tema yang berbeda).

halaman login divi wordpress.png tutorial

Bagaimana cara menambahkan modul masuk ke halaman Anda

Sebelum Anda dapat menambahkan modul untuk terhubung 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.

pembangun divi

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.

hubungkan modul divi.png

Temukan modul masuk dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul yang tersedia, yang berarti bahwa Anda dapat mengetik kata "Connect", kemudian klik "Enter" untuk secara otomatis mencari dan menambahkan steker! Setelah modul ditambahkan, Anda akan disambut oleh daftar opsi modul. Opsi-opsi ini dipisahkan menjadi tiga kelompok utama: Isi , Pembuahan et maju .

Contoh use case: Tambahkan custom login form pada halaman login ke area member

Karena situs keanggotaan mengharuskan pengguna untuk terhubung ke semua atau sebagian dari konten, modul login memudahkan untuk menambahkan formulir login ke halaman login Anda sendiri. Selain itu, Anda dapat memilih untuk mengarahkan pengguna ke formulir ini alih-alih halaman login WordPress default.

Berikut ini adalah halaman login sederhana dengan modul login saya akan menunjukkan cara membuat:

terhubung ke blogpascher.png

Menggunakan Visual Builder, tambahkan bagian standar baru ke halaman login keanggotaan dengan baris lebar (kolom 1). Kemudian masukkan modul koneksi ke saluran.

hubungkan modul divi.png

Perbarui pengaturan koneksi sebagai berikut:

Opsi konten

Judul: Koneksi
Konten: [masukkan deskripsi singkat tentang kursus atau instruksi untuk menghubungkan]
Redirect ke halaman saat ini: YES

Opsi desain

Warna latar belakang dari lapangan: # f0f0f0 Teks Warna: header Polisi Gelap: 35px warna header: # 888888 Font ukuran tubuh: 16px Border: Ya warna Border: # 0c71c3 lebar border: 1px kustom Pelapis: 50px Top, Right 50px, 50px Belanda, 50px meninggalkan Gunakan gaya kustom untuk tombol: YES tombol Ukuran teks: 26px warna teks tombol: tombol warna #ffffff: # 0c71c3 lebar tombol 0px Font:: tombol secara default, ikon tombol atas Add: YES ikon tombol: Tampilkan hanya tombol di atas ikon: NO

contoh halaman login divi.jpg

Hanya itu saja. Situs anggota-space sekarang memiliki formulir login kustom di mana pengguna akan diarahkan ketika mereka harus masuk ke kursus. Tidak perlu puas dengan form login WordPress default.

halaman login blogpascher.png

Opsi konten modul koneksi

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.

koneksi modul opsi konten.png

Judul

Judul akan muncul di kotak login, di atas formulir masuk.

Isi

Konten akan ditampilkan di kotak login, di bawah judul. Jika Anda ingin menambahkan deskripsi tambahan, Anda dapat menggunakan bidang tersebut. Jika tidak, biarkan kosong.

Alihkan ke halaman saat ini

Di sini Anda dapat memilih apakah pengguna harus diarahkan ke halaman saat ini.

Gunakan warna latar belakang

Jika Anda ingin memberikan warna latar belakang yang kuat untuk form login Anda, pilih "ya" untuk opsi ini dan warna latar belakang yang Anda pilih di opsi berikut akan digunakan.

Warna latar belakang

Pilih warna latar belakang untuk ditampilkan di latar belakang kotak login Anda. Jika Anda memilih untuk menonaktifkan warna latar belakang pada opsi sebelumnya, warna ini tidak akan berpengaruh.

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.

Divi: Tema WordPress terbaik sepanjang masa!

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

Opsi gaya untuk modul masuk

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 koneksi modul desain.png

Bentuk warna latar belakang bidang

Form login berisi dua kolom input untuk nama pengguna dan kata sandi. Anda dapat menggunakan parameter ini untuk menyesuaikan warna latar belakang bidang-bidang ini.

Warna teks bidang formulir

Form login berisi dua kolom input untuk nama pengguna dan kata sandi. Anda dapat menggunakan parameter ini untuk menyesuaikan warna teks dari bidang-bidang ini. Jika Anda telah menyesuaikan warna latar belakang bidang formulir, Anda juga dapat menyesuaikan warna teks untuk memastikan hubungan warna yang mulus.

Warna latar belakang

Ketika bidang input difokuskan dengan mouse pengunjung, warna berubah dengan jelas menunjukkan bidang mana yang aktif. Di sini Anda dapat mengatur warna latar belakang bidang yang difokuskan.

Warna teks fokus

Ketika bidang input difokuskan dengan mouse pengunjung, warna berubah dengan jelas menunjukkan bidang mana yang aktif. Di sini Anda dapat mengatur warna teks bidang yang difokuskan.

Gunakan warna batas fokus

Jika Anda ingin menambahkan border ke kolom input ketika mereka dalam fokus, Anda dapat mengaktifkan opsi ini.

Warna batas fokus

Dengan menggunakan pengaturan ini, Anda dapat mengubah warna perbatasan yang muncul pada bidang input yang difokuskan.

Warna teks

Di sini Anda dapat memilih apakah teks Anda harus terang atau gelap. Jika Anda bekerja pada latar belakang gelap, teks Anda harus jelas. Jika latar belakang Anda jelas, teks Anda harus gelap.

Orientasi teks

Di sini Anda dapat mengatur keselarasan teks Anda.

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.

bagian header divi.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.

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.

Gunakan perbatasan

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

Buat Toko Online Anda dengan mudah

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

modul area perbatasan divi.png

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

Perbatasan mendukung delapan gaya berbeda: padat, putus-putus, putus-putus, ganda, alur, lambang, tatahan, dan mulai. Pilih gaya yang Anda inginkan dari menu drop-down untuk menerapkannya ke perbatasan Anda.

Margin khusus

Margin adalah ruang yang ditambahkan ke bagian luar modul Anda, antara modul dan elemen berikutnya di atas, di bawah atau di sebelah kiri dan kanannya. Anda dapat menambahkan nilai margin kustom ke salah satu dari empat sisi modul. Untuk menghapus margin kustom, hapus nilai yang ditambahkan dari kolom input. Secara default, nilai ini diukur dalam piksel, tetapi Anda dapat memasukkan unit pengukuran khusus di bidang masukan.

margin kustom.png

Padding khusus

Isi adalah ruang yang ditambahkan di dalam modul Anda, di antara tepi modul dan elemen internalnya. Anda dapat menambahkan nilai pengisian kustom ke salah satu dari empat sisi modul. Untuk menghapus margin kustom, hapus nilai yang ditambahkan dari kolom input. Secara default, nilai ini diukur dalam piksel, tetapi Anda dapat memasukkan unit pengukuran khusus di bidang masukan.

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.

menggunakan koneksi modul divi modul.png

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

Warna Teks Tombol Melayang

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 Login

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.

modul masuk

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.

Tutorial Divi lainnya

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.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
18 saham
saham12
menciak1
Register5
Ada apa