Cara menyimpan modul tetap di wadah kolomnya dengan 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)

Saat Anda melihat beberapa panggilan untuk bertindak pada halaman Anda, mungkin akan bermanfaat untuk membuat efek gulir. Salah satu solusinya adalah mengubah modul menjadi elemen-elemen tetap sambil bergerak dalam wadah kolom mereka. Dalam tutorial hari ini, kami akan menunjukkan kepada Anda cara membuat desain yang indah yang mengelola teknik ini. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita pergi.

penelitian

Sebelum terjun ke tutorial, mari kita lihat hasilnya dengan ukuran layar yang berbeda.

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Ayo mulai menciptakan!

Tambahkan bagian baru

Mulai dengan bagian reguler baru.

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

jarak

Buka pengaturan bagian dan ubah margin atas dan bawah untuk ukuran layar yang berbeda.

  • Jok atas: 7vw (kantor), 10vw (tablet), 15vw (telepon)
  • Pelapis di bagian bawah: 20vw (kantor), 7vw (tablet), 10vw (telepon)
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru untuk menggunakan struktur kolom berikut:

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

perekat

Tanpa menambahkan lebih banyak modul, buka parameter garis dan biarkan Anda menempati seluruh lebar bagian. Itu juga sangat penting opsi "Persamaan ketinggian kolom". Anda melakukan ini di kolom ruang kosong yang memungkinkan modul untuk bergerak bebas saat menggulir halaman.

  • Gunakan lebar jatuhkan khusus: Ya
  • Lebar selokan: 1
  • Menyamakan ketinggian kolom: Ya
  • Lebar: 100%
  • Lebar maksimum: 100%
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Kolom 2 Bantalan Atas

Kemudian buka pengaturan di kolom 2.

  • Lapisan atas: 20vw (desktop), 0vw (tablet dan telepon)
Baca Juga  Informasi Tentang Universitas Multimedia Nusantara
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Kolom 3 Bantalan Atas

Halaman ini juga tersedia dalam bahasa Prancis.

  • Padding terbaik: 40vw (desktop), 0vw (tablet dan telepon)
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Kolom 4 Bantalan Atas

4).

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)

  • Lapisan atas: 60vw (desktop), 0vw (tablet dan telepon)
wadah kolom

Tambahkan CTA ke kolom 1

Tambahkan konten

Saatnya untuk mulai menambahkan modul! Modul pertama yang kita butuhkan pada kolom 1 adalah modul CTA (Panggilan untuk Bertindak). Masukkan konten pilihan Anda.

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

hak istimewa

Tambahkan juga tautan ke tombol. Ini akan memungkinkan tombol untuk ditampilkan dalam desain.

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Peta warna bagian belakang

Ubah warna latar belakang modul setelahnya.

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Pengaturan teks

Buka tab Desain dan ubah pengaturan teks umum.

  • Penyelarasan teks: pusat
  • Warna teks: gelap
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Pengaturan teks judul

Juga ubah pengaturan teks pada judul.

  • Judul: H3
  • Judul Teks: Spectral
  • Judul teks berwarna: # 000000
  • Judul Teks Ukuran: 2vw (desktop), 4vw (tablet), 6vw (telepon)
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Pengaturan teks tubuh

Dengan parameter isi teks.

  • Jenis huruf: Fira Sans
  • Berat font: Ringan
  • Teks berwarna badan: # 000000
  • Ukuran teks isi: 1vw (desktop), 2vw (tablet), 3vw (telepon)
  • Tinggi badan: 1,8em
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Pengaturan tombol

Jangan lupa mengklik tombol modul CTA Anda juga.

  • Gunakan gaya khusus untuk tombol: Ya
  • Ukuran teks tombol: 1vw (desktop), 2vw (tablet), 3vw (telepon)
  • Warna teks tombol: #ffffff
  • Warna latar tombol: # 444eff
  • Lebar batas tombol: 0px
Cara menyimpan modul tetap di wadah kolomnya dengan Divi
  • Radius batas tombol: 50vw
  • Tombol font: Fira Sans
