Divi: Cara membuat tab dengan efek hover dari garis

Divi: Cara membuat tab dengan efek hover dari garis

Ingin membuat tab dengan efek hover dari baris dengan Divi?

Tab pasti berguna untuk membuat informasi penting tersedia di area ringkas situs web Anda. Ini mengurangi kebutuhan pengguna untuk menggulir konten halaman yang panjang. Modul tab Divi mudah digunakan dan bagus untuk menjelajahi konten sederhana dengan sekali klik.

Namun dalam tutorial ini, kami akan menunjukkan cara mengonversi seluruh baris Divi menjadi tab yang muncul saat mengarahkan kursor. 

Kami juga akan menunjukkan cara membuat tab horizontal dan vertikal. Ini akan membuka kekuatan Divi untuk membuat tata letak penuh dengan beberapa modul untuk setiap area konten tab. 

Tidak perlu plugin!

Mari kita mulai.

penelitian

Berikut adalah ikhtisar tab yang akan kita buat bersama dalam tutorial ini.

Unduh DIVI Sekarang!!!

Buat halaman baru dengan Divi Builder

Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.

Garis divi dikonversi menjadi tab

Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder

kemudian klik Mulai Membangun (Bangun Dari Awal)

Garis divi dikonversi menjadi tab

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membuat Tab Arahkan Horisontal Menggunakan "Baris Divi"

Di bagian default yang ada, tambahkan baris dua kolom.

Latar belakang garis, isi kotak dan bayangan

Sebelum kita menambahkan modul kita, mari kita sedikit menyesuaikan pengaturan baris terlebih dahulu. Buka Pengaturan Jalur dan perbarui yang berikut ini:

  • Warna Gradien Kiri: #284f91
  • Warna Gradien Kanan: #4646c4
  • Padding: 50px (Atas dan Bawah), 50px (Kiri dan Kanan)
  • Bayangan Kotak: lihat tangkapan layar
  • Warna Bayangan Kotak: rgba(70,70,196,0.66)

Tambahkan konten ke baris

Kami sekarang akan menambahkan konten placeholder ke baris kami. Di kolom 1, tambahkan gambar pilihan Anda dengan modul Gambar. Di sini kami menggunakan gambar dari paket tata letak « Paket Tata Letak Konferensi Desain« .

Di kolom kanan, tambahkan modul Panggilan Untuk Aksi dan perbarui yang berikut:

  • URL Tautan Tombol: # (hanya untuk menampilkan tombol untuk saat ini)
  • Gunakan Warna Latar Belakang: TIDAK
  • Perataan Teks: kiri
  • Judul Font : Lato
  • Judul Teks Ukuran: 60px (desktop), 50px (ponsel)

Pembuatan tab

Untuk membuat tab sebenarnya yang akan dituju pengguna untuk mengungkapkan konten baris itu, kita perlu membuat modul Teks dan memposisikannya di kanan atas dengan beberapa CSS khusus.

Lanjutkan dan tambahkan modul teks baru di bawah gambar di kolom 1 dan perbarui yang berikut:

  • Isi: "Tab 1"
  • Latar Belakang: #284f91 (ini harus sesuai dengan warna gradien kiri garis)
  • Perataan Teks: terpusat
  • Warna Teks: #ffffff
  • Lebar: 100 piksel
  • Tinggi: 50px
  • Margin: -100px (Atas), -50px (Kiri)
  • Padding: 14px (Atas)

Terakhir, tambahkan custom css berikut ke elemen utama untuk memberikannya posisi absolut di bagian atas baris.

position: absolute !important;
top: 0;

Tinggi dan jarak bagian

Untuk saat ini, buka pengaturan bagian dan perbarui yang berikut:

  • Tinggi Min: 500px (Desktop), 900px (Tablet), 750px (Ponsel)
  • Margin: 100px (Atas dan Bawah)
  • Padding: 0px (Atas dan Bawah)

Pembuatan baris kedua

Untuk membuat baris kedua, duplikat baris yang Anda buat sebelumnya. Pindahkan modul teks ke kolom 1 dan gambar ke kolom 2. Kemudian perbarui gambar dengan yang baru. Ini akan membantu Anda mendapatkan gambaran tentang tampilan konten yang berbeda di setiap tab.

Kemudian buka pengaturan modul Teks yang digunakan untuk membuat tab di kolom 1 dan pindahkan tab ke kanan sehingga di mana baris ini tumpang tindih dengan baris di atas Anda dapat melihat tab langsung di sebelah kanan tab baris pertama.

  • Margin: 50px (Kiri)

Menambahkan efek hover

Buka pengaturan baris dan tambahkan filter berikut:

  • Opacity: 70% (default), 100% (arahkan kursor)

Kemudian tambahkan durasi transisi dan kurva kecepatan untuk efek hover filter opacity.

  • Waktu transisi: 500 ms
  • Kurva Kecepatan Transisi: Linear

Pembuatan tab ketiga

Kita sekarang dapat menambahkan tab terakhir kita. Untuk melakukan ini, duplikat baris kedua yang baru saja Anda buat. Kemudian pindahkan modul teks ke kolom 1 dan gambar ke kolom 2. Dan perbarui modul gambar dengan gambar baru.

Perbarui pengaturan garis dengan gradien latar belakang baru.

  • Warna gradien latar belakang kiri: #333333
  • Warna gradien latar belakang kanan: #4646c4

Kemudian buka pengaturan modul Teks yang digunakan untuk membuat tab di kolom 1 dan perbarui warna dan margin.

  • Latar belakang: #333333
  • Margin: 150px (Kiri)

Inilah tampilan halaman Anda sebelum kami memposisikan garis kami untuk tumpang tindih.

Garis yang tumpang tindih dengan posisi absolut

Untuk tumpang tindih garis kita, kita perlu menggunakan posisi absolut. Pertama, perbarui tinggi ketiga baris menjadi 100%.

  • Tinggi: 100%

Kemudian tambahkan CSS khusus berikut ke elemen utama dari ketiga baris:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

Seperti inilah tampilan tab kami saat ini.

Mengubah urutan baris saat melayang dengan indeks Z

Saat ini Anda mungkin telah memperhatikan bahwa baris/tab ketiga berada di latar depan. Jadi kita perlu mengatur ulang baris menggunakan Z Index sehingga tab pertama ditampilkan terlebih dahulu sampai Anda mengarahkan kursor ke tab lain.

Baca juga: Cara Membuat Hamparan Gambar Khusus di Divi

Untuk melakukan ini, buka pengaturan baris pertama dan perbarui indeks-z sebagai berikut:

Z-indeks: 10

Kemudian letakkan indeks Z dari dua baris lainnya di hover.

Z-index: 11 (Hover)

Hal ini dilakukan! Mari kita lihat hasil akhirnya.

Hasil akhir

Unduh DIVI Sekarang!!!

Membuat tab vertikal

Jika Anda ingin menambahkan tab vertikal ke baris, inilah yang harus dilakukan.

Lanjutkan dan duplikat bagian yang berisi tab hover yang baru saja kita buat sehingga Anda memiliki desain baru untuk dikerjakan.

Kemudian buka pengaturan bagian dan perbarui yang berikut:

  • Padding: 10% (Kiri dan Kanan)

Perbarui parameter berikut untuk ketiga baris bagian duplikat dengan yang berikut ini:

  • Lebar: 70% (Desktop), 70% (Tablet), 80% (Ponsel)
  • Lebar Maks: 980px

Selanjutnya, perbarui arah gradien menjadi 90 derajat untuk ketiga garis.

  • Arah Gradien: 90 derajat

Sekarang saatnya untuk memposisikan tab modul Teks kita di sebelah kiri baris kita untuk mendapatkan tab vertikal yang diinginkan.

Lihat juga: Cara Membuat Menu Roda Pemintal saat Melayang di Divi

Buka pengaturan tab modul teks di baris pertama dan perbarui yang berikut:

  • Margin (Desktop): -50px (Atas), -150px (Kiri)

Selanjutnya, buka pengaturan tab modul Teks Baris Bagian ke-2 dan perbarui yang berikut:

  • Margin (Desktop): 0px (Atas), -150px (Kiri)

Dan untuk tab terakhir di baris ketiga, perbarui yang berikut:

  • Margin (desktop): 50px atas, -150px kiri
Divi

Hasil akhir

Sekarang mari kita lihat hasil akhirnya.

Unduh DIVI Sekarang!!!

Kesimpulan

