Tutorial: Oxygen Basics: Creating Features/Services Sections With Oxygen
In this Oxygen Basics video tutorial, we’ll create several different features/services sections for your WordPress website with Oxygen.
The first feature/service section we’ll create is our standard design and contains three responsive columns and a hover effect. This will be the base section we’ll use for the other two sections we’ll also be creating in this video.
Next, we’ll create a three-column feature/service section with a card-based layout and a different type of hover effect.
Last, we’ll design another card-based layout that uses four columns instead of three and differentiates one feature/service from the others.
Throughout this video, we’ll show you how to build each section using a class-based approach in Oxygen, which helps speed up site creation and modifications later. You can learn more about using classes in Oxygen here. We’ll also discuss how to use calc to determine the width of different columns and then we’ll go over how to add hover effects and transitions to your elements to enhance your layout.
Video Chapters:
- 0:00 – Introduction
- 0:58 – Online Examples
- 02:24 – Standard Section
- 21:19 – Card Section
- 28:16 – Compact Section
Resources:
- Introduction to the BEM class methodology: https://getbem.com/introduction/.
- Calc CSS Function: https://developer.mozilla.org/en-US/docs/Web/CSS/calc.
- Transition CSS Property: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