Cara menyimpan modul tetap di wadah kolomnya dengan Divi
  • Lapisan atas: 1vw (desktop), 2vw (tablet), 3vw (telepon)
  • Bantalan di bagian bawah: 1vw (kantor), 2vw (tablet), 3vw (telepon)
  • Padding kiri: 3vw (kantor), 7vw (tablet), 13vw (telepon)
  • Bantalan di sebelah kanan: 3vw (kantor), 7vw (tablet), 13vw (telepon)
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

jarak

Lalu kami mengatur margin khusus interior dan bawah.

  • Top Padding: 8vw
  • Padding bawah: 8vw
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

batas

Juga tambahkan sudut bulat ke modul.

  • Sudut bundar: 1vw (semua sudut)
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Kotak bayangan

Selesaikan desain modul dengan menambahkan bayangan kotak halus.

  • Shadow of the box Posisi horizontal: 10px
  • Box Shadow Blur Strength: 50px
  • Warna naungan: rgba (0,0,0,0,08)
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Kelas CSS

Sekarang, agar efek gulir berfungsi, kita harus menambahkan beberapa baris kode CSS di akhir tutorial ini. Sebagai persiapan, kami akan menambahkan kelas CSS ke modul CTA.

Baca Juga  Internal Server WordPress Error? Cek disini

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)

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Tambahkan modul gambar ke kolom 1

Unggah gambar

Mari kita beralih ke modul berikutnya dan terakhir yang kita butuhkan di kolom 1, yang merupakan modul gambar. Unduh gambar PNG pilihan Anda.

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

penjajaran

Ubah perataan gambar selanjutnya.

  • Penyelarasan Gambar: Tengah
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

perekat

Beli diri Anda untuk memaksakan total lebar pada modul juga.

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

jarak

Lengkapi parameter modul dengan mengakses pengaturan jarak dan nilai jarak kustom untuk ukuran layar yang berbeda.

  • Margin atas: -5vw (tablet dan telepon)
  • Margin yang lebih rendah: -12vw (desktop), 5vw (tablet dan telepon)
  • Padding kiri: 3vw (desktop), 10vw (tablet), 25vw (telepon)
  • Bantalan di sebelah kanan: 3vw (kantor), 10vw (tablet), 25vw (telepon)
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Kloning dua modul tiga kali dan letakkan kolom yang tersisa

Setelah Anda menyelesaikan kedua modul di kolom 1, Anda dapat menggandakan tiga kali dan menempatkan duplikat di kolom yang tersisa dari baris.

wadah kolom

Ubah gambar

Anda mengubah gambar di setiap modul gambar duplikat.

Ubah konten CTA dan warna tombol

Ini juga isi CTA dengan warna-warna rencana.

  • Modul CTA # 2: # 89ffb4
  • CTA Module 3: # ff89f1
  • Modul CTA 4: # ffd389
Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Tambahkan kelas CSS ke modul gambar di kolom 1, 2, dan 3

Sekarang, Anda yakin bahwa efeknya juga akan berfungsi pada gambar, kita perlu menambahkan kelas CSS ke modul gambar kolom 1, 2 dan 3.

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Tambahkan baris 2

Struktur kolom

Tetap hanya akan ditambahkan kode CSS. Untuk melakukan ini, tambahkan baris baru.

Buat toko online Anda dengan mudah

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

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

Tambahkan modul kode dengan kode CSS

Tambahkan modul kode ke baris, masukkan kode CSS di bawah ini dan Anda selesai!

Cara menyimpan modul tetap di wadah kolomnya dengan Divi

penelitian

Sekarang semua langkah adalah waralaba,

Cara menyimpan modul tetap di wadah kolomnya dengan Divi
wadah kolom

Pikiran terakhir

Pada artikel ini, kami menunjukkan cara menyimpan modul dalam wadah kolom mereka. Penggunaan ini adalah techno untuk menggunakan kami. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah ini.

Hosting Unlimited Indonesia