Cara Membuat Bagian Pahlawan Cantik untuk Situs Web Pribadi Anda dengan Divi

Membuat situs web pribadi menyenangkan sekaligus menantang. Anda ingin situs web Anda terlihat menarik dan cukup pribadi untuk menyampaikan cerita Anda. Dan pada saat yang sama, Anda ingin memiliki situs web yang indah dan otentik yang menunjukkan bahwa Anda tahu apa yang Anda lakukan.

Untuk membantu Anda dalam proses kreatif membuat situs web pribadi seperti itu, kami telah membuat bagian pahlawan cantik yang pasti akan membuat situs web Anda menonjol. Dalam posting ini, kami akan menunjukkan kepada Anda langkah demi langkah cara membuat hasil itu menggunakan tidak lain dari pengaturan bawaan Divi untuk setiap langkah. Sebelum masuk ke tutorial, mari kita lihat hasilnya.

Hasil di Desktop

Hasilnya di desktop terlihat seperti ini:

Hasil di Seluler

Dan pengunjung yang mengunjungi website di mobile akan melihat hasil sebagai berikut:

Cara Membuat Bagian Pahlawan Cantik untuk Situs Web Pribadi Anda dengan Divi

Berlangganan Saluran Youtube Kami

Buat Bagian

Mulailah dengan membuat halaman baru di situs WordPress Anda, mengaktifkan Divi Builder, beralih ke Visual Builder dan menambahkan bagian baru ke dalamnya.

Latar Belakang Gradien

Satu-satunya hal yang harus Anda ubah dalam bagian ini adalah latar belakang. Latar belakang ini akan berlaku untuk semua baris yang akan kita tambahkan pada langkah selanjutnya dari posting ini. Buka subkategori Latar Belakang dan tambahkan latar belakang gradien berikut ke dalamnya:

• Warna Pertama: #c2c6f3
• Warna Kedua: #cea5b9
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 45%
• Posisi Akhir: 45%

Tambahkan Baris Pertama

Kemudian, lanjutkan dan tambahkan baris pertama ke bagian tersebut. Baris ini hanya akan menyertakan Modul Teks yang dapat Anda lihat di bagian atas tata letak.

Struktur Kolom

Selanjutnya, pilih struktur kolom dengan satu kolom.

Perekat

Pindah ke tab Desain pengaturan baris Anda dan gunakan pengaturan berikut untuk subkategori Ukuran:

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

Modul Teks

Seperti yang disebutkan sebelumnya, baris ini hanya membutuhkan Modul Teks.

Pengaturan Teks

Setelah Anda memasukkan teks yang ingin Anda tampilkan di tab Konten, buka tab Desain dan buat pengaturan berikut berlaku untuk subkategori Teks:

• Font Teks: Arizona
• Berat Font Teks: Reguler
• Ukuran Teks: 150 (Desktop), 80 (Tablet), 70 (Ponsel)
• Warna Teks: rgba(255,255,255,0.39)
• Orientasi Teks: Tengah

Tambahkan Baris Kedua

Setelah Anda menyelesaikan baris pertama, lanjutkan dan tambahkan baris kedua ke bagian yang sama.

Struktur Kolom

Seperti baris sebelumnya, baris ini hanya akan memiliki satu kolom juga.

Gambar latar belakang

Buka pengaturan baris dan tambahkan gambar pribadi yang ingin Anda gunakan sebagai gambar latar untuk kolom pertama. Pastikan Posisi Gambar diatur ke 'Tengah' juga.

Perekat

Kemudian, buka subkategori Ukuran dan buat perubahan berikut:

• Gunakan Lebar Kustom: Ya
• Lebar Kustom: 557px

Jarak

Selanjutnya, gunakan '0px' untuk padding atas, bawah, kanan dan kiri baris.

Bayangan Kotak

Terakhir, buat Box Shadow berikut berlaku:

• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: 2px
• Kekuatan Kabur Bayangan Kotak: 53px
• Kekuatan Penyebaran Bayangan Kotak: 10px
• Warna Bayangan: rgba(0,0,0,0.3)
• Posisi Bayangan: Bayangan Luar

Modul Teks

Setelah pengaturan baris Anda selesai, lanjutkan dan tambahkan Modul Teks ke kolom.

