It is a common practice among website owners and developers to welcome the visitors with a nice-looking, clean landing page where the users can find call to action buttons, and where they can get basic information about the website and it purpose. If it’s a company website, then a landing page usually let the visitor know about the name of the company and what they are doing. If it’s a webshop then you can show some featured products, discounts and most popular products.
A photographer’s, designer’s or web developer’s WordPress landing page are built very much alike to each other and contains similar information – at least, in theory. They probably write a few words about themselves – what they are doing and why are they doing it – place some contact information and showcase some of their best works so their visitors get interested enough to want to learn more about them, and – ideally – want to hire them.
Basically, a landing page is a sub-page where the user arrives (“lands”) first. A page, that showcases the content of the whole website, and provides call to action buttons or navigation elements (like “Read more”, “Contact us”, “Portfolio”, “See more”) to reach additional, related content what they became interested in. Landing pages are also known to use different visual elements (images, colorful buttons and even videos) to capture the user attention, and guide them through the website.
Portfolio landing page
Now that you got an idea on what is the meaning of the landing pages, let’s take a look at our landing page demo, which was created using Smart Slider 3 for WordPress only. No, I’m not kidding you, this whole page was made using sliders and blocks (which is a special slider type in Smart Slider 3). And it looks beautiful, it’s fast and any sliders featured here are importable and can be used to create an amazing landing page for your website.
Our featured landing page has five sliders, let’s have a look on what each of the sliders can offer to decide whether or not import it to your WordPress website!
Welcome section of the lading page
The first slider is a simple, clean slider containing two slides. Both slides have fixed background images, which is the most common usage of the parallax effect. You can see that the arrows, bullets other control elements were removed, providing a much cleaner design, and giving higher importance of the How I work button, which leads the user to the second slide. But don’t rush to the second slide just yet, let’s take a deeper look into the first slide.
When the page was loaded, a simple and elegant flip layer animation happened on the texts and buttons. If you happened to miss it when you loaded the page, press the How I work button, wait for the second slide to load then click on Who are you? to see the animation again.
The first slide contains some basic information about the one-person company, giving the visitor a clear idea on what to expect when they arrive to the website. The clean design speaks for itself; no users will have trouble on reading the texts on the slide, or on the buttons. Speaking of the buttons, the first slide has three of them. Two of them (My passion and the down arrow) will do the very same action: scrolling further down on the page, while the How I work button will take the user to the second slide.
Once you press the How I work button and the slide is changing, you can see a professional-looking background animation which conceals the first slide and introduces the second one. This slide’s specialty is the lightbox video, which opens up when the image with the play button is clicked.
Smart Slider 3 allows you to put not just images, but videos or even iframes to your lightboxes, so the possibility of the usage is almost unlimited!
Additionally, you can mix the added content, creating for example a lightbox that contains three images, two videos and one of your pages as an iframe.
This slide also has a down arrow button, that will scroll to the next section.
Call to action slider
This slider isn’t actually a slider. It’s just a simple block, which is basically allowing you to display one slide only without any control elements on it, but the same layers and slide-level options are still available, therefore it is like a row editor from a page builder. You have the elements to be added, and you have a visual way to configure them to your liking. The Ken Burns effect can also be applied to the block type sliders.
Now, this slider doesn’t have Ken Burns effect set (it’s background is just a simple dark-blue color, where the Ken Burns effect wouldn’t really be visible), but it has something much more special.
The parallax effect is a special effect becoming more and more popular on websites, and used mainly for one reason: to wow the users. And it is doing a marvelous job with that. Parallax effect is creating the illusion of depth by moving some elements slower, than the others.
If you hover over the slider, and start moving your mouse (when it’s still over the slider) you’ll notice that the five small photos are trying to follow your mouse, creating a breath-taking effect even on a simple block element like this. This parallax effect can be added to any layer, and their depth can be adjusted at the layer settings. At the Layer animation tab on the Slider settings page additional customization options can be set such as the effect’s behavior on Horizontal and Vertical use cases (whether it will move by the mouse or by scrolling).
There is a My collections button at the middle of the slide, which will scroll to the next section of the page.
Show your work for your visitors
Yet again, this slider is a simple block. While the My collections button scrolled you to this section, you might noticed that this block has another kind of parallax effect: a fixed slider background, and if you scroll back and forth a little bit, you see that the illusion of depth is a little bit different in this block than it was at the previous one. In this case, the illusion is given by the fixed background.
There is another special effect shown in this block, which is created by the caption layer. When you hover over the images, a caption will appear at their bottom part, giving some additional information. These images also have lightboxes on them, so when you click on any of the images, a lightbox will pop up, showing an extra image.
For further navigation there is a Testimonials button which scrolls to the next slider.
Landing page with testimonial slider
This testimonial slider is a simple type slider, and it has a few special elements that wasn’t used at the previous sliders. The most striking one is the moving clouds on the back. They’re from the slider’s background video, which was a bit lighter, so this darker blue color was added as an overlay on each slide.
The next most obvious differences are the controls elements: arrows and bullets were selected for this slider to make the navigation more comfortable, and it’s much easier to realize that there are other content to see, when you look at the arrows at the side of the slider, or the bullets at the bottom part of it.
When you change slides, you’ll notice that the quote and the person’s name who said it moves (and animates) but the Testimonials stays as is. The testimonial text was placed on a static slide which will always above every other slide in your slider, making it possible to add your own logo or a navigation menu to your slider.
Speaking of the animation of the name of the person who was quoted. Have you noticed how eye-catchy that is? The split text animation was used to create it’s incredible effect. This is a really special animation that can only be applied to the heading layers. Would you like to learn more about these exceptional animations? We have an entire article about them, you can check it out here.
Contact form section
The last section is yet again a block. It has texts to give some information on what to expect when the call to action button button is clicked. The most special part of this block is the layer animation, when the small images are taking their places.
Smart Slider 3 has an easy to use animation builder which can be used to build any kind of animations. It has a bit of learning curve, but once you get the hang of it, you’ll surely create amazing and unique animations.
Comparison for landing page
- Block slider
- 5 more bullet types
- 7 more arrow types
- Layer animation
- Fixed background and parallax effect
- Caption layer
- Layer animation
- Full width slider
- 1 bullet type
- 2 arrow types
- Button layer to create call to action buttons
- Static slide
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Related Post: What is a Full Page Slider and How to Use it?
Related Post: Everything You Need to Know about the Parallax Effect