Buat Situs Web Anda dengan Mudah Hari Ini!

ELEMENTOR adalah Pembuat Blog termudah di dunia!

berhenti membuang-buang waktu dan banyak uang untuk membayar pengembang saat Anda bisa Buat situs web atau blog WordPress Anda dengan mudah dengan desain profesional hanya beberapa menit ! Tidak diperlukan pengetahuan teknis.

Memperhatikan peningkatan penggunaan perangkat seluler, sejak akhir April 2015, Google telah memberikan sanksi kepada situs web yang halamannya belum siap untuk seluler. Akibatnya, untuk SEO Anda, Anda harus memastikan bahwa situs web Anda ditampilkan dengan baik di layar besar maupun di layar yang lebih kecil.

media desain wordpress responsif aturan css3

Dalam artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menempatkan situs web Anda ke halaman menggunakan aturan @media Dari CSS3

Penting untuk dicatat bahwa istilah "responsif" dan "kompatibel dengan seluler" sering kali digunakan secara bergantian meskipun ada perbedaan dalam arti sebenarnya. Penting untuk memahami arti masing-masing untuk dapat memastikan bahwa situs web Anda memenuhi kriteria yang diperlukan untuk mengakomodasi semua ukuran layar.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Cara memasang blog WordPress dalam 7 langkah et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu, mari kita kembali ke alasan kita ada di sini.

Responsif dan kompatibel-mobile

Situs web yang tidak Tidak responsif maupun tidak kompatibel-mobile, Ditampilkan secara identik di semua layar, yaitu versi untuk layar besar ditampilkan di mana-mana. Pada layar yang lebih kecil, Anda harus menggulir halaman secara horizontal untuk melihat semua kontennya. Mereka sulit dinavigasi di layar ini. 

Temukan juga ini Plugin 8 WordPress untuk menyesuaikan tampilan situs web Anda

Situs web adalah selular yang kompatibel ketika itu hanya memenuhi minimum ketat untuk dilihat di seluler, yang tidak menjadikannya situs web responsif. Misalnya, situs web dapat dianggap kompatibel untuk seluler jika Anda tidak harus menavigasi secara horizontal. Ini menyebabkan elemen-elemennya menjadi kecil dan tidak bisa dibedakan. Anda kemudian harus memperbesar untuk membaca isinya.aturan media desain wordpress responsif css3 2

Di sisi mereka situs web responsif beradaptasi dengan sempurna ke berbagai ukuran layar. Mereka mendefinisikan ulang elemennya sehingga dapat dengan mudah dilihat dan digunakan pada layar terkecil. Ini adalah jenis desain yang Anda inginkan untuk situs web Anda.

Lihat juga kami Plugin 10 WordPress untuk membuat formulir pemesanan di situs web Anda

Anda sekarang tahu perbedaan antara ponsel responsif dan kompatibel. Kita sekarang akan melihat aturannya @media CSS3 yang memungkinkan Anda memperbarui situs web Anda agar responsif atau dibuat dengan cukup mudah Tema WordPress dengan konten yang responsif.

Aturannya @media Dari CSS3

Untuk membuat tema Anda responsif, Anda perlu aturan @media dari CSS3. Pada dasarnya, ini memungkinkan Anda menentukan gaya yang ingin Anda gunakan untuk jenis layar tertentu (ukuran). Anda akan menggunakannya seperti aturan CSS lain (dengan tanda kurung) dengan satu-satunya perbedaan yang tumpang tindih dengan aturan CSS lainnya.

@media media-type (ekspresi) {css-test-selector {property1: value1; properti2: nilai2; }}

Dalam struktur ini elemen di dalam aturan @ Media Beroperasi hanya jika jenis-of-media ditentukan telah berhasil terdeteksi. Jenis media yang dipilih, Anda dapat menentukan karakteristik dalam hal dimensi.

aturan media desain wordpress responsif css3 3Temukan Cara Mendaftar Antarmuka dan Pengalaman Pengguna ke WordPress

Aturannya @media mendeteksi untuk Anda jenis layar yang dikunjungi situs web Anda dan memilih aturan yang paling sesuai untuk jenis layar ini. Semua browser utama telah mengintegrasikan aturan tersebut @media.

Berikut adalah daftar untuk informasi Anda: Chrome , Safari, Firefox, IE, beroperasi et Tepi.

Tentukan layar target

Jika Anda ingin memodifikasi tema WordPress yang sudah ada, harap buat salinan cadangan dari CSS yang terakhir agar dapat kembali jika perlu.

Baca juga artikel kami di Bagaimana cara memuat komentar Facebook dan Disqus secara bertahap

Seperti yang telah kita lihat dalam strukturnya, untuk menentukan jenis layar, Anda harus meneruskan @media jenis layar yang ditargetkan. Berikut adalah daftar berbagai jenis layar:

- semua : untuk semua jenis layar atau untuk dimensi yang ditentukan di ekspresi
- layar : untuk semua layar, baik ponsel, tablet, laptop atau desktop
- mencetak : untuk printer, jika Anda menginginkan gaya khusus untuk halaman yang dapat dicetak
- pidato : untuk pembaca layar, jika Anda menginginkan gaya untuk tunanetra.

Ada juga operator yang bisa Anda tempatkan sebelum tipe layar; sebagai tidak untuk menampilkan gaya layar yang jenisnya berbeda dari yang ditentukan atau hanya untuk menerapkan gaya hanya ke layar tertentu. Oleh karena itu, Anda dapat memiliki:

@media layar saja

Tentukan gaya untuk dimensi layar

