Tampilkan Umpan Instagram di Situs Web Elementor [Langkah demi Langkah]

Ingin membuat umpan Instagram Elementor untuk situs web WordPress Anda?

Dalam panduan langkah demi langkah ini, Anda akan mempelajari cara menambahkan feed Instagram ke Elementor menggunakan plugin non-teknis gratis bernama Spotlight .

Tidak ada pengetahuan teknis atau uang yang diperlukan – cukup ikuti tutorial kami dan Anda akan segera siap.

Panduan Langkah-demi-Langkah: Menampilkan Umpan Instagram di Situs Web Elementor

Siap untuk memulai? Inilah panduan langkah demi langkah Anda tentang cara menampilkan umpan Instagram Elementor.

Langkah 1: Instal & Aktifkan Plugin Umpan Instagram

Untuk memulai, Anda perlu menginstal dan mengaktifkan plugin feed Instagram Spotlight.

Sekali lagi, Spotlight gratis untuk digunakan dan 100% kompatibel dengan Elementor.

Plugin Spotlight gratis terdaftar di WordPress.org, sehingga Anda dapat menginstalnya dengan mengikuti petunjuk berikut:

1. Buka dasbor WordPress Anda.
2. Buka Plugin → Tambah Baru .
3. Cari "Sorotan".
4. Klik tombol Instal Sekarang .
5. Setelah proses instalasi selesai, klik tombol Activate untuk mengaktifkan plugin Spotlight.

Langkah 2: Buat Token Akses Instagram

Selanjutnya, Anda perlu membuat Token Akses Instagram, yang memungkinkan situs WordPress Anda terhubung ke Instagram.

Jangan khawatir – meskipun kedengarannya agak teknis, Anda hanya perlu mengeklik beberapa tombol dan mungkin totalnya akan memakan waktu 30 detik!

Jika Anda menggunakan akun pribadi Anda sendiri, Spotlight juga memungkinkan Anda menghubungkan akun Anda secara langsung ( dalam hal ini Anda memiliki opsi untuk melompat ke langkah berikutnya ). Namun, kami akan menggunakan metode Token Akses Instagram karena ini akan berfungsi untuk pengaturan apa pun, termasuk menghubungkan akun klien Anda (jika Anda membuat situs web klien).

Untuk membuat Token Akses Instagram Anda, buka halaman ini.

Atau, jika Anda membuat situs web klien, minta klien Anda membuka halaman ini dan mengikuti petunjuk yang sama.

Kemudian, klik tombol Generate your access token yang relevan, berdasarkan apakah Anda ingin menghubungkan akun Instagram pribadi atau akun bisnis.

Ini akan membuka layar sembulan dari Instagram yang menanyakan apakah Anda ingin memberikan izin Spotlight untuk mengakses akun Anda.

Klik tombol Izinkan di sembulan:

Setelah mengklik Izinkan , Anda akan melihat Token Akses Instagram Anda muncul di halaman asli:

Salin Token Akses ini ke tempat yang aman karena Anda akan membutuhkannya sebentar lagi.

Atau, jika Anda bekerja dengan pengembang yang membuat situs Anda, Anda harus membagikan Token Akses ini dengan pengembang Anda agar mereka dapat melanjutkan penyiapan plugin .

Langkah 3: Hubungkan Akun Instagram Anda ke Situs Elementor Anda

Sekarang, Anda dapat menambahkan Token Akses Instagram ini di dasbor WordPress Anda untuk menghubungkan situs web Elementor Anda ke Instagram:

1. Kembali ke dasbor WordPress Anda.
2. Arahkan ke Umpan Instagram → Pengaturan .
3. Rekatkan Token Akses Instagram ke dalam kotak token akses Instagram/Facebook .
4. Klik tombol Hubungkan .

Jika Anda bekerja secara eksklusif dengan akun Instagram Anda sendiri, Anda juga dapat terhubung langsung dengan mengklik tombol Hubungkan akun Pribadi Anda atau Hubungkan akun Bisnis Anda .

Setelah mengklik Connect , Anda akan melihat pesan sukses:

Jika Anda menghubungkan akun pribadi, Anda juga akan melihat opsi untuk menambahkan foto khusus dan teks bio. Anda dapat mengklik Ya untuk melakukannya sekarang. Atau, Anda selalu dapat menambahkannya nanti setelah mengonfigurasi umpan Instagram Elementor Anda.

Berbicara tentang…

Langkah 4: Konfigurasi Umpan Instagram Anda

