One common question users ask is how to add a slider to the Astra theme, since it does not include a built-in slider. If you want to add an image slider, post carousel, or hero section slider in Astra, you’ll need to use Gutenberg blocks, WordPress slider plugins, or a page builder like Elementor.
In this Astra theme slider tutorial, you’ll learn beginner-friendly and advanced methods. I’ll cover Spectra Gutenberg blocks, Smart Slider 3, and Elementor, so you can choose the best option for your website’s design and performance needs.
Table Of Contents
Does Astra Theme Have a Built-In Slider?
No, the Astra theme does not include a native slider by default. This theme focuses on speed and flexibility, which is why it relies on WordPress blocks and third-party plugins for advanced features like sliders.
However, Astra is fully compatible with:
- Gutenberg block sliders
- Popular WordPress slider plugins
- Page builders like Elementor and Beaver Builder
This makes it easy to add a responsive slider in Astra without touching any code.
Guidelines To Include Slider In Sites Built With Astra
Astra is a flexible WordPress theme that can extend the site functionality. Let’s see how to display a slider in the Astra WordPress theme!
Method 1: Add Slider in Astra Theme Using Spectra Gutenberg Blocks
Step 1: To add a slider in the Astra theme, you must install the Spectra free plugin developed by the Astra team!
Step 2: After installing the plugin, you may edit your site’s front page or create a new page by clicking “Add New Page.” Now, you have to add slider blocks on that page where you want.
Step 3: Adding two types of sliders in the Astra theme is possible – A standard text-based slider and a post-carousel slider. I am going to incorporate a post-carousel slider.
Adding Carousel Slider In Astra Theme
Look at the image below! Click the “+” button and search for the “Slider” block. You will get the “Post Carousel” option. Pick it!
Step 4: After adding this block, it looks like the following image!
Step 5: Next, you have to do the General settings. Here are the available settings preferences.
1. Text alignment – To fix the slider text alignment – left or center or middle.
2. Post Type – Select the post type, either posts or pages.
3. Taxonomy – By default, posts will be shown by categories; however, you may show them by Tag or both. Look at the following image!
4. Categories – Select the slider content from a particular category or all categories. Image for your reference below!
5. Exclude Current Post – After you enable this preference, it will exclude the current post.
6. Post Per Page – Enter the number of posts you want to display
7. Offset Starting Post – It will skip the number of posts set and will use the next post as the starting post.
8. Order By – Post display-wise, Date Title Random or Menu
9. Order – Ascending or Descending
10. Columns – You must select how many columns you want.
11. Equal Heights – If the featured images of your posts are in different heights, then you need to activate this option so that it will adjust the heights of other posts. Check the following image.
12. If posts not found – if anyone searches on your site and there is no post on your site, the message will display what you gave in this box.
Step 6: Now, let’s do the Carousel settings. Have a glace at the below screenshot, all the preferences are self-explanatory! If you have any doubts, please ask!
Step 7: You have to do the image settings now! See the direct settings, do the Astra Slider plugin setup as you like.
In this setting, the image position can be changed. For example, If you select the option “Top,” you will get the output like this!
See the result when you pick the “Background” option.
Step 8: Here comes the Content settings. All the options are crystal clear. Set up everything as per your requirements.
Step 9: Check the Preset settings and customize as you like!
If you choose the marked option, the output will be like this!
Step 10: Let’s do the “Style” settings! I’m changing the background color.
Getting the output like this!
Step 11: Do the Title settings for Style! All the options are straightforward!
Step 12: It’s time to play with the Advanced Settings. Here, you get the option to make the animation style change.
That’s it! All the settings are simple! Just you have to pick the correct choices.
Adding Text Based Slider In Astra Theme
Let’s see how to add a text based slider in Astra theme?
Step 1: Search the slider in the block section, and add it.
Afer adding slider block, check your site, the slider looks like in the below image.
Step 2: Now the slider is filled with default content, you have to modify it with your text. Let’s see how to change.
Click a specific section, it will change to an editable section to make the modifications.
Step 3: After making the alterations, give the target URL in the “Read More” section.
Click the button and check the right side. It will show the block settings and there, you need to select “Call To Action“. Refer to the image below.
Step 3: Let me tell you how to add the image in this slider.
Select that slider section, go to the right side and click “Enable Icon/Image” section. Now, include an image and select the position. Here is the reference screenshot!
After adding the image, select the position, alignment and image size!
Don’t forget to add some style to the image in style section.
After finishing everything, click the save button and check your site. Here is the output (Left side slider)
Spectra Gutenberg blocks plugin is ideal if you prefer a lightweight setup and want to avoid installing multiple plugins. Since it works natively inside the block editor, it maintains Astra’s performance advantages while offering flexible slider layouts.
Method 2: Add Image Slider in Astra Theme Using Smart Slider 3
Smart Slider 3 is one of the best slider plugins for Astra WordPress theme. It allows you to create fully responsive image sliders, hero sliders, and content sliders that work perfectly.
Steps to Add Smart Slider 3 in Astra Theme
Step 1: Go to WordPress Dashboard > Plugins > Add New
Step 2: Search for Smart Slider 3; Install and activate the plugin
Step 3: Navigate to Smart Slider > New Project
Step 4: Choose a template or start from scratch
Step 5: Customize images, text layers, buttons, and animations
Step 6: Save the slider
To display Smart Slider in the Astra theme, add the slider using the Gutenberg Smart Slider block, Shortcode inside a page/post or Widget area (for headers or footers).
This plugin is suitable for Hero image sliders, landing pages, marketing banners, and advanced animations.
Method 3: Add Slider Using Elementor in Astra Theme
If you are using Elementor with Astra, adding a slider is very straightforward.
Step 1: Create or edit a page with Elementor
Step 2: Drag the Slides or Image Carousel widget
Step 3: Add images, text, and buttons
Step 4: Adjust layout, animations, and responsiveness
Step 5: Publish the page
Note: Elementor sliders offer excellent design flexibility, but they may slightly impact performance compared to Gutenberg-based sliders. It is best for Design-heavy websites, landing pages, and advanced layouts.
Best Slider Settings for Astra Theme
To keep your Astra website fast and SEO-friendly, follow these best practices:
- Use optimized image sizes (avoid uploading large images)
- Enable lazy loading for slider images
- Avoid excessive animations or auto-play speed
- Make sure the slider is mobile responsive
- Use one main slider per page to reduce load time
These optimizations help maintain good Core Web Vitals scores.
Common Slider Issues in Astra Theme (And How to Fix Them)
1. When Slider does not display, try these!
- Check if the plugin is activated
- Clear cache and regenerate files
- Disable conflicting plugins temporarily
2. When the full-width slider is not working, do the following
- Set page layout to Full Width / Stretched
- Disable Astra’s default content padding
3. If there are any mobile layout issues, try the following!
- Adjust responsive settings inside the slider plugin
- Reduce text size for smaller screens
Frequently Asked Questions
Is the Gutenberg slider better than plugins for the Astra Theme?
Gutenberg sliders are lighter and faster, while plugins offer more design and animation options.
How do I make the slider full-width in Astra?
Use the Full Width layout in your slider settings, and ensure the Astra template/container supports full-width.
Does adding a slider slow down my site?
Sliders can impact page speed. I recommend lazy-loading, optimized images, and lightweight plugins.
Why is my slider not showing in Astra?
Check these possible reasons: missing shortcode block, JS conflict from another plugin, or container width settings.
Final Recommendation: Which Astra Slider Method Should You Use?
- Use Spectra Gutenberg Blocks if you want speed and simplicity
- Install Smart Slider 3 for advanced hero sliders and marketing pages
- Use Elementor if design flexibility matters more than minimalism
No matter which method you choose, Astra’s flexibility ensures smooth integration.
Wrapping Up
Adding a slider to the site built with Astra theme is possible through several ways. You may go with the slider plugin or a page builder to display the slider in your website. You may also use the shortcodes or header & footer builder to get the job done.
In this blog post, I have explained the simple way to add a slider in the Astra theme. The block settings might look detailed for you, but it is simple to customize. No complicated settings are involved here. I added enough screenshots to make it easier for you to understand.
The Slider enhances the functionality and aesthetics of your WordPress site. This visually appealing feature encourages your readers to engage with the content and prompts them to respond to your call to action. Pick the suitable method to add the Astra theme slider.
Other Astra Theme Tutorials
How To Add Top & Search Bar In Astra?
How To Display Related Posts In Astra Theme?