Dengan sedikit kreativitas dan kekuatan Divi, Anda dapat membuat beberapa tab kustom yang cukup keren menggunakan garis Divi. Ada beberapa batasan untuk apa yang dapat Anda tampilkan. 

Misalnya, dengan konfigurasi ini, semua baris harus memiliki tinggi yang sama dengan bagian. Tapi, untuk tidak perlu menggunakan plugin, ini adalah solusi yang bagus. 

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 memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca 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.

...

Cara menyesuaikan WordPress untuk meningkatkan konversi

Cara menyesuaikan WordPress untuk meningkatkan konversi

Bagaimana cara menyesuaikan WordPress untuk meningkatkan konversi?

Studi menunjukkan lebih banyak 68% pembeli mulai meneliti produk secara online. Saat mereka mengetikkan nama bisnis Anda atau produk yang mereka cari di Google dan mendarat di situs web Anda, sangat penting bagi Anda untuk memberi mereka informasi relevan yang mereka cari.

Diperlukan waktu kurang dari satu detik bagi pengguna untuk membuat keputusan tentang situs web Anda yang menentukan apakah mereka tetap tinggal atau keluar. 

sesuaikan WordPress untuk meningkatkan konversi

Jika calon pelanggan Anda menemukan jalan ke situs web Anda hanya untuk bangkit kembali, bahkan tidak sedetik kemudian, Anda kehilangan penjualan.

Cara yang bagus untuk melawan rasio pentalan ini sangat cepat adalah memberikan informasi dan konten pribadi yang relevan kepada calon pelanggan Anda.

Kebenaran di balik personalisasi

Sesuaikan situs WordPress Anda Rasio pentalan Anda tidak hanya akan menurun, tetapi pada akhirnya akan meningkatkan konversi Anda.

Dengan ribuan opsi untuk dipilih dan ribuan bisnis untuk mengeluarkan uang untuk pemasaran digital, satu situs web umum berkinerja buruk tidak akan diterjemahkan ke dalam konversi dan penjualan.

Ketika calon pelanggan menemukan dengan tepat informasi yang mereka cari, mereka lebih cenderung untuk tinggal, berinteraksi, dan akhirnya membeli.

Temukan kami 4 trik untuk mengurangi tingkat bouncing di blog WordPress Anda

Studi menunjukkan bahwa konsumen lebih cenderung membeli dari bisnis yang menawarkan pengalaman pengguna yang dipersonalisasi dan bahwa konten yang dipersonalisasi dapat meningkatkan efektivitas pengeluaran pemasaran Anda sebesar 10 hingga 30 persen.

Dengan angka-angka seperti ini, Anda tidak bisa tidak mempersonalisasi situs web Anda.

Konten yang Anda butuhkan untuk dipersonalisasi

Anda menghabiskan banyak waktu untuk membangun dan menyempurnakan situs WordPress Anda, sehingga bisa sangat melelahkan saat mencoba memutuskan konten mana yang akan disesuaikan.

Foto-foto di situs web Anda sangat kuat dan dapat berdampak besar pada rasio konversi Anda. Apakah citra Anda menambahkan elemen manusia ke merek Anda, menampilkan detail, atau memandu konsumen ke tempat yang Anda inginkan, mempersonalisasi bagian situs web ini memungkinkan pengunjung Anda untuk berhubungan dengan bisnis Anda pada tingkat yang lebih dalam.

Informasi kontak - Meskipun citra memungkinkan Anda membuat hubungan emosional dengan pengunjung, memberikan detail kontak yang benar adalah cara mudah untuk mempersonalisasi situs web Anda. Apakah Anda memiliki perwakilan penjualan satu atap untuk berbagai lokasi atau saluran bantuan semalam tertentu, dengan segera menunjukkan kepada pengunjung situs web Anda informasi kontak yang benar memungkinkan mereka untuk menghubungi Anda dan membuat belanja lebih mudah. 

Ulasan dan testimonial pelanggan - pelanggan membaca ulasan sebelum melakukan pembelian. Untuk alasan ini, semakin penting untuk memberikan komentar di situs web Anda. Mempersonalisasi komentar ini dapat membuatnya lebih berdampak. Anda dapat melakukan ini dengan menunjukkan ulasan produk yang relevan kepada seseorang yang telah membeli sebelumnya, atau menunjukkan ulasan dari seseorang di wilayah tertentu di negara tersebut kepada orang lain di wilayah tersebut.

Informasi produk - Jika Anda menjual produk atau layanan yang tidak tersedia di wilayah tertentu atau untuk kelompok usia tertentu, mempersonalisasi deskripsi produk dapat menjadi cara sempurna untuk berterus terang tentang informasi ini. Teknik ini memungkinkan Anda untuk memberikan informasi yang relevan kepada pelanggan yang relevan tanpa mengacaukan halaman web untuk orang yang tidak membutuhkannya.

Temukan dengan mengklik tautan ini Mengapa rasio pentalan Anda begitu tinggi?

Ajakan bertindak - Bergantung pada perangkat yang digunakan pengunjung situs web, di mana mereka berada dan apa yang menarik bagi mereka, a tombol ajakan bertindak tidak selalu relevan atau menarik. Menyesuaikan teks pesan ajakan (CTA), dan tautan yang dikirimnya ke pelanggan Anda, dapat membuatnya lebih efektif daripada opsi satu ukuran untuk semua.

Artikel di halaman depan blog dan konten lainnya - Di dunia gila ini SEO WordPress, posting blog yang Anda tulis dan konten lain yang Anda buat di situs web Anda harus relevan dan menarik bagi pengguna. Menampilkan konten kepada pengunjung situs web dan postingan blog yang menarik dan relevan bagi mereka tidak hanya memberikan nilai bagi pengunjung Anda, tetapi juga meningkatkan tingkat keterlibatan pada postingan blog Anda.

Untuk mendapatkan popularitas dengan situs web Anda, melibatkan audiens yang sudah tertarik dengan apa yang Anda tulis bisa menjadi sangat penting dan lebih praktis menggunakan waktu Anda.

Cara mempersonalisasi situs web Anda

Bergantung pada produk atau layanan Anda, ada banyak cara untuk menyesuaikan situs WordPress Anda untuk meningkatkan konversi. Berikut ini beberapa ide untuk membuat kreativitas Anda mengalir saat Anda menyesuaikan situs web:

Penargetan-geo

Menyesuaikan konten berdasarkan lokasi pengunjung adalah cara terbaik untuk mempersonalisasi situs web Anda. Anda dapat mengubah citra untuk mencerminkan gambar yang relevan dengan pengunjung, mengubah nomor telepon dan informasi penjualan untuk menunjukkan detail kontak yang benar berdasarkan tempat mereka berbelanja dan banyak lagi.

Lihat juga Cara Meningkatkan Tingkat Konversi Anda dengan Plugin Capture Email OptinLinks

Satu ukuran tidak cocok untuk semua situs web Anda dan informasi yang dicari pengunjung situs web Anda dari berbagai tempat.

sesuaikan WordPress untuk meningkatkan konversi

Dalam gambar ini, Anda dapat melihat bagaimana University of Montana dapat menggunakan penargetan-geo untuk mempersonalisasi situs web mereka berdasarkan lokasi siswa yang tertarik mengunjungi situs web tersebut. Alih-alih pesan umum " Pelajari lebih lanjut mengapa UM tepat untuk Anda", Pengunjung ke Boston akan melihat pesan" Montana mengunjungi Boston Dan akan mendapat kesempatan untuk membuat janji bertemu dengan perwakilan kampus saat berada di wilayah tersebut. Rasio klik-tayang untuk konten yang dipersonalisasi hampir dua kali lipat dibandingkan dengan posting umum.

GeoFli

GeoFli adalah alat WordPress yang hebat untuk penargetan-geo dan personalisasi geografis. Plugin WordPress mereka memungkinkan Anda menyesuaikan situs web Anda dengan mudah berdasarkan lokasi pengunjung. Dengan GeoFli, Anda dapat memilih lokasi yang Anda targetkan dengan kode pos, negara bagian, negara atau bahkan menggambar pagar geografis Anda sendiri.

Plugin wp gratis Geofli

Ini juga memungkinkan Anda untuk mengarahkan pengunjung dari tempat tertentu ke URL yang berbeda. Untuk menggunakan GeoFli, Anda hanya perlu memilih konten yang akan diedit, memilih area yang akan ditargetkan, dan mengedit salinan atau konten untuk memberikan nilai kepada audiens yang ditargetkan.

Kustomisasi jenis perangkat

Menampilkan konten yang relevan kepada pengguna berdasarkan perangkat yang mereka gunakan untuk menelusuri web adalah cara yang bagus untuk menurunkan rasio pentalan, meningkatkan konversi, dan memberikan informasi kepada pengunjung situs web Anda. yang mereka butuhkan.

Baca juga: Cara meningkatkan konversi: tingkatkan penawaran terbatas

Memahami kebiasaan pelanggan Anda dapat membantu Anda dengan bentuk personalisasi ini. Misalnya, konsumen lebih cenderung membeli dari komputer desktop daripada ponsel cerdas. Mengetahui hal ini dapat mendorong Anda untuk menampilkan informasi pembelian produk di komputer sambil menyoroti nilai bisnis Anda dan manfaat produk di perangkat seluler.

Logika Hop

Logic hop wp plugin gratis

Logic Hop memungkinkan Anda untuk menyesuaikan konten situs web berdasarkan bagaimana pengunjung tiba di situs web dan konten apa yang mereka lihat. Plugin WordPress mereka adalah cara ampuh untuk mengirimkan konten yang dipersonalisasi kepada pengunjung situs web Anda.

Untuk menggunakan Logic Hop, yang perlu Anda lakukan hanyalah membuat logika kondisional di bagian tertentu situs web Anda dan situs web Anda akan menampilkan bagian ini saat ketentuan terpenuhi.

Kustomisasi waktu

Menampilkan ajakan bertindak dan konten unik berdasarkan waktu, minggu, atau tahun pengunjung di situs Anda dapat memungkinkan Anda menggunakan model pengguna untuk meningkatkan konversi.

Baca juga panduan kami di Cara menggunakan FOMO di WordPress untuk konversi yang lebih baik

Jika Anda mengetahui bahwa produk atau layanan tertentu terjual lebih baik pada titik waktu tertentu, Anda dapat menyesuaikan situs web Anda untuk menampilkannya selama waktu itu.

Personalisasi Tingkat Lanjut oleh FlowCraft

Personalisasi Tingkat Lanjut oleh FlowCraft memungkinkan Anda menyesuaikan konten situs web berdasarkan waktu, jumlah kunjungan, dan lainnya. Plugin WordPress mereka memungkinkan Anda untuk dengan mudah menggabungkan bagian dan menyesuaikannya untuk kelompok orang yang lebih spesifik.

Personalisasi lanjutan wp plugin gratis

Mirip dengan Jika begitu, untuk menggunakan kustomisasi lanjutan Flow Craft, Anda hanya perlu membuat kondisi dan menentukan apa yang akan ditampilkan jika kondisi tersebut terpenuhi atau tidak.

Personalisasi interaksi situs web

Cara konsumen berinteraksi dengan situs web Anda juga merupakan peluang besar untuk menunjukkan kepada mereka konten yang dipersonalisasi. Jika sudah terhubung dan sudah dibuat sebelumnya pembelian, Anda dapat menyarankan item serupa, jika mereka adalah pengunjung pertama kali, Anda dapat menampilkan item paling populer, dan jika mereka menemukan situs web Anda karena iklan tertentu, Anda dapat menampilkannya. menampilkan informasi yang relevan dengan iklan ini.

Jika begitu

If-So memungkinkan Anda mempersonalisasi konten situs web berdasarkan profil pengunjung Anda atau interaksi dengan situs web. Plugin WordPress ini memungkinkan Anda untuk menampilkan konten unik berdasarkan tanggal, profil pengguna, dan lainnya.

Ifso wp plugin gratis

Untuk menggunakan If-So, yang perlu Anda lakukan hanyalah memilih kondisi yang ingin Anda targetkan dan kemudian mengatur konten yang ingin Anda tampilkan apakah kondisi tersebut terpenuhi atau tidak.

Ketika calon pelanggan datang ke situs web Anda, Anda hanya memiliki waktu sepersekian detik untuk menarik perhatian mereka dan membuat mereka tetap tertarik. Oleh karena itu, menyesuaikan konten di situs WordPress Anda adalah cara yang bagus untuk memberi pengunjung informasi yang mereka cari dan pada akhirnya meningkatkan konversi.

Temukan juga Cara Melacak Konversi di WordPress: Panduan Langkah demi Langkah

Baik itu menyesuaikan detail kontak berdasarkan lokasi pengunjung atau menyesuaikan gambar berdasarkan waktu tahun, konten yang berharga adalah kunci untuk mengubah pelanggan berkualitas tinggi.

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

Kesimpulan

Disini adalah ! Di sini berakhir panduan kami tentang cara menyesuaikan WordPress untuk meningkatkan konversi. Jika Anda punya komentar atau saran, jangan ragu untuk memberi tahu kami di bagian yang disediakan untuk ini.

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

 Tapi di atas segalanya bagikan artikel ini di berbagai jejaring sosial Anda.

... 

Bagaimana cara menginstal plugin WordPress?

Bagaimana cara menginstal plugin WordPress?

Pada artikel ini kami akan menunjukkan cara menginstal plugin WordPress

Sebagai salah satu sistem manajemen konten (CMS) paling populer, WordPress menawarkan fleksibilitas luar biasa dan banyak opsi penyesuaian. Ini menawarkan berbagai macam plugin WordPress, yang memungkinkan Anda untuk memodifikasi fungsionalitas situs web Anda.

WordPress memiliki direktori sendiri, yang dilengkapi dengan plugin gratis dan premium. Plugin ini memungkinkan Anda untuk menambahkan berbagai fitur, mulai dari formulir kontak dan buletin yang dipersonalisasi hingga caching situs web dan keamanan WordPress.

Beberapa plugin juga dapat memodifikasi situs WordPress Anda menjadi toko online yang fungsional dengan a Plugin WooCommerce atau platform e-Learning dengan plugin LMS. Bahkan, Anda bahkan bisa buat plugin WordPress Anda sendiri.

Dalam tutorial ini, kami akan menunjukkan kepada Anda proses langkah demi langkah menginstal plugin WordPress menggunakan tiga metode berbeda.

Di akhir artikel ini, kami juga akan menyertakan beberapa tips yang dapat Anda ikuti saat mencari plugin WordPress baru untuk meningkatkan situs web Anda.

Tetapi sebelum kita mulai, jika Anda belum pernah menginstal WordPress, cari tahu Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

Cara Menginstal Plugin WordPress dari Direktori Plugin Resmi

Cara termudah untuk menginstal plugin WordPress adalah dengan mengakses direktori plugin resmi melalui area admin WordPress Anda. Namun, direktori plugin WordPress ini terbatas pada opsi plugin gratis saja.

Masuk ke dasbor WordPress Anda dan arahkan ke Ekstensi->Tambahkan. Lanjutkan untuk mencari plugin di bilah pencarian. Anda juga dapat menelusuri plugin unggulan, populer, atau yang direkomendasikan dengan mengklik tab yang disediakan di sebelah kiri.

cara menginstal plugin wordpress

Misalnya, jika Anda mencari plugin MonsterInsights, Anda akan melihatnya muncul sebagai hasil pertama. Klik pada tombol pemasang sekarang untuk mulai menginstal plugin.

Tunggu hingga proses selesai dan klik tombol mengaktifkan untuk mulai menggunakan plugin WordPress ini.

Setelah Anda mengaktifkan plugin, periksa dan konfigurasikan pengaturan dari plugin dengan pergi ke Ekstensi -> Plugin terpasang. 

Cara menginstal plugin WordPress secara manual

Cara lain untuk menginstal plugin WordPress adalah dengan mengunggah file plugin secara manual melalui dashboard WordPress Anda.

Metode ini memungkinkan Anda untuk menginstal plugin yang mungkin tidak ada di direktori resmi WordPress tetapi tersedia dari pasar pihak ketiga, seperti CodeCanyon et Kodester.

Sebelum memulai proses instalasi plugin, Anda harus terlebih dahulu mengunduh file ZIP plugin dari sumber pilihan Anda.

Selanjutnya, navigasikan ke area admin WordPress Anda dan klik Ekstensi -> Tambahkan. Lanjut, menemukan tombol-Tmeningkatkan ekstensi di kiri atas halaman.

cara menginstal plugin wordpress

Pilih file di komputer Anda ZIP plugin yang ingin Anda unduh, lalu klik install sekarang.

cara menginstal plugin wordpress

Tunggu hingga penginstalan plugin selesai dan ketuk Aktifkan ekstensi.

cara menginstal plugin wordpress

Menggunakan Klien FTP untuk Menginstal Plugin WordPress

