Cara Membuat Bios Follow Sosial Seluler yang Cantik dengan Divi (Unduh Gratis!)

Saat Anda membuat situs web pribadi, ada baiknya memiliki halaman bio follow sosial yang dapat Anda tautkan dengan mudah. Itu membuat kartu kunjungan online yang bagus dengan ringkasan tentang apa yang Anda lakukan dan di mana orang dapat melihat pekerjaan Anda. Informasi yang dibagikan dalam bios ikuti sosial seluler biasanya terbatas pada gambar, nama, jabatan, deskripsi kecil, dan tautan portofolio Anda. Anda juga dapat menambahkan CTA tambahan untuk membantu pengunjung menghubungi Anda.

Dalam posting ini, kami akan menunjukkan kepada Anda cara membuat dua bios follow sosial seluler yang indah menggunakan Divi. Di akhir tutorial, kami juga akan membagikan file JSON dari kedua contoh sehingga Anda dapat segera memulai.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas dua contoh yang akan kita buat ulang dari awal.

Contoh 1

Contoh 2

Mulai Membuat Ulang Contoh #1

Tambahkan Bagian Baru

Warna latar belakang

Mari kita mulai dengan contoh pertama! Buat halaman baru atau buka yang sudah ada dan tambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Jarak

Kemudian, pergi ke pengaturan spasi bagian dan buat beberapa perubahan. Anda akan melihat bahwa nilainya berbeda sesuai dengan ukuran layar. Kami mempertahankan jenis desain ramping yang sama di berbagai ukuran layar dengan memodifikasi bantalan kiri dan kanan saat kami menggunakannya.

• Padding Atas: 50px (Desktop & Tablet), 0px (Ponsel)
• Padding Bawah: 50px (Desktop & Tablet), 0px (Ponsel)
• Padding Kiri: 36vw (Desktop), 23vw (Tablet), 0vw (Telepon)
• Padding Kanan: 36vw (Desktop), 23vw (Tablet), 0vw (Telepon)

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang.

• Warna Latar Belakang: #333333

Perekat

Lalu, buka pengaturan ukuran di tab desain dan hapus semua ruang khusus antara kolom dan baris.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Bayangan Kotak

Kami juga menambahkan bayangan kotak untuk membuat beberapa kedalaman pada ukuran layar yang lebih besar.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Gambar

Unggah Gambar

Saatnya mulai menambahkan modul! Mulailah dengan Modul Gambar yang memiliki rasio 1:1. Gambar yang kita gunakan, misalnya, memiliki lebar dan tinggi '500px'.

Penyelarasan

Setelah Anda mengunggah gambar, buka tab desain dan ubah perataan gambar.

• Penjajaran Gambar: Tengah

Perekat

Kami mengecilkan ukuran gambar dengan memodifikasi lebar di pengaturan ukuran berikutnya.

• Lebar: 33%
• Penyelarasan Modul: Pusat

Berbatasan

Kami juga mengubah gambar menjadi lingkaran dengan menambahkan '50vw' ke setiap sudut di pengaturan batas. Selain itu, kami akan menambahkan batas putih menggunakan pengaturan berikut:

• Lebar Perbatasan: 8px
• Warna Perbatasan: #ffffff

Bayangan Kotak

Last but not least, tambahkan bayangan kotak untuk membuat desain dimensional.

• Posisi Vertikal Bayangan Kotak: 40px
• Kekuatan Buram Bayangan Kotak: 100px
• Warna Bayangan: #000000

Tambahkan Modul Teks #1

Tambahkan Konten H3

Ke modul berikutnya! Tambahkan Modul Teks tepat di bawah Modul Gambar dengan beberapa konten H3.

Pengaturan Teks H3

Lanjutkan dengan membuka tab desain dan mengubah pengaturan teks H3.

• Judul 3 Font: Buka Sans
• Judul 3 Berat Font: Semi Tebal
• Judul 3 Perataan Teks: Tengah
• Judul 3 Warna Teks: #ffffff
• Pos 3 Tinggi Baris: 0.1em

Jarak

Kami juga menambahkan beberapa margin atas untuk membuat ruang antara Modul Gambar dan Modul Teks ini.

• Margin Atas: 30px

Tambahkan Modul Teks #2

Tambah isi

