Menggunakan komponen web Hero

Bawa fokus dan minat visual ke halaman dan video Anda dengan komponen web Hero. Anda dapat menampilkan hingga lima item di komponen web Hero dan menggunakan gambar, teks, dan tautan yang menarik untuk menarik perhatian ke masing-masing item. Komponen web Hero disertakan secara default pada situs Komunikasi, namun Anda juga dapat menambahkan komponen web Hero ke halaman lainnya. 

Jika video disiapkan di komponen web Hero, video akan diputar sebaris sementara Anda dapat tetap tinggal dan menelusuri halaman yang sama alih-alih dibawa ke jendela baru. 

Beberapa fungsi diperkenalkan secara bertahap ke organisasi yang telah memilih untuk bergabung dalam program Rilis Bertarget. Artinya, Anda mungkin belum melihat fitur ini atau fitur mungkin terlihat berbeda dari yang dijelaskan dalam artikel bantuan.

Isi

• Komponen web Hero di situs Komunikasi: Topik dan Pameran
• Mengubah tata letak komponen web Hero
• Mengubah gambar, teks, dan tautan untuk setiap ubin atau lapisan
• Mengubah titik fokus gambar
• Menyusun ulang ubin atau lapisan
• Meletakkan komponen web Hero dalam satu kolom
• Menambahkan komponen web Hero kosong ke halaman
• Penskalaan gambar di komponen web Hero

Komponen web Hero di situs Komunikasi: Topik dan Pameran

Saat membuat situs Komunikasi, Anda dapat memulai dengan situs Kosong atau memilih salah satu templat situs lainnya, yang masing-masing dilengkapi dengan kumpulan komponen web default. Beberapa templat situs komunikasi ini disertakan dengan komponen web Hero, seperti:

• Komunikasi standar: bagikan informasi seperti berita, acara, dan konten lainnya.
• Showcase: gunakan foto atau gambar untuk menampilkan produk, tim, atau acara.

Dalam templat ini, komponen web Hero disertakan di halaman Anda secara default. Tautan ini telah diisi sebelumnya dengan gambar, teks, dan tautan default yang Anda ubah untuk menampilkan gambar, teks, halaman, tautan, atau dokumen Anda sendiri.

Jika Anda memilih templat komunikasi standar , hero defaultnya adalah tata letak ubin dengan lima ubin (yang dapat Anda ubah dari satu menjadi lima):

Jika Anda memilih templat Showcase , hero defaultnya adalah tata letak vertikal dengan tiga lapisan (yang dapat Anda ubah dari satu hingga lima lapisan):

Anda dapat mengubah tata letak komponen web Hero dari kisi menjadi lapisan vertikal atau karosel, menggunakan tombol (1) Edit properti ( ), dan Anda dapat mengubah tautan, gambar, dan teks untuk setiap ubin atau lapisan menggunakan tombol (2) Edit detail ( ) untuk setiap ubin atau lapisan.

1. Tombol Edit komponen web

2. Tombol edit detail

Mengubah tata letak komponen web Hero

Jika Anda belum berada dalam mode edit di halaman, pilih Edit di kanan atas halaman.

1. Anda dapat memilih salah satu dari tiga tata letak yang tersedia untuk komponen web Hero: Korsel, Petak, dan Lapisan. Anda memilih tata letak dengan memilih Edit properti ( ) di sebelah kiri atas komponen web, lalu pilih tata letak dari menu drop-down tata letak:

   

   Atau Anda dapat memilih tipe tata letak yang diinginkan di Panel Properti komponen web:

   

2. Di Panel Properti komponen web, pilih:

   • Tambahkan slide untuk tata letak Korsel
      

     Tips

     • Untuk tata letak Carousel, untuk mengaktifkan/menonaktifkan transisi slide otomatis, Anda dapat mengaktifkan/menonaktifkan tombol alih Putar Otomatis.
     • 

   • Menambahkan ubin untuk tata letak Ubin

   • Menambahkan lapisan untuk tata letak Lapisan
     

• Catatan

  Anda dapat memilih hingga 5 ubin (seperti yang ada di situs komunikasi Standar), atau hingga 5 lapisan (seperti yang ada di situs Showcase), atau hingga 5 gambar di karosel. 

Mengubah gambar, teks, dan tautan untuk setiap ubin atau lapisan

Jika Anda belum berada dalam mode edit di halaman, pilih Edit di kanan atas halaman.

1. Pilih Edit detail () di kanan bawah ubin atau lapisan yang ingin Anda ubah.