Ada beberapa plugin WordPress premium dan kustom yang mengharuskan Anda menginstalnya secara manual menggunakan a FTP client. Untuk pemula, prosesnya mungkin sedikit lebih rumit karena Anda harus terlebih dahulu mempelajari cara menyiapkan klien FTP.

Jangan khawatir, panduan berikut akan memandu Anda langkah demi langkah. Yang harus Anda lakukan hanyalah mengikuti langkah-langkahnya.

pertama, ekstrak file ZIP plugin dan simpan ke folder di komputer Anda. Ingatlah bahwa folder file plugin yang diekstraksi akan menjadi folder yang Anda perlukan untuk diunggah melalui klien FTP.

Selanjutnya, hubungkan situs web Anda ke server FTP. Untuk melakukannya, temukan detail FTP dari penyedia hosting Anda.

Setelah masuk, navigasikan ke klien FTP Anda – untuk contoh ini kami menggunakan FileZilla. Di sana, masukkan kredensial login Anda dan tekan tombol Koneksi Cepat. Lalu pergi ke panel situs jarak jauh dan cari folder wp-content / plugins /.

Di panel situs lokal, unggah folder plugin yang diekstrak dari komputer Anda ke folder wp-content/plugins/ dari server Anda.

cara menginstal plugin wordpress

Setelah transfer selesai, plugin WordPress akan dipasang di situs web Anda.

Untuk mengaktifkan plugin, Anda perlu mengakses dashboard WordPress Anda. Arahkan ke Ekstensi-> bagian Plugin terpasang, cari plugin, lalu klik mengaktifkan.

Apa yang harus diingat ketika memilih plugin WordPress?

Ada banyak plugin di direktori plugin WordPress dan bahkan lebih banyak lagi tersedia di situs web pihak ketiga. Jumlah opsi ini bisa tampak luar biasa, terutama bagi pemula yang mencoba mencari tahu apa yang tepat untuk situs web mereka.

Bagian berikut akan menunjukkan kepada Anda beberapa hal penting yang perlu dipertimbangkan saat memilih plugin untuk situs web Anda.

Pembaruan rutin.

WordPress merilis pembaruan rutin untuk menjaga sistemnya tetap mutakhir. Beginilah cara mereka meningkatkan kinerja, menjaga keamanan, memperbaiki masalah bug, dan menambahkan fitur baru.

Jadi sebelum menginstal plugin apa pun, pertimbangkan poin-poin ini:

Pastikan dia cocok untuk pekerjaan itu

  • Pembaharuan Terakhir. Memilih plugin WordPress yang sering diperbarui dapat mencegah Anda melakukan pelanggaran keamanan. Ini juga menunjukkan bahwa pengembang masih aktif memelihara dan meningkatkan plugin.
  • Jumlah instalasi. Angka ini menunjukkan seberapa populer plugin WordPress tersebut. Umumnya, semakin aktif menginstal sebuah plugin, semakin baik kualitasnya.
  • Hadirin. Ulasan dan komentar pengguna dapat membantu Anda menimbang pro dan kontra dari plugin tertentu. Ini memberi Anda wawasan tentang bagaimana kinerja plugin dalam situasi waktu nyata.
  • Kompatibilitas. Plugin yang menerima pembaruan rutin dari pengembangnya biasanya kompatibel dengan versi terbaru WordPress. Selalu periksa tab deskripsi untuk melihat versi WordPress mana yang diperlukan untuk menjalankan plugin.

Sebelum mengunduh dan memasang plugin apa pun di situs WordPress Anda, pastikan untuk memeriksa klaim yang dibuat oleh pengembang. Baca dokumentasi plugin, periksa forum dukungan plugin, dan baca ulasannya.

Mencari melalui posting blog juga merupakan praktik yang baik karena banyak situs menyediakan ulasan plugin.

Di BlogPasCher, kami juga meninjau dan menguji plugin WordPress dengan berbagai fitur termasuk plugin menuPlugin Google Analytics et ulasan plugin.

...

Instal satu plugin pada satu waktu

Saat menguji plugin di WordPress, ingatlah untuk menginstal dan menguji setiap plugin satu per satu. Dengan cara ini, Anda akan segera melihat apakah itu menyebabkan masalah untuk situs web Anda dan apakah Anda dapat memperbaikinya.

Jika Anda memutuskan untuk menguji beberapa plugin berbeda di WordPress, ingatlah untuk menonaktifkan plugin sebelumnya sebelum mencoba yang lain.

Juga, ketika Anda memiliki beberapa plugin yang tidak aktif, yang terbaik adalah menghapusnya karena terlalu banyak pemasangan dapat membebani situs web WordPress Anda dan memengaruhi kinerjanya.

Gunakan hanya satu plugin untuk setiap fitur

Meskipun plugin WordPress menambahkan fitur baru dan meningkatkan fungsionalitas situs web Anda, menginstal terlalu banyak fitur dapat memperlambat situs web Anda.

Memang, setiap kali Anda menginstal plugin WordPress, Anda menambahkan kode baru ke situs web Anda. Saat digunakan secara berlebihan, plugin akan mengirimkan terlalu banyak permintaan HTTP untuk memuat sumber dayanya, seperti lembar gaya CSS, file JavaScript, dan gambar, yang akan memperlambat kecepatan pemuatan situs web Anda.

Selain itu, menginstal plugin WordPress yang melakukan fungsi serupa dapat menyebabkan konflik, berpotensi merusak salah satu atau kedua plugin. Jadi, praktik terbaik adalah menginstal plugin WordPress untuk setiap fitur.

Sebagai contoh, Yoast SEO et AISEO memiliki set fitur serupa – cukup pilih salah satu untuk menghindari konflik plugin.

Kami harap tutorial ini membantu Anda mempelajari cara memasang plugin WordPress di blog atau situs web Anda. Anda sekarang memiliki kesempatan untuk meningkatkan fungsionalitas situs web Anda bahkan jika Anda tidak memiliki pengetahuan atau keterampilan teknis sebelumnya.

Jika Anda tidak yakin plugin mana yang harus digunakan, pertimbangkan apa yang hilang dari situs web Anda saat ini. Selanjutnya, tinjau plugin yang tersedia dan bandingkan faktor penting seperti kompatibilitas, ulasan, dan pembaruan terbaru.

Berikut adalah beberapa plugin WordPress penting yang kami rekomendasikan untuk Anda mulai:

  • Yoast SEOPlugin ini membantu meningkatkan posting blog WordPress dan SEO halaman Anda melalui pengoptimalan kata kunci dan deskripsi meta
  • Elementor ou Beaver Builder. Membantu Anda membangun situs web dengan menyediakan antarmuka seret dan lepas yang mudah digunakan.
  • W3 Jumlah Cache ou WP Super CacheMeningkatkan kinerja situs web Anda dan mengurangi waktu pemuatan dengan caching dan integrasi dengan CDN.
  • Peta Situs Google XML. Secara otomatis menghasilkan peta situs XML untuk pengoptimalan mesin telusur yang lebih baik.
  • AkismetPlugin ini mendeteksi dan memfilter spam di komentar Anda dan pengiriman formulir kontak untuk mencegah serangan berbahaya.

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.

Kesimpulan

Itu saja untuk panduan ini yang menunjukkan kepada Anda cara menginstal plugin WordPress. Jika Anda memiliki masalah atau saran, beri tahu kami di dalam komentar.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.   

...  

Divi: Cara menambahkan gambar ke Menu Mega

Divi: Cara menambahkan gambar ke Menu Mega

Apakah Anda ingin memiliki Mega Menu Divi dengan gambar untuk mengilustrasikan konten menu? Ikuti tutorial kami tentang cara menambahkan gambar ke Menu Mega?

Kami senang berinteraksi dengan gambar secara online. Dengan mengingat hal itu, masuk akal untuk menambahkan gambar ke situs web Anda bila memungkinkan. 

Plus, menambahkan gambar dalam menu mega adalah peluang bagus lainnya untuk memberi pengguna Anda interaksi yang mereka butuhkan.

Gambar juga menyempurnakan menu dengan menarik perhatian mereka untuk lebih menyederhanakan proses navigasi.

penelitian

Sebelum kita masuk ke tutorial ini, mari kita lihat hasil yang ingin kita capai.

Mega Menu Divi dengan gambar

Pembuatan menu mega

Untuk memulai, pertama-tama kita perlu membuat menu. 

Untuk contoh ini, kami akan membuat item menu induk utama yang disebut “Menu Besar” dengan empat item submenu di bawah ini. Masing-masing dari empat item sub-menu memiliki tiga item sub-sub-menu.

