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 Pada Oxygen Builder Untuk Mempercepat Website 1
Ilustrasi CSS

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
CSS Variables Pada Oxygen Builder
CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 7
  1. Tambahkan stylesheet
Add Stylesheet CSS Variable pada Oxygen
CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 8
  1. Kemudian berikan nama pada Stylesheet Anda.
  2. Klik Stylesheet yang sudah Anda buat.
Memasukkan CSS Variable
CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 9
  1. Setelah memasukkan CSS Variables pada Stylesheet. Implementasikan kode yang ingin Anda masukkan. Saya akan memasukkan warna pada salah satu button.
  2. Pilih salah satu button kemudian masukkan warna pada background.
Memasukkan CSS Variables pada Oxygen
CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 10
  1. Selanjutnya memasukkan ukuran pada font. Memasukkan CSS Variables pada ukuran font pada Oxygen Builder cukup berbeda
  2. Klik salah satu header
Memasukkan CSS variables pada font di Oxygen Builder
CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 11
  1. 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.

Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder 2
Perbedaan antara HTML4 dan HTML5

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?

Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder
Ilustrasi HTML5

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:

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.
Add New Templates atau Menambahkan Templates
Add New Templates atau menambahkan templates baru
  1. Berikan judul pada templates yang Anda tambahkan
  2. Klik Others dan klik Catch All.
  3. Atur Priority menjadi 0
Membuat Header Footer Pada Oxygen
Menambahkan main templates (Header, Inner Content dan Footer)
  1. Kemudian Klik Publish atau terbitkan
  2. Klik Edit With Oxygen untuk melakukan editing dalam Oxygen
  3. Tambahkan Header Builder pada situs Anda. Rubah header sesuai keinginan Anda.
  4. Kemudian Tambahkan Div
  5. Rubah tag pada div menjadi Main. Lihat gambar dibawah ini
Menambahkan Main Tag untuk Main Templates Oxygen Builder
Menambahkan Main Tag untuk Main Templates Oxygen Builder
  1. Perhatikan struktur di kanan. Masukkan Inner Content pada Div yang diberi tag Main.
  2. 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.
  3. Masukkan overflow-x:hidden;
Menambahkan CSS pada Main Div
Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder 21

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

  1. 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.
Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder 3
Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder 22
  1. Atur priority menjadi 1
  2. Kemudian Publish dan Edit With Oxygen
  3. Kemudian buat Single Post Templates Anda. gunakan text untuk menampilkan konten Anda.
  4. Pada konten tersebut. Contoh saya menggunakan text untuk menampilkan konten. Masukkan tag Article pada text yang berisi konten tadi.
Memasukkan Tag Article pada konten
Memasukkan article tag pada konten
  1. Langkah terakhir adalah memasukkan tag aside pada informasi penulis, comment form, sidebar, comment list. kategori, dan post tag.
  2. Sebagai contoh saya memasukkan tag aside pada informasi penulis.
Memasukkan tag aside pada Oxygen Builder
Salah satu contohnya memasukkan tag aside pada informasi penulis, tanggal penerbitan dan lainnya
  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:

Referensi:

Freecodecamps: Semantic HTML5 elements

Pluralsight: Semantic HTML

magnifiercross