CSS Variables pada Oxygen Builder untuk mempercepat website atau situs Anda. Kelebihan yang ditawarkan CSS Variables ini cukup banyak. Selain dapat mempercepat website. Juga dapat mempermudah dalam merubah warna secara global dan jauh lebih mudah untuk diingat.
Semakin besar situs Anda semakin banyak kode Anda pula. CSS Variables cocok digunakan pada situs yang besar untuk lebih mudah dalam membaca kode dan mempermudah developer untuk merubah warna, ukuran dan unit lainnya secara global. Dan juga Anda akan dengan mudah jika ada typo atau kesalahan dalam penulisan dalam CSS akan mudah terlihat.
Pada umumnya, ketika kita ingin menampilkan sebuah div dengan warna yang berbeda maka Anda perlu menuliskan seperti ini pada CSS Anda:
.div-ungu,.div-biru-tua{
font-size:20px;
padding:40px;
}
.div-ungu{
background:#7E03FF;
color:#fff;
}
.div-biru-tua{
background:#0310FF;
color:#fff;
}
Klik Disini Untuk Melihat di Codepen
Secara tradisional atau konvensional biasanya memasukkan CSS properties beserta value seperti: background: #7E03FF; Begitu pula, pada div yang lain Anda harus memasukkan CSS properties yang sama dan value yang berbeda. Contohnya pada div kedua background: #0310FF;
Bayangkan, jika Anda membangun sebuah situs/website yang kompleks yang memiliki berbagai macam CSS Properties dan Value.
CSS Variables memudahkan Anda dalam melakukan coding sehingga mudah dibaca. Dan mudah diingat, setelah beberapa percobaan dengan adanya CSS Variables ini meningkatkan kecepatan pada situs Anda.
:root{
--ungu:#7E03FF;
--biru:#0310FF;
--putih:#fff;
--padding:40px;
--font:20px;
}
.div-ungu,.div-biru-tua{
font-size:var(--font);
padding:var(--padding);
}
.div-ungu{
background:var(--ungu);
color:var(--putih);
}
.div-biru-tua{
background:var(--biru);
color:var(--putih);
}
Klik Disini untuk melihatnya kedalam Codepen
Ada perbedaan antara CSS properties dan valuenya.Sebelumnya background: #7E03FF; menjadi background: var(--ungu);
Baca juga: Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder
Cukup mudah dibaca bukan? Sebelum mengimplementasikan CSS Variable masukkan :root di dalam stylesheet Anda. dan Masukkan value yang Anda inginkan. Beri nama untuk mempermudah dalam pembangunan situs Anda.
Contohnya memasukkan warna ungu
:root{
--ungu:#7E03FF;
}
pada saat melakukan kustomisasi masukkan:
.div-ungu{
background:var(--ungu);
}
rubah value warna yang sebelumnya #7E03FF; menjadi var(--ungu)
Memberikan CSS Variables pada value ukuran cukuplah mudah semisal pada :root saya memberikan ukuran seperti dibawah ini:
:root{
--padding:40px;
--font:20px;
}
Terdapat dua CSS Variables dalam bentuk ukuran. dan saya beri nama yang berbeda --padding untuk ukuran 40px, dan --font untuk ukuran 20px. Masing-masing memiliki ukuran yang berbeda. Jika Anda ingin memberi padding 40px masukkan:
.div-ungu{
padding:var(--padding);
}
Maka padding akan menjadi padding menjadi padding:40px;
Selain ukuran dan warna Anda juga bisa memasukkan calc() CSS pada situs Anda dan mengkombinasikannya. Saya biasa menggunakan calc() untuk ukuran font dan ukuran div. Sebagai contohnya saya akan menerapkan pada ukuran Heading.
:root{
--size:calc(33px + (55 - 33) * ((100vw - 360px) / (1900 - 360)));
}
Sebagai contohnya, menggunakan --sizeuntuk memunculkan ukuran calc pada heading berikut implementasinya:
h1{
font-size:var(--size);
}
Jika Anda ingin mempelajari tentang calc() Anda bisa mengunjungi 2 EASY WAYS TO IMPLEMENT FLUID TYPOGRAPHY
Bagaimana cara menerapkan CSS Variables? Sebelumnya kita harus mengetahui struktur dalam Oxygen Builder terlebih dahulu. Ada berbagai macam cara untuk memasukkan CSS di dalam Oxygen Builder.
Yang terpenting adalah memasukkan :root pada stylesheet global. Atau Anda bisa menggunakan plugin seperti Advanced Script untuk situs Anda.
Baca Juga: 3 Cara Mendapatkan Uang Dari Internet
Memasukkan pada stylesheet global berfungsi untuk menampilkan CSS secara global. :root adalah salah satu pseudo-class yang merepresentasikan dokumen HTML.
Berikut cara menerapkan CSS Variables pada Oxygen Builder. Dan bagaimana cara menggunakannya agar mempercepat situs Anda?
Anda bisa mempelajari pada kelas yang akan kami buka pada bulan ini. Basic Oxygen Crash Course akan hadir segera. Tunggu kehadirannya.
Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder sangatlah penting. Salah satunya untuk menaikkan ranking SEO (Search Engine Optimization). Sekarang ada kurang lebih 2 Milyar website yang aktif. Dan kebanyakan dari website aktif tersebut tidak pernah diperbaharui struktur HTML-nya. Sehingga mesin pencarian seperti Google menghindarinya. Dan membuat membaca kesulitan dalam membaca konten.
Sebelum beralih bagaimana cara menerapkan Semantic HTML5 tags. Kita harus mengetahui apa yang dimaksud dengan Semantic pada HTML5. dan juga apa saja keuntungan yang didapatkan setelah memanfaatkan salah satu fitur penting HTML5 ini.
Semantics adalah salah satu fitur paling penting yang ada pada HTML5. Semantic HTML mengacu pada syntax yang membuat HTML lebih dalam atau lebih tepatnya lebih komprehensif. Untuk membedakan antara section dan layout pada halaman situs.
Sehingga membuat halaman situs lebih informatif dan lebih mudah beradaptasi. Membantu mesin pencarian melalui robotnya untuk menginterpretasikan sebuah konten.
Semantics juga mempermudah developer dan programmer untuk membaca HTML. Dengan adanya semantics ribuan kode HTML akan lebih muda dirangkum dan jauh lebih mudah untuk dibaca.
Selain mempermudah, Semantics HTML5 membuat kode HTML jauh lebih ringkas dibandingkan dengan HTML4. Daripada menuliskan <div id='header'> untuk menentukan header. HTML5 memudahkannya menjadi </header>
Keuntungan yang paling terlihat adalah dapat membantu mesin pencarian untuk menginterpretasikan konteks pada konten situs Anda. Memudahkan situs Anda untuk crawling dari mesin pencarian.
Memanfaatkan dan memaksimalkan Semantic HTML5 Tags adalah salah satu optimasi SEO On-Page yang tidak banyak melakukan perhatian penuh disana.
Dalam hal ini Anda bisa memaksimalkan penggunaan Semantics HTML5 Tags untuk meningkatkan ranking situs Anda. Kemungkinan terbesar, kompetitor Anda belum memaksimalkan atau bahkan belum menggunakan Semantic HTML5 tags
Sebagai catatan tambahan HTML5 tidak support pada semua browser. Namun hal ini bisa diatasi menggunakan Modernizr.js. Sehingga browser lama dapat menikmati fitur-fitur yang ditawarkan oleh HTML5.
Beberapa tema WordPress sudah menerapkan semantic HTML5 tags. Jika kita berbicara Oxygen Builder. Apakah dapat menerapkan hal yang serupa?
Tentunya bisa. Dan malah kita diberikan keleluasaan untuk memberikan semantic tags. Bagaimana Cara Menerapkannya?
Kita tahu bahwasanya Oxygen Builder merupakan salah satu builder yang eksentrik dibandingkan Page Builder[1] WordPress lainnya.
Salah satu kelebihan dari Builder ini adalah output atau keluaran dari HTML dan CSS yang kecil. Sehingga mempersingkat pengguna mengakses ke dalam situs. Situs WordPress yang dibangun menggunakan Oxygen Builder memiliki Page Load Time yang cepat dibandingkan dengan kompetitor Page Builder Lainnya.
Ada banyak sekali fitur-fitur dari Oxygen Builder yang ditawarkan. Namun semantics HTML5 seakan dilupakan. Padahal itu merupakan fungsi yang fundamental.
Oxygen Builder tentu berbeda dengan Page Builder lainnya. Bisa saya sebutkan bahwasanya Oxygen Builder merupakan Theme Builder[2]. Anda diberikan keleluasaan untuk membangun website Anda.
Ibarat sebuah canvas kosong Anda dapat melukis apapun yang Anda inginkan. Namun beberapa HTML tags pada Oxygen Builder tidak terpasang. Hanya beberapa saja yang sudah ada.
Ada beberapa HTML tag yang akan digunakan untuk Single Post[3] Berikut adalah tag-tag yang digunakan saya bedakan antara warna satu dan lainnya untuk mempermudah dalam mengingat:
Tips: Menambahkan CSS overflow-x:hidden; pada div yang memuat Inner Content dapat menghindari masalah space kosong putih yang biasa terjadi pada mobile devices.
Setelah membuat Main Templates kemudian kita harus membuat Single Post Templates. Pengertian Single Post Templates bisa Anda baca pada catatan kaki artikel ini. Hal yang penting dalam Single Post Templates adalah memaksimalkan penggunaan Article tag dan Aside Tag yang sudah dijelaskan pada tulisan diatas.
Intinya pada Single Post Templates dengan adanya tag article dan aside. Fungsinya untuk membedakan antara konten utama dan konten tambahan seperti: informasi penulis, comment form, comment list, related post, dan lain sebagainya.
Berikut cara memanfaatkan sematic HTML5 Tags pada situs Anda. Bagaimana mengimplementasikan hal tersebut pada Singular Templates seperti laman atau page. Dan bagaimana cara mengimplementasikannya pada Custom Post Type?
Jika Anda tertarik mengetahuinya. Kami Coolaborative akan membuka kelas "Basic Oxygen Crash Course". Tunggu tanggal rilisnya!