How To Use The Blog Widget Zinset Skin By Prime Slider

In this documentation, we will discuss the customization of the Blog widget, brought to you by the Prime Slider addon for Elementor.

Enable The Blog Widget

To use the Blog widget from Prime Slider, first, you have to enable the widget.

1. Go to WordPress dashboard > Prime Slider Plugin dashboard.

2. Then, Click the Core Widgets Tab.

3. Search the Blog Widget Name.

4. Enable the Blog Widget.

5. Hit the Save Settings Button.

Inserting The Blog widget

Work With The Content Tab

Layout Section

Go to Content > Layout

1. Skin: This option allows you to change the slider skin to Default, Coral, Zinset, or Folio. Here, we selected the skin type as Zinset.

2. Slider Ratio: You can adjust the slider ratio to width & height with this option.

3. Minimum Height: You can adjust the slider height with this option.

4. Enable Response Height: Enable the switcher to set the slider height as responsive for all device.

5. Content Max Width: You can change the width of the content with this option.

6. Image Resolution: You can change the image resolution with this option.

7. Background Image Setting: You can make changes to the background image with this option. Here you will get position, repeat & size options to set up the background image.

8. Show Title: Enable the switcher to show the title to the audience.

9. Title HTML Tag: This option lets you select the heading for the title.

10. Show text: Enable the switcher to show the text/description to the audience.

11. Text Limit: This option allows you to adjust the text’s word limit.

12. Strip Shortcode: This option removes any shortcodes from the blog's main content.

13. Show Social Link: You can show the social icon to the audience by enabling this option.

14. Show Category: Enable the switcher to show the category name to the audience.

15. Show Meta: Enable or disable the switcher to show or hide the meta from the slider.

16. Show Author: Enable or disable the switcher to show or hide the author's name from the slide.

17. Show Date: Enable or disable the switcher to show or hide the post creation date from the slide.

18. Show Comments: Enable or disable the switcher to show or hide the comments from the slide.

19. Show Featured Post: Enable or disable the switcher to show or hide the featured posts on the slide.

20. Show Arrows: Enable or disable the switcher to show or hide the arrows from the slider.

21. Alignment: This option allows you to set the content position to left, center or right.

22. Meta Alignment: This option allows you to set the meta position to left, center or right.

Query Section

Go to Content > Query

1. Source: Select the source for the slider from here. The types of sources are - Posts, Pages, Floating Elements, Downloads, Products, Mega Menu Items, Template Items, Manual Selection, Current Query, Related. Here we selected the type as posts.

2. Limit: You can adjust the limit here of how many posts you want to show in the slider.

3. Include/Exclude Selection: Select the Include / Exclude filter to show/hide specific posts by Terms (Tags/Categories) or Authors. Here, we selected the include field as Author.

4. Author: This option lets you select the author's name whose post you want to add to the slider.

5. Date: You can select the post as per the date of creation with this option.

6. Order By: It controls the data you want to display through title, id, date, author, comment count, menu order & random. Here we selected the order as date.

7. Order: This option controls the order by which data is arranged. There are two types of order. Ascending Order (Starts from the smallest or lowest value and goes to the largest or highest.) & Descending Order (Starts from the largest or highest value and goes to the smallest or lowest.)

8. Ignore Sticky Posts: Enable or Disable the switcher to hide or show the sticky posts.

9. Only Featured Image Post: Enable or disable the switcher to show or hide the featured image post.

10. Query ID: Give your query a custom, unique ID to allow server-side filtering. Learn more about the Query.

11. Featured Items: You can select the featured posts that you want to be visible on the slide with this option.

Social Link Section  

Go to Content > Social Link

1. Close Item: You can delete the Slider item by clicking the Close icon button.

2. Copy Item: This option lets you copy the same item.

3. Add Item: You can add a new item by clicking the “+”Add Item button.

Now, let’s proceed to the inner options of the social icon -

4. Title: You can add a title to your social icon with this option.

5. Link: This option allows you to add a link to the social icon.

6. Choose Icon: You can choose an icon with this option.

Slider Settings Section

Go to Content > Slider Settings

1. Autoplay: By enabling this option, you can automatically play the slides one after another.

2. Autoplay Interval (ms): This option lets you set the time delay between each slide transition.

3. Pause on Hover: Enable the switcher to pause autoplay when the user hovers over the slider.

4. Animation Speed: This option controls how fast the transition animation occurs between slides.

5. Loop: Enable the switcher to go back to the first automatically after the last slide.

6. Kenburns Animation: Enable the switcher to add a smooth zoom-in/out and pan effect on background images.

7. Kenburn Reverse: Enable the switcher to reverse the Kenburns animation direction (zoom-out instead of in, or pan the other way).

Work with The Style Tab

Sliders Section

Go to Style > Sliders

1. Overlay: You can select the overlay with this option.

2. Overlay Color: You can change the overlay color with this option.

3. Content Margin: This option allows you to adjust the space & create gaps around the content.

Title Tab

1. Color: You can change the title color with this option.

2. First Word Color: You can change the first wod color with this option.

3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

4. Text Stroke: This option allows you to add an outline or border around text, creating a visually distinct effect.