Sekarang setelah Anda menghubungkan akun Instagram Anda, Anda siap untuk menyiapkan umpan Instagram Elementor pertama Anda.

Untuk melakukannya, buka Umpan Instagram → Umpan di dasbor WordPress Anda.

Pilih Jenis Umpan

Pertama, Anda akan memilih jenis konten yang ingin ditampilkan.

Dengan Spotlight versi gratis, Anda dapat menampilkan feed dari postingan Instagram Anda sendiri. Namun, Spotlight Pro menambahkan lebih banyak opsi, seperti umpan berdasarkan tagar atau kiriman yang menandai akun Anda.

Jika Anda ingin mencoba Spotlight Pro, Anda dapat mengakses uji coba gratis Spotlight Pro selama 14 hari untuk melihat cara kerjanya (tidak perlu kartu kredit) – cukup klik tombol Uji coba gratis 14 hari di pojok kanan atas.

Untuk tutorial Elementor Instagram Feed kami, kami hanya akan menggunakan opsi My Instagram posts .

Kemudian, klik Langkah berikutnya untuk melanjutkan.

Pilih Templat

Selanjutnya, Anda dapat memilih salah satu template Spotlight, yang memungkinkan Anda mengontrol tata letak dan desain umpan Instagram Elementor Anda.

Versi gratisnya memberi Anda enam templat berbeda, sementara Spotlight Pro menambahkan delapan templat lainnya.

Untuk contoh ini, kami akan memilih template umpan Klasik gratis, tetapi Anda bebas memilih yang lain jika mau.

Setelah Anda menentukan pilihan, klik tombol Langkah berikutnya untuk melanjutkan.

Pilih Akun Instagram Anda

Pada langkah selanjutnya, Anda akan diminta untuk Menghubungkan & menyesuaikan . Tetapi karena Anda sudah menghubungkan akun Instagram Anda, Anda tidak perlu melakukan apa-apa lagi di sini.

Untuk melanjutkan, klik tombol Sambungkan & sesuaikan .

Sesuaikan Umpan Instagram Elementor Anda

Sekarang, Anda akan berada di alat penyesuai Spotlight, yang memungkinkan Anda menyesuaikan lebih lanjut template pilihan Anda.

Untuk memulai, pilih akun yang Anda hubungkan pada langkah sebelumnya di bawah tajuk Tampilkan kiriman dari akun ini .

Ini akan memperbarui pratinjau langsung umpan Anda untuk menggunakan kiriman sebenarnya dari akun Instagram Anda.

Selanjutnya, Anda dapat pergi ke tab Desain untuk menyesuaikan template umpan Instagram Elementor Anda.

Berikut adalah beberapa pilihan yang dapat Anda buat di sini dengan plugin versi gratis:

• Pilih berapa banyak posting yang akan ditampilkan dan berapa banyak kolom.
• Sesuaikan urutan umpan. Secara default, ini akan menampilkan posting terbaru terlebih dahulu, tetapi Anda dapat mengubahnya jika diinginkan.
• Pilih cara membuka postingan saat pengguna mengekliknya.
• Sesuaikan ukuran dan jarak feed Anda.
• Sesuaikan tajuk umpan yang muncul di atas item umpan.
• Konfigurasikan gaya dan teks tombol Ikuti di Instagram .
• Konfigurasikan gaya dan teks tombol Muat Lebih Banyak Posting .
• Tambahkan CSS khusus Anda sendiri jika Anda menginginkan lebih banyak kontrol.

Dengan Spotlight Pro, Anda akan mendapatkan kontrol yang lebih besar atas detail seperti keterangan, suka, dan komentar.

Pengguna Spotlight Pro juga mendapatkan akses ke tab lain untuk memfilter dan memoderasi konten umpan atau menyiapkan promosi umpan.

Setelah puas dengan tampilan umpan Anda, pastikan untuk mengeklik tombol Simpan di pojok kanan atas.

Lalu, mari beralih ke cara menyematkan umpan Instagram Anda di Elementor.

Langkah 5: Sematkan Umpan Instagram Anda di Elementor

Spotlight memberi Anda dua cara untuk menyematkan umpan Instagram Elementor Anda:

• Spotlight (gratis) – Anda dapat menambahkan feed Anda ke Elementor menggunakan widget WordPress Spotlight biasa. Meskipun Anda dapat menambahkan widget ini langsung dari antarmuka Elementor, Anda tidak akan dapat menyesuaikan pengaturan feed Anda dari Elementor.
• Spotlight Pro – Anda mendapatkan widget Spotlight Instagram Feed Elementor khusus yang memungkinkan Anda tidak hanya menyematkan feed Anda, tetapi juga mengonfigurasi lebih lanjut desain dan gayanya langsung dari antarmuka Elementor.