Modul selanjutnya yang kita butuhkan adalah Modul Teks lainnya. Tambahkan judul pekerjaan Anda ke kotak konten.

Pengaturan Teks

Lalu, buka tab desain dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Berat Font Teks: Reguler
• Warna Teks: #919191
• Orientasi Teks: Tengah

Tambahkan Modul Teks #3

Tambah isi

Lanjutkan dengan menambahkan Modul Teks lain dengan deskripsi singkat tentang diri Anda.

Pengaturan Teks

Buka pengaturan teks dan buat beberapa perubahan.

• Font Teks: Buka Sans
• Warna Teks: #b7b7b7
• Tinggi Baris Teks: 1.6em
• Orientasi Teks: Tengah

Perekat

Ubah lebar modul juga.

• Lebar: 68%
• Penyelarasan Modul: Pusat

Jarak

Dan tambahkan beberapa margin atas dan bawah untuk menciptakan ruang tambahan.

• Margin Atas: 30px
• Margin Bawah: 30px

Tambahkan Modul Tombol

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Tombol. Tambahkan beberapa salinan.

Penyelarasan

Kemudian, buka tab desain dan ubah perataan tombol agar sesuai dengan modul sebelumnya.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Lanjutkan dengan mengubah tampilan tombol di pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 13px
• Warna Teks Tombol: #ffffff
• Warna 1: #ad32ff
• Warna 2: #32baff
• Arah Gradien: 96deg
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 30px
• Font Tombol: Buka Sans
• Berat Huruf: Sangat Tebal
• Gaya Font: Huruf Besar

Jarak

Tambahkan beberapa margin kustom dan padding berikutnya.

• Margin Bawah: 50px
• Padding Atas: 15px
• Padding Bawah: 15px
• Padding Kiri: 50px
• Padding Kanan: 50px

Bayangan Kotak

Dan lengkapi desain tombol dengan menambahkan bayangan kotak.

• Posisi Vertikal Bayangan Kotak: 20px
• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.69)

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya! Gunakan struktur kolom berikut:

Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan latar belakang gradien:

• Warna 1: #1e1e1e
• Warna 2: #3f3f3f
• Tipe Gradien: Radial
• Arah Radial: Kiri Atas
• Posisi Awal: 26%
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Gambar latar belakang

Simpan gambar berikut ke komputer Anda dan gunakan sebagai gambar latar untuk baris:

Bersama dengan pengaturan latar belakang berikut:

• Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan
• Campuran Gambar Latar Belakang: Cahaya Keras

Perekat

Lalu, buka tab desain dan hapus semua ruang antara kolom dan baris. Ini akan membantu kita memanfaatkan sepenuhnya ruang baris yang kita dapatkan.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Tambahkan beberapa bantalan khusus berikutnya.

• Padding Atas: 84px
• Padding Bawah: 84px
• Padding Kiri: 4vw (Desktop), 7vw (Tablet), 14vw (Telepon)
• Padding Kanan: 4vw (Desktop), 7vw (Tablet), 14vw (Telepon)

Bayangan Kotak

Bersamaan dengan bayangan kotak.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba(0,0,0,0.3)

Menampilkan

Untuk memastikan semua ikon ikuti sosial muncul bersebelahan, kita akan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Ikuti Media Sosial ke Kolom 1

Penyelarasan

Modul pertama yang kita butuhkan di kolom 1 adalah Modul Follow Media Sosial. Setelah Anda menambahkan modul, ubah perataan item di tab desain.

• Penyelarasan Item: Pusat

Tambahkan Jejaring Sosial Baru

Lanjutkan dengan menambahkan jejaring sosial baru. Untuk contoh ini, kami menggunakan Dribbble.

Tautan

Tambahkan tautan ke profil Dribbble Anda.

Latar Belakang Gradien

Kemudian, ubah latar belakang gradien menggunakan pengaturan berikut:

• Warna 1: #ea0061
• Warna 2: #ea4c8d
• Arah Gradien: 136deg

Jarak

Dan tingkatkan ukuran modul dengan menambahkan beberapa bantalan khusus.

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

Berbatasan

Kami juga mengubah modul menjadi lingkaran dengan menambahkan '20vw' ke setiap sudut di pengaturan batas.

Bayangan Kotak

Terakhir, tambahkan bayangan kotak.

