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.

Ayo mulai menciptakan!

Tambahkan bagian baru

Mulai dengan bagian reguler baru.

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)

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru untuk menggunakan struktur kolom berikut:

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%

Kolom 2 Bantalan Atas

Kemudian buka pengaturan di kolom 2.

  • Lapisan atas: 20vw (desktop), 0vw (tablet dan telepon)

Kolom 3 Bantalan Atas

Halaman ini juga tersedia dalam bahasa Prancis.

  • Padding terbaik: 40vw (desktop), 0vw (tablet dan telepon)

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.

hak istimewa

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

Peta warna bagian belakang

Ubah warna latar belakang modul setelahnya.

Pengaturan teks

Buka tab Desain dan ubah pengaturan teks umum.

  • Penyelarasan teks: pusat
  • Warna teks: gelap

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)

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

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
  • Radius batas tombol: 50vw
  • Tombol font: Fira Sans
  • 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)

jarak

Lalu kami mengatur margin khusus interior dan bawah.

  • Top Padding: 8vw
  • Padding bawah: 8vw

batas

Juga tambahkan sudut bulat ke modul.

  • Sudut bundar: 1vw (semua sudut)

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)

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.

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)

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.

penjajaran

Ubah perataan gambar selanjutnya.

  • Penyelarasan Gambar: Tengah

perekat

Beli diri Anda untuk memaksakan total lebar pada modul juga.

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)

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

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.

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)

Tambahkan modul kode dengan kode CSS

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

penelitian

Sekarang semua langkah adalah waralaba,

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.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.