Buat Daftar Navigasi Portofolio yang Dapat Digulir dengan Efek Gulir Divi

Halaman portofolio adalah alasan sempurna untuk berkreasi dengan desain web Anda. Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana menyusun daftar navigasi portofolio yang dapat digulir yang menarik untuk membumbui halaman portofolio apa pun. Menggunakan efek gulir Divi, item menu menjadi hidup saat mencapai bagian tengah layar. Tombol dengan tautan jangkar membantu pengguna menavigasi ke bagian yang sesuai.

Teruslah membaca untuk membuat ulang desain atau mengunduh file JSON secara gratis.

Pratinjau

Sebelum kita mulai dengan tutorial, mari kita lihat desain pada ukuran layar yang berbeda.

Desktop

Seluler

Bingkai gambar

Daftar navigasi portofolio yang dapat digulir responsif ini dibuat dengan serangkaian baris berulang dan bergantian. Untuk alasan itu, kami telah menyertakan tangkapan layar dari tampilan gambar rangka. Ini akan membantu Anda mengikuti urutan baris dan modulnya masing-masing. Kami menyarankan Anda memberi label setiap baris sesuai untuk melacak. Kami telah menambahkan petunjuk tersebut di langkah-langkah tutorial juga.

Unduh Bagian Pahlawan GRATIS

Untuk meletakkan tangan Anda pada tata letak daftar navigasi portofolio yang dapat digulir gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

1. Buat Bagian Baru

Tambahkan Bagian

Latar belakang

Mulailah dengan bagian reguler di dalam halaman baru atau yang sudah ada. Sebelum menambahkan baris atau modul apa pun, tambahkan warna latar belakang ke bagian tersebut.

• Warna Latar Belakang: #222831

Jarak

Tambahkan jarak yang cukup ke bagian untuk efek gulir untuk melakukan keajaibannya juga.

• Padding Atas dan Bawah: 660px

2. Buat Daftar Navigasi Portofolio yang Dapat Digulir

Tambahkan Baris 1

Struktur Kolom

Tambahkan baris pertama dan pilih struktur kolom berikut:

Perekat

Sesuaikan lebar baris berikutnya.

• Lebar: 90%
• Lebar Maks: 2560px

Jarak

Kemudian, sesuaikan pengaturan spasi.

• Bantalan Kiri
  • Desktop: 130px
  • Tablet dan Ponsel: 50px

Label Admin

Dan beri label pada baris.

• Label Admin: Baris 1

Tambahkan Modul Teks ke Kolom

Isi

Tambahkan modul teks untuk judul. Masukkan beberapa konten H1 pilihan Anda.

Teks Judul

Pindah ke tab desain dan gaya teks judul sebagai berikut:

• Tingkat Pos: H1
• Font: Alata
• Berat: Tebal
• Warna: #a3f7bf
• Ukuran
  • Desktop: 190px
  • Tablet: 120px
  • Telepon: 50px
• Spasi Huruf
  • Desktop dan Tablet: 7px
  • Telepon: 8px

Efek Gulir

Last but not least, tambahkan efek gulir masuk dan keluar yang memudar ke tab lanjutan.

• Aktifkan Efek: Memudar dan Keluar
• Viewport Bawah
  • Posisi: 100%
  • Mulai Opacity: 100%
• Opasitas Pertengahan
  • Posisi: 50%
  • Pertengahan: 100%
• Viewport Atas
  • Posisi: 80%
  • Akhir Opacity: 20%

Tambahkan Baris 2

Struktur Kolom

Sekarang saatnya menambahkan item navigasi. Tambahkan baris baru dengan dua kolom berukuran sama.

Label Admin

Beri label pada baris.

• Label Admin: Baris 2

Perekat

Sesuaikan juga pengaturan ukuran.

• Lebar Talang: 1
• Lebar: 80%
• Lebar Maks: 1920px

Pengaturan Kolom 1

CSS khusus

Sebelum menambahkan modul, tambahkan satu baris kode CSS ke elemen utama kolom untuk memastikan proporsinya tetap sama di seluruh ukuran layar yang lebih kecil. Mulai dengan kolom 1:

• Elemen Utama: lebar: 20% !penting

width: 20% !important }

Pengaturan Kolom 2

CSS khusus

Lakukan hal yang sama untuk kolom kedua.

• Elemen Utama: lebar: 80% !penting

width: 80% !important }

Tambahkan Modul Tombol ke Kolom 1

