Membuat “Sticky Notes” dengan Konten yang Dapat Diperluas dengan Divi

Dengan opsi bawaan Divi, ada banyak cara untuk menampilkan layanan dan/atau langkah-langkah proses di situs web Anda. Untuk membantu Anda mendapatkan inspirasi, kami akan menunjukkan cara membuat catatan tempel dengan konten yang dapat diperluas menggunakan opsi bawaan Divi saja. Ini adalah cara yang menyenangkan untuk berbagi konten tambahan segera setelah pengunjung memicu interaksi. Anda dapat menggunakan desain ini untuk situs web apa pun yang sedang Anda kerjakan dan Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Catatan Tempel GRATIS

Untuk mendapatkan tata letak catatan tempel gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Reguler Baru

Hal pertama yang perlu Anda lakukan adalah menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru juga, menggunakan struktur kolom berikut:

Durasi Transisi

Tanpa menambahkan modul apa pun, buka pengaturan baris. Kami membuat transisi instan dengan mengubah durasi transisi di tab lanjutan.

• Durasi Transisi: 0ms

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Tambahkan Modul Teks baru ke kolom pertama baris dan masukkan konten H2 yang ingin Anda tampilkan dalam desain catatan tempel.

Warna latar belakang

Kemudian, buka pengaturan latar belakang dan ubah warna latar belakang yang sesuai:

• Warna Latar Belakang: #ffd800

Pengaturan Teks H2

Pindah ke pengaturan teks H2 dan buat beberapa perubahan di sana juga:

• Judul 2 Font: Bunga Indie
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #3a0cf2
• Judul 2 Ukuran Teks: 40px

Jarak

Untuk membuat tampilan dan nuansa catatan tempel, kita akan menambahkan beberapa nilai padding kustom ke modul:

• Padding Atas: 150px
• Padding Bawah: 150px
• Padding Kiri: 20px
• Padding Kanan: 20px

Berbatasan

Kami juga menambahkan batas atas menggunakan pengaturan berikut:

• Lebar Batas Atas: 20px
• Warna Batas Atas: #ffc300

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Modul selanjutnya yang kita butuhkan pada kolom pertama adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lalu, buka tab desain dan ubah warna pembagi.

• Warna: #ffc300

Gaya

Ubah juga pengaturan gaya pembagi.

• Gaya Pembagi: Putus-putus

Perekat

Dan ubah juga pengaturan ukuran.

• Berat Pembagi: 5px
• Tinggi: 0px

Jarak

Untuk membuat beberapa ruang antara modul sebelumnya dan yang ini, kami menambahkan beberapa margin atas.

• Margin Atas: 150px

Ubah Putar

Seperti yang dapat Anda perhatikan di pratinjau posting ini, kami sedang mencari untuk membuat pembagi vertikal, bukan pembagi horizontal. Untuk mencapai ini, kita akan mengubah nilai kiri dalam pengaturan transform rotate dari Divider Module:

• Kiri: 270 derajat

Visibilitas

Kami juga ingin memastikan bahwa Modul Pembagi muncul di bawah Modul Teks. Untuk melakukan itu, kami akan mengurangi indeks z dari pembagi di tab lanjutan.

• Indeks Z: -99

Tambahkan Modul Teks #2 ke Kolom 1

Tambahkan Simbol ke Kotak Konten

Modul berikutnya dan terakhir yang kita butuhkan di kolom pertama adalah Modul Teks lainnya. Tambahkan karakter '●' ke kotak konten.

Pengaturan Teks

Kemudian, lanjutkan ke tab desain dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Warna Teks: #3a0cf2
• Ukuran Teks: 100px
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Jarak

Buat tumpang tindih yang diinginkan dengan menambahkan beberapa margin atas negatif berikutnya.

• Margin Atas: -50px

Tambahkan Modul Teks #3 ke Kolom 2

Tambahkan Konten H3

Mari kita beralih ke kolom kedua. Di sini, modul pertama yang kita butuhkan adalah Modul Teks. Masukkan beberapa konten H3 pilihan Anda.

Pengaturan Teks H3

Buka tab desain dan ubah pengaturan teks H3 yang sesuai:

• Judul 3 Font: Bunga Indie
• Judul 3 Warna Teks: #3a0cf2
• Judul 3 Ukuran Teks: 30px

Jarak

Tambahkan beberapa margin atas kustom berikutnya:

• Margin Atas: 400px (Desktop), 200px (Tablet), 150px (Telepon)

Tambahkan Modul Teks #4 ke Kolom 2

Tambah isi

Ke modul berikutnya, yang merupakan Modul Teks lainnya. Masukkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Lalu, buka tab desain dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Ukuran Teks: 13px
• Tinggi Baris Teks: 2em

Perekat

Ubah lebar modul berikutnya.

• Lebar: 78%

Jarak

Dan tambahkan beberapa margin atas dan bawah.

• Margin Atas: 10px
• Margin Bawah: 50px

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Modul terakhir yang kita butuhkan di kolom kedua adalah Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Lalu, buka tab desain dan beri gaya pada tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 20px
• Warna Teks Tombol: #3a0cf2
• Warna Latar Tombol: #ffd800
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Abhaya Libre

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 60px
• Padding Kanan: 60px

Baris Klon Dua Kali

Setelah selesai menambahkan semua modul, Anda dapat melanjutkan dan mengkloning baris dua kali.

Ubah Baris Duplikat #1

Ubah Warna Latar Belakang Modul Teks #1

Kami mengubah palet warna dari kedua duplikat, dimulai dengan yang pertama. Buka Modul Teks pertama di kolom 1 dan ubah warna latar belakang.

• Warna Latar Belakang: #00ffee

Ubah Warna Batas Atas Modul Teks #1

Ubah warna batas atas juga.

• Warna Batas Atas: #00e0c2

Ubah Warna Pembagi

Kemudian, gunakan kode warna berikut untuk pembagi:

• Warna Pembagi: #00e0c2

Ubah Warna Latar Modul Tombol

Dan ubah warna latar belakang tombol.

• Warna Latar Tombol: #00ffee

Ubah Baris Duplikat #2

Ubah Warna Latar Belakang Modul Teks #1

Pindah ke baris duplikat kedua, buka Modul Teks pertama di kolom 1 dan ubah warna latar belakang.

• Warna Latar Belakang: #42ff21

Ubah Warna Batas Atas Modul Teks #1

Ubah warna batas atas juga.

• Warna Batas Atas: #1de524

Ubah Warna Pembagi

Kemudian, buka Divider Module dan gunakan warna pembagi berikut:

• Warna Pembagi: #1de524

Ubah Warna Latar Modul Tombol

Dan yang tak kalah pentingnya, ubah warna latar belakang tombol:

• Warna Latar Tombol: #42ff21

Buat Konten yang Dapat Diperluas

Tambahkan Ukuran Baris Default ke Semua Baris

Sekarang kami telah menyesuaikan semua baris di bagian kami, saatnya untuk membuat konten dapat diperluas. Untuk melakukannya, buka setiap baris dan terapkan tinggi maksimum berikut:

• Tinggi Maks: 397px

Tambahkan Ukuran Baris Arahkan ke Semua Baris

Ubah tinggi maksimum saat mengarahkan kursor ke '100%'. Ini akan memungkinkan baris untuk mengambil ukuran awalnya lagi.

• Tinggi Maks: 100%

Ubah Overflow untuk Semua Baris

Pastikan Anda menyembunyikan luapan setiap baris juga dan selesai!

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat catatan tempel dengan catatan yang dapat diperluas menggunakan opsi bawaan Divi saja. Ini adalah cara yang kreatif dan menyenangkan untuk menampilkan layanan di situs web Anda. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.