Anda dapat menggunakan ekspresi untuk memberikan detail lebih lanjut tentang karakteristik layar. Setelah @media masuk serta diikuti dengan ekspresi. Jika Anda menggunakan beberapa ekspresi, semuanya harus dipisahkan oleh serta. Berikut ini contoh strukturnya:

@media hanya layar dan (max-width: 640px) {selector-css-example {/ * CSS biasa Anda di sini * /}}

Dalam contoh ini saya gunakan max-width Dengan nilai 640px. Ini untuk menyetel lebar layar maksimum seukuran iPhone atau smartphone Android kecil. Dengan struktur semacam ini, Anda memiliki kendali atas tampilan situs web Anda di berbagai perangkat. Berikut adalah daftar properti yang terkait dengan dimensi yang dapat Anda gunakan ekspresi :

Temukan juga milik kami 8 SEO WordPress plugin untuk mengoptimalkan SEO dari website anda

- mdi-lebar et max-width : masing-masing lebar minimum dan maksimum yang diperlukan untuk tampilan gaya yang terdapat dalam aturan @media. Satu lagi piksel dan gaya tidak ditampilkan.

- mdi-height et max-height : masing-masing tinggi minimum dan maksimum yang diperlukan untuk menampilkan gaya yang terdapat dalam aturan @media. Karena sebagian besar layar dirancang untuk membuka gulungan halaman secara vertikal, properti min-height et max-height sedikit digunakan.

Berikut adalah daftar ukuran layar untuk beberapa terminal:

- IPhone: 640px
- iPad: 1024px
- Tablet: 1366px
- Ponsel cerdas Android: 640px, 720px, 854px, 960px
- Android ekstra besar: 1024px, 1066px
- Telepon Windows: 480
- Windows phone besar: 768px
- tua dan muda: 320px
- Ultrabook / Laptop: 1366px
- Desktop dan TV: 1920px

Ada banyak properti lain yang dapat Anda gunakan ekspresi. Misalnya, jika Anda menargetkan desktop atau layar televisi yang mampu menampilkan gambar dengan rasio aspek 16: 9, Anda dapat menggunakan struktur seperti ini:

@media hanya layar dan (min-width: 1920px) dan (device-aspect-ratio: 16/9) {selector-css-example {/ * CSS biasa Anda di sini * /}}

 Untuk daftar dan contoh yang lebih lengkap, konsultasikan w3schools et Mozilla Developpers.

Uji fungsionalitas responsif situs web Anda

Saat Anda memodifikasi atau membangun tema WordPress atau pada akhirnya jika Anda menyukai kejutan, Anda harus menguji hasilnya untuk melihat apakah akhirnya responsif. Ingat, Google mengawasi situs web yang tidak responsif.

Lihat juga ini Plugin 10 WordPress untuk membuat tab di blog Anda

Gagal memiliki semua perangkat seluler yang Anda targetkan, ada (untungnya bagi bursa saham kami) sejumlah alat yang bagus untuk melihat bagaimana situs web Anda beradaptasi dengan layar yang berbeda.

Langsung di browser komputer Anda bisa Anda gunakan Ekstensi Browser Penjelajah Jendela Resizer, ResponsiveResize, ResizeMe ou Firesizer. Di bawah ini adalah gambar BlogPasCher di Tampilan Desain Responsif yang datang secara default dengan Firefox.

css3-media-firefox-responsif-desain-view

Ada juga situs web yang didedikasikan untuk tugas ini:

Responsivepx

css3-media-responsivepx

Situs web ini memiliki kekhasan yang memungkinkan Anda memilih sendiri dimensi layar. Perhatikan bahwa situs web ini memuat milik Anda dalam sebuah bingkai. Jadi jika tema WordPress Anda dirancang untuk tidak ditampilkan dalam bingkai, kemungkinan besar yang terakhir tidak ditampilkan di sini.

IPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-media-ipad-mengintip

Situs web ini menarik untuk menguji situs web Anda pada perangkat Apple, iPad, dan iPhone terbaru. Cukup masukkan URL Anda. Perhatikan bahwa ini tunduk pada masalah bingkai yang sama seperti responsivepx.

Emulator Ponsel

css3-media-mobile-phone-emulator

Di situs web ini Anda dapat menguji milik Anda di layar kecil dan pada model ponsel lama yang Anda pilih di sisi kanan layar. Anda juga dapat mengonfigurasi beberapa properti layar.

Uji Google Mobile Friendly

css3-media-google-mobile-friendly uji

Ini adalah salah satu tes terpenting, jika bukan yang terpenting. Cukup masukkan alamat Anda di bilah dan klik Menganalisa untuk memulai pengujian. Setelah pengujian, alat tersebut menampilkan laporan dan skor. Jika hasil tesnya positif, semakin baik, Anda tidak akan dihukum oleh Google.

Jika Anda bukan seorang pengembang, saya menyarankan Anda daftar tema WordPress responsif untuk memulai.

Sumber Daya yang Direkomendasikan

Juga temukan sumber daya lain yang direkomendasikan yang akan membantu Anda menarik mitra dan pelanggan Anda dengan lebih baik, tetapi juga untuk meningkatkan keamanan situs web Anda.

Kesimpulan

Sini! Anda tahu segalanya yang perlu diketahui tentang cara membuat situs web atau tema WordPress Anda responsif menggunakan aturan tersebut @media Dari CSS3 Jika kami melewatkan tema WordPress yang Anda sukai atau yang Anda sukai, tinggalkan tautan di bagian ini komentar di bawah ini.

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.

Kami juga mengundang Anda untuk berbagi di jejaring sosial Anda yang berbeda.

...

%d blogger menyukai halaman ini: