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 February 12, 2023

Tutorial - Oxygen Basics: Creating Social Proof Elements with Oxygen

hello world!

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:

Related Tutorials: 

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

 

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