Isi

Sekarang, tambahkan modul tombol ke kolom 1 dengan beberapa salinan pilihan Anda.

• Teks Tombol: Lihat

Tautan

Tambahkan tautan jangkar ke modul berikutnya. Kami akan menambahkan ID CSS yang cocok untuk tautan jangkar ini nanti di tutorial.

• URL Tautan Tombol: #VB

Penyelarasan

Pindah ke tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Tombol

Kemudian, gaya tombol yang sesuai:

• Gaya Kustom Untuk Tombol: Ya
• Ukuran teks
  • Desktop: 30px
  • Tablet: 25px
  • Telepon: 20px
• Warna: Putih #ffffff
• Latar Belakang: Abu-abu Gelap #222831
• Lebar Perbatasan: 0px
• Radius Perbatasan: 0px
• Spasi Huruf: 1px
• Font: Alata
• Tampilkan Ikon Tombol: Tidak

Jarak

Buat perubahan pada pengaturan spasi juga.

• Lapisan Atas
  • Desktop: 25px
  • Tablet: 15px
  • Telepon: 5px

Efek Gulir

Dan tambahkan efek gulir masuk dan keluar yang memudar.

• Aktifkan Efek: Memudar dan Keluar
• Viewport Bawah
  • Posisi: 40%
  • Mulai Opacity: 0%
• Opasitas Pertengahan
  • Bawah: 45%
  • Pertengahan: 100%
  • Atas: 55%
• Viewport Atas
  • Posisi: 60%
  • Akhir Opacity: 0%

Bayangan Kotak

Sebelum pindah ke modul berikutnya, tambahkan bayangan kotak ke pengaturan hover tombol.

• Bayangan Kotak: Opsi ke-4
• Posisi Horizontal: 0px
• Posisi Vertikal
  • Arahkan: 5px
• Kekuatan Kabur: 0px
• Kekuatan Sebaran: 0px
• Warna Bayangan: Aqua Green #a3f7bf

Tambahkan Modul Teks ke Kolom 2

Isi

Lanjutkan dengan menambahkan modul teks ke kolom 2 dengan beberapa konten H3 pilihan Anda.

Teks Judul

Pindah ke tab desain dan gaya teks judul sebagai berikut:

• Tingkat Pos: H3
• Font: Alata
• Warna
  • Desktop: Putih #ffffff
  • Arahkan kursor ke: Aqua Green #a3f7bf
• Ukuran teks
  • Desktop: 80px
  • Tablet: 65px
  • Telepon: 38px

Efek Gulir

Dan selesaikan pengaturan modul dengan menambahkan efek gulir masuk dan keluar yang memudar di tab lanjutan.

• Aktifkan Efek: Memudar dan Keluar
• Viewport Bawah
  • Posisi: 40%
  • Mulai Opacity: 15%
• Opasitas Pertengahan
  • Bawah: 45%
  • Pertengahan: 100%
  • Atas: 55%
• Viewport Atas
  • Posisi: 60%
  • Akhir Opacity: 15%

Duplikat Baris 2

Untuk melengkapi daftar navigasi, duplikat baris ini tiga kali. Baris baru akan dinomori ulang; 2, 3, dan 4.

Sesuaikan Baris 3

Label Admin Baris

Ubah label admin baris dari 2 menjadi 3.

• Label Admin: Baris 3

Modul Tombol

Ubah tautan jangkar dari #VB ke #WEB.

• URL Tautan Tombol: #WEB

Modul Teks

Ubah konten H3 dalam modul teks juga.

• Teks Tubuh: Situs Web

Sesuaikan Baris 4

Label Admin Baris

Ubah label admin baris dari 2 menjadi 4.

• Label Admin: Baris 4

Modul Tombol

Ubah tautan jangkar dari #VB ke #MA.

• URL Tautan Tombol: #MA

Modul Teks

Ubah konten H3 juga.

• Teks Isi: Aplikasi Seluler

Sesuaikan Baris 5

Label Admin Baris

Ubah label admin baris dari 2 menjadi 5.

• Label Admin: Baris 5

Spasi Baris

Tambahkan beberapa margin bawah.

• Margin Bawah
  • Desktop 230px
  • Tablet: 100 piksel
  • Telepon: 60px

Modul Tombol

Ubah tautan jangkar dari #VB ke #UX.

• URL Tautan Tombol: #UX

Modul Teks

Dan ubah konten H3 di sini juga.

