In this article we will be reproducing the Member Stats section from SweetDate homepage that looks like this:

To do this simply follow the steps highlighted below:

Step 1:
Access the dashboard from your main domain and then browse to Pages >> Add new Page.

Step 2:
Give a title to your page for instance in this case : “Add members stats with Elementor”.

Step 3 (Optional):
Configure your display and header settings if the page created by scrolling down to them and check the following boxes:

• “Hide the title” from display settings
• “Hide breadcrumb” from header settings
• “Transparent header” from header settings

This is shown from the image below:

Step 4:
Save your newly created page

Step 5:
Proceed and edit the page with elementor by clicking on “Edit with Elementor”.

Step 6:
Once on the elementor page scroll down to where it says “Drag widget here” and click on the Plus icon to add a section. Several layout sections are shown for you to choose and in this case pick the full width layout which is the first one.

Step 7:
From the elements on the left hand side , Pick the text editor and drag it to the layout section you just created. Simply edit the text to “It all starts with a date” or your best choice of words. Ensure you configure the style settings by making the text aligned to “center”.

Step 8:
Add another text editor below the one created in step 7 and edit the text to fit your own words. The text should be long enough describing your section. Similarly, Ensure you configure the style settings by making the text aligned to “center”.

Step 9:
After that, from the left hand in the elements section, add an “inner section” part below the text created under step 8. This inner section is the first element under the basic elements in the left hand side.

Step 10:
The inner section will house two buttons therefore, from the left hand side under search widget, search for button and first choose “Button-with an arrow”. Drag it to the left side of the inner section created in step 9. How to edit the button:

• Ensure button created is selected 
• Change the text in the button to your own word like”Join Us Today”.
• Change Alignment of the button to “right”
• Change size of button to “Extra small”
• Under styling Change the Typography “size” too 17.5 px and “line height” to 1.8 px
• You can also change the text color and background color of the button to your best choice.
• Under the same Typography change the Border radius to 4 px in all top, right, bottom and left sections
• Similarly, change the padding to 10 px for top and bottom and 30 px for right and left sections.

Step 11:
Add the second button by searching it from the left hand side of elementor in the widget section. Simply search the button and select “Button Video”. Drag it to the right side of the inner section created in step 9. How to edit the button:

• Ensure button created is selected 
• Change the url of the video you want users to be directed to”.
• Under style choose ‘’’Red” option
• The size chosen should be “Large”
• The rounded option choose “A bit Rounded”
• From the icon dropdown part, choose “film”
• The icon position should be chosen as “After Text”
•  Change the text in the button to your own wording like” Our TV Commercial”.

Step 12:
Under this section you will now create another layout section as done in step 6. In this case you will choose the 4 column layout under which the members stats will be shown. This section should be created below the buttons created under step 10 and 11.

Step 13:
To edit the first column in the layout section created from step 12, simply:

• Add an image from the widgets section and drag it to the 1st column. 
• Edit the image by choosing an image that  represents the stats you want to display. 
• Below it add the members stats widget from the widget section you can simply search it and drag it below the image you just created above. 
• You can edit the members stats by choosing the field name you want the stats to display, field value and check if you want to “get online users only”
• Edit the styling of stats value, ensure its aligned at the center, and change the typography size to 35.5 px
• Below the stats value, add a text editor by dragging the text editor section from the widget section. This text describes the members stats being displayed on the first column. For instance the first column was added to “Members in Total”
• Ensure you edit the styling settings also for the text description by aligning it to “Center” and change Typography size to 18 px.

Step 14:
Repeat step 13 for the other 3 columns you had created in step 12, ensure you use different images , different stats for different field names and different text description for each column.

Step 15:
Then after completing the above steps, save the page by moving to the left side under widget sections at the bottom and under “Publish” click on the upward arrow and choose “save draft”.
To preview your changes simply click on the “eye icon” just besides the publish button.