How are you making your site different from others?
If you’re here to learn new design tricks you can do with the free version of Elementor, you’re on the way to making your site more dynamic and appealing to visitors.
I have 5 tricks using different basic elements and capabilities Elementor has.
How to Layout Dynamic Testimonials with Image Carousel
If you want to display testimonials in a gallery of sorts, the image carousel is an easy trick to make the testimonials stand out. You will need photos of your work and an image of testimonials with a solid color background.
Start with a blank page except for the header and footer of your site (or maybe a completely blank page if it’s a standalone landing page).
Add a new page section by clicking the plus sign (+) on the Elementor builder, then select the single column option.
Insert the image carousel element by dragging and dropping it into the single column section you just created.
Make sure the image carousel element is selected, then the editing panel will appear. To add photos, click on another plus sign.
Select the images you’re going to use. Make sure the number of photos of your work and testimonial images are equal.
Arrange the photos in the order that you want through drag and drop, and click ‘Insert Gallery’.
The images will be small and have awkward spacing in between. Fix this by choosing image size from the dropdown in the editing panel. I chose Large for this one.
Set the autoplay speed. The higher the speed, the faster your carousell will move. Make sure to set enough time for visitors to read the testimonials. Nothing is annoying as when the design of a website or page is considered more than the user experience and it shows.
You can add this in any kind of page:
How to Display Portfolio with Unique Image Grids
On the free version of Elementor, you can only create a basic gallery. The editing capabilities are very limited and you can’t really do something unique to make it more appealing to website visitors.
With this tutorial, you’ll learn how to create a unique image grid that can display your work in a different way than what typical galleries look like.
We’ll start by adding a new section. This time, select the 4-column option. (I’ll switch to 3 columns later on because of my images, so scan this tutorial first before you attempt so you can see the process until the final output.)
Insert an ‘Inner Section’ element in every column by drag and drop. For some columns, I duplicated the inner section so there will be 2 rows of them.
Insert a ‘Text Editor’ element inside every inner section element by drag and drop as well. Then edit the text according to your client’s name or project name, depending on the nature of your work. I just put ‘Project/Client Name’ for this tutorial.
Add a background to an inner section element by following the steps indicated in the image below.
Select an image. Repeat these last 2 steps in all of the inner section elements.
Transform the text into a heading. I chose H2 for this, so it will be larger and easier to read. Change the color too if needed. I wasn’t able to do it here, but do edit the color if your text is not readable.
You may also add a link by selecting all of the text you want to be hyperlinked and clicking the link icon. A text field will appear where you can paste the URL.
Go back and select the background image. (And this is where I realized that 3 columns will look better for my image grid, but feel free to experiment with your own.)
On the editing panel, go to the ‘Style’ tab and select ‘Center Center’ from the position dropdown.
For the image size, set it to ‘Cover’. This will fix the image into the inner section, so more of it will be displayed.
To make the inner section larger and display more of your background photo, adjust the padding. Make sure the link icon on the right side is unselected, so that the padding on one side won’t be applied to all sides.
I’m showing the padding configuration for the second photo in my first column here. I also set the top margin, so the two photos in my column will be separated.
This is the padding configuration I set for my second column, which only contains one image.
Continue doing this for the third image and add inner sections below as you go to display more photos in your gallery. And that’s it! This is what it should look like...
How to Create Custom Shapes
If you happen to visit many different sites, one thing in common that you may have noticed are the blobs and various shapes in the background throughout the page.
These are some elements of design that draw people’s eyes to the web page and encourages the visitor to scroll more or engage with the content more.
These shapes can be easily done within Elementor and you can put it absolutely anywhere, and I mean anywhere.
So start with inserting a ‘Spacer’ element into a new section on your page.
Right away, set the height of the spacer by dragging the knob or typing the number on the field indicated by the arrow below.
Go to the ‘Advanced’ tab and change the color of the background.
Set the positioning to ‘Custom’.
This will open up new settings… Change the width of the spacer to the same number as you did the height. Then, select ‘Absolute’ for the position.
An absolute position will allow you to move the shape literally anywhere on the page.
To make it a circle, open up ‘Border’ and set the border radius to 50 on all sides.
You can also make the shape transparent on the inside with a solid border or any kind of border by removing the background color and selecting your border type of choice.
How to Improve Your Call to Action Buttons by Changing the Border Radius
Call-to-action buttons are crucial in a website. It either means you’ve converted a visitor into a lead or you’ve made a sale. Not only should the buttons have a compelling call to action, it should also be designed in a way that makes people want to click on it.
This tutorial is all about making your CTA button more unique and effective.
Insert a ‘Button’ element into a new section on your page.
Change the settings to these:
You can type any call to action that you want in the text field next to ‘text’. I chose extra large as the size so that it’s seen easily.
Go to the ‘Style’ tab and you’ll see ‘Border Radius’ immediately. Unlink the border radius, then set any 2 opposite sides to 50 and the other 2 opposite sides to 5. It should look something like the button you see below...
I also added a shadow on the outline.
To add an effect on hover, click on the ‘Hover’ tab. Select the animation you want from the dropdown. I chose Skew
This is how the button would look like...
How to Change the Background Borders Into Interesting Shapes and Curves
Most websites look all the same. That’s why effects and animations are effective ways to keep your website visitors looking.
One unique feature Elementor has is Shape Divider. Any section on your page can have different patterns at the top or bottom.
For this tutorial, I made a sample gallery header with a text element for your site name.
I simply chose ‘Gallery’ for the background of the section, chose my photos, and added top and bottom padding. If you’ve gone through the previous tutorials, you’ll know how to do this with a little exploration of the Elementor Builder.
This is where we’ll start. Right click on the image to edit the section.
You’ll find Shape Divider under the ‘Style’ tab. Click ‘Top’ or ‘Bottom’ to dictate where the effects will be applied.
As this is a header sample, I chose bottom. Choose the type of effects you want from the dropdown.
Adjust the knob of the height and width to edit the effect according to your preference.
As another example, I chose ‘Waves’ as the type of effect, and adjusted the height a bit. This is what it would look like as a gallery header...
These tricks are easy to learn and do on Elementor. With absolute positioning, you can do anything with this powerful page builder. As you do these tricks and get more familiar with the interface, other design elements will be easier to do.