In our next installment of the Oxygen Basics tutorial series, we will create several social proof elements for your WordPress website using Oxygen. We'll start by reviewing several websites around the internet and the types of social proof they have on their websites.
Our first social proof element will be a Reviews / Star Rating element. While creating this element, we'll use classes and stylesheets to help streamline the design process. Using classes and stylesheets allows us to update multiple elements simultaneously and apply styles as soon as an element is created.
Next, we'll create a Client Logos element. This element lets our customers know about other notable clients we've worked with. We'll use the filter effect to help our logos stand out against a darker background. We'll also use a nested Div element to change the layout of the Image elements containing our logos.
Our last social proof element will be the Testimonials element. This element can be great for displaying a handful of customer or client reviews. When designing this element, we'll ensure the images in our Image elements look great on all devices and take up as much space as possible by using the aspect-ratio and object-fit CSS properties.
Finally, we'll review the three different elements we've created and also use Oxygen's responsive controls to preview our elements for mobile layouts.