Tutorial – Oxygen Basics: Creating Social Proof Elements with Oxygen
In this Oxygen Basics tutorial, we’re creating social proof elements for your WordPress website using Oxygen. We’ll begin with a review of several websites and review how they use social proof on their websites.
After understanding what type of social proof elements we want, we’ll create a Reviews / Star Rating element and use classes to streamline development. We’ll also use custom CSS in a Stylesheet to automatically apply styles to various elements.
Next, we’ll create a Client Logos element to display clients we’ve worked with. During this design process, we’ll use the filter effect in Oxygen on our Image elements to help the logos stand out. We’ll also use a nested Div element to change the layout and direction of the logos without impacting the rest of the Client Logo element.
Then, we’ll create a Testimonial element. We’ll use the columns element to speed up the creation process, and we’ll use the-aspect ratio and object-fit properties to help our Image element fit properly within the space available.
Lastly, we’ll review the social proof elements we’ve created and use Oxygen’s responsive controls to ensure our elements look great on mobile devices and adjust our design accordingly.
Video Chapters:
- Reviews / Star Rating: 0:05:27
- Client Logos: 0:13:02
- Testimonial: 0:18:17
- Responsive Tweaks: 0:27:46
Related Tutorials:
- Oxygen Basics: Creating Hero Sections with Oxygen
- Oxygen Basics: Creating Headers with Oxygen
- [Newbie Guide] Classes Crash Course For Oxygen
- Using Utility Classes For Rapid WordPress Design In Oxygen
External Resources:
- CSS Filter Effect (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/filter
- Using CSS Values and Units (MDN): https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
- Aspect Ratio (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
- Object Fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
