Penataan halaman Anda dengan modul lebar penuh di Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

Dengan lebih dari 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 templat gratis. (Lain)

Modul Toggle Divi memungkinkan Anda untuk menampilkan konten tambahan per klik, tanpa perlu kode jQuery tambahan. Mirip dengan modul Accordion, modul rocker digunakan untuk berbagi konten yang dikelompokkan, seperti pertanyaan yang diajukan sejak itu. Anda juga dapat membaca halaman ini untuk menggunakan tugas lain, misalnya untuk menyusun halaman Anda. Dalam tutorial ini, kita akan menggunakan modul sakelar lebar penuh untuk membuat desain halaman sederhana yang berlaku dalam satu klik. Gaya desain yang kami hadapi berani dan bersih. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita pergi.

Sebelum masuk ke tutorial, mari kita lihat hasilnya pada ukuran layar yang berbeda.

Mari kita mulai menciptakan kembali

Tambahkan bagian baru

jarak

Mulailah dengan membuat halaman baru. Tempat ini adalah pengaturan bagian diri.

  • Lapisan bawah: 0px

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru untuk menggunakan struktur kolom berikut:

perekat

Tanpa menambahkan modul lagi, buka pengaturan garis dan pastikan Anda menyentuh sisi kiri dan kanan wadah bagian. Ini adalah langkah penting dalam tutorial ini. ini memungkinkan modul untuk beralih, seperti kita nanti dalam tutorial ini, menjadi lebar penuh.

  • Gunakan lebar jatuhkan khusus: Ya

jarak

Kami juga menghapus isian atas dan bawah. Ini menghilangkan semua ruang antara modul dan wadah baris / kolom di mana ia ditempatkan.

Baca Juga  Four kunci kesuksesan Anda dalam pemasaran on-line

  • Lapisan bawah: 0px

Tambahkan modul rocker

Masukkan judul dan konten

Saatnya untuk mulai menambahkan modul! Satu-satunya modul yang kita butuhkan di baris adalah modul Toggle. Kami akan menggunakan area judul untuk meletakkan judul dan semua konten yang ingin kami bagikan di area konten tubuh. Jangan ragu untuk meletakkan apa yang Anda inginkan di area konten; dari teks ke gambar dan lainnya.

negara

Kami menggunakan status sakelar tertutup, tetapi jangan ragu untuk tetap terbuka juga.

Pengaturan ikon default

Buka tab Desain dan ubah pengaturan opsi sesuai:

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin dan tema WordPress terbaik untuk membuat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unit unduhan. (XOR)

  • Warna ikon: # 570fff
  • Gunakan ukuran ikon khusus: YES
  • Ikon Ukuran Huruf: 6vw

Parameter ikon overflight

Ubah warna ikon melayang.

  • Warna ikon: # f2f2f2

Pengaturan failover default

Kemudian ubah warna latar belakang flip-flop tertutup.

  • Beralih warna latar belakang: #ffffff

Arahkan kursor ke pengaturan

Dan ubah warnanya juga melayang.

  • Beralih warna latar belakang: # 000000

Pengaturan teks judul

Singkatnya, ketentuan judul sebagai berikut:

  • Judul teks berwarna: # 000000
  • Judul Teks: Alignment Kiri
  • Ukuran Judul Teks: 8vw (desktop), 10vw (tablet dan telepon)
  • Spasi huruf judul: -1vw (desktop), -0.5vw (tablet dan telepon)
  • Tinggi baris judul: 0.7em

Pengaturan teks judul standar tertutup

Kemudian, akhir-judul-teks-judul-judul-judul:

  • Font Judul Tertutup: Montserrat
  • Judul ditutup Ukuran teks: 18vw (desktop), 16vw (tablet dan telepon)
  • Judul ditutup tinggi: 0.8em

Arahkan kursor ke pengaturan teks judul

Ubah warna teks teks tertutup di arahkan.

Buat situs web Anda dengan Elementor

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

  • Judul ditutup Warna teks: # f4f4f4

Pengaturan teks tubuh

Buka pengaturan teks isi dan buat beberapa perubahan juga.

  • Berat font: Ringan
  • Alignment of the body text: Membenarkan
  • Ukuran teks isi: 1.2vw (desktop), 2vw (tablet), 3vw (telepon)
Baca Juga  10 Fakta Menarik Yang Perlu Kamu Tau Tentang Vaksin

jarak

Padding khusus di bagian atas, bawah dan kiri.

  • Padding bawah: 10vw

batas

Lanjutkan menghapus batas default modul dalam pengaturan perbatasan.

  • Lebar perbatasan: 0px

Alihkan konten CSS

Atur pengaturan modul Aktifkan / Nonaktifkan baris kode CSS berikut ke desktop:

lebar: 60 vw; batas kiri: 0,2vw hitam pekat; jok: 5vw 5vw 5vw 5vw;

Kode CSS di tablet dan ponsel:

lebar: 85vw;

Klon seluruh bagian sebanyak mungkin

Setelah Anda menyelesaikan bagian pertama, baris dan modul Toggle, Anda dapat mengkloning seluruh bagian sebanyak yang Anda inginkan. konten ini di halaman Anda.

Ubah konten

Anda mengubah seluruh konten flip-flop di setiap modul flip-flop.

Buat toko online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk produk fisik dan digital Anda di WordPress. (GRATIS)

Ubah warna ikon

Kemudian buka setiap modul Aktifkan dan ubah warna ikon. Yang kami gunakan untuk tutorial ini disebutkan di bawah ini:

  • Warna ikon 1: # ff9000
  • Warna ikon 2: # 00ffd4

penelitian

Sekarang semua langkah adalah waralaba,

Pikiran terakhir

Pada artikel ini, kami menunjukkan cara berkreasi dengan modul Divi Toggle. Lebih tepatnya; kami biasa menampilkan konten bagian yang berbeda secara kreatif. Tutorial ini telah mudah digunakan dengan modul kotak dialog. Anda juga dapat mengunduh file JSON gratis dari tutorial! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah ini.

Hosting Unlimited Indonesia