You can create amazing designs using Elementor and inLaw Theme. Please follow the steps below to create a beautiful case study results page.

Step 1: Create a page and give it a title and save it from Dashboard > Pages > Add New

Step 2: Open the page in Elementor Editor by clicking the “Edit with Elementor” button on your page edit screen.

Adding a section using the + icon
Adding a 3 column section

Step 3: Add a section with 3 columns layout as shown in the screenshot below. You will be able to customize different options for the section from the left side of the screen as shown in the screenshot. For now, we will adjust the Top and Bottom padding of the section. We have used 125px of padding in this example for both the top and the bottom. You can adjust any other settings you may see fit for your design.

Showing the customization controls of a section
Adding custom padding to the section

Step 4: Click on the + (plus) icon and drag any widgets you want to use and drop it on the + (plus) icon. After dropping the widget, you will see a bunch of controls related to that widget appears on the left side. You can customize the widget’s content however you like using those controls. It is good to know that generally, all widgets have Controls Tabs on the top. These are Content Tab, Style Tab, and Advanced tabs.

A) Content Tab: It provides the options to control the content of your widget.
B) Style Tab: It contains options to customize the look and design of the content
C) Advanced Tab: It generally contains a bit advanced design option to customize your design even further.

We will use only 4 types of widgets in this tutorial. You can use any widgets. The widgets we are going to use are Heading, Textarea, Button, and IconBox widgets.

Dragging and dropping a widget into the Editor

Step 5: Customize the widget. When you drag and drop a widget in the editor, you will see a handful list of controls appears on the left side of your screen. The controls are divided into 3 tabs as we said earlier. You can control the content and style of your widget data from this panel. In the example below, we have used a heading widget and changed its fonts size and color from the style tab and we also changed its HTML tag from the content tab. You can edit any widget similarly.

You can customize the widget from these 3 tabs shown in the screenshot

We are going to use a few widgets by dragging and dropping like the previous widget and customize them however we want. We are not including each value for the customization control because it would make this article very long. You can use this picture as a reference and change the style value of each widget.

All the types of widgets we used in this design is marked

You may want to hide the page title for a clean design. You can hide the page title easily. Follow this step:
a. Click on the cog/setting icon on the bottom left corner of your screen.
b. Set the Hide Title option to “YES”.
c. Save the changes by clicking the UPDATE button. You may also preview your changes by clicking on the “eye” icon beside the update button.

Hide the page title and Preview the design

Step 6: Save the changes by clicking the “Publish/Update” Button and preview your result by clicking the eye icon on the bottom left corner of the editor.

Final Result

Leave a Reply

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