• Posisi Vertikal Bayangan Kotak: 20px
• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: #000000

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Tambahkan Modul Teks ke kolom pertama berikutnya.

Pengaturan Teks

Ubah pengaturan teks.

• Font Teks: Buka Sans
• Berat Font Teks: Sangat Tebal
• Warna Teks: #ffffff
• Orientasi Teks: Tengah

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Tambahkan satu lagi di bawah yang sebelumnya.

Pengaturan Teks

Ubah juga pengaturan teks modul ini.

• Font Teks: Buka Sans
• Warna Teks: #898989
• Ukuran Teks: 11px
• Orientasi Teks: Tengah

Kloning Modul di Kolom 1 Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda selesai menyesuaikan semua modul di kolom 1, Anda dapat melanjutkan dan mengkloningnya dua kali. Tempatkan duplikat di dua kolom baris yang tersisa.

Ubah Jejaring Sosial

Tentu saja, Anda harus mengubah jaringan sosial.

Ubah Tautan Jejaring Sosial

Bersama dengan tautan.

Ubah Latar Belakang Gradien Jejaring Sosial

Dan latar belakang gradien jaringan.

• Warna 1: #0043ff
• Warna 2: #00aced

• Warna 1: #ea2c59
• Warna 2: #fed270

Mulai Membuat Ulang Contoh #2

Tambahkan Bagian Baru

Warna latar belakang

Lanjut ke contoh berikutnya! Tambahkan bagian baru dengan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Jarak

Tambahkan beberapa bantalan khusus berikutnya.

• Padding Atas: 50px (Desktop & Tablet), 0px (Ponsel)
• Padding Bawah: 50px (Desktop & Tablet), 0px (Ponsel)
• Padding Kiri: 36vw (Desktop), 23vw (Tablet), 4vw (Telepon)
• Padding Kanan: 36vw (desktop), 23vw (Tablet), 4vw (Telepon)

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka tab desain pengaturan baris dan ubah pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Tambahkan Modul Gambar

Unggah Gambar

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan adalah Image Module dengan rasio 1:1.

Penyelarasan

Ubah perataan gambar.

• Penjajaran Gambar: Tengah

Perekat

Ubah lebarnya juga.

• Lebar: 33%
• Penyelarasan Modul: Pusat

Berbatasan

Dan tambahkan '20px' ke masing-masing sudut di pengaturan perbatasan.

Bayangan Kotak

Lengkapi desain gambar dengan menambahkan bayangan kotak halus.

• Kekuatan Kabur Bayangan Kotak: 51px
• Warna Bayangan: rgba (0,0,0,0.37)

Tambahkan Modul Teks #1

Tambahkan Konten H3

Modul selanjutnya yang kita butuhkan adalah Modul Teks. Tambahkan beberapa konten H3 pilihan.

Pengaturan Teks H3

Ubah pengaturan teks H3 di tab desain.

• Judul 3 Font: Buka Sans
• Judul 3 Berat Font: Ultra Tebal
• Judul 3 Gaya Font: Huruf Besar
• Judul 3 Perataan Teks: Tengah
• Judul 3 Warna Teks: #000000
• Spasi Judul 3 Huruf: -1px
• Pos 3 Tinggi Baris: 0.9em

Jarak

Tambahkan beberapa margin atas berikutnya.

• Margin Atas: 30px

Tambahkan Modul Teks #2

Tambah isi

Tambahkan Modul Teks lain.

Pengaturan Teks

Ubah pengaturan teks.

• Font Teks: Buka Sans
• Warna Teks: #919191
• Orientasi Teks: Tengah

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang baris.

• Warna Latar Belakang: #ffffff

Warna Latar Belakang Kolom 2

Tambahkan warna latar belakang ke kolom kedua juga.

• Kolom 2 Warna Latar Belakang: #efefef

Penyelarasan

Pastikan Anda menggunakan perataan baris kiri.

• Penjajaran Baris: Kiri

Perekat

Buka pengaturan ukuran berikutnya dan buat beberapa perubahan.

• Gunakan Lebar Kustom: Ya
• Satuan: %
• Lebar Kustom: 67%
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Kami juga menambahkan beberapa padding khusus ke baris dan kolomnya.

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 1 Padding Atas: 20px
• Kolom 1 Padding Bawah: 20px
• Kolom 2 Padding Atas: 20px
• Kolom 2 Padding Bawah: 20px

Berbatasan

Tambahkan '14px' ke pojok kiri atas, kanan atas, dan kiri bawah.

Bayangan Kotak

Dan lengkapi desain baris dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.17)

Tambahkan Modul Ikuti Media Sosial ke Kolom 1

Penyelarasan

Di kolom pertama, kita membutuhkan modul Social Media Follow. Ubah perataan item.

• Penyelarasan Item: Pusat

Tambahkan Jejaring Sosial Baru

Kemudian, tambahkan jejaring sosial baru. Kami menggunakan Dribbble.

Tautan

Tambahkan tautan ke portofolio Dribbble Anda.

Latar Belakang Gradien

Dan ubah latar belakang gradien jejaring sosial.

• Warna 1: #ea0061
• Warna 2: #ea4c8d
• Arah Gradien: 136deg

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

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

Berbatasan

Dan tambahkan '10px' ke setiap sudut jejaring sosial.

Bayangan Kotak

Lengkapi desain modul dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Teks #1 ke Kolom 2

Tambah isi

Tambahkan Modul Teks ke kolom kedua.

Pengaturan Teks

Ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Berat Font Teks: Sangat Tebal
• Warna Teks: #000000
• Orientasi Teks: Tengah

Jarak

Buat ruang dengan menambahkan beberapa margin atas berikutnya.

• Margin Atas: 10px

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Modul kedua yang kita butuhkan di kolom 2 adalah Modul Teks lainnya.

Pengaturan Teks

Ubah pengaturan teks.

• Font Teks: Buka Sans
• Warna Teks: #898989
• Ukuran Teks: 11px
• Orientasi Teks: Tengah

Baris Klon #2

Setelah selesai memodifikasi baris, Anda dapat melanjutkan dan mengkloningnya sekali.

Tukar Modul

Tukar modul berikutnya.

Tambahkan Warna Latar Kolom 1

Kemudian, tambahkan warna latar belakang kolom 1 ke baris duplikat.

• Kolom 1 Warna Latar Belakang: #dbdbdb

Hapus Warna Latar Belakang Kolom 2

Hapus warna background kolom 2 selanjutnya.

Ubah Perataan Baris

Ubah perataan baris juga.

• Penjajaran Baris: Kanan

Ubah Ukuran Baris

Seiring dengan lebar khusus dalam pengaturan ukuran.

• Lebar Kustom: 66,99%

Ubah Batas Baris

Kami juga memastikan '14px' ditetapkan ke sudut kanan atas dan kanan bawah saja.

Ubah Jaringan Ikuti Sosial

Lanjutkan dengan mengubah jejaring sosial.

Ubah Latar Belakang Gradien Jaringan Ikuti Sosial

Seiring dengan latar belakang gradien.

• Warna 1: #0043ff
• Warna 2: #00aced

Klon Kedua Baris Ikuti Sosial

Setelah Anda selesai memiliki kedua baris ikuti sosial, Anda dapat mengkloning masing-masing baris.

Ubah Batas Duplikat #1

Ubah sudut membulat dari duplikat pertama.

Ubah Jaringan Ikuti Sosial Duplikat # 1

Seiring dengan jejaring sosial.

Ubah Latar Belakang Gradien Duplikat #1

Dan latar belakang gradien.

• Warna 1: #ea2c59
• Warna 2: #fed270

Ubah Batas Duplikat #2

Lanjutkan dengan mengubah sudut membulat dari duplikat kedua juga.

Ubah Jaringan Ikuti Sosial Duplikat #2

Seiring dengan jejaring sosial.

Ubah Latar Belakang Gradien Duplikat #2

Dan, sekali lagi, latar belakang gradien yang ditetapkan ke jejaring sosial.

• Warna 1: #00306b
• Warna 2: #007bb6

Unduh Bios Ikuti Sosial Seluler secara GRATIS

Untuk mendapatkan bagian ikuti sosial seluler 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!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir dari kedua contoh yang telah kita buat ulang.

Contoh 1

Contoh 2

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat bios ikuti sosial yang menakjubkan untuk perangkat seluler. Anda dapat menggunakan desain ini sebagai kartu kunjungan online Anda dan mengarahkan orang ke halaman ini sehingga mereka dapat menghubungi atau melihat tautan portofolio Anda. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!