Warna latar belakang

Pertama-tama, Modul Teks ini akan membutuhkan warna latar belakang dengan warna 'rgba(0,0,0,0.66)'.

Pengaturan Teks

Kemudian, lanjutkan ke tab Desain dan buat perubahan berikut berlaku untuk subkategori Teks:

• Font Teks: Andika
• Berat Font Teks: Tebal
• Gaya Font Teks: Huruf Besar
• Ukuran Teks: 78px (Desktop), 70px (Tablet), 50px (Telepon)
• Warna Teks: #c2c6f3
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Berbatasan

Selanjutnya, buka subkategori Border dan gunakan border berikut:

• Gunakan Perbatasan: Ya
• Warna Batas: #c2c6f3
• Lebar Perbatasan: 8px
• Gaya Perbatasan: Padat

Jarak

Selanjutnya, tambahkan margin dan padding berikut:

• Margin Atas, Kanan, Bawah & Kiri: 50px
• Padding Atas: 200px
• Padding Bawah: 200px

Bayangan Kotak

Terakhir, gunakan Box Shadow berikut ke Modul Teks:

• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 50px
• Warna Bayangan: rgba (206.165.185.0.41)
• Posisi Bayangan Kotak: Bayangan Luar

Tambahkan Baris Ketiga

Seperti yang disebutkan sebelumnya, kami hanya menggunakan satu bagian untuk tutorial ini. Alasan di balik itu adalah kami ingin latar belakang gradien bagian tersebar di semua konten berbeda yang dibagikan. Silakan dan tambahkan baris baru.

Struktur Kolom

Pilih dua kolom untuk baris ini.

Perekat

Kemudian, aktifkan opsi 'Gunakan Lebar Kustom' dan terapkan lebar '663px'.

Jarak

Terakhir, tambahkan margin atas dan bawah '50px'.

Modul Teks Pertama

Tambahkan Modul Teks pertama ke kolom pertama dari baris.

Pengaturan Teks

Lalu, masuk ke tab Design, gunakan 'Andika' sebagai Text Font dan 'Regular' sebagai Text Font Weight.

Modul Teks Klon & Tempatkan di Kolom Kedua

Modul Teks di kolom kedua memiliki pengaturan yang sama persis, jadi lanjutkan, klon Modul Teks dan letakkan di kolom kedua.

Tambahkan Baris Keempat

Ada satu baris lagi yang tersisa untuk ditambahkan ke bagian sebelum desain selesai.

Struktur Kolom

Baris baru ini juga memiliki dua kolom.

Perekat

Buka Pengaturan Baris dan buat pengaturan berikut berlaku untuk subkategori Ukuran:

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

Jarak

Kemudian, tambahkan padding atas 20px.

Modul Gambar Pertama

Silakan dan tambahkan Modul Gambar pertama ke kolom pertama dari baris terakhir ini.

Bayangan Kotak

Dan tambahkan Box Shadow berikut ke dalamnya:

• Posisi Horizontal Bayangan Kotak: -6px
• Posisi Vertikal Bayangan Kotak: 2px
• Kekuatan Buram Bayangan Kotak: 53px
• Kekuatan Penyebaran Bayangan Kotak: 10px
• Warna Bayangan: rgba(0,0,0,0.3)
• Posisi Bayangan Kotak: Bayangan Luar

Modul Gambar Klon & Tempatkan di Kolom Kedua

Dan terakhir, kloning Modul Gambar ini dan letakkan di kolom kedua juga untuk melengkapi baris ini.

Hasil

Setelah Anda melalui semua langkah yang telah kami tambahkan ke posting ini, Anda seharusnya dapat mencapai hasil berikut:

Di Desktop

Di Seluler

Pikiran Akhir

Kemungkinan yang Anda miliki dengan Divi tidak terbatas. Anda dapat membuat situs web Anda terlihat persis seperti yang Anda inginkan dengan menggunakan Visual Builder yang akan menunjukkan perubahan secara real time. Untuk posting ini khususnya, kami menunjukkan kepada Anda bagaimana Anda dapat membuat bagian pahlawan yang indah untuk situs web pribadi. Tutorial ini dibuat menggunakan opsi bawaan Divi. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!