Apakah Anda ingin membuat bagan organisasi di Divi?
Ketahui cara membuat tata letak diagram alur di Divi membuka banyak kesempatan untuk mengomunikasikan proses dan gagasan tentang situs jaringan. Dalam beberapa kasus, diagram alur dapat digunakan untuk menjelaskan ide-ide yang sangat kompleks yang melibatkan sejumlah besar elemen.
Pada a situs jaringan, namun, diagram alur yang lebih kompleks ini mungkin sulit dicapai, terutama jika Anda ingin agar responsif.
Dalam tutorial ini, kami akan menunjukkan cara membuat tata letak diagram alur praktis yang dapat Anda gunakan di komputer Anda situs jaringan, sederhana, efektif dan responsif.
Selain itu, kami hanya akan menggunakan opsi bawaan Divi untuk membuatnya, jadi Anda tidak perlu khawatir untuk menambahkan kode atau plugin khusus.
Mari kita mulai!
penelitian
Berikut sekilas desain flowchart yang akan kita buat dalam tutorial ini.
Buat halaman baru dengan Divi Builder
Untuk memulai, Anda perlu melakukan hal berikut:
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Cara Membuat Tata Letak Flowchart di Divi
Langkah 1: Buat baris dengan uraian di tengah
Untuk mulai membuat tata letak diagram alur di Divi, kita akan mulai dengan membuat baris yang berisi uraian di tengah. Ini akan menjadi elemen pertama dari diagram alur.
Bagian Padding
Pertama, buka pengaturan bagian untuk bagian default dan atur padding bawah ke 0px.
- Padding (Bawah): 0px
Garis
Di dalam bagian, tambahkan baris ke kolom.
Buka pengaturan garis dan perbarui pengaturan desain berikut:
- Lebar selokan: 1
- Padding (Atas dan Bawah): 0px
Desain Mod Blurb
Untuk membuat elemen diagram alur pertama kami, kami akan menggunakan modul Blurb.
Masukkan modul Blurb sebaris.
Pengaturan modul
Buka pengaturan modul Blurb. Di bawah tab Konten, Anda dapat menyimpan judul default dan teks isi.
Kemudian perbarui gambar dengan gambar ikon kecil atau gunakan salah satu ikon Divi bawaan. Untuk tutorial ini, kami menggunakan ikon dari Paket Tata Letak Crowdfunding .
Kemudian beri modul warna latar belakang:
- Latar belakang: #f8f8f8
Di bawah tab Mendesain, perbarui berikut ini:
- Perataan Teks: Terpusat
- Lebar Maks: 400px (Desktop dan Tablet), 90% (Ponsel)
- Modul Keselarasan: Pusat
- Padding: 6% (Atas dan Bawah), 3% (Kiri dan Kanan)
Selanjutnya, beri Blurb Module perbatasan sebagai berikut:
- Lebar Perbatasan: 2px
Langkah 2: Membuat garis penghubung dengan garis vertikal dan panah
Untuk bagian selanjutnya dari tata letak diagram alur, kita akan membuat deretan konektor yang memiliki garis vertikal dan panah di tengah. Garis ini akan digunakan untuk menghubungkan garis-garis isi bagan organisasi yang harus berlanjut ke bagian bawah halaman.
Dalam hal ini, kami ingin memulai diagram alur dengan menambahkan garis dan panah di bawah garis sebelumnya dengan modul Blurbn di tengah.
Buat baris baru dan salin/tempel gaya dari baris sebelumnya
Untuk melakukan ini, tambahkan baris baru ke kolom di bawah baris sebelumnya.
Menggunakan " Pengaturan Modul Lainnya (atau opsi klik kanan), salin gaya dari baris sebelumnya di atas dan tempel ke baris baru.
Membuat pemisah garis vertikal
Untuk membuat pemisah garis vertikal, tambahkan modul Divider baru ke garis.
Di bawah pengaturan pembagi, perbarui pengaturan desain sebagai berikut:
- Warna Garis: #333333
- Posisi Garis: Bawah
- Berat Pembagi: 150px
- Lebar: 2px
- Modul Keselarasan: Pusat
- Margin: -1px (Bawah)
Di bawah tab Advanced, sembunyikan overflow sebagai berikut:
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Buat panah dengan modul Blurb
Selanjutnya, kita akan membuat ikon panah yang akan duduk di atas garis pemisah menggunakan modul presentasi.
Untuk membuat panah, tambahkan modul Blurb baru di bawah pembagi.
Pengaturan Mod Blurb
Di bawah pengaturan modul, hapus judul default dan teks isi dan klik Gunakan Ikon, lalu pilih ikon panah (lihat tangkapan layar).
Di bawah tab Mendesain, perbarui berikut ini:
- Warna Ikon: #bbbbbb
- Penjajaran Gambar/Ikon: tengah
- Gunakan Ukuran Font Ikon: YA
- Ikon Ukuran Font: 50px (Desktop), 40px (Tablet dan Ponsel)
- Lebar Maks: 50%
- Modul penyelarasan: tengah
- Tinggi: 50px (Desktop), 40px (Tablet dan Ponsel)
Di bawah tab Advanced, tambahkan CSS berikut ke Gambar kabur :
margin-bottom: 0px;
background: #ffffff;
Untuk memposisikan panah di atas garis, perbarui yang berikut ini:
- Posisi: Absolut
- Lokasi: Pusat
- Indeks Z: 10
Langkah 3: Membuat garis untuk bagian yang berdekatan dari diagram alur
Setelah baris konektor selesai, kami akan menambahkan baris lain dari beberapa modul Blurb yang berdekatan untuk melanjutkan desain diagram alur.
Untuk menambahkan garis, cukup salin dan tempel baris pertama (garis dengan uraian tengah yang kita buat di bagian atas tata letak) di bawah garis konektor.
Buka Pengaturan Jalur dan perbarui yang berikut:
- Lebar Maks: 50%
- Lebar batas: 2px
Sisi kiri diagram alur
Sekarang perbatasan kita ditambahkan ke garis, kita akan menempatkan modul Blurb di atas garis batas kiri.
Untuk melakukannya, perbarui pengaturan desain berikut ini:
- Modul penyelarasan: kiri
- Margin: 70px (Atas dan Bawah)
- Transformasi Terjemahkan sumbu X: -50%
Ini adalah kunci agar modul Blurb dipusatkan secara horizontal di atas garis batas.
Sisi kanan diagram alur
Untuk menambahkan Modul Blurb lain di garis batas kanan, duplikat uraian yang ada.
Untuk memposisikan uraian di garis batas kanan, buka tab Advanced dan berikan posisi absolut:
- Posisi: Absolut
- Lokasi: Kanan tengah
Selanjutnya, perbarui opsi berikut:
- Margin: tidak ada
- Transformasi Terjemahkan sumbu Y: -50%
- Transformasi Terjemahkan sumbu X: 50%
Menambahkan panah ke sudut setiap garis batas
Untuk membuat diagram alur lebih jelas tentang arah kemajuan baris, kami akan menambahkan ikon panah tambahan pada baris batas baris.
Panah kiri atas
Untuk menambahkan panah ke baris batas kiri atas, duplikat panah modul Blurb yang kita buat di baris konektor dan seret ke baris yang berisi modul Blurb yang berdekatan.
Buka modul Duplicate Arrow Blurb dan ubah ikon menjadi panah yang mengarah ke kiri.
Selanjutnya, perbarui lokasi posisi modul:
- Lokasi: Kiri atas
Terakhir, perbarui opsi terjemahkan transformasi sebagai berikut:
- Transformasi Terjemahkan sumbu Y: -50%
Panah kanan atas
Untuk membuat panah yang berada di garis batas kanan atas, duplikat panah " di pojok kiri atas yang baru saja kita buat. Kemudian buka pengaturan dan ubah lokasi posisi:
- Lokasi: Kanan atas
Perbarui juga ikon panah dengan panah yang menunjuk ke kanan.
Panah bawah kiri
Untuk membuat panah yang berada di garis batas kiri bawah, duplikat panah " kanan atas yang baru saja kita buat.
Kemudian buka pengaturan dan ubah lokasi posisi:
- Lokasi: kiri bawah
Selanjutnya, perbarui opsi Transform Translate:
- Transformasi Terjemahkan sumbu Y: 50%
Panah bawah ke kanan
Untuk membuat panah yang berada di garis batas kanan bawah, duplikat panah " di kiri bawah yang baru saja kita buat.
Kemudian buka pengaturan dan ubah lokasi posisi:
- Lokasi: Kanan bawah
Perbarui juga ikon panah dengan panah yang mengarah ke kiri.
Setelah semua panah ditempatkan, Anda dapat memperbarui label untuk masing-masing menggunakan tampilan lapisan .
Langkah 4: Menambahkan jalur konektor lain
Setelah kami menyelesaikan garis dengan dua bagian diagram alur yang berdekatan dan semua panah, kami dapat melanjutkan diagram alur dengan menambahkan garis penghubung lainnya.
Untuk melakukan ini, duplikat garis konektor yang kita buat di atas dan tempel di bawah garis yang berisi modul Blurb dari bagian diagram alur yang berdekatan.
Langkah 5: Menyesuaikan Aliran dengan Konektor Garis Tepi Lurus
Pada desain flowchart yang ada, alur dimulai dari elemen teratas, kemudian bercabang ke elemen sebelah kanan dan kiri yang berdekatan, kemudian kembali ke tengah dan menuju ke elemen tengah berikutnya.
Untuk menyesuaikan alur, kami akan menduplikasi bagian sehingga kami dapat menyesuaikan diagram alur untuk berhenti di elemen presentasi yang berdekatan di sebelah kiri dan melanjutkan dari elemen presentasi di sebelah kanan.
Bagian duplikat
Untuk melakukan ini, pertama-tama duplikat seluruh bagian yang berisi diagram alur.
Tambahkan Modul Blurb Kiri Lainnya
Di bagian duplikat (bawah), temukan modul Blurb kiri di baris yang berisi dua modul yang berdekatan. Kemudian, duplikat uraian di sebelah kiri untuk membuat yang baru tepat di bawah.
Hapus panah bawah dan batas
Selanjutnya, hapus panah kiri bawah dan panah kanan bawah.
Buka pengaturan baris untuk baris yang berisi beberapa uraian dan hapus batas bawah:
- Lebar Batas Bawah: 0px
Buat garis dengan konektor garis batas lurus
Sekarang kita ingin menyesuaikan desain flowchart dengan konektor garis batas kanan yang akan menghubungkan garis batas kanan garis dengan garis konektor di bawah ini.
Untuk melakukan ini, kita akan membuat garis lain dan menambahkan garis pembagi khusus dan panah garis di sisi kanan.
Tambahkan baris baru satu kolom di bawah baris yang ada dengan tiga tata letak.
Perbarui pengaturan baris sebagai berikut, di bawah tab Mendesain :
- Lebar Talang: 1
- Lebar Maks: 50%
- Padding: 0px (Atas dan Bawah)
Selanjutnya, tambahkan batas lurus ke garis.
- Lebar Batas Kanan: 2px
Kemudian tambahkan modul Divider ke baris.
Perbarui pengaturan pembagi sebagai berikut:
- Warna Garis: #333333
- Posisi Garis: Bawah
- Berat Pembagi: 2px
- Lebar: 50%
- Margin: -2px (Bawah)
Di bawah tab lanjutan, perbarui posisi pemisah:
- Posisi: Absolut
- Lokasi: Kanan bawah
Dengan pembagi di tempatnya, salin modul Blurb dari panah kanan bawah baris ketiga bagian pertama dan tempelkan ke baris dengan garis pembagi kanan.
Buka pengaturan modul Blurb dari panah yang baru saja Anda duplikat dan pindahkan dan perbarui yang berikut:
- Posisi: Default
- Modul penyelarasan: kanan
Aliran garis batas kiri berhenti
Saat ini, bagian dari batas kiri terbuka di bawah uraian di kiri bawah. Untuk menyembunyikannya, cukup hapus margin bawah uraian bawah ini.
Langkah 6: Memperbarui garis dengan konektor garis tepi kiri
Diagram alur Anda mungkin juga memerlukan konektor garis batas kiri. Untuk membuatnya, kita dapat memperbarui garis dengan konektor garis batas kanan sebagai berikut:
- Lebar Boprder Kiri: 2px
- Lebar Perbatasan Kanan: 0
Perbarui pemisah di dalam baris dengan lokasi baru:
- Lokasi: kiri bawah
Selanjutnya, perbarui perataan panah:
- Modul penyelarasan: kiri
Dan ubah ikon menjadi panah kanan.
Hasil akhir
Lihat hasil akhirnya.
Unduh DIVI sekarang!!!
Kesimpulan
Dalam tutorial ini, kami telah membuat tata letak diagram alir yang berguna yang dapat digunakan siapa saja untuk mengkomunikasikan proses dan ide pengunjung dengan desain responsif yang memukau.
Gunakan untuk menampilkan layanan atau proses desain, membuat infografis, atau memandu klien melalui isi dengan cara yang baru.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