Kami akan melihat kedua opsi…

Apa pun itu, Anda dapat memulai dengan membuka editor Elementor untuk konten yang ingin Anda tambahkan feed Instagram Elementor Anda.

Sorotan (Gratis)

Jika Anda menggunakan Spotlight versi gratis, gulir ke bawah ke bagian WordPress di sidebar Elementor dan perluas daftar opsi.

Kemudian, seret Widget Feed Instagram Spotlight ke desain Elementor Anda di mana Anda ingin menampilkan feed Anda.

Setelah menambahkan widget, Anda akan melihat dua opsi di sidebar:

1. Tambahkan judul (atau biarkan kosong).
2. Pilih feed Instagram yang baru saja Anda buat pada langkah sebelumnya.

Kemudian, klik Terapkan .

Anda juga dapat menggunakan tab Tingkat Lanjut untuk menyesuaikan detail seperti spasi dan margin.

Anda mungkin tidak melihat pratinjau langsung feed Anda di editor Elementor.

Namun, jika Anda membuka pratinjau langsung atau versi langsung halaman tersebut, Anda akan melihat feed Instagram Elementor Anda.

Sorotan Pro

Jika Anda menggunakan Spotlight Pro, Anda akan mendapatkan widget Spotlight Instagram Feed Elementor khusus.

Widget ini tidak hanya memungkinkan Anda melihat pratinjau langsung di editor Elementor, tetapi juga memungkinkan Anda menyesuaikan (dan membuat) feed Instagram langsung dari antarmuka Elementor.

Sekali lagi – jika Anda ingin menguji ini, Anda bisa mendapatkan uji coba gratis Spotlight Pro selama 14 hari – tidak perlu kartu kredit.

Anda dapat mencari widget berdasarkan nama atau menemukannya di bagian Umum widget Elementor.

Saat Anda menambahkan widget, Anda akan langsung melihat pratinjau umpan Instagram Elementor Anda.

Jika perlu, Anda dapat mengklik tombol Edit untuk mengedit pengaturan feed Anda langsung dari Elementor. Atau, Anda bahkan dapat membuat feed baru jika ingin menampilkan beberapa feed.

Langkah 6: Tampilkan Feed Instagram Anda dalam Pop-Up

Langkah terakhir ini opsional…

Tetapi jika Anda ingin menampilkan feed Instagram Anda dalam pop-up di Elementor, Anda memiliki beberapa opsi.

Pertama, Spotlight menyertakan fitur bawaan untuk menampilkan setiap posting dalam sembulan saat pengunjung mengkliknya. Ini tersedia dalam versi gratis dan berbayar.

Berikut ini contoh tampilannya:

Untuk mengaktifkan atau menyesuaikan pengaturan ini, atur pengaturan Open posts in ke kotak Popup di bawah Feed Options :

Pengguna Spotlight Pro selanjutnya dapat mengonfigurasi popup menggunakan pengaturan Popup Lightbox .

Jika Anda ingin menampilkan seluruh feed Instagram Anda dalam pop-up, Anda memiliki beberapa pilihan:

1. Jika Anda memiliki Elementor Pro, Anda dapat menambahkan widget Spotlight Instagram Feed ke popup yang Anda buat dengan Elementor Popup Builder. Cukup ikuti langkah yang sama dari langkah sebelumnya saat menambahkan widget ke desain popup Anda.
2. Anda dapat menggunakan plugin popup WordPress apa pun, seperti Pembuat Popup. Untuk menampilkan umpan Anda di sembulan, Anda dapat menggunakan kode pendek Spotlight.

Kesimpulan

Itu mengakhiri panduan kami tentang cara menampilkan feed Elementor Instagram menggunakan plugin Spotlight gratis.

Anda dapat mengikuti semuanya dalam panduan ini dan membuat umpan Instagram Elementor Anda tanpa mengeluarkan uang.

Jika Anda menginginkan lebih banyak fungsi, seperti widget umpan Instagram Elementor khusus yang dapat Anda gunakan sebagai pengganti widget WordPress Spotlight biasa, Anda dapat meningkatkan ke Spotlight Pro.

Spotlight Pro menawarkan uji coba gratis selama 14 hari tanpa memerlukan kartu kredit, jadi Anda selalu dapat menguji fitur premium sebelum berkomitmen pada apa pun.