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

CSS Variables

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.

CSS Variables Warna

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)

CSS Variables Ukuran

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;

Mengkombinasikan Calc() dengan CSS Variable

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

Menerapkan CSS Variables Pada Oxygen Builder

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.

Memasukkan CSS Variables pada Oxygen Builder

1. Buka halaman situs Anda klik klik edit with oxygen
2. Tunggu sampai editor terbuka
3. Kemudian klik manage

4. Tambahkan stylesheet

5. Kemudian berikan nama pada Stylesheet Anda.
6. Klik Stylesheet yang sudah Anda buat.

7. Setelah memasukkan CSS Variables pada Stylesheet. Implementasikan kode yang ingin Anda masukkan. Saya akan memasukkan warna pada salah satu button.
8. Pilih salah satu button kemudian masukkan warna pada background.

9. Selanjutnya memasukkan ukuran pada font. Memasukkan CSS Variables pada ukuran font pada Oxygen Builder cukup berbeda
10. Klik salah satu header

11. Kemudian simpan atau klik Save

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.

Semantic HTML 5 Tags

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 Memanfaatkan HTML5 Tags

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?

Cara Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder

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.

Menerapkan Pada Single Post

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:

• Main digunakan untuk membedakan antara Header dan Footer pada halaman situs. Dan juga membungkus tag HTML lainnya seperti Article dan Aside. Biasanya pada tema-tema WordPress sudah terdapat tag ini.
• Article untuk memberikan informasi bahwa yang dibungkus pada tag tersebut merupakan sebuah artikel. Pada penerapannya pada halaman situs yang kompleks seperti Pages atau Laman pada WordPress memerlukan berbagai tag Article yang banyak
• Aside sedangkan aside digunakan untuk membungkus konten tambahan yang sifatnya hanya pendukung saja. Seperti contohnya: informasi penulis, artikel berkaitan, jumlah pembaca, waktu baca, dan bahkan bisa digunakan untuk sidebar.

Menyiapkan Main Template (Header, Inner Content, dan Footer)

1. Buat Templates baru pada Oxygen. Klik Oxygen pada Dashboard WordPress(wp-admin) Anda. Kemudian klik Templates.
2. Add New Templates atau tambahkan templates baru.

3. Berikan judul pada templates yang Anda tambahkan
4. Klik Others dan klik Catch All.
5. Atur Priority menjadi 0

5. Kemudian Klik Publish atau terbitkan
6. Klik Edit With Oxygen untuk melakukan editing dalam Oxygen
7. Tambahkan Header Builder pada situs Anda. Rubah header sesuai keinginan Anda.
8. Kemudian Tambahkan Div
9. Rubah tag pada div menjadi Main. Lihat gambar dibawah ini

10. Perhatikan struktur di kanan. Masukkan Inner Content pada Div yang diberi tag Main.
11. Tambahkan CSS pada div yang diberikan tag Main. Agar menghindari masalah whitespace pada perangkat kecil (mobile devices). Klik Advanced pada div kemudian klik Custom CSS.
12. Masukkan overflow-x:hidden;

Tips: Menambahkan CSS overflow-x:hidden; pada div yang memuat Inner Content dapat menghindari masalah space kosong putih yang biasa terjadi pada mobile devices.

13. tambahkan div atau section untuk footer Anda. Atur tag dan rubah menjadi footer Lakukan hal yang sama seperti div atau section untuk Inner Content.

Membuat Single Post dan Menempatkan Semantics HTML5 tags

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.

1. Buka Dashboard WordPress (wp-admin). Kemudian klik Oxygen.
2. Kemudian Klik Templates dan tambahkan templates baru atau Add New Templates.
3. Berikan Judul dan kemudian klik inherit design from other templates. Pilih Main Templates yang Anda buat tadi.
4. Kemudian klik Singular dan klik Posts.

5. Atur priority menjadi 1
6. Kemudian Publish dan Edit With Oxygen
7. Kemudian buat Single Post Templates Anda. gunakan text untuk menampilkan konten Anda.
8. Pada konten tersebut. Contoh saya menggunakan text untuk menampilkan konten. Masukkan tag Article pada text yang berisi konten tadi.

9. Langkah terakhir adalah memasukkan tag aside pada informasi penulis, comment form, sidebar, comment list. kategori, dan post tag.
10. Sebagai contoh saya memasukkan tag aside pada informasi penulis.

1. Lakukan hal tersebut informasi penulis, comment form (jika ada), sidebar (jika ada), comment list. kategori, post tag, tanggal penerbitan, waktu baca (jika ada).

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!

Catatan Kaki:

• ^[1]Page Builder merupakan alat yang membantu dalam membangun sebuah halaman situs untuk menghemat waktu dalam membangun sebuah website. Page Builder dapat berupa dalam bentuk plugin, tema, maupun software yang terpisah. Umumnya Anda dapat membangun sebuah halaman situs secara visual.
• ^[2]Theme Builder memiliki kesamaan terhadap Page Builder. Yang menjadi perbedaan pada fungsinya. Dengan Theme Builder Anda memungkinkan untuk membuat situs yang tidak bergantung dengan tema WordPress. Sehingga Anda lebih leluasa dalam membuat situs.
• ^[3]Single Post Templates merupakan istilah pada WordPress. Single Post merupakan salah satu struktur penting pada WordPress. untuk memberikan kenampakan pada Pos atau Post. Singkatnya template untuk menampilkan artikel atau pos.

Referensi:

Freecodecamps: Semantic HTML5 elements

Pluralsight: Semantic HTML