Menggunakan komponen web Hero

Komponen web Hero di situs Komunikasi: Topik dan Showcase

Saat Anda membuat situs Komunikasi, Anda bisa 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 disertai dengan komponen web Hero, seperti:

• Komunikasi standar: berbagi informasi seperti berita, acara, dan konten lainnya.

• Showcase: use photos or images to showcase a product, team, or event.

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

Ketika Anda memilih templat Komunikasi standar, hero default adalah tata letak ubin dengan lima ubin (yang dapat Anda ubah dari satu menjadi lima):

Ketika Anda memilih templat Showcase , hero default adalah tata letak vertikal dengan tiga lapisan (yang dapat Anda ubah dari satu menjadi lima lapisan):

Anda dapat mengubah tata letak komponen web Hero dari kisi menjadi lapisan vertikal atau carousel, menggunakan tombol (1) Properti edit (), 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 Anda, pilih Edit di bagian kanan atas halaman.

1. Anda dapat memilih salah satu dari tiga tata letak yang tersedia untuk komponen web Hero: Korsel, Ubin, dan Lapisan. Anda memilih tata letak dengan memilih Edit properti () di bagian kiri atas komponen web lalu pilih tata letak dari menu menurun tata letak:
   
   
   
   Atau Anda bisa memilih tipe tata letak yang Anda inginkan di Panel Properti komponen web:
   
   

2. Di Panel Properti komponen web, pilih:

   • Menambahkan slide untuk tata letak Korsel
      

     Tips: 

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

     • 

   • Menambahkan petak untuk tata letak Ubin

   • Menambahkan lapisan untuk tata letak
     Lapisan

• Catatan: Anda bisa memilih hingga 5 ubin (seperti itu di situs komunikasi Standar), atau hingga 5 lapisan (seperti itu di situs Showcase), atau hingga 5 gambar di carousel. 

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

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

1. Pilih Edit detail () di bagian 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 saham Gambar saham disediakan oleh Microsoft. Mereka berkualitas tinggi dan berukuran tepat untuk penggunaan Anda. Jika Anda admin SharePoint, kami menyarankan agar Anda mengaktifkan Jaringan Pengiriman Konten (CDN) untuk meningkatkan kinerja mendapatkan 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 hanya di Microsoft 365.

   • Organisasi Anda: Jika organisasi Anda telah menentukan sekumpulan aset yang disetujui, Anda akan 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 dapat memperoleh tautan untuk dokumen atau gambar yang disimpan di OneDrive. SharePoint hanya di Microsoft 365.

   • Situs: Anda bisa mendapatkan link 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 dari OneDrive atau SharePoint di Microsoft 365.

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

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

4. Di Panel Properti, di bawah Gambar latar belakang, pilih Gambar kustom atau Warna saja (Warna hanya tersedia hanya untuk tata letak Ubin, dan warnanya sesuai dengan warna tema situs Anda).

   Opsi Dipilih secara otomatis memilih gambar dari halaman atau dokumen yang Anda tautkan, jika tersedia.

5. Masukkan Header untuk gambar.

   • Anda bisa memperlihatkan link tindakan Panggil ke dengan mengalihkan tombol ke Ya. Lalu tambahkan teks tindakan Ajakan ke (misalnya, "Pelajari selengkapnya"). Link Ajakan untuk tindakan tersedia untuk setiap lapisan dalam tata letak berlapis, tetapi hanya untuk ubin terbesar dalam tata letak ubin.
     
     ​​​​​​​

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

     

Mengubah titik fokus gambar

Dalam 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 Anda, pilih Edit di bagian 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.
   
   

Mengurutkan ulang gambar, ubin, atau lapisan korsel

Anda dapat mengurutkan ulang gambar, ubin, atau lapisan korsel dengan memindahkannya ke tempat yang diinginkan.

1. Jika Anda belum berada dalam mode edit di halaman Anda, pilih Edit di bagian 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 mengubah urutan. Untuk ubin dan lapisan, Anda juga dapat memilih gambar, lalu menahan dan menyeret ubin atau lapisan di tempat yang diinginkan.

Meletakkan komponen web Hero dalam satu dari dua atau tiga kolom

Komponen web Hero dirancang untuk memenuhi lebar penuh halaman. Jika Anda lebih suka komponen web Hero tidak mengambil lebar penuh, Anda bisa melakukannya dengan mengubah tata letak bagian.

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

2. Arahkan mouse tepat di atas komponen web Hero, lalu pilih + 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 tersebut. 

5. Untuk memindahkan komponen web Hero, pilih gambar, lalu tahan dan seret ke kolom yang Anda inginkan.

Menambahkan komponen web Hero kosong ke halaman

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

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

2. Pilih Lihat semua komponen web, lalu pilih atau seret dan jatuhkan 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, dalam 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 hanya di Microsoft 365.

   • Organisasi Anda: Jika organisasi Anda telah menentukan sekumpulan aset yang disetujui, Anda akan 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 dapat memperoleh tautan untuk dokumen atau gambar yang disimpan di OneDrive. SharePoint hanya di Microsoft 365.

   • Situs: Anda bisa mendapatkan link 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 dari OneDrive untuk SharePoint di Microsoft 365.

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

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

8. Masukkan Teks alternatif untuk gambar.

9. Anda bisa memperlihatkan link tindakan Panggil ke dengan mengalihkan tombol ke Ya. Lalu tambahkan teks tindakan Ajakan ke (misalnya, "Pelajari selengkapnya"). Link Tindakan Panggil ke tersedia untuk setiap lapisan dalam tata letak berlapis, tetapi hanya untuk ubin terbesar dalam tata letak ubin

Penskalan gambar di komponen web Hero

Untuk memilih pas dengan ukuran gambar untuk komponen web Hero, pertimbangkan hal berikut:

• Komponen web dirancang agar pas dengan lebar layar dalam tata letak berdarah penuh.

• Dalam tata letak Ubin , tinggi komponen web diskalakan untuk mengikuti rasio aspek 8:3, dan gambar di dalam skala komponen web terhadap rasio aspek 4:3.

• Dalam tata letak Lapisan , lapisan individual menyesuaikan rasio aspek 8:3, dan gambar di dalam setiap skala lapisan untuk rasio aspek dekat 9:16.

Kapan tata letak Korsel akan tersedia?

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

Apa yang Terjadi pada Tata Letak yang Sudah Ada setelah tata letak Korsel ditambahkan?

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

• Updates Manajemen Item

  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 yang intuitif baru. Ini menyederhanakan proses kustomisasi komponen web Hero untuk memenuhi kebutuhan spesifik Anda.

• Penyesuaian Panel Properti

  Sementara UI di panel properti untuk tata letak Ubin dan Lapisan telah direfresh untuk pengalaman yang lebih modern, fungsionalitas tata letak ini tetap tidak berubah.

•  Tidak Ada Dampak pada Tata Letak yang Sudah Ada

  Jika saat ini Anda menggunakan tata letak Ubin atau Lapisan , yakinlah bahwa tata letak tersebut akan tetap ada. Tidak akan ada konversi otomatis ke tata letak Carousel baru, memastikan bahwa halaman Anda yang sudah ada terus terlihat dan berfungsi seperti yang diharapkan.