• Teks Isi: Desain UX

3. Buat Item Portofolio

Tambahkan Baris 6

Struktur Kolom

Daftar navigasi portofolio yang dapat digulir tertaut ke item portofolio. Setiap item terdiri dari dua baris. Satu baris dengan pembagi tak terlihat dan baris lainnya dengan modul ajakan bertindak. ID CSS ditambahkan ke baris dengan pembagi. Dengan cara ini, navigasi jangkar tidak akan berhenti di bagian atas item portofolio tetapi di tengah.

Mari kita membuat item sekarang. Tambahkan baris dengan satu kolom.

Label Admin

Jangan lupa untuk memberi label pada baris baru.

• Label Admin: Baris 6

ID & Kelas CSS

Masukkan ID CSS yang cocok di tab lanjutan.

• ID CSS: VB

Tambahkan Modul Pembagi ke Baris 6

Visibilitas

Tambahkan pembagi tak terlihat ke kolom baris.

• Tampilkan Pembagi: Tidak

Duplikat Baris 6

Gandakan baris ini tiga kali. Baris baru akan dinomori ulang; 8, 10, dan 12.

Sesuaikan Baris 8

Label Admin

Ubah label admin dari 6 menjadi 8.

• Label Admin: Baris 8

ID & Kelas CSS

Ubah ID CSS dari VB ke WEB.

• ID CSS: WEB

Sesuaikan Baris 10

Label Admin

Ubah label admin dari 6 menjadi 10.

• Label Admin: Baris 10

ID & Kelas CSS

Ubah ID CSS dari VB ke MA.

• ID CSS: MA

Sesuaikan Baris 12

Label Admin

Ubah label admin dari 6 menjadi 12.

• Label Admin: Baris 12

ID & Kelas CSS

Label Admin

Ubah ID CSS dari VB ke UX.

• ID CSS: UX

Tambahkan Baris 7

Struktur Kolom

Biarkan empat baris dengan pembagi di tempatnya sekarang. Tambahkan baris baru dengan satu kolom.

Latar belakang

Tanpa menambahkan modul, buka pengaturan baris dan gaya latar belakang sebagai berikut:

• Gambar Latar Belakang: Foto
  • Campuran Gambar: Kalikan
• Gradien Latar Belakang
  • Warna 1: Abu-abu Gelap #222831
  • Warna 2: Transparan
  • Mengetik: Linier
  • Arah: 90 derajat
  • Posisi Awal: 50%
  • Posisi Akhir: 100%
  • Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Label Admin

Beri label pada baris.

• Label Admin: baris 7

Perekat

Sesuaikan pengaturan ukuran baris berikutnya.

• Lebar: 80%
• Lebar Maks: 2560px
• Penjajaran: Pusat

Berbatasan

Tambahkan beberapa sudut membulat juga.

• Sudut Bulat: 25px

Efek Gulir

Dan aktifkan efek gulir masuk dan keluar yang memudar.

• Aktifkan Efek: Memudar dan Keluar
  • Mulai Opacity: 0%
  • Mid Opacity: 100%
    • Posisi: 80%
  • Akhir Opacity: 20%

Tambahkan Modul Ajakan Bertindak ke Baris 7

Isi

Sekarang tambahkan modul ajakan bertindak ke baris.

• Judul: Visual Branding
• Tombol: Cari tahu Selengkapnya
• Isi: Teks Deskriptif

Latar belakang

Hapus warna latar belakang default.

• Latar Belakang: Tidak Ada

Tautan

Tambahkan tautan ke halaman yang sesuai. Kami akan memasukkan # untuk saat ini.

• Tautan: #

Teks Judul

Gaya teks judul berikutnya.

• Tingkat Pos: H2
• Font: Alata
• Warna: Putih #ffffff
• Ukuran
  • Desktop: 70px
  • Tablet: 60px
  • Telepon: 48px
• Spasi Huruf: 1px

Teks Tubuh

Gaya teks isi juga.

• Font: Lato
• Warna: Putih #ffffff
• Ukuran
  • Desktop: 19px
  • Tablet: 20 piksel
  • Telepon: 18px
• Tinggi Garis: 1.8em

Tombol

Pindah ke pengaturan tombol dan terapkan perubahan berikut:

• Gaya Kustom: Ya
• Ukuran Teks: 20px
• Warna Teks: Abu-abu Gelap #222831
• Latar Belakang: Aqua Green #a3f7bf
• Radius Perbatasan: 9px
• Spasi Huruf: 1px
• Font Tombol: Alata
• Margin Atas: 35px

Perekat

Sesuaikan ukuran modul juga.

• Lebar: 50%
• Lebar Maks
  • Desktop: 50%
  • Tablet dan Telepon: 100%
• Perataan: Kiri

Jarak

Tambahkan beberapa padding ke modul juga.

• Bantalan Kiri:
  • Desktop: 90px
• Bantalan Kiri dan Kanan:
  • Tablet: 50px
  • Telepon: 40px

CSS khusus

Terakhir, tambahkan satu baris kode CSS ke judul promo di tab lanjutan.

• Judul Promo: padding-bottom: 30px;

padding-bottom: 30px; }

Duplikat Baris 7

Gandakan baris 7 tiga kali. Baris baru akan dinomori ulang; 9, 11, dan 13.

Sesuaikan Baris 9

Latar belakang

Ubah gambar latar belakang dan alihkan arah gradien.

• Gambar Latar Belakang: Foto baru
• Gradien Latar Belakang
  • Warna 1: Transparan
  • Warna 2: Abu-abu Gelap #222831
  • Posisi Awal: 0%
  • Posisi Akhir: 50%

Label Admin

Perbarui label admin baris dari 7 menjadi 9.

• Label Admin: baris 9

Sesuaikan Modul Ajakan Bertindak di Baris 9

Isi

Perbarui konten modul.

• Judul: Situs Web
• Isi: Teks deskriptif baru

Tautan

Perbarui juga tautannya.

• Tautan: Tautan baru

Perekat

Ubah perataan modul dari kiri ke kanan.

• Penyelarasan Modul: Kanan

Jarak

Ubah padding desktop dari kiri ke kanan. Pengaturan tablet dan seluler harus tetap sama.

• Bantalan Kanan
  • Desktop: 90px

Sesuaikan Baris 11

Latar belakang

Ubah gambar latar belakang di baris baru.

• Gambar Latar Belakang: Foto Lain

Label Admin

Perbarui label admin baris dari 7 menjadi 11.

• Label Admin: baris 11.

Sesuaikan Modul Ajakan Bertindak di Baris 11

Isi

Ubah konten di dalam modul ajakan bertindak.

Tautan

Ubah juga tautannya.

• Tautan: Tautan baru

Sesuaikan Baris 13

Latar belakang

Ubah gambar latar belakang dan alihkan arah gradien.

• Gambar Latar Belakang: Foto baru
• Gradien Latar Belakang
  • Warna 1: Transparan
  • Warna 2: Abu-abu Gelap #222831
  • Posisi Awal: 0%
  • Posisi Akhir: 50%

Label Admin

Buka tab label admin dan perbarui nomor baris menjadi 13.

Sesuaikan Modul Ajakan Bertindak di Baris 13

Isi

Perbarui konten modul.

• Judul: Desain UX
• Isi: Teks deskriptif baru

Tautan

Perbarui juga tautannya.

• Tautan: Tautan baru

Perekat

Ubah perataan modul dari kiri ke kanan.

• Penyelarasan Modul: Kanan

Jarak

Ubah padding desktop dari kiri ke kanan. Pengaturan tablet dan seluler harus tetap sama.

• Bantalan Kanan
  • Desktop: 90px

Atur Ulang Baris

Pindahkan baris 7, 9, dan 11.

Tempatkan baris dalam urutan yang benar, sesuai dengan label admin mereka.

Bandingkan Wireframe Anda

Periksa kembali gambar rangka daftar dan item navigasi portofolio yang dapat digulir. Baris harus agar tautan jangkar berfungsi dengan baik. Berikut tampilan lain pada tampilan wireframe kami:

Pratinjau

Kami sudah selesai melalui semua langkah untuk membuat ulang daftar navigasi portofolio yang dapat digulir. Mari kita lihat lagi bagaimana desain terlihat pada ukuran layar yang berbeda.

Desktop

Seluler

Pikiran Akhir

Dalam tutorial langkah demi langkah ini, kami membuat ulang daftar navigasi portofolio yang dapat digulir dengan efek gulir Divi. Selanjutnya, kami menambahkan item portofolio. Navigasi dikontrol dengan tautan jangkar dan ID CSS. Ini adalah cara yang bagus untuk menampilkan item portofolio secara interaktif. Tinggalkan kami komentar jika Anda menyukainya atau memiliki pertanyaan!