Cara Membuat Pohon Keluarga dengan Pengaturan Transform Divi

Pernah mencoba membuat silsilah keluarga untuk situs web Anda, tetapi tidak tahu persis bagaimana mendekatinya? Nah, dalam tutorial Divi hari ini, kami akan menunjukkan kepada Anda bagaimana melakukannya. Selain membuat silsilah keluarga, kami juga memastikannya tetap responsif di semua ukuran layar. Setelah selesai membuat silsilah keluarga, Anda akan selalu dapat memodifikasi gambar, teks, dan desain sesuai dengan preferensi Anda sendiri dan membuatnya siap untuk ditayangkan! Ingin segera memulai dengan desain silsilah keluarga ini? Anda dapat mengunduh file JSON secara gratis dan menambahkannya ke situs web apa pun yang Anda buat!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Pohon Keluarga GRATIS

Untuk mendapatkan tata letak pohon keluarga 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!

Berlangganan Saluran Youtube Kami

Memposisikan Anggota Keluarga

Tambahkan Bagian Baru

Jarak

Mari mulai berkreasi! Hal pertama yang perlu kita lakukan adalah menambahkan bagian reguler baru ke halaman yang sedang kita kerjakan. Buka pengaturan bagian dan tambahkan beberapa bantalan atas dan bawah khusus menggunakan lebar viewport.

• Padding Atas: 8vw
• Padding Bawah: 8vw

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama ke bagian Anda menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar bagian dan layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Untuk menambahkan spasi di sisi kiri dan kanan baris pada desktop, kita akan menambahkan beberapa padding kiri dan kanan kustom menggunakan unit lebar viewport.

• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 15vw (Desktop), 0vw (Tablet & Ponsel)
• Padding Kanan: 15vw (Desktop), 0vw (Tablet & Ponsel)

Tambahkan Modul Gambar ke Kolom

Unggah Gambar

Saatnya mulai menambahkan modul! Yang pertama kita butuhkan adalah Modul Gambar. Unggah gambar dengan lebar dan tinggi '180px'.

Penyelarasan

Lalu, buka tab desain dan ubah perataan gambar.

• Penjajaran Gambar: Tengah

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar: 49%
• Penyelarasan Modul: Pusat

Berbatasan

Dan ubah gambar menjadi lingkaran dengan menambahkan nilai tinggi ke setiap sudut di pengaturan perbatasan. Kami menggunakan '20vw' tetapi Anda dapat menggunakan nomor tinggi yang Anda inginkan.

Tambahkan Modul Teks ke Kolom

Tambah isi

Ke modul berikutnya, yaitu Modul Teks. Tambahkan nama anggota keluarga di sini.

Warna latar belakang

Kemudian, masuk ke pengaturan latar belakang dan ubah warna latar belakang menjadi putih.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Ubah pengaturan teks berikutnya. Jika Anda ingin membuat tampilan dan nuansa lain untuk silsilah keluarga, silakan bermain-main dengan pengaturan ini.

• Font Teks: Buka Sans
• Warna Teks: #000000
• Ukuran Teks: 0.8vw (Desktop), 1.2vw (Tablet), 1.9vw (Telepon)
• Tinggi Baris Teks: 0.4em
• Orientasi Teks: Tengah

Jarak

Pindah ke pengaturan spasi dan tambahkan beberapa nilai margin dan padding kustom. Nilai-nilai ini akan membantu kita membentuk Modul Teks dan membuatnya sedikit tumpang tindih dengan Modul Gambar.

• Margin Atas: -0.5vw
• Margin Kiri: 1vw
• Margin Kanan: 1vw
• Padding Atas: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Padding Bawah: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)

Berbatasan

Pindah ke pengaturan perbatasan dan tambahkan batas atas juga.

• Lebar Batas Atas: 5px
• Warna Batas Atas: #000000

Bayangan Kotak

Bersama dengan Box Shadow untuk menciptakan kedalaman pada halaman.

• Posisi Vertikal Bayangan Kotak: 10px
• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.17)

Indeks Z

Untuk memastikan Modul Teks tetap berada di atas Modul Gambar, kami akan meningkatkan indeks Z dalam pengaturan visibilitas Modul Teks.

• indeks Z: 2

Baris Klon Tiga Kali

Setelah Anda selesai membuat baris pertama dan memodifikasi semua modul di dalamnya, Anda dapat melanjutkan dan mengkloning baris tersebut tiga kali. Ini akan membantu kami menghemat waktu dalam langkah-langkah tutorial yang akan datang. Masing-masing baris ini akan digunakan untuk membuat level yang berbeda di pohon keluarga.

Sesuaikan Baris #1

Klon Kedua Modul 7 Kali