5. Title Spacing: You can adjust the space between the title and the meta with this option.

6. Title Spacing: This option allows you to adjust the space and gaps between the title and the met

Social Icon Section

Go to Style > Social Icon

In this Section, we have two tabs. These are Normal & Hover. Let’s start with the Normal Tab -

1. Color: You can change the social icon color with this option.

2. Background Type: You can select the background type to Classic or Gradient from here. Here we selected Classic.

3. Color: You can change the background hover color with this option.

4. Image: You can change the background image with this option.

5. Border Type: You can add a border to the social icon with this option.

6. Border Width: Set the thickness of the border with this option.

7. Border Color: You can change the border color with this option.

8. Border Radius: This option controls the roundness of the border with this option.

9. Padding: You can adjust the inner space of the social icon with this option.

10. Box Shadow: You can add a shadow effect with this option.

11. Icon Size: You can make changes to the social icon size with this option.

12. Icon Spacing: This option allows you to adjust the space between the social icons.

13. Show Tooltip: Enable the switcher to show the icon name when the mouse hovers over the icon.

Now, let’s proceed to the Hover Tab -

14. Color: You can change the button text hover color with this option.

15. Background Type: You can select the background type to Classic or Gradient from here. Here we selected the Classic.

16. Color: You can change the background hover color with this option.

17. Image: You can change the background image with this option.

18. Border Color: You can change the border hover color with this option.

Category Section

Go to Style > Category

In this Section, we have two tabs. These are Normal & Hover. Let’s start with the Normal Tab -

1. Color: You can change the category text color with this option.

2. Background: You can change the background color with this option.

3. Border Type: This option allows you to add a border around the category text.

4. Border Width: Set the thickness of the border with this option.

5. Border Color: You can change the border color with this option.

6. Border Radius: This option controls the roundness of the border.

7. Padding: This option allows you to adjust the inner space and gaps around the category text.

8. Box Shadow: You can add a shadow effect to the category with this option.

9. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Now let’s proceed  to the Hover Tab - 

10. Color: You can change the category text hover color with this option.

11. Background: You can change the background hover color with this option.

12. Border Color: You can change the hover border color with this option.

Meta Section

Go to Style > Meta

1. Container Width: This option allows you to adjust the container width.

In this section, we have two more tabs. These are Icon & Text. Let’s proceed with the Icon Tab -

1. Color: You can change the icon color with this option.

2. Background Type: You can set the background type to classic or gradient from this option. Here, we selected the background type as classic.

3. Color: You can change the background color with this option.

4. Image: You can add or change the image with this option.

5. Border Type: This option allows you to set a border around the icon.

6. Border Width: Set the thickness of the border with this option.

7. Border Color: You can change the border color with this option.

8. Border Radius: This option controls the roundness of the border.

9. Box Shadow: You can set a shadow effect with this option.

10. Size: You can make changes to the icon size with this option.

11. Icon Spacing: You can adjust the space between the icon and the text with this option.

Now, let’s proceed to the Text Tab -

12. Color: You can change the meta text color with this option.

13. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Featured Post (Thumbs) Section

Go to Style > Featured Post (Thumbs)

In this section, we have two more tabs. These are Normal & Hover. Let’s start with the Normal tab first -

1. Glassmorphism: Enable Glassmorphism and the background of each thumbnail gets a blurry effect.

2. Blur Level: You can adjust the blur level of the thumbnails' background with this option.

3. Background Type: This option allows you to set the background to classic or gradient. Here, we selected the background type as classic.

4. Color: You can change the background color with this option.

5. Image: You can change the background image with this option.

6. Color: You can change the title color with this option.

7. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

8. Spacing: You can adjust the space between the title and the text with this option.

9. Color: You can change the text color with this option.

10. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Now, let’s proceed to the Hover Tab -

1. Background Type: This option allows you to set the background to classic or gradient. Here, we selected the background type as classic.

2. Color: You can change the background hover color with this option.

3. Image: You can change the background image with this option.

4. Title Color: You can change the title hover color with this option.

5. Text Color: You can change the text hover color with this option.

Navigation Section

Go to Style > Navigation

In this Section, we have two tabs. These are Normal & Hover. Let’s start with the Normal Tab -

1. Arrows Color: This option allows you to change the arrows' color.

2. Background Type: You can select the background type to Classic or Gradient from here. Here we selected the Classic.

3. Color: You can change the background hover color with this option.

4. Image: You can change the background image with this option.

5. Border Type: This option allows you to add a border.

6. Border Width: Set the thickness of the border with this option.

7. Border Color: You can change the border color with this option.

8. Border Radius: This option controls the roundness of the border with this option.

Now, let’s proceed to the Hover Tab -

9. Arrows Color: You can change the button text hover color with this option.

10. Background Type: You can select the background type to Classic or Gradient from here. Here we selected the Classic.

11. Color: You can change the background hover color with this option.

12. Image: You can change the background image with this option.

13. Border Color: You can change the border hover color with this option.

All done! You have successfully customized the Blog Widget with Zinset Skin on your website.

Video Assist

You can also watch the video tutorial. Learn more about the Blog Widget Zinset Skin. Please visit the demo page for examples.

Thanks for being with us.