Buka dasbor WordPress lalu klik Penampilan> Menu

Mega Menu Divi dengan gambar

Klik 'Buat menu baru', beri nama dan klik 'Buat menu'.

Pastikan untuk mengaktifkan properti menu Kelas CSS dengan mengklik tab Opsi layar di kanan atas layar Menu dan memeriksa kelas CSS.

Anda sekarang dapat menambahkan item menu ke menu baru yang Anda buat.

Pertama-tama mari kita buat item menu yang akan menjadi induk dari semua item menu lainnya. Ini adalah tautan yang akan menampilkan menu mega Anda saat mengarahkan kursor.

Untuk membuat item menu ini, buat tautan khusus dengan parameter berikut:

  • URL: http://#
  • Judul navigasi: Menu Mega
  • Kelas CSS: mega-menu

Sekarang atur/tarik keempat item menu (masing-masing dengan tiga sub-item sendiri) untuk menjadi sub-item dari tautan Mega Menu induk utama.

Setelah tautan ditambahkan ke menu, gulir ke bawah ke 'Reglages du menu' di bagian bawah layar menu dan pilih 'Menu utama' untuk lokasi tampilan. Terakhir, klik 'Simpan menu'

Berikut tampilan menu mega kami sejauh ini:

Mega Menu Divi dengan gambar

Menambahkan gambar ke menu mega

Sekarang menu sudah siap, saatnya menambahkan gambar.

Baca juga: Bagaimana cara mengapung posting blog di DIVI?

Dapatkan gambarnya

Mulailah dengan mendapatkan empat gambar. Gambar-gambar ini harus berhubungan dengan empat item submenu (Tentang, Pengiriman Layanan, Pekerjaan Kami dan Hubungi Kami).

Gunakan editor foto untuk memperkecil dan memotong setiap gambar menjadi lebar 500 piksel dan tinggi 300 piksel.

Tambahkan gambar-gambar ini ke perpustakaan WordPress. Klik Media > Tambahkan.

cara menambahkan gambar ke Mega Menu

Seret gambar Anda ke halaman untuk menambahkannya atau klik 'Pilih file'

cara menambahkan gambar ke Mega Menu

Sisipkan gambar di Mega Menu

Kembali ke halaman menu di dashboard WordPress.

Dalam contoh ini, tautan di bagian atas kolom pertama adalah " Tentang "

Klik panah di sebelah kanan item " Tentang ". Di kotak Label Navigasi, tambahkan gambar yang diinginkan menggunakan tag html img tepat sebelum teks " Tentang ". Tag gambar akan terlihat seperti ini:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
cara menambahkan gambar ke Mega Menu

Untuk menemukan url gambar, buka Media > Pustaka media, klik gambar yang ingin Anda tambahkan. 

Di layar pop-up Detail lampiran, temukan URL di bagian kanan, lalu klik 'Salin URL ke papan klip'

cara menambahkan gambar ke Mega Menu

Sekarang kembali ke konfigurasi item menu " Tentang " pada halaman menu dan ganti teks "Sisipkan URL Gambar" dengan menempelkan URL gambar Anda menggunakan ctrl + v.

cara menambahkan gambar ke Mega Menu

Sebelum keluar dari opsi konfigurasi untuk item menu " Tentang ", temukan kotak teks Kelas CSS dan masukkan kelas "mega-link".

Ini akan memungkinkan kita untuk menambahkan gaya kustom nanti.

Ulangi proses ini untuk menambahkan tiga gambar berikut ke masing-masing item submenu dengan kelas "mega-link". (Dalam contoh ini, tiga elemen yang tersisa adalah “Pengiriman layanan”, “Pekerjaan kami” et " Hubungi kami ".)

Hasil

Buka situs web Anda dan arahkan kursor ke tautan menu mega. Sekarang menu mega Anda akan terlihat seperti ini:

Mega Menu Divi dengan gambar

Perhatikan bahwa saat Anda mengarahkan kursor ke setiap gambar, gambar memudar dengan item submenu langsung di bawah. Ini karena gambar adalah bagian dari tautan itu, jadi mengkliknya akan membawa Anda ke URL yang terkait.

Sentuhan akhir

Untuk langkah terakhir ini, tambahkan beberapa css khusus ke menu untuk membuat font teks lebih besar dan terpusat. Beri juga radius border di sekitar gambar agar terlihat lebih bersih.

Di dasbor WordPress, buka Divi> Opsi tema . 

Gulir ke bawah ke kotak Custom CSS, masukkan CSS di bawah ini dan klik 'Simpan perubahan' :

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
}

Hasil akhir

Kamu telah selesai !

Jika Anda telah mengikuti semua langkah dalam tutorial ini, inilah hasil yang seharusnya Anda dapatkan.

Mega Menu Divi dengan gambar

Unduh DIVI Sekarang!!!

Kesimpulan

Anda memiliki menu mega Divi dengan gambar tanpa harus menggunakan plugin. Jenis menu ini bekerja sangat baik untuk situs web e-niaga yang memiliki banyak konten dan memerlukan gambar produk. Kami harap tutorial ini berguna untuk proyek Divi Anda berikutnya.

Jika Anda membutuhkan lebih banyak elemen untuk menyelesaikan proyek pembuatan situs web Anda, telusuri juga panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.

Tapi sementara itubagikan artikel ini di berbagai jejaring sosial Anda.

...

Cara Menambahkan Font Kustom ke Situs WordPress

Cara Menambahkan Font Kustom ke Situs WordPress

Apakah Anda ingin mempelajari cara menambahkan font khusus ke situs web WordPress?

Mengapa membuat blog Anda membosankan dengan menggunakan font standar? Biarkan blog Anda berbicara tentang kepribadian Anda yang bersemangat dan topik yang Anda bahas dengan berbagai macam font khusus. Font khusus adalah fitur keren yang membuat blog Anda terlihat lebih disukai daripada orang lain.

Mari kita hadapi itu; kita semua menyukai blog dan situs web dengan font yang tepat. Mereka tidak hanya menghiasi situs web tetapi juga membantu menarik pengguna ke konten Anda. Namun, pilihan font WordPress standar terbatas dan tergantung pada tema yang Anda gunakan. Kabar baiknya adalah Anda dapat menambahkannya secara manual atau dengan plugin WordPress khusus.

Dan di sini muncul dua pertanyaan: di mana mendapatkan font khusus untuk WordPress dan cara memasang font khusus di situs web Anda.

Mari kita cari tahu.

Mengapa saya harus menggunakan font khusus?

Lewatlah sudah hari-hari ketika Times New Roman dan Georgia dianggap sebagai satu-satunya tipografi untuk teks di situs web. Selama beberapa tahun terakhir, ruang font telah benar-benar berubah dengan munculnya font seperti Google Font dan lain-lain.

Saat ini, ada ratusan font gratis, bantuan informasi dan pelatihan, serta sumber daya desain yang tersedia di Internet. Tidak seperti Adobe Illustrator, Photoshop, dan aplikasi klasik lainnya, WordPress tidak memberi Anda kendali penuh atas font default. Hanya tema WordPress tertentu yang memilih untuk mendukung dan menggunakan font khusus.

Oleh karena itu, dalam artikel ini, Anda akan mempelajari cara menemukan font khusus yang sesuai dan menggunakannya di situs web WordPress Anda.

Pentingnya menggunakan font khusus

Mengapa mengubah font, indentasi kata, spasi baris, spasi huruf, atau saturasi font, Anda bertanya? Namun, beberapa penelitian menunjukkan bahwa tipografi meningkatkan pemahaman membaca.

Banyak tergantung pada konstruksi font. Pada tingkat sadar dan bawah sadar – setiap orang mengevaluasi konten halaman web berdasarkan desain.

Desain font mempengaruhi pembaca, bahkan jika mereka tidak memperhatikannya. Menyerah pada desain font berarti menyerah pada pengembangan itu sendiri! Suasana hati pembaca tergantung padanya. Font memudahkan untuk membaca atau memaksa pengguna untuk meninggalkan halaman.

Semua browser web menyertakan satu set font default. Ini berarti bahwa jika font tidak ditentukan dalam CSS halaman, versi standar akan digunakan. Anda masih dapat menggunakan font default, tetapi akan mempersulit pengguna. Inilah sebabnya mengapa penting untuk menggunakan font khusus. Jika tema WordPress Anda tidak memberi Anda opsi untuk mengubah font, ada banyak situs web dan alat yang dapat membantu.

Alternatif Google Font

tambahkan font khusus

Banyak dari Anda yang tahu Font Google. Ada banyak lagi situs web tempat Anda dapat menemukan font yang indah. Beberapa di antaranya gratis untuk penggunaan pribadi. Jika Anda membutuhkan penggunaan komersial, Anda memerlukan lisensi. Google Font dan Adobe Edge Font gratis. Inilah sebabnya mengapa mereka tidak begitu unik.

Berikut adalah beberapa sumber daya lain untuk menemukan font untuk penggunaan gratis dan komersial:

  1. TemplateMonster — Di situs web TemplateMonster Anda akan menemukan semua yang Anda butuhkan untuk desain web. Ada juga banyak font dan paket font untuk penggunaan pribadi dengan harga murah. Selain itu, Untuk membantu Anda memilih, semua font disajikan pada brosur atau bingkai. Setiap font juga disajikan dengan lisensi komersial.
  2. MyFonts — MyFonts saat ini menawarkan pilihan font terbesar di dunia. Namun, harga di sini juga berada di segmen atas. Jadi, jika Anda memiliki anggaran yang ketat, ini mungkin bukan untuk Anda.
  3. FontMusim Semi — Fontspring menjual font baru untuk penggunaan komersial. Tetapi di hampir setiap keluarga, 1-2 font gratis dapat digunakan untuk keperluan pribadi. Juga, ada bagian terpisah dengan font gratis. Koleksinya semarak. Tetapi Anda perlu mempelajari informasi lisensi untuk font tertentu dengan cermat sebelum mengunduh.
  4. cufont — Ini juga merupakan koleksi besar font yang berbeda. Pilih salah satu, dan Anda akan melihat halaman dengan informasi rinci tentangnya. Ada banyak font gratis, dan mereka dibagi menjadi beberapa bagian. Sistem penyortiran pada CufonFonts cukup fleksibel dan nyaman. Juga, dukungan Webfont disertakan.
  5. Dafont — Koleksi 3 font gratis lainnya yang dapat diakses. Kebanyakan dari mereka dirancang untuk penggunaan pribadi saja. Fitur DaFont yang keren adalah sistem kategori. Anda dapat memilih font dalam gaya komik, video game, vintage dll….

Pemilihan font sangat menggiurkan karena semuanya cantik. Tapi Anda tidak harus memilih banyak. Jangan gunakan lebih dari dua font di situs web. Maka tampilan website Anda akan konsisten. Setelah Anda memilih font, pastikan untuk mengunggah file untuk setiap gaya yang akan Anda gunakan (reguler, tebal, miring, dll.).

Sekarang setelah Anda memilih font yang sesuai untuk situs web Anda, mari cari tahu cara menambahkannya.

Cara Menambahkan Font Kustom ke WordPress

