Build a simple carousel header that runs across the top of your website on blog posts or pages. This is a great-looking feature that draws attention to the blog posts or landing pages that you want to promote. learn how to create this carousel feature and place it literally anywhere on a content page.
Many bloggers, especially food bloggers, are considering using Slickstream as a way to improve engagement & site search. But it's a very expensive for what it offers. Here's a much cheaper alternative that you can DIY.
This post was inspired by a product called the Slickstream engagement suite, which gives you the option to place a “film strip” across the top of your website. The film strip displays popular blog posts and is intended to help increase conversions and click through rate. The end result is an increase in sales and improvements in SEO. Not to mention the improved user experience.
Build a Free WordPress Carousel Plugin
Today we're going to look at two of the four options that Slickstream gives you. Slickstream is quite expensive at $25 minimum a month. (The other features that you get with the tools are the “heartbeat” and “favorites” tools – but we won't cover them here. You can use Google Analytics solution for the heartbeat feature or there are plenty of other free tools that will give you great insights into what's going on in your website).
You will need the Astra theme from Brainstorm Force – an excellent WordPress theme. It's one of the best WordPress themes and it's super lightweight. It also comes with tons of features.
One of the most important features in the Pro Version of Astra is the ability to create custom headers and custom locations around your website. It's a very cool feature and not many WordPress themes give you real flexibility like this. You usually need another plugin or some extra code, or you need to pay for a special plugin.
You will also need the Essential add ons for Elementor plugin. We're also going to use the Elementor page builder. We use the free version, not a problem.
- Create a custom layout in Elementor. Let's call this Filmstrip 2.
- Edit with Elementor. Search for carousel in the blocks section.
- Look for “Post Carousel” and drag that over. This will allow blog posts to be pulled in automatically from the website. Use the posts query, page query, products query to suit your needs. We're just going to go with “posts” for the moment.
- Layout settings: set to medium-large. Change to show the image and show the title. We don't want to show the Excerpt and we don't want to show the Read More or Meta options.
- Next, set visible items to four.
- Slider speed: Set to 1600 or slower (higher).
- Set Infinite Loop to yes. Pause on hover: yes – That means when we hover over this element with the mouse, it will actually stop looping.
“Arrows” refers to these little icons on the left and on the right. You might prefer to turn them off. Dots refer to the dots or bullet points at the bottom of the carousel.
- Go to style. Hovering over the images shows a white arrow overlay. I don't particularly like this as it's not a great icon.
- Go to the Font Awesome website and choose from the 8000 icons.
- Color and typography: this changes the size and color of the titles. Change the H2 to something like H4. H2 is quite important from an SEO point of view. And if you've got a lot of H2 headings on your webpage, it might cause Google to think the page is about something else.
- Next we need to remove the menu and the footer at the bottom of this elementor custom layout. Because this custom layout should be a standalone Elementor “Canvas”.
Go to the dashboard and change to Elementor Canvas and click update. Now it’s a standalone custom layout. Choose where exactly to display the “layout”. You've got a ton of options in the Astra custom layout settings. You could make the “layout” a header but you can also set it as a “hook”. And with hooks you've got tons of options for customizations.
- Set the option to Header.
- Set “Display on” to “all posts” if you're running a blog. Or in this case, set it to the page you’re working on.
After saving and refreshing we can see the slider carousel across the top.
- To make the carousel full width, edit the custom layout with Elementor again.
- Select the Elementor section and stretch the section (using the stretch section selector). Click “full width”. Refresh and now you’ve got a full width header.
If you want the slider or the filmstrip to appear in a different part of the website, for example, just above the title or below the title, make the layout bound to a “hook”. The Astra Visual Hooks page shows you where you can place the layout. Put it under “entry content before”. Refresh, and view the carousel below the title.
Creating a better WordPress search feature (Slick Search)
Now to work on Slick Search. Another Slickstream engagement suite alternative that won't break the bank. What we need is a tool plugin called Ajax search lite. You can find that in the WordPress repository. The free version is fine.
We can either use the search feature on the sidebar but we can also put another search box at the top menu bar. With a regular WordPress search box, nothing happens as you enter text in a search box. You must hit enter before anything happens. WordPress needs to refresh the page.
Set the “replace the theme search for Ajax search Lite form” option to On and click Save Options. The search box should magically change and now you can get suggestions as you type.
What if we want the search box to appear in the menu bar? Astra does have it's own really nice search feature. But here’s how to use the new plugin search in the top right of your website.
Open up the Customizer.
Grab the Shortcode for Ajax Search Lite. In the Header Primary Menu option in the customizer, look for where it says Last Item In Menu. Change this to HTML. Add the shortcode and save. You should see the same box appear in the menu as you already have on the sidebar.
And that's it, a much cheaper alternative that offers the same experience on desktop and mobile.
