Online Audience

How to add Slider in Astra Theme? Settings Explained With Screenshots!

add-slider-in-astra-theme

Are you looking for the best way to add slider in Astra theme to showcase your featured content? You are in the correct place to learn the process.

The Slider enhances the functionality and aesthetics of your WordPress website. When it is well-designed, it will make your site look professional.

No doubt! This visually appealing feature encourages your readers to engage with the content and makes it easier for them to react to your call to action.

Guidelines To Include Slider In Sites Built With Astra

Astra is a flexible WordPress theme to extend the functionality. Let’s see how to display a slider in the Astra WordPress theme!

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 below image! 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!

select-post-carousel-block

Step 5: Next, you have to do the General settings. Here are the available settings preferences.

astra-carousel-general-settings

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 through Tag or both. Look at the following image!

taxonomy-settings-slider

4. Categories – Select the slider content from the particular or all categories. Image for your reference below!

slider-content-categories

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 or title or 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.

adjust-height-astra-slider

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!

carousel-settings

Step 7: You have to do the image settings now! See the direct settings, just setup everything as you like.

astra-carousel-slider-image-settings

In this setting, it is possible to change the image position. For example, If you select the option “Top,” you will get the output like this!

image-position-slider

See the result when you pick the “Background” option.

carosel-slider-output-example

Step 8: Here come the Content settings. All the options are crystal clear. Set up everything as per your requirements.

content-settings-astra-slider

Step 9: Check the Preset settings and customize as you like!

preset-settings-slider-astra

If you choose the marked option, the output will be like this!

preset-output

Step 10: Let’s do the “Style” settings! I’m changing the background color.

style-settings-astra-wordpress-theme

Getting the output like this!

slider-output-background-color-change

Step 11: Do the Title settings for Style! All the options are straightforward!

style-settings-astra-slider

Step 12: It’s time to play with the Advanced Settings. Here, you get the option to make the animation style change.

advanced-slider-settings

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.

adding-text-based-slider-astra-theme

Afer adding slider block, check your site, the slider looks like in the below image.

text-based-slider-example

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.

edit-text-slider-astra-theme

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.

general-slider-settings-call-to-action

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!

enable-image-section-astra-text-slider

After adding the image, select the position, alignment and image size!

add-image-text-based-slider

Don’t forget to add some style to the image in style section.

style-settings-astra-slider

After finishing everything, click the save button and check your site. Here is the output (Left side slider)

text-slider-astra-output

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 slider in 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 for your easy understanding.

The post How to add Slider in Astra Theme? Settings Explained With Screenshots! appeared first on WPGLOSSY.

Leave a Comment