Mari mulai menyesuaikan tingkat pertama silsilah keluarga! Beralih ke mode wireframe dan mengkloning dua modul di baris Anda 7 kali. Setelah selesai, backend baris Anda akan terlihat seperti ini:

CSS Elemen Utama Kolom

Kami mengubah seluruh kolom menjadi kotak. Secara total, harus ada 16 modul di kolom Anda. Kita akan menempatkan 16 modul ini ke dalam 8 kolom grid. Ini berarti bahwa masing-masing dari 8 kolom grid akan berisi 2 modul; satu Modul Gambar dan satu Modul Teks. Buka pengaturan baris baris pertama dan tambahkan baris kode CSS berikut ke elemen utama kolom:

display: grid;
grid-template-columns: repeat(8, 12.5%);

Sesuaikan Baris #2

Klon Kedua Modul 3 Kali

Ke baris kedua! Di sini, kita akan mengkloning kedua modul 3 kali.

Elemen Utama Kolom

Kami mengubah kolom menjadi kotak dengan 4 kolom kotak dengan menambahkan baris kode CSS berikut ke elemen utama kolom baris:

display: grid;
grid-template-columns: repeat(4, 25%);

Alasan mengapa kami menggunakan pendekatan ini, daripada hanya memilih struktur kolom baris yang ada dengan 4 kolom, adalah karena kami ingin semuanya tetap 100% responsif pada ukuran layar yang lebih kecil.

Sesuaikan Baris #3

Klon Kedua Modul

Ke baris ketiga! Kloning setiap modul satu kali.

Elemen Utama Kolom

Kemudian, tambahkan baris kode CSS berikut ke elemen utama kolom:

display: grid;
grid-template-columns: repeat(2, 50%);

Sesuaikan Baris #4

Spasi Baris

Ke baris berikutnya dan terakhir! Di sini, satu-satunya hal yang perlu kita lakukan adalah memodifikasi nilai padding baris.

• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 31vw
• Padding Kanan: 31vw

Menghubungkan Anggota Keluarga Menggunakan Modul Gambar

Tambahkan Baris #1

Struktur Kolom

Sekarang kita telah mengumpulkan semua anggota keluarga, kita dapat mulai menghubungkan mereka! Untuk melakukannya, tambahkan baris baru di antara baris pertama dan kedua.

Perekat

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

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Buka pengaturan spasi berikutnya dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 15vw (Desktop), 0vw (Tablet & Ponsel)
• Padding Kanan: 15vw (Desktop), 0vw (Tablet & Ponsel)

Tambahkan Modul Gambar ke Kolom

Unggah Ilustrasi

Kemudian, tambahkan Modul Gambar dan unggah ilustrasi yang dapat Anda temukan di folder yang telah Anda unduh di awal posting ini.

Perekat

Buka pengaturan ukuran Modul Gambar dan aktifkan opsi 'Paksa Lebar Penuh'.

• Paksa Lebar Penuh: Ya

Jarak

Pastikan Anda menonaktifkan opsi 'Tampilkan Ruang Di Bawah Gambar' di pengaturan spasi.

• Tampilkan Spasi Di Bawah Gambar: Tidak

Baris Klon Dua Kali & Ubah Posisinya

Setelah Anda selesai memodifikasi baris dan Modul Gambar di dalamnya, lanjutkan dan klon dua kali. Tempatkan duplikat yang sesuai:

Sesuaikan Baris #1

Modul Gambar Klon Tiga Kali

Kembali ke baris pertama dan klon modul 3 kali.

Elemen Utama Kolom

Tempatkan Modul Gambar ini dalam kotak dengan 4 kolom kotak dengan menambahkan baris kode CSS berikut ke elemen utama kolom baris:

display: grid;
grid-template-columns: repeat(4, 25%);

Sesuaikan Baris #2

Modul Gambar Klon

Pindah ke baris kedua dan klon Modul Gambar sekali.

Elemen Utama Kolom

Tempatkan kedua modul dalam kotak dengan dua kolom kotak dengan menambahkan baris kode CSS berikut ke elemen utama kolom baris:

display: grid;
grid-template-columns: repeat(2, 50%);

Sesuaikan Baris #3

Ubah Spasi

Ke duplikat berikutnya dan terakhir. Di sini, satu-satunya hal yang perlu Anda lakukan adalah mengubah nilai padding khusus dan selesai!

• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 27vw
• Padding Kanan: 27vw

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 pohon keluarga modern dengan Divi! Pohon keluarga yang kami buat ulang tampak hebat di semua ukuran layar. Di awal tutorial ini, Anda juga dapat mengunduh file JSON secara gratis dan langsung memulainya. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!