{"id":10891,"date":"2020-06-04T09:31:57","date_gmt":"2020-06-04T09:31:57","guid":{"rendered":"https:\/\/fatfrogmedia.com\/?p=10891"},"modified":"2023-08-22T09:31:31","modified_gmt":"2023-08-22T09:31:31","slug":"carousel-elementor-astra-theme","status":"publish","type":"post","link":"https:\/\/fatfrogmedia.com\/carousel-elementor-astra-theme\/","title":{"rendered":"Slickstream Alternative: Blog Post Carousel With Free Elementor and Astra Pro Theme"},"content":{"rendered":"\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe loading=\"lazy\" title=\"Create a Blog Post Carousel With Elementor and Astra Pro Theme\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/VWEAEcwgUcs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p>Build a simple <strong>carousel header<\/strong> 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. <\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>This post was inspired by a product called the Slickstream engagement suite, which gives you the option to place a &#8220;film strip&#8221; 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. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Build a Free WordPress Carousel Plugin<\/h2>\n\n\n\n<p>Today we're going to look at two of the four options that Slickstream gives you. <a rel=\"noopener\" href=\"https:\/\/www.slickstream.com\/\" target=\"_blank\">Slickstream<\/a> is quite expensive at $25 minimum a month. (The other features that you get with the tools are the \u201cheartbeat\u201d and \u201cfavorites\u201d tools &#8211; but we won't cover them here. You can use <a href=\"https:\/\/marketingplatform.google.com\/about\/analytics\/\" data-type=\"link\" data-id=\"https:\/\/marketingplatform.google.com\/about\/analytics\/\" target=\"_blank\" rel=\"noopener\">Google Analytics<\/a> 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).<\/p>\n\n\n\n<p>You will need the <a href=\"https:\/\/fatfrogmedia.com\/go\/astra\" target=\"_blank\" rel=\"noopener\">Astra theme from Brainstorm Force<\/a> &#8211; an excellent <strong>WordPress<\/strong> theme. It's one of the best WordPress themes and it's super lightweight. It also comes with tons of features.<\/p>\n\n\n\n<p>One of the most important features in the <strong>Pro Version of Astra<\/strong> is the ability to create <strong>custom headers<\/strong> and <strong>custom locations<\/strong> 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.<\/p>\n\n\n\n<p>You will also need the <a rel=\"noopener\" href=\"https:\/\/fatfrogmedia.com\/go\/ea-elementor\" target=\"_blank\">Essential add ons for Elementor plugin<\/a>. We're also going to use the <a rel=\"noopener\" href=\"https:\/\/fatfrogmedia.com\/go\/elementor\" target=\"_blank\">Elementor page builder<\/a>. We use the free version, not a problem.<\/p>\n\n\n\n<ul>\n<li>Create a custom layout in Elementor. Let's call this Filmstrip 2.<\/li>\n\n\n\n<li>Edit with Elementor. Search for carousel in the blocks section.<\/li>\n\n\n\n<li>Look for \u201cPost Carousel\u201d 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 &#8220;posts&#8221; for the moment.&nbsp;<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>Next, set visible items to four.&nbsp;<\/li>\n\n\n\n<li>Slider speed: Set to 1600 or slower (higher).<\/li>\n\n\n\n<li>Set Infinite Loop to yes. Pause on hover: yes &#8211; That means when we hover over this element with the mouse, it will actually stop looping.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>&#8220;Arrows&#8221; 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.<\/p>\n\n\n\n<ul>\n<li>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.&nbsp;<\/li>\n\n\n\n<li>Go to the <strong>Font Awesome<\/strong> website and choose from the 8000 icons.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>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 &#8220;Canvas&#8221;. <\/li>\n<\/ul>\n\n\n\n<p>Go to the dashboard and change to Elementor Canvas and click update. Now it\u2019s a standalone custom layout. Choose where exactly to display the &#8220;layout&#8221;. You've got a ton of options in the Astra custom layout settings. You could make the \u201clayout\u201d a header but you can also set it as a \u201chook\u201d. And with hooks you've got tons of options for customizations. <\/p>\n\n\n\n<ul>\n<li>Set the option to Header. <\/li>\n\n\n\n<li>Set &#8220;Display on&#8221; to &#8220;all posts&#8221; if you're running a blog. Or in this case, set it to the page you\u2019re working on. <\/li>\n<\/ul>\n\n\n\n<p>After saving and refreshing we can see the slider carousel across the top.<\/p>\n\n\n\n<ul>\n<li>To make the carousel full width, edit the custom layout with Elementor again.<\/li>\n\n\n\n<li>Select the Elementor section and stretch the section (using the stretch section selector). Click \u201cfull width\u201d. Refresh and now you\u2019ve got a full width header.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>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 \u201chook\u201d. The Astra <strong>Visual Hooks page<\/strong> shows you where you can place the layout. Put it under \u201centry content before\u201d. Refresh, and view the carousel below the title.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a better WordPress search feature (Slick Search)<\/h2>\n\n\n\n<p>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 <a rel=\"noopener\" href=\"https:\/\/wordpress.org\/plugins\/ajax-search-lite\/\" target=\"_blank\">Ajax search lite<\/a>. You can find that in the WordPress repository. The free version is fine.<\/p>\n\n\n\n<p>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.&nbsp;<\/p>\n\n\n\n<p>Set the \u201creplace the theme search for Ajax search Lite form&#8221; option to On and click Save Options. The search box should magically change and now you can get suggestions as you type.<\/p>\n\n\n\n<p>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\u2019s how to use the new plugin search in the top right of your website.<\/p>\n\n\n\n<p>Open up the Customizer.<\/p>\n\n\n\n<p>Grab the Shortcode for Ajax Search Lite. In the <strong>Header Primary Menu<\/strong> 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.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>And that's it, a much cheaper alternative that offers the same experience on desktop and mobile.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><picture><source srcset=\"https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/carousel-wordpress-astra-elementor-slickstream-1.webp 600w,https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/carousel-wordpress-astra-elementor-slickstream-1-200x300.webp 200w\" sizes=\"(max-width: 600px) 100vw, 600px\" type=\"image\/webp\"><img src=\"https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/carousel-wordpress-astra-elementor-slickstream-1.jpg\" height=\"900\" width=\"600\" srcset=\"https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/carousel-wordpress-astra-elementor-slickstream-1.jpg 600w, https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/carousel-wordpress-astra-elementor-slickstream-1-200x300.jpg 200w\" sizes=\"(max-width: 600px) 100vw, 600px\" class=\"wp-image-10901 sp-no-webp\" alt=\"Carousel Wordpress Astra Elementor Slickstream 1\" loading=\"lazy\" decoding=\"async\"  > <\/picture><\/figure>\n","protected":false},"excerpt":{"rendered":"<p> [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"Slickstream Alternative: Post Carousel With Elementor and Astra","_seopress_titles_desc":"Bloggers are considering using Slickstream as a way to improve engagement &amp; site search. But it&#039;s very expensive. Here&#039;s a much cheaper alternative.","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"12620","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[82],"tags":[],"featured_image_urls":{"full":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme.png",1280,720,false],"thumbnail":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-150x150.png",150,150,true],"medium":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-300x169.png",300,169,true],"medium_large":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-768x432.png",768,432,true],"large":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-1024x576.png",1024,576,true],"1536x1536":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme.png",1280,720,false],"2048x2048":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme.png",1280,720,false]},"post_excerpt_stackable":"<p>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 &#038; site search. But it&#8217;s a very expensive for what it offers. Here&#8217;s a much cheaper alternative that you can DIY. This post was inspired by a product called the Slickstream&hellip;<\/p>\n","category_list":"<a href=\"https:\/\/fatfrogmedia.com\/category\/wordpress\/\" rel=\"category tag\">WordPress<\/a>","author_info":{"name":"Keith Lang","url":"https:\/\/fatfrogmedia.com\/author\/oo8wq\/"},"comments_num":"0 comments","featured_image_urls_v2":{"full":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme.png",1280,720,false],"thumbnail":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-150x150.png",150,150,true],"medium":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-300x169.png",300,169,true],"medium_large":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-768x432.png",768,432,true],"large":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-1024x576.png",1024,576,true],"1536x1536":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme.png",1280,720,false],"2048x2048":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme.png",1280,720,false]},"post_excerpt_stackable_v2":"<p>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 &#038; site search. But it&#8217;s a very expensive for what it offers. Here&#8217;s a much cheaper alternative that you can DIY. This post was inspired by a product called the Slickstream&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/fatfrogmedia.com\/category\/wordpress\/\" rel=\"category tag\">WordPress<\/a>","author_info_v2":{"name":"Keith Lang","url":"https:\/\/fatfrogmedia.com\/author\/oo8wq\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme.png",1280,720,false],"thumbnail":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-150x150.png",150,150,true],"medium":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-300x169.png",300,169,true],"medium_large":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-768x432.png",768,432,true],"large":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme-1024x576.png",1024,576,true],"1536x1536":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme.png",1280,720,false],"2048x2048":["https:\/\/fatfrogmedia.com\/wp-content\/uploads\/2020\/06\/how-to-create-a-carousel-with-elementor-and-astra-wordpress-theme.png",1280,720,false]},"uagb_author_info":{"display_name":"Keith Lang","author_link":"https:\/\/fatfrogmedia.com\/author\/oo8wq\/"},"uagb_comment_info":0,"uagb_excerpt":"[&hellip;]","_links":{"self":[{"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/posts\/10891"}],"collection":[{"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/comments?post=10891"}],"version-history":[{"count":0,"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/posts\/10891\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/media\/10899"}],"wp:attachment":[{"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/media?parent=10891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/categories?post=10891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatfrogmedia.com\/wp-json\/wp\/v2\/tags?post=10891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}