Ada beberapa cara untuk menambahkan font ke situs WordPress:

  1. plugin : dalam hal ini, plugin WordPress yang berbeda digunakan untuk memfasilitasi prosesnya.
  2. manual : menggunakan metode ini, Anda memerlukan unduhan font yang diunduh dari situs dan memodifikasi file CSS.
  3. tema: Banyak tema populer memiliki opsi bawaan untuk menyesuaikan font Anda (catatan – kami tidak akan membahas opsi ini karena prosesnya akan bervariasi tergantung pada tema yang Anda gunakan.

Opsi 1 – Ubah Font WordPress dengan Plugin

Jika kami tidak peduli dengan perubahan global, kami dapat menginstal plugin WordPress yang akan mengubah font di situs web Anda.

Fitur Plugin Font Kustom

Perangkat lunak open source memiliki keunggulan untuk kepentingan komunitas, dan WordPress juga memiliki keunggulan tersebut. Beberapa plugin WordPress memungkinkan Anda menambahkan font khusus. Bagaimana cara memilih plugin yang sesuai ketika ada begitu banyak? Apa saja fitur plugin WordPress font kustom?

Berikut adalah beberapa poin untuk dipertimbangkan:

  • Kemampuan untuk menggunakan font khusus
  • Kemampuan untuk menggunakan banyak font
  • Header dan komponen target
  • Bonus: kemampuan untuk mengubah pengaturan font dari editor visual

Itu saja. Karakteristik pertama dalam daftar sangat penting. Anda masih dapat mengunduh font dari situs web seperti DaFont, Font Squirrel, dll., tetapi Anda harus dapat mengunggahnya ke WordPress.

Mari kita lihat beberapa plugin untuk WordPress yang memungkinkan Anda mengunggah font khusus.

1. Font Luar Biasa Lebih Baik

Plugin WordPress ini akan memungkinkan para penggunanya untuk secara otomatis menggabungkan versi terbaru dari font Better Font Awesome dengan CSS, kode pendek, dan lainnya. Selain itu, plugin WordPress ini diperbarui secara otomatis.

Font yang lebih baik mengagumkan - plugin tipografi WordPress terbaik

Anda akan menemukan di sana sebagai fitur: pembaruan rutin, generator kode pendek, kompatibilitas dengan plugin WordPress lainnya, dll ...

Download | Demo | Hébergement Web

2. Google Fonts untuk WordPress

Plugin WordPress ini terdiri dari font khusus 877, yang akan memungkinkan Anda untuk menggunakan semua font di situs WordPress Anda. Berkat pratinjau waktu-nyata, itu akan memungkinkan Anda untuk melihat seperti apa situs web Anda setelah font diterapkan. 

Font Google - plugin tipografi WordPress terbaik

Selain itu, Anda akan dapat menyimpan dan mengeditnya di frontend ketika Anda menemukan kombinasi yang akan Anda nikmati.

Fitur-fiturnya meliputi: pratinjau waktu-nyata, a SEO yang cukup maju, dukungan multibahasa, dukungan untuk lebih banyak 870 + Google Font, pembaruan mudah dan banyak lagi.

Download | Demo | Hébergement Web

3. Plugin Font

Font Plugin adalah plugin WordPress gratis yang memungkinkan pengguna mengakses perpustakaan Google Fonts dan Adobe Fonts. Dengan plugin WordPress ini, Anda dapat memilih lebih dari 1000 font Google dan Adobe, menggunakan beberapa font di situs web Anda, dan menguji berbagai opsi dengan fitur pratinjau waktu nyata plugin di penyesuai WordPress.

plugin tipografi wordpress terbaik

Untuk lebih banyak cara menyesuaikan tipografi situs web Anda seperti ukuran font, spasi huruf, dan tinggi baris, Anda dapat meningkatkan ke versi premium, Plugin Font Pro.Download | Demo | Hébergement Web

4. Google Font mudah

Easy Google Fonts adalah salah satu plugin WordPress terbaik untuk menyesuaikan tipografi situs web Anda. Seperti Plugin Font, ini memungkinkan Anda memilih dari ratusan Google Font dan mempratinjaunya di Customizer sebelum menambahkannya ke situs web Anda.

10 plugin tipografi WordPress untuk blog Anda

Meskipun menyediakan akses ke sejumlah kecil Google Font, ini unik karena memungkinkan Anda membuat kontrol dan aturan font khusus di area admin, yang akan segera muncul di penyesuai WordPress.

Download | Demo | Hébergement Web

Opsi 2 – Instal Font Kustom WordPress Secara Manual

Menggunakan @font-face directive, Anda dapat menghubungkan satu atau lebih font ke situs web Anda. Tetapi metode ini memiliki pro dan kontra.

manfaat:

  • Berkat CSS, Anda dapat menghubungkan font dalam format apa pun: ttf, otf, woff, svg.
  • File font akan ditempatkan di server Anda – Anda tidak akan bergantung pada layanan pihak ketiga.

kerugian :

  • Untuk koneksi font yang benar untuk setiap gaya, Anda harus mendaftarkan kode terpisah.
  • Tanpa mengetahui CSS, Anda dapat dengan mudah bingung.

Tapi itu bukan masalah sebenarnya jika Anda bisa cukup salin kode yang sudah jadi dan di mana Anda perlu menentukan nilai Anda.

Ucapan : Sebelum Anda mulai, pastikan untuk buat tema anak untuk situs web Anda. Dengan cara ini Anda dapat membuat semua perubahan pada tema anak Anda, meninggalkan tema utama Anda sehingga Anda dapat dengan mudah memperbaruinya jika diperlukan di masa mendatang.

Langkah 1: Buat folder "font"

Di tema anak Anda, buat folder "font" baru di bawah: wp-content/themes/your-child-theme/fonts

Langkah 2. Unggah file font yang diunduh ke situs web Anda

Ini dapat dilakukan melalui panel kontrol hosting Anda atau melalui FTP.

Tambahkan semua file font ke folder font yang baru ditambahkan: wp-content/themes/ Di tema anak Anda, buat folder "font" baru di bawah: wp-content/themes/your-child-theme/fonts yang Anda buat.

Langkah 3. Impor font melalui lembar gaya tema anak

Buka file style.css tema anak Anda dan tambahkan kode berikut di awal file CSS (setelah komentar tema anak):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

dimana MyWebFont adalah nama font dan nilai properti src (data dalam tanda kurung dalam tanda kutip) adalah lokasinya (tautan relatif). Kita perlu menentukan setiap gaya secara terpisah.

Karena kami menghubungkan gaya normal terlebih dahulu, kami mengatur properti font-weight dan font-style menjadi normal.

Langkah 4. Saat menambahkan huruf miring, tulis berikut ini:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Ketika semuanya sama, kami adalah satu-satunya yang melampirkan properti gaya font menjadi miring.

Langkah 5. Untuk menambahkan font tebal, tambahkan kode berikut:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Di mana kita mengatur properti font-weight menjadi bold.

Ingatlah untuk menentukan lokasi yang benar dari file font untuk setiap gaya.

Langkah 6. Untuk menghubungkan huruf miring tebal, ketik berikut ini:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Nah, itu saja. Sekarang Anda telah menghubungkan empat gaya font ke situs web Anda.

Tetapi ada satu catatan: koneksi font ini tidak akan ditampilkan dengan benar di Internet Explorer 8. Penghiburannya adalah bahwa sangat sedikit orang yang masih menggunakan IE8.

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.

Kesimpulan

Apa hal pertama yang diperhatikan pengguna ketika mereka mengunjungi situs web Anda? Itu benar, desainnya! Sebagian besar desain bergantung pada penggunaan font yang indah dengan tepat. Jadi, Anda perlu menjaga desain font situs web Anda. Tambahkan kode atau gunakan salah satu plugin yang disebutkan di atas untuk menyematkan gaya font baru. Bagaimana Anda memilih itu terserah Anda.

Pastikan Anda tidak menggunakan lebih dari dua font di situs web yang sama. Karena semakin banyak font khusus yang Anda tambahkan ke situs web, semakin banyak kecepatan situs web akan turun.

Itu saja untuk artikel ini yang menunjukkan kepada Anda cara menambahkan font khusus ke situs web WordPress. Kami mengundang Anda untuk mencoba. Jika Anda memiliki masalah atau saran, beri tahu kami di dalam komentar.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.   

...  

Cara Mempersiapkan Situs Web untuk Artikel Instan Facebook

Cara Mempersiapkan Situs Web untuk Artikel Instan Facebook

Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana mempersiapkan situs WordPress Anda untuk program Artikel Instan Facebook.

Dengan program ini Artikel Instan Facebook terbuka untuk semua editor konten pada 12 April 2016, Anda perlu menyiapkan blog WordPress Anda, untuk mempublikasikan langsung di Facebook menggunakan beberapa tag.

Lebih dari satu miliar orang masuk ke Facebook dari perangkat seluler setiap bulan, dan kinerja konten yang dilihat menggunakan aplikasi seluler Facebook menjadi lebih penting dari sebelumnya. Facebook meluncurkan Artikel Instan pada Mei 2015 sebagai cara untuk mempercepat pengiriman konten dan memberikan pengalaman mendalam yang diharapkan pengguna aplikasi seluler.

Pada awalnya, program ini terbatas pada sekelompok penerbit terkenal seperti Buzzfeed, The New York Times dan BBC News. Namun, pada bulan April 2016, program ini akan terbuka untuk semua editor konten.

Facebook membuat "Artikel Instan" ketika umpan RSS yang diformat dengan benar dikaitkan dengan halaman Facebook yang disetujui menggunakan Manajer Bisnis Facebook. Penerbit harus mendaftar untuk berpartisipasi dalam program ini dan, setelah diterima, mereka akan dapat menyesuaikan tampilan dan perilaku Artikel Instan.

Jika organisasi Anda aktif di Facebook dan mendapatkan banyak lalu lintas dari konten yang dibagikan di jejaring sosial, mengonfigurasi situs web Anda untuk menghasilkan umpan RSS yang diformat dengan benar sekarang dapat dilakukan. Namun, bergabung dengan program Artikel Instan Facebook tidak semudah yang Anda bayangkan.

Tetapi sebelum Anda mulai, luangkan waktu untuk melihatnya Cara menginstal tema WordPressBerapa banyak plugin saya harus menginstal pada WordPress.

Kalau begitu mari kita mulai bekerja!

Apa yang dilakukan konten saat Anda bergabung dengan program?

Penerbit konten yang berpartisipasi dalam program ini mendapatkan banyak kendali atas bagaimana konten mereka muncul di aplikasi Facebook. Penerbit juga dapat menjual ruang iklan di Artikel Instan dan menyimpan 100% atau 70% dari pendapatan iklan tergantung pada apakah penerbit atau Facebook menjual ruang tersebut.

Kontrol yang lebih besar atas UX dan peningkatan pendapatan adalah dua motivator, tetapi alasan terbesar Anda harus bergabung dengan program ini adalah karena pengalaman pengguna Facebook yang lebih baik dengan Artikel Instan.

Lihat juga tutorial kami tentang: Cara Buat kampanye Facebook Pixel untuk WordPress

Facebook mengklaim Artikel Instan memuat sepuluh kali lebih cepat daripada konten web seluler standar, klaim yang belum dikonfirmasi secara independen. Artikel Instan juga merevolusi dengan menggunakan seluruh jendela perangkat seluler yang tersedia, yang membuat Artikel Instan jauh lebih imersif daripada konten yang dilihat di browser.

Siapa yang harus berpartisipasi dalam Produk Program Instant Facebook?

Program ini dirancang untuk editor konten dan organisasi lain yang memposting konten secara teratur. Pada kenyataannya, penulis tidak dapat mengikuti program ini sampai mereka memiliki setidaknya 50 artikel yang siap untuk ditinjau. Jika organisasi Anda memiliki lebih dari 50 artikel, Anda dapat mempertimbangkan untuk berlangganan program ini.

Bagaimana Mempersiapkan Artikel Instan

Mengunggah artikel Anda ke Facebook Apakah Artikel Instan semudah memasang plugin?

Iya dan tidak.

Bergabung dengan program adalah proses pada langkah 11.

Facebook telah mencoba membuat segalanya lebih mudah dengan membuat panduan yang akan memandu Anda melalui seluruh proses, tetapi pertama-tama Anda dapat memulai dengan mengirimkan organisasi Anda untuk disetujui oleh Facebook. Anda tidak dapat mendaftar untuk bergabung dengan program ini sebelum April, namun Anda dapat memberi tahu Facebook bahwa Anda tertarik dengan program ini, yang mungkin berarti mereka akan memberi tahu Anda saat program tersedia.

Untuk saat ini, berikut adalah 3 hal-hal yang perlu Anda lakukan agar siap ketika program benar-benar akan diluncurkan untuk semua penerbit (penulis).

Panduan dalam langkah-langkah 4 untuk membangun otoritas Anda melalui blog Anda Cari tahu dengan membaca artikel ini.

Langkah satu: Pastikan Anda memiliki kehadiran yang efektif di Facebook

Kehadiran organisasi Anda di Facebook dan keakraban Anda dengan platform harus efektif.

Pertama, Anda perlu memastikan bahwa organisasi Anda memiliki halaman dan Anda adalah administrator atau editornya. Anda mungkin juga perlu membuat akun Bisnis dengan manajer akun Perusahaan, jika organisasi Anda tidak memiliki halaman, Anda dapat menambahkan halaman ke akun Anda dan menambahkan anggota lain dari organisasi Anda ke halaman Anda menggunakan Pengelola Akun Perusahaan.

Artikel Instan dikelola langsung dari antarmuka manajemen akun Perusahaan, jadi Anda harus ingat untuk mengonfigurasi akun perusahaan Anda, agar tidak perlu melakukannya nanti.

Jika Anda tidak menggunakannya, Anda dapat mengunduh aplikasi Halaman Facebook. Anda dapat menemukannya di App Store untuk menggunakannya di iPhone atau iPad, atau di Play Store Google. Anda memerlukan aplikasi ini untuk melihat Artikel Instan. Anda dapat menguji fitur untuk melihat cara kerjanya.

Langkah 2: Membangun RSS Anda untuk Artikel Instan

Artikel Instan disusun di Facebook menggunakan konten HTML yang diimpor dari umpan RSS yang diformat dengan cara tertentu. Untuk mengintegrasikan situs web Anda dengan Artikel Instan, Anda perlu menghasilkan umpan RSS yang diformat khusus, berikut adalah plugin yang dapat Anda gunakan untuk itu.

Plugin dibuat dalam kemitraan dengan Automattic et membaca sandi, bisa ditambahkan ke direktori plugin WordPress resmi. Untuk saat ini, Anda cukup mengunduh plugin langsung dari Github.

Plugin artikel fb instan di github

Plugin akan diunduh dalam format ZIP dan Anda memiliki dua opsi untuk menginstal plugin:

  1. Anda dapat menginstal plugin langsung dari dashboard WordPress menggunakan file ZIP.
  2. Vous pouvez ekstrak plugin melalui klien FTP dan kirimkan langsung ke folder / wp-content / plugins / dari instalasi WordPress Anda.

Setelah Anda mengaktifkan plugin, Anda akan dapat mengakses umpan RSS blog Anda dengan mengikuti jalur berikut:

http://votresite.com/feed/instant-articles.

instant-item-feed

Jika Anda memiliki jaringan multisite, plugin akan membuat umpan RSS untuk setiap situs web  "Secara otomatis". Anda dapat mengujinya dengan membuat jaringan multisite dan mengunjungi URL untuk mengonfirmasi bahwa semuanya berfungsi normal.

instant-item-multi-feed

Untuk saat ini, menginstal plugin tidak akan menambahkan panel administrasi. Sementara file readme.txt di Github menyatakan bahwa filter dapat digunakan untuk memanipulasi apa yang muncul di RSS feed, tidak ada instruksi yang diberikan dan implementasi filter telah disediakan, dan membutuhkan pengeditan file secara manual. . Selain itu, catatan menyebutkan bahwa filter dapat berubah seiring waktu. Kami menyarankan Anda menggunakan umpan default.

Temukan juga Cara menambahkan umpan berita seperti Facebook di WordPress

Kemudian Anda dapat melanjutkan dan mengubah URL yang Anda inginkan untuk membuat fitur Artikel Instan. Untuk melakukan ini, Anda harus membuka file bernama "facebook-instant-Articles.php" dan menemukan konstanta "INSTANT_ARTICLES_SLUG". Dalam versi 0.1 plugin, dapat ditemukan di baris 18. Anda kemudian dapat menghapus "artikel-instan" dan memasukkan siput yang ingin Anda gunakan.

edit siput umpan RSS - Artikel Instan

jangan lupa untuk buat cadangan file ini di komputer Anda untuk memulihkan file jika terjadi masalah.

Setelah Anda melakukan semua perubahan yang diperlukan, Anda dapat pergi ke pengaturan> Permalinks. Ini akan menyegarkan aturan penulisan ulang dan siput baru akan diterapkan. Sekarang Anda mungkin dapat menemukan URL Artikel Instan Anda.

url aliran berubah

Langkah 3: Berlangganan program dan ikuti langkah-langkahnya

Langkah selanjutnya adalah menunggu Facebook meluncurkan program secara resmi. Jika Anda adalah organisasi dan tertarik dengan program ini, Anda bisa beri tahu dia tentang Facebook.

Anda dapat meluangkan waktu untuk melihat panduan memulai yang disusun Facebook. Ini akan mempersiapkan Anda untuk siap saat program tersedia.

Langkah 4: Batasi aliran ke item yang tidak lebih lama dari 24 jam

Anda hanya akan melakukan ini setelah Anda diterima untuk program ini.

Saat Anda mendaftar untuk program Artikel Instan, Facebook ingin melihat setidaknya 50 artikel di umpan RSS Anda. Namun, setelah umpan RSS Anda diimpor untuk pertama kalinya, Facebook akan mengabaikan artikel yang belum diperbarui dalam 24 jam terakhir. Untuk alasan ini, ketika organisasi Anda ditambahkan ke jadwal dan feed Anda diimpor, Anda dapat melakukannya ubah alurnya untuk hanya menyertakan item yang telah diubah dalam 24 jam terakhir.

Untuk melakukan perubahan ini, Anda perlu mendownload salinan file "facebook-instant-Articles.php" yang dapat Anda pulihkan jika sesuatu tidak bekerja secara normal. Dalam salinan ini, Anda harus menentukan konstanta "INSTANT_ARTICLES_LIMIT_POSTS" menjadi "true". Mungkin akan lebih masuk akal jika Anda menambahkan konstanta ini tepat sebelum kondisi "jika", untuk menentukan apakah aliran akan dibatasi atau tidak. Di versi 0.1 plugin, Anda akan menemukan ini di baris 150.

batasi rss feed hingga 24 jam - Artikel Facebook Instan

Yang harus Anda lakukan sekarang adalah simpan perubahan Anda, dan akses umpan RSS Anda. Anda akan dapat melihat artikel terbatas yang diperbarui 24 jam yang lalu.

Ingatlah bahwa organisasi Anda tidak akan disetujui kecuali Anda memiliki lebih dari 50 artikel siap pakai. Jadi jangan batasi feed Anda sampai organisasi Anda diterima dalam program dan feed Anda diimpor oleh Facebook.

Apakah situs web Anda memerlukan halaman persyaratan layanan? Cari tahu dengan membaca artikel ini.

Seperti yang Anda lihat, bergabung dengan program ini bukan untuk semua orang. Dan bagi mereka yang benar-benar tertarik dengan layanan, mereka harus mengerahkan beberapa upaya untuk mencapai tujuan mereka.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. ARPrice

ARPrice adalah plugin premium WordPress paling fleksibel dan lengkap untuk membuat kisi-kisi harga. Ini berisi lebih dari 300 model kisi harga dan menyediakan semua alat yang Anda butuhkan untuk membuat kisi harga yang unik dan responsif, serta tabel perbandingan. Anda juga dapat dengan mudah membuat showcase yang indah untuk tim Anda.

Plugin Tabel Harga WordPress Responsif ARPrice

Ini adalah plugin WordPress yang indah, intuitif, dan unik, dengan editor visualnya yang mengesankan, dengan pratinjau kustomisasi waktu nyata.

Lihat juga Cara mengisi layanan di blog Anda?

Pilih templat, lalu dengan klik sederhana, seret dan lepas alat untuk mempersonalisasi kisi harga Anda, hingga detail terkecil. Anda akan dapat menambahkan jumlah kolom yang tidak terbatas, mengubah warna, font, ikon, dan menambahkan gambar dan pita Anda sendiri untuk mengumumkan diskonMisalnya.

Download Demo | Hébergement Web

2. PrivateContent

PrivateContent adalah solusi yang kuat namun mudah digunakan untuk membuat situs web pendaftaran multi-level sejati. Ini adalah plugin yang kompatibel dengan undang-undang Eropa baru tentang perlindungan data pengguna.

Plugin Konten Multitingkat PrivateContent

Seperti kebanyakan plugin dalam daftar ini, ia hadir dengan sejumlah fitur lengkap yang hanya menunggu Anda untuk menginstalnya.

Lihat juga 5 aplikasi smartphone untuk melindungi gambar & video Anda

Lindungi konten Anda dengan plugin WordPress premium ini dan biarkan pelanggan mengaksesnya berdasarkan peran atau status yang mereka miliki. Selain itu, ini adalah salah satu plugin terlaris di ceruk ini, dan salah satu yang perlu mendapat perhatian khusus dari Anda.

Download | Demo | Hébergement Web

3. Slider Produk Terkait WooCommerce

Le Plugin Slider Produk Terkait WooCommerce adalah plugin WordPress yang digunakan untuk menampilkan produk yang terkait dengan efek cantik. Produk serupa berasal dari kategori yang sama atau label yang sama.

Slider Produk Terkait WooCommerce - Artikel Instan

Plugin ini memiliki beberapa opsi tambahan, yang memungkinkan pengguna untuk menampilkan plugin pada berbagai posisi halaman detail produk, pengguna akan dapat menampilkan hingga 50 produk di bilah geser, sesuaikan tampilan dan tampilan bilah geser.

Lihat juga artikel kami di Plugin 5 WordPress untuk membuat kisi harga

Namun sebelum menginstall plugin ini, hal yang penting diperhatikan harus Anda miliki instal WooCommerce sebelumnya.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

Kesimpulan

Sini! Sekian untuk tutorial ini, saya harap ini membantu Anda mempersiapkan website Anda untuk Artikel Instan Facebook. Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.

...