Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
Posted on April 16, 2023

Tutorial: Oxygen Basics: Creating Features/Services Sections With Oxygen

hello world!

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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Oxygen Today

Lifetime, unlimited site license

Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram