When it comes to creating a cool and engaging landing page for your website, there’s an endless number of layouts you can create.
One way to do that is by animating various elements from your page, in order to capture the visitors’ attention and lead their eyes to the products and services your business has to offer.
In this article we will have a look at how you can recreate a look similar to the one shown below, using only Thrive Architect:
Here’s what you need to know before jumping into the process:
- try using a PNG image (if you are trying to replicate the exact look), as this type of image has a transparent background;
- add the text to your images before uploading them to your WordPress media gallery;
- when adding animations to the images, try to follow a certain movement pattern: the images from the left side of the screen should roll in from the left side, the ones from the top should appear into viewport from above, and so on;
- try overlapping some of the images that are coming from different directions, to create a more natural and unique look.
Load a Blank Page
First, open the page on which you plan to recreate this look. You can use an already predefined template, on which you can rearrange the blocks as you best see fit, or you can use a blank canvas:
I will be using a blank page, on which I will load an already saved template:
Here’s an article about how to use the “Templates & Symbols” elements, if you want to find out more about how to save and a load a template/symbol:
So basically my page has a template that I’ve saved from before, which lies at the top of my canvas, and next I’ll start building the next section from scratch.
Start Building Your Page
Add Columns
First, drag and drop a “Columns” element to a blank area of your canvas:
Select a column layout:
Before moving on to adding images to the columns, I’ll do one more thing here and that is changing the color of the background section in which my columns are. For that, I have to select the “Background Section” in the breadcrumbs:
Next, expand the “Background Style” section of the left sidebar:
Click on the color field:
And pick a solid color for the background section:
This step was necessary due to the fact that my PNG images have a white text on them and transparent background, hence I needed a solid color for my background in order to view both the images and the text.
Insert Images
Now, drag and drop “Image” elements into each one of your columns:
And select the images from the “Media Library”:
This is how the first four set of images look like:
Next, select the entire “Columns” element, and duplicate it:
Do this as many times as needed, depending on how many images you want on your layout. At the end of the process, don’t forget to replace the duplicate images:
After I’ve duplicated my columns and replaced the duplicate images, my layout looks something like this:
As you can see, on one row I have five images instead of four. I managed to do that simply by duplicating only one image from my entire “Columns” element (and not the entire “Columns” element):
Then, I placed it next to an already existing image from the same “Columns” element. This has automatically turned my four columns into a five columns layout element:
Do this as many times as necessary, until you find the right proportions for the type of layout you are trying to create.
Start Working on the Layout
The next step in the process is arranging the images in a way that conceals the fact that they are staked into columns on top of each other. We basically want to achieve a more natural look.
For that, let’s use the sizing options and “Layout & Position” feature for each individual image.
With your image selected, adjust the size from the slider (if needed be):
Next, expand the “Layout & Position” option to start tweaking the position of the image:
Adjust the margin values using the arrow next to each side of the container, until you find the right position for your image:
Here as well, the values might be different from image to image. Try finding what’s right for your layout, simply by experimenting with the margin values in this section, and with the size of the image.
Important!
The margins and paddings should be used for minor spacing adjustments. Adding huge margins and padding values will affect how the layout looks on smaller devices, such as mobile phones and tablets.
If you want to move an image from one side of the screen to the other side of the screen then try using the alignment options and advanced layout and position options.
Next, do the same for all images added to your columns until you find a look that matches with what you had in mind.
If, for example, you notice that the size of some images cannot be increased, this might t be due to the fact that the column layout does not allow it.
A workaround is to simply change the layout proportions of the columns, by dragging this dotted line from left to right:
This way, you can decrease the column layout of one element and make room for increasing the size of the column layout of another element:
Another thing you can do while working on your layout, is hiding the left sidebar list of options from time to time:
This way you can see how the images arrange themselves on the entire width of the page. You can always show again the left sidebar, from the same button:
Once you’re done with making the necessary adjustments and tweaks, you can proceed to the next step, which is animating the images.
Adding CSS Animations
For this layout, I am trying to create a concentric movement that winds up as a cluster of images in the center of the screen. Basically, the images from the left side of the screen should roll in from the left side, the ones from the top should appear into viewport from above, and so on:
For this reason, I will be using the “CSS Animation” options of the “Animation & Actions” feature. Select an image from the left side of the screen and expand the “Animation & Action” section of the left sidebar:
Here, add a “CSS Animation”:
Open the drop-down list that appears:
And select a “Slide, left” type of animation:
You can also enable the looping feature (which means that the image will animate each time it comes into viewport) and then click on “Apply”:
Do the same for each image.
Here’s the option used for the ones that come from the top:
From the right:
From the bottom:
For the ones located in the very center of the screen, you can choose a “Zoom in” type of animation:
Once you are done customizing the images, you can save and preview your page to see how it looks like on the front end. You can always return to the editor and make adjustments until you find the layout that works best for you.
In the end, you will get this looping animation that looks something like this:
Make it Mobile Responsive
When designing your website, it’s also important to make sure that your posts and pages look good when viewed on smaller devices, such as tablets and mobile phones.
This is the reason why you should always make sure that your pages are mobile responsive.
The page that we’ve just created looks best when opened on a desktop, but we can make sure that we get the same effect when opened on a tablet or mobile.
Simply select the device from the panel located at the bottom of the page, and then make the same type of adjustments as done for the desktop mode:
Here’s an example of how I’ve arranged them for the tablet view:
And here’s a layout example for mobile:
By the time you finish making the adjustments, you might notice that the mobile layout is not completely identical to the desktop one, but, what’s important, is that you can get the same effect on a smaller scale as well:
And that’s pretty much it. You can get as creative as you want here, and experiment with all sorts of elements, animations and effects, until you find the best layout for your page.
Hopefully you found this tutorial useful and easy to follow. We have more articles of this type available in our knowledge base, so make sure to check those out as well if you want to learn more useful tips and tricks.