We're back with another roundup of happenings in the Oxygen community.
Custom Post Types With Oxygen 2.0 for WordPress (Facebook, YouTube)
Paul Charlton from WPTuts demonstrates how to create a template with dynamic content in Oxygen, using custom post types and custom fields.
What to watch for:
- Using the Custom Post Type UI plugin to create a new Video Posts custom post type
- Using the Advanced Custom Fields plugin to create custom fields for the Video Posts post type
- Creating an Oxygen template to display single posts for the Video Posts post type
- Dynamically displaying a video in the single post (Dynamic Data > Advanced > PHP Function Return Value)
Oxygen Mini Tutorial (Facebook, web)
Hui Suan Chung created an overview site to help people who are new to Oxygen. The information is broken down into categories, such as:
- Overview of the Oxygen Interface
- Adding Columns
- CSS Troubleshooting
How to apply CSS animations to an Oxygen site with Microthemer (YouTube)
Roberto from CiaoWeb demonstrates adding animations to parts of Oxygen’s Winery design set.
Can it be done with… Oxygen?
Sridhar Katakam continues his series of advanced design tutorials using Oxygen. Check out how he recreated the homepage hero section from Oxygen 1.0’s website and a tabs-based display of features from Airtable’s homepage.
Video #5: Oxygen v1.0's website homepage hero in Oxygen 2.0
What to watch for:
- Adding an alert banner at the top of the page using a Link Wrapper with Text elements
- Changing background color on hover with a smooth transition
- Changing the logo image opacity on hover
- Building a header from scratch (no Header Builder element)
- Making the menu expand to take up available space (Advanced > Flexbox Child Controls > Flex Grow = 1)
- Separating several menu items horizontally, using custom CSS in a Code Block (margin-left: auto)
- Chrome inspector tips (testing element targeting and styles, un-minifying CSS to view it more easily, searching for code in the CSS)
- Adding a perspective image with custom CSS
- Responsive menu adjustments and troubleshooting
- Compare Sridhar’s process with an approach using Beaver Builder
Video #6: Airtable's homepage Tabs in WordPress using Oxygen
What to watch for:
- Using a Tabs element to create a vertical navigation for displaying different images
- Deep customization of a Tabs element and layout with Flexbox controls
- Pausing JavaScript in Chrome inspector (F8) to inspect CSS on the original page (when animation makes it difficult to target images)
- Adding advanced effects to all images inside tab contents, using a Code Block with custom CSS
- Adjusting responsive layout for different breakpoints (rearranging elements through vertical/horizontal stacking, alignment, order, and wrap of elements)
- Compare Sridhar’s process with an approach using Beaver Builder
More Sridhar Katakam Tutorials
- Elementor's Templates in Oxygen (Facebook, web)
- How to Password Protect Entries in Oxygen (Facebook, web)
- MemberPress in Oxygen (Facebook, web)
- How to Display ACF's Google Map Field via Oxygen's Google Maps Element (Facebook, web)
- How to Add Links to Previous and Next Posts in Oxygen (Facebook, web)
- Oxygen Mobile Menu Customizations (Facebook, web)
- How to Reorder Oxygen's Templates (Facebook, web)
- How to Add Google Tag Manager Code in Oxygen (Facebook, web)
- How to add Font Awesome icons to nav menu items in Oxygen (Facebook, web)
- Using offset in Easy Posts element in Oxygen (Facebook, web)
- Full screen background video in Oxygen (Facebook, web)
Supa Mike Tutorials
- How To Have Different Menus With Polylang (Facebook, web)
- Animated Heading (Facebook, web)
- How to Load Custom CSS and JS files (Facebook, web)
- How To Load Google Fonts Locally (Facebook, web)
- Using Essential Grid Plugin With Oxygen (web)