Unduh Desain Follow Sosial Unik dengan 5 Palet Warna untuk Divi

Situs web dan media sosial sering berjalan beriringan. Jejaring sosial digunakan untuk mengarahkan lalu lintas ke situs web tetapi sebaliknya juga berlaku, terutama jika Anda ingin meningkatkan keterlibatan di jejaring sosial Anda. Itu sebabnya sebagian besar situs web menyertakan tautan ke jejaring sosial mereka di berbagai halaman. Anda dapat menggunakan cara klasik dan menambahkan ikon, atau Anda dapat mencoba pendekatan yang lebih unik.

Kami telah membuat desain ikuti sosial yang menakjubkan dan kreatif yang dapat Anda unduh dan dapat digunakan di situs web apa pun yang Anda buat menggunakan Divi. Selain itu, kami juga memberi Anda 5 palet warna berbeda yang terlihat bagus untuk desain ini.

Mari kita lakukan!

Pratinjau

Mari kita mulai dengan melihat variasi yang berbeda dari desain ini dan tampilan pada ukuran layar yang berbeda.

Unduh Desain Ikuti Sosial GRATIS

Untuk mendapatkan desain ikuti sosial dengan 5 palet warna berbeda, 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!

Palet Warna

Kami akan memandu Anda langkah demi langkah melalui proses. Tapi sebelum kita melakukannya, lanjutkan dan pilih palet warna pilihan dan jaga agar kode warna tetap dekat. Kami akan merujuk ke nomor warna di seluruh tutorial.

Palet #1

• Warna #1: #D09CF1
• Warna #2: #00e2df

Palet #2

• Warna #1: #ffa0a0
• Warna #2: #10007f

Palet #3

• Warna #1: #ff3273
• Warna #2: #050042

Palet #4

• Warna #1: #f954ee
• Warna #2: #00aeff

Palet #5

• Warna #1: #ffca3a
• Warna #2: #ff6005

Buat Ulang Desain Ikuti Sosial dari Awal

Tambahkan Bagian #1

Latar Belakang Gradien

Mulailah dengan menambahkan bagian reguler ke halaman baru atau yang sudah ada. Buka pengaturan bagian dan terapkan latar belakang gradien:

• Warna 1: Warna #1 (Temukan di Palet Warna)
• Warna 2: Warna #2 (Temukan di Palet Warna)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 6%

Gambar latar belakang

Kemudian, unggah pola latar belakang yang dapat Anda temukan dengan masuk ke folder unduhan > Pola Latar Belakang . Gabungkan pola latar belakang dengan pengaturan latar belakang berikut:

• Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
• Posisi Gambar Latar Belakang: Tengah Bawah
• Pengulangan Gambar Latar Belakang: Spasi

Pembagi Atas

Buka pengaturan pembagi berikutnya dan tambahkan pembagi atas.

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: rgba(72,0,79,0.08)
• Tinggi Pembagi: 500px
• Flip Pembagi: Vertikal

Pembagi Bawah

Tambahkan pembagi bawah juga.

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #FFFFFF
• Tinggi Pembagi: 500px

Jarak

Lalu, buka pengaturan spasi dan tambahkan beberapa bantalan khusus.

• Padding Atas: 220px
• Padding Bawah: 329px

Animasi

Terakhir, tambahkan animasi halus ke bagian tersebut.

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Intensitas Animasi: 2%
• Animasi Mulai Opacity: 100%

Menambahkan baris

Struktur Kolom

Kita sekarang dapat menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Teks

Tambah isi

Satu-satunya modul yang kita perlukan di baris ini adalah Modul Teks. Tambahkan judul dan paragraf ke kotak konten.

Pengaturan Teks

Kemudian, buka pengaturan teks dan buat beberapa modifikasi.

• Ukuran Teks: 16px
• Tinggi Baris Teks: 2em
• Orientasi Teks: Tengah
• Warna Teks: Cahaya

Pengaturan Teks H1/H2

Ubah pengaturan heading yang Anda pilih juga.

• Font Judul: Rubik
• Gaya Font Judul: Huruf Besar
• Ukuran Teks Judul: 100px (Desktop), 42px (Tablet), 32px (Telepon)
• Tinggi Garis Pos: 1.2em

Perekat

Kurangi lebar modul berikutnya.

• Lebar: 71%
• Penyelarasan Modul: Pusat

Tambahkan Bagian #2

Tepat di bawah bagian sebelumnya, lanjutkan dan tambahkan bagian reguler baru. Tidak perlu melakukan perubahan apa pun pada pengaturan bagian.

Menambahkan baris

Struktur Kolom

Tambahkan baris menggunakan struktur kolom berikut:

Perekat

Kemudian, buat baris dengan lebar penuh dalam pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya

Tambahkan Modul Gambar ke Kolom 2

Unggah Mockup

Saatnya mulai menambahkan modul! Mulailah dengan menambahkan Modul Gambar ke kolom kedua. Unggah mockup yang cocok dengan palet warna yang Anda pilih. Anda dapat menemukan semua jenis maket dengan membuka folder unduhan > Mockup .

Perekat

Ubah ukuran Modul Gambar juga.

• Lebar: 82% (Desktop), 100% (Tablet & Ponsel)
• Penyelarasan Modul: Pusat

Jarak

Untuk tumpang tindih Modul Gambar dan bagian sebelumnya, tambahkan beberapa margin negatif ke Modul Gambar.

• Margin Atas: -300px

Tambahkan Modul Blurb ke Kolom 3

Tambah isi

Kami sekarang dapat menambahkan semua jejaring sosial! Untuk membuatnya, kami menggunakan Modul Blurb. Lanjutkan dan tambahkan Modul Blurb pertama ke kolom ketiga dan ubah kontennya.

Tambahkan Tautan

Tambahkan tautan ke halaman sosial berikutnya.

Pilih Ikon

Pilih ikon Anda juga.

Warna latar belakang

Lanjutkan dengan masuk ke pengaturan latar belakang dan menggunakan warna latar belakang yang sedikit transparan.

• Warna Latar Belakang: rgba(255,255,255,0.79)

Pengaturan Ikon

Kemudian, ubah pengaturan ikon. Di sini, kami menggunakan salah satu warna resmi Instagram.

• Warna Ikon: #fb3958
• Penempatan Ikon: Kiri

Pengaturan Teks Judul

Buat beberapa perubahan pada pengaturan teks judul berikutnya.

• Judul Font Berat: Semi Tebal
• Warna Teks Judul: #fb3958
• Tinggi Baris Judul: 1.7em

Jarak

Untuk membuat tumpang tindih dengan mockup, kita akan menambahkan beberapa nilai spasi.

• Margin Atas: -170px (Desktop), -800 (Tablet), -700 (Ponsel)
• Margin Kiri: -60% (Desktop), 0% (Tablet & Ponsel)
• Margin Kanan: 60% (Desktop), 0% (Tablet & Ponsel)
• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 50px
• Padding Kanan: 50px

Berbatasan

Kami akan bermain-main dengan pengaturan perbatasan juga.

• Batas Kiri Atas: 20px
• Batas Kiri Bawah: 20px
• Lebar Batas Kanan: 5px
• Warna Tepi Kanan: #fb3958

Bayangan Kotak

Menambahkan bayangan kotak akan memberi elemen desain beberapa kedalaman.

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -11px

Animasi

Terakhir, kami menggunakan gaya animasi slide-in untuk meniru efek notifikasi seluler yang sudah dikenal orang.

• Gaya Animasi: Slide
• Arah Animasi: Kiri

Modul Blurb Klon Tiga Kali

Untuk menghemat waktu, kita akan mengkloning Modul Blurb tiga kali. Kemudian, kita akan memodifikasi setiap duplikat untuk membuat hasil yang kita inginkan.

Hapus Margin Teratas Negatif dari Duplikat

Untuk mempertahankan ikhtisar yang baik, kami akan mulai dengan menghapus margin kustom negatif dari setiap duplikat.

Pengaturan Modul Blurb Unik

Modul Blurb #2

Ubah Salin

Buka Modul Blurb kedua di kolom ketiga dan ubah kontennya.

Pilih Ikon

Pilih ikon lain juga.

Pengaturan Ikon

Ubah warna ikon agar sesuai dengan jaringan sosial yang diwakilinya.

• Warna Ikon: #3b5998

Pengaturan Teks Judul

Gunakan warna yang sama untuk warna teks judul juga.

• Warna Teks Judul: #3b5998

Jarak

Untuk membuat tumpang tindih lain di sisi lain telepon, ubah nilai spasi.

• Margin Kiri: -170% (Desktop), 0% (Tablet & Ponsel)
• Margin Kanan: 170% (Desktop), 0% (Tablet & Ponsel)

Berbatasan

Ubah pengaturan perbatasan berikutnya.

• Pojok Kanan Atas: 20px
• Pojok Kanan Bawah: 20px
• Lebar Batas Kiri: 5px
• Warna Batas Kiri: #3b5998

Animasi

Buat Modul Blurb ini meluncur dari sisi lain dengan penundaan kecil juga.

• Arah Animasi: Kanan
• Penundaan Animasi: 100ms

Modul Blurb #3

Ubah Salin

Modul Blurb ketiga membutuhkan beberapa salinan yang berbeda juga.

Pilih Ikon

Pilih ikon lain berikutnya.

Pengaturan Ikon

Ubah warna ikon menjadi warna yang cocok dengan jaringan sosial yang diwakilinya.

• Warna Ikon: #1da1f2

Pengaturan Teks Judul

Gunakan warna yang sama untuk warna teks judul.

• Warna Teks Judul: #1da1f2

Jarak

Ubah juga pengaturan spasi.

• Margin Kiri: -80% (Desktop), 0% (Tablet & Ponsel)
• Margin Kanan: 80% (Desktop), 0% (Tablet & Ponsel)

Berbatasan

Ubah warna perbatasan di pengaturan perbatasan juga.

• Warna Batas Kanan: #1da1f2

Animasi

Terakhir, tambahkan penundaan kecil pada animasi yang sudah ada.

• Penundaan Animasi: 200ms

Modul Blurb #4

Ubah Salin

Untuk Modul Blurb terakhir, kami memulai dengan mengubah konten.

Pilih Ikon

Pilih ikon sosial lain di pengaturan Gambar & Ikon berikutnya.

Pengaturan Ikon

Sesuaikan warna ikon dengan jejaring sosial yang ditampilkan.

• Warna Ikon: #0077B5

Pengaturan Teks Judul

Gunakan warna yang sama untuk teks judul.

• Warna Teks Judul: #0077B5

Jarak

Dorong Modul Blurb ke sisi kiri menggunakan pengaturan spasi yang berbeda juga.

• Margin Kiri: -180% (Desktop), 0% (Tablet & Ponsel)
• Margin Kanan: 180% (Desktop), 0% (Tablet & Ponsel)

Berbatasan

Kemudian, ubah pengaturan perbatasan.

• Pojok Kanan Atas: 20px
• Pojok Kanan Bawah: 20px
• Lebar Batas Kiri: 5px
• Warna Batas Kiri: #0077B5

Animasi

Last but not least, tambahkan arah animasi yang berbeda dan beberapa penundaan animasi ke Modul Blurb ini.

• Arah Animasi: Kanan
• Penundaan Animasi: 300ms

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.

Pikiran Akhir

Dalam posting ini, kami telah membagikan desain follow sosial unik yang dapat Anda unduh secara gratis. Kami juga telah memberi Anda 5 palet warna berbeda yang dapat Anda terapkan. Jangan ragu untuk menggunakan file JSON di situs web Divi mana pun yang Anda buat untuk meningkatkan keterlibatan sosial melalui situs web Anda. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!