2. Di Panel Properti, pilih Ubah, lalu pilih lokasi untuk mendapatkan tautan Anda:

   • Terbaru: Jika Anda baru saja membuka gambar, halaman, atau dokumen, Anda akan menemukannya tercantum di sini.

   • Gambar stok Gambar stok disediakan oleh Microsoft. Mereka berkualitas tinggi dan berukuran tepat untuk penggunaan Anda. Jika Anda adalah admin SharePoint, sebaiknya aktifkan Jaringan Pengiriman Konten (CDN) untuk meningkatkan performa pengambilan gambar.

   • Pencarian web: Anda dapat menemukan gambar dari Bing yang menggunakan lisensi Creative Common. Anda bertanggung jawab untuk meninjau lisensi suatu gambar sebelum Anda memasukkannya ke halaman Anda. SharePoint di Microsoft 365 saja.

   • Organisasi Anda: Jika organisasi Anda telah menentukan sekumpulan aset yang disetujui, Anda dapat memilih dari kumpulan tersebut di sini.  Jika Anda adalah Admin SharePoint dan ingin mempelajari cara membuat pustaka aset untuk organisasi Anda, lihat Membuat pustaka aset organisasi.

   • OneDrive: Anda bisa mendapatkan tautan untuk dokumen atau gambar yang telah disimpan di OneDrive. SharePoint di Microsoft 365 saja.

   • Situs: Anda bisa mendapatkan tautan untuk dokumen, gambar, atau halaman dari Situs yang Anda tentukan.

   • Unggah: Anda dapat mengunggah dokumen atau gambar dari perangkat pribadi.

   • Dari tautan: Masukkan tautan untuk halaman, dokumen, atau gambar Anda dari OneDrive atau SharePoint di Microsoft 365.

     Catatan

     Tautan eksternal ke situs Anda tidak akan menampilkan pratinjau gambar di GCC Pemerintah AS, High dan DoD, serta Office 365 yang dioperasikan oleh 21Vianet.

3. Pilih gambar, halaman, atau dokumen Anda, lalu pilih Buka.

4. Di Panel Properti, di bawah Gambar latar belakang, pilih Gambar kustom atau Warna saja (Warna hanya tersedia untuk tata letak Petak, dan warnanya sesuai dengan warna tema situs Anda).
   Opsi Pilihan otomatis secara otomatis memilih gambar dari halaman atau dokumen yang Anda tautkan, jika tersedia.

5. Masukkan Header untuk gambar.

   • Anda dapat menampilkan tautan Ajakan bertindak dengan mengalihkan tombol ke Ya. Kemudian, tambahkan teks Ajakan bertindak Anda (misalnya, "Pelajari selengkapnya"). Tautan ajakan bertindak tersedia untuk setiap lapisan dalam tata letak berlapis, tetapi hanya untuk ubin terbesar dalam tata letak ubin.

     Catatan

     Tata letak Carousel memiliki 3 gaya baru. Anda dapat mengatur gaya yang berbeda (Overlay gambar, Blok teks, Pemisahan diagonal) untuk setiap slide guna memvariasikan presentasi konten.

     

Mengubah titik fokus gambar

Di SharePoint di Microsoft 365, Anda dapat mengubah titik fokus pada gambar yang dipilih dalam komponen web Hero untuk mendapatkan bagian terpenting gambar Anda dalam bingkai.

1. Jika Anda belum berada dalam mode edit di halaman, pilih Edit di kanan atas halaman.

2. Pilih Atur titik fokus di toolbar di bagian bawah gambar Hero yang ingin Anda ubah.

3. Seret titik fokus ke tempat yang Anda inginkan dalam gambar.

   

Menyusun ulang gambar, ubin, atau lapisan karosel

Anda dapat menyusun ulang gambar, ubin, atau lapisan karosel dengan memindahkannya ke tempat yang Anda inginkan.

1. Jika Anda belum berada dalam mode edit di halaman, pilih Edit di kanan atas halaman.
2. Di Panel Properti, pilih elipsis tiga titik di samping gambar, ubin atau lapisan, lalu pilih Pindahkan ke atas atau Pindahkan ke bawah untuk menyusun ulang. Untuk ubin dan lapisan, Anda juga dapat memilih gambar, lalu menahan dan menyeret ubin atau lapisan ke tempat yang Anda inginkan.

Letakkan komponen web Hero dalam salah satu dari dua atau tiga kolom

Komponen web Hero dirancang untuk menempati seluruh lebar halaman. Jika Anda lebih suka komponen web Hero tidak menggunakan lebar penuh, Anda dapat melakukannya dengan mengubah tata letak bagian.

1. Jika Anda belum berada dalam mode edit, pilih Edit di kanan atas halaman.
2. Arahkan kursor tepat di atas komponen web Hero, lalu pilih + yang dilingkari di sebelah kiri komponen web
3. Di bawah Tata letak Bagian, pilih Dua kolom atau Tiga kolom.
4. Komponen web Hero Anda sekarang berada di kolom kiri dari dua atau tiga kolom di bagian. 
5. Untuk memindahkan komponen web Hero, pilih gambar, lalu tahan dan seret ke dalam kolom yang Anda inginkan.

Menambahkan komponen web Hero kosong ke halaman

Anda dapat menambahkan komponen web Hero ke halaman di situs Tim atau situs Komunikasi . Untuk melakukannya:

1. Jika Anda belum berada dalam mode edit di halaman, pilih Edit di kanan atas halaman. Temukan Toolbox ( ) di sebelah kanan.

2. Pilih Lihat semua komponen web, lalu pilih atau seret dan lepaskan Hero dari daftar komponen web.

3. Pilih Edit properti () dan pilih tipe tata letak yang Anda inginkan - kisi dari 1 hingga 5 ubin dapat digunakan, atau 1 hingga 5 lapisan vertikal.

4. Pilih Pilih tautan untuk setiap ubin yang ingin Anda ubah.

5. Untuk setiap ubin, di kotak alat, pilih Pilih, lalu pilih lokasi untuk mendapatkan tautan Anda:
   Di kotak alat, pilih Ubah, lalu pilih lokasi untuk mendapatkan tautan Anda:

   • Terbaru: Jika Anda baru saja membuka gambar, halaman, atau dokumen, Anda akan menemukannya tercantum di sini.
   • Pencarian web: Anda dapat menemukan gambar dari Bing yang menggunakan lisensi Creative Common. Anda bertanggung jawab untuk meninjau lisensi suatu gambar sebelum Anda memasukkannya ke halaman Anda. SharePoint di Microsoft 365 saja.
   • Organisasi Anda: Jika organisasi Anda telah menentukan sekumpulan aset yang disetujui, Anda dapat memilih dari kumpulan tersebut di sini.  Jika Anda adalah Admin SharePoint dan ingin mempelajari cara membuat pustaka aset untuk organisasi Anda, lihat Membuat pustaka aset organisasi.
   • OneDrive: Anda bisa mendapatkan tautan untuk dokumen atau gambar yang telah disimpan di OneDrive. SharePoint di Microsoft 365 saja.
   • Situs: Anda bisa mendapatkan tautan untuk dokumen, gambar, atau halaman dari Situs yang Anda tentukan.
   • Unggah: Anda dapat mengunggah dokumen atau gambar dari perangkat pribadi.
   • Dari tautan: Masukkan tautan untuk halaman, dokumen, atau gambar Anda dari OneDrive untuk SharePoint di Microsoft 365.

6. Pilih gambar, halaman, atau dokumen Anda, lalu klik Buka.

7. Di kotak alat, di bawah Gambar, pilih Gambar kustom atau Warna saja. Opsi Pilihan otomatis secara otomatis memilih gambar dari halaman atau dokumen yang Anda tautkan, jika tersedia. Warna hanya tersedia untuk tata letak Petak, dan warnanya sesuai dengan warna tema situs Anda.

8. Masukkan teks Alternatif untuk gambar.

9. Anda dapat menampilkan tautan Ajakan bertindak dengan mengalihkan tombol ke Ya. Kemudian, tambahkan teks Ajakan bertindak Anda (misalnya, "Pelajari selengkapnya"). Tautan ajakan bertindak tersedia untuk setiap lapisan dalam tata letak berlapis, tetapi hanya untuk ubin terbesar dalam tata letak ubin

Penskalaan gambar di komponen web Hero

Untuk memilih gambar berukuran sesuai untuk komponen web Hero, pertimbangkan hal berikut:

• Komponen web dirancang agar sesuai dengan lebar layar dalam tata letak berdarah penuh.
• Dalam tata letak Petak, tinggi komponen web diskalakan untuk mengikuti rasio aspek 8:3, dan gambar di dalam komponen web diskalakan ke rasio aspek 4:3.
• Dalam tata letak Lapisan , masing-masing lapisan menskalakan ke rasio aspek 8:3, dan gambar di dalam setiap lapisan menskalakan ke rasio aspek mendekati 9:16.

Kapan tata letak Korsel akan tersedia?

Ketersediaan Umum (Di Seluruh Dunia, GCC, GCC High, dan DoD): Peluncuran dimulai pada pertengahan Januari 2025 dan akan selesai pada akhir bulan.

Apa yang Terjadi dengan Tata Letak yang Ada setelah tata letak Carousel ditambahkan?

Sebagai bagian dari pembaruan pada komponen web Hero, perubahan berikut telah dibuat:

• Item Management Updates
  Cara Anda mengelola item di komponen web Hero telah berubah. Alih-alih mengatur jumlah item (1-5), kini Anda dapat langsung menambahkan atau menghapus item menggunakan antarmuka Slide baru yang intuitif. Hal ini menyederhanakan proses penyesuaian komponen web Hero untuk memenuhi kebutuhan spesifik Anda.
• Penyesuaian panel properti
  Meskipun UI di panel properti untuk tata letak Ubin dan Lapisan telah diperbarui untuk pengalaman yang lebih modern, fungsionalitas tata letak ini tidak berubah.
•   Tidak berdampak pada tata letak yang ada
  Jika saat ini Anda menggunakan tata letak Ubin atau Lapisan , yakinlah bahwa tata letak tersebut akan tetap seperti apa adanya. Tidak akan ada konversi otomatis ke tata letak Carousel baru, sehingga halaman Anda yang sudah ada terus terlihat dan berfungsi seperti yang diharapkan.