Create a Blog Post Carousel With Elementor and Astra Pro Theme

Описание

How To Create a Blog Post Carousel With Elementor and Astra Theme in the style of Slickstream

Blog Post: https://fatfrogmedia.com/carousel-elementor-astra-theme/
Astra Theme: https://bit.ly/2U9FPCH
Elementor Page Builder: https://bit.ly/2Az5j5w
SlickStream: https://bit.ly/3dzJ91B
Essential add ons for Elementor: https://bit.ly/essaddelementor

Partial Transcript:
Let’s build a very simple carousel header that runs across the top of your blog on a blog post page or a page. We can put this carousel, pretty much anywhere we like on the website. But I'm just gonna demonstrate, across the top of a particular page. Now I've called it Slickstream. The reason being, that I got the inspiration from a product called slick stream.
[00:00:26] So, what you've got is a film strip that runs across the top of blog posts. And you've also got some other tools like “Slicksearch”, a quick way to find products. When you search for a word the search bar begins to show you the results based on what you've already typed in.
[00:00:53] 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 it are the “heartbeat” and “favorites” tools.
[00:01:26] You can use Google Analytics for the heartbeat feature or there's plenty of other free tools that will give you great insights into what's going on in your website.
[00:01:47] 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.
[00:02:11] 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.
[00:02:35] You will also need the Essential add ons for Elementor plugin. We're gonna use the Elementor theme builder. We use the free version, not a problem.
[00:02:43] Create a custom layout in Elementor
[00:02:51] Let's call this Filmstrip 2.
[00:03:02] Edit with Elementor.
[00:03:06] So once that is ready and we've got the Essential add-ons for Elementor installed, we can just search for carousel in the blocks section.
[00:03:22] 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.
[00:03:53] 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.
[00:04:06] Next, set visible items to four.
[00:04:17] Slider speed: Set to 1600 or slower (higher).
[00:04:26] 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.
[00:04:48] 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.
[00:05:19] Go to the Font Awesome website and choose from the 8000 icons.
[00:05:41] 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.
[00:05:57] 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.
[00:06:21] 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 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.
[00:07:12] To make the carousel full width, edit the custom layout with Elementor again.
[00:07:29] 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.
[00:07:46] 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.