<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>How To &#8211; Sliderberg</title>
	<atom:link href="https://sliderberg.com/blog/category/how-to/feed/" rel="self" type="application/rss+xml" />
	<link>https://sliderberg.com</link>
	<description>Slide Anything!</description>
	<lastBuildDate>Tue, 24 Jun 2025 11:33:36 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://sliderberg.com/wp-content/uploads/2025/05/Sliderberg-128.png</url>
	<title>How To &#8211; Sliderberg</title>
	<link>https://sliderberg.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>How to Add a Carousel Slider in WordPress</title>
		<link>https://sliderberg.com/blog/how-to-add-a-carousel-slider-in-wordpress/</link>
					<comments>https://sliderberg.com/blog/how-to-add-a-carousel-slider-in-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[rajankur003]]></dc:creator>
		<pubDate>Tue, 24 Jun 2025 11:32:38 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=853</guid>

					<description><![CDATA[Carousel sliders are a sleek way to display multiple items—such as images, testimonials, or products—side by side, allowing users to scroll through them horizontally. Instead of showing one slide at a time, a carousel keeps your layout compact while allowing viewers to explore more. With Sliderberg, you can create a responsive carousel slider directly within [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Carousel sliders are a sleek way to display multiple items—such as images, testimonials, or products—side by side, allowing users to scroll through them horizontally. </p>



<p>Instead of showing one slide at a time, a carousel keeps your layout compact while allowing viewers to explore more. With <strong><a href="https://wordpress.org/plugins/sliderberg/" target="_blank" rel="noreferrer noopener">Sliderberg</a></strong>, you can create a responsive carousel slider directly within the WordPress editor, eliminating the need for extra tools or code.</p>



<p>This guide walks you through the entire process, from adding the slider block to customizing the carousel layout. Take a look at the demo of the carousel slide I&#8217;m going to create today. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img fetchpriority="high" decoding="async" width="898" height="646" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-20-11.gif" alt="How to add a carousel slider in WordPress" class="has-border-color has-main-accent-border-color wp-image-881" style="border-width:1px;border-radius:3px"/></figure>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Step 1: Install and Activate Sliderberg</h3>



<p>First, you need to install the Sliderberg plugin:</p>



<ol class="wp-block-list">
<li>Go to <strong>Plugins → Add New</strong> from your WordPress dashboard</li>



<li>Search for <strong>Sliderberg</strong></li>



<li>Click <strong>Install Now</strong>, then <strong>Activate</strong></li>
</ol>



<p>Once activated, the Sliderberg block becomes available inside the editor.</p>



<figure class="wp-block-image aligncenter has-custom-border"><img decoding="async" width="1024" height="554" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png" alt="How to Create a Slider With a Call-to-Action Button in WordPress" class="has-border-color has-main-accent-border-color wp-image-480" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-300x162.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-768x416.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44.png 1216w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-background" style="background-color:#3f82c475;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">For further detailed information, please refer to our documentation on &#8220;<strong><a href="https://sliderberg.com/docs/how-to-install-and-activate-sliderberg/" target="_blank" rel="noreferrer noopener">How to Install and Activate Sliderberg</a></strong>.&#8221;</p>



<h3 class="wp-block-heading">Step 2: Insert the Sliderberg Block and Enable Carousel</h3>



<p>Open the post or page where you want to insert the carousel slider.</p>



<ol class="wp-block-list">
<li>Click the&nbsp;<strong>+</strong>&nbsp;icon to insert a new block.</li>



<li>Search for&nbsp;<strong>Sliderberg</strong>&nbsp;in the block search box.</li>



<li>Select the Slideberg block, and it will be inserted.</li>
</ol>



<figure class="wp-block-image aligncenter has-custom-border"><img decoding="async" width="928" height="606" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png" alt="" class="has-border-color has-main-accent-border-color wp-image-482" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png 928w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-300x196.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-768x502.png 768w" sizes="(max-width: 928px) 100vw, 928px" /></figure>



<p>Select&nbsp;<strong>“Blocks Slider”</strong>&nbsp;after inserting the Sliderberg block.</p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="916" height="684" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png" alt="" class="has-border-color has-main-accent-border-color wp-image-483" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png 916w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-300x224.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-768x573.png 768w" sizes="auto, (max-width: 916px) 100vw, 916px" /></figure>



<p>Now do the following.</p>



<ol class="wp-block-list">
<li>Select the slider.</li>



<li>Click on the Carousel Settings.</li>



<li>Now activate the &#8220;Enable Carousel Mode.&#8221;</li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="810" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_13-12-25.png" alt="" class="has-border-color has-main-accent-border-color wp-image-859" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_13-12-25.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_13-12-25-300x257.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_13-12-25-768x659.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<h3 class="wp-block-heading">Step 3: Design Your First Slider</h3>



<p>Upload Images or select a Solid color from the color picker.</p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="948" height="712" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_13-47-04-1.png" alt="" class="has-border-color has-main-accent-border-color wp-image-801" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_13-47-04-1.png 948w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_13-47-04-1-300x225.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_13-47-04-1-768x577.png 768w" sizes="auto, (max-width: 948px) 100vw, 948px" /></figure>



<p>For my case, I will add an image.</p>



<ol class="wp-block-list">
<li>Select the Upload option to add a custom image.</li>



<li>Select Your Image file from your directory and click “Open.”</li>



<li>Click the Select button, and it will be inserted into the editor.</li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="880" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_13-55-51.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-861" style="border-width:1px;border-radius:3px"/></figure>



<h3 class="wp-block-heading">Step 4: Add Text Content to your Slide</h3>



<p>Now, add text content to your slide. You can add Headings and paragraph blocks as text content.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="948" height="744" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-00-21.png" alt="" class="has-border-color has-main-accent-border-color wp-image-864" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-00-21.png 948w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-00-21-300x235.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-00-21-768x603.png 768w" sizes="auto, (max-width: 948px) 100vw, 948px" /></figure>



<p>If you want, you can also delete those headings and paragraph blocks inside the carousel slider, just like any other block you delete. To delete a block: </p>



<ol class="wp-block-list">
<li>Select the Block you want to delete.</li>



<li>Click the Three Dots.</li>



<li>Select the Delete option. </li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="790" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-03-24.png" alt="" class="has-border-color has-main-accent-border-color wp-image-865" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-03-24.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-03-24-300x251.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-03-24-768x643.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>You can choose the color of the text content from the right side panel.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="822" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-56-27.png" alt="" class="has-border-color has-main-accent-border-color wp-image-868" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-56-27.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-56-27-300x262.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_14-56-27-768x670.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<h3 class="wp-block-heading">Step 5: Add More Slides</h3>



<ul class="wp-block-list">
<li>Click the Add Slide to add a new slide to the slider.</li>



<li>Repeat steps 3 and 4. </li>
</ul>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="776" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_15-54-38.png" alt="" class="has-border-color has-main-accent-border-color wp-image-870" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_15-54-38.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_15-54-38-300x247.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_15-54-38-768x633.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<h3 class="wp-block-heading">Alternative Method: Duplicate the Current Slide</h3>



<ol class="wp-block-list">
<li>Click on the Duplicate Slide Button</li>



<li>Change the Text Content</li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="768" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_15-58-17.png" alt="" class="has-border-color has-main-accent-border-color wp-image-871" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_15-58-17.png 946w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_15-58-17-300x244.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_15-58-17-768x623.png 768w" sizes="auto, (max-width: 946px) 100vw, 946px" /></figure>



<p>Next, follow the following: </p>



<ol class="wp-block-list">
<li>Select the slide. </li>



<li>Click on the Background Settings.</li>



<li>Click Replace Image. </li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="782" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_16-00-09.png" alt="" class="has-border-color has-main-accent-border-color wp-image-872" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_16-00-09.png 946w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_16-00-09-300x248.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_16-00-09-768x635.png 768w" sizes="auto, (max-width: 946px) 100vw, 946px" /></figure>



<p>Follow the following steps. </p>



<ul class="wp-block-list">
<li>Upload your custom image or select from the media library. </li>



<li>Repeat the <strong>Alternative Method</strong> if you want to add more slides. </li>
</ul>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="876" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_16-06-33.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-873" style="border-width:1px;border-radius:3px"/></figure>



<div class="wp-block-group has-border-color has-main-accent-border-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-8217c53c wp-block-group-is-layout-constrained" style="border-width:1px;border-radius:3px;background-color:#a7c6e4;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
<p>If you choose the “<strong>Add Slide</strong>” button for adding a slide, you have to design the layout again. The <strong>Duplicate button</strong> lets you duplicate the layout, including the image.</p>
</div>



<h3 class="wp-block-heading">Step 6: Customize the Slideshow Settings</h3>



<p>Click the outer&nbsp;<strong>Sliderberg block</strong>&nbsp;(not a single slide) to open the settings sidebar. From here, you can:</p>



<ol class="wp-block-list">
<li>Go to Animation Settings</li>



<li>Set Transition Effects and Duration</li>



<li>Lastly, set Transition Easing.</li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="802" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-00-04.png" alt="" class="has-border-color has-main-accent-border-color wp-image-875" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-00-04.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-00-04-300x255.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-00-04-768x652.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>Next, go to <strong>Autoplay Settings </strong>to modify options related to Autoplay.</p>



<ol class="wp-block-list">
<li>Activate the “Enable Autoplay” option.</li>



<li>Adjust Autoplay Speed.</li>



<li>Enable the “Pause on Hover” option.</li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="760" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-01-58.png" alt="" class="has-border-color has-main-accent-border-color wp-image-876" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-01-58.png 946w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-01-58-300x241.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-01-58-768x617.png 768w" sizes="auto, (max-width: 946px) 100vw, 946px" /></figure>



<p>To adjust the <strong>navigation</strong>, explore the <strong>Navigation Settings</strong>. There, you can <strong>modify the navigation type, placement, shape, size, arrow color, background color, opacity, and other settings</strong>.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="878" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-04-36.png" alt="" class="has-border-color has-main-accent-border-color wp-image-877" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-04-36.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-04-36-300x279.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-04-36-768x714.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>Lastly, take a look at the Carousel Settings. In the Carousel Settings, you can adjust the number of slides to show, slides to scroll, and slide spacing. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="1406" height="878" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-14-37.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-878" style="border-width:1px;border-radius:3px"/></figure>



<p>Keep the Infinite Loop option enabled if you want your carousel slider to show images continuously. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="920" height="872" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-16-40.png" alt="" class="has-border-color has-main-accent-border-color wp-image-879" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-16-40.png 920w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-16-40-300x284.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-24_17-16-40-768x728.png 768w" sizes="auto, (max-width: 920px) 100vw, 920px" /></figure>



<p>And that&#8217;s all the settings to adjust to create a carousel slider in WordPress. The final demo is below. </p>


<div style="--swiper-navigation-color:#ffffff;--swiper-navigation-background-color:rgba(0, 0, 0, 0.5);--sliderberg-nav-opacity:1;--swiper-pagination-color:#ffffff;--swiper-pagination-bullet-inactive-color:#6c757d;--swiper-pagination-bullet-inactive-opacity:1;--sliderberg-min-height:400px;--sliderberg-easing:ease;" class="sliderberg-nav-circle sliderberg-nav-medium sliderberg-effect-slide sliderberg-nav-h-space-between sliderberg-nav-v-center sliderberg-dots-h-center sliderberg-dots-v-bottom sliderberg-pagination-bullets alignwide wp-block-sliderberg-sliderberg"><div class="sliderberg-swiper-wrap"><div class="swiper sliderberg-swiper" data-swiper-data='{&quot;speed&quot;:500,&quot;loop&quot;:true,&quot;slidesPerView&quot;:3,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:20,&quot;keyboard&quot;:{&quot;enabled&quot;:true},&quot;a11y&quot;:{&quot;prevSlideMessage&quot;:&quot;Previous slide&quot;,&quot;nextSlideMessage&quot;:&quot;Next slide&quot;},&quot;effect&quot;:&quot;slide&quot;,&quot;autoplay&quot;:{&quot;delay&quot;:5000,&quot;disableOnInteraction&quot;:false,&quot;pauseOnMouseEnter&quot;:true},&quot;navigation&quot;:{&quot;nextEl&quot;:&quot;.swiper-button-next&quot;,&quot;prevEl&quot;:&quot;.swiper-button-prev&quot;},&quot;pagination&quot;:{&quot;el&quot;:&quot;.swiper-pagination&quot;,&quot;clickable&quot;:true},&quot;breakpoints&quot;:{&quot;0&quot;:{&quot;slidesPerView&quot;:1,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:10},&quot;768&quot;:{&quot;slidesPerView&quot;:2,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:15},&quot;1024&quot;:{&quot;slidesPerView&quot;:3,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:20}}}'><div class="swiper-wrapper">
<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-07_47_36-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h3 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-391c0a1b0fd0ee7d484740bfbd950544">Budgerigar</h3>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-07_47_18-PM-1.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-123d81814858d2b8d5d7315f42a003b1">Kittens</h2>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-07_47_20-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-97cd2ea26498b2f8a0bdc6abce2204ad"> Corgi</h2>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-07_47_14-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-f03ba379393012881f0c6599ff739fa5">Golden Retriever</h2>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-08_04_48-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-123d81814858d2b8d5d7315f42a003b1">Kittens</h2>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-07_58_09-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-4dd4e3e4692766f9e81384f40dc4485b">All Animals</h2>

</div></div>
</div></div><button class="swiper-button-prev" aria-label="Previous slide"></button><button class="swiper-button-next" aria-label="Next slide"></button><div class="swiper-pagination"></div></div></div>


<p>After completing the carousel slider, save or publish the post or page. </p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Final Thoughts!</h3>



<p>Carousel sliders are a great way to showcase more content in less space, and Sliderberg makes it incredibly simple to build one in WordPress. </p>



<p>With full block support, customizable layout options, and mobile responsiveness built in, you can create carousels that are both beautiful and functional.</p>



<p><strong>Read More!</strong></p>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-1af258bb-acca-4fe3-a45c-6ed7e05d6931"><div class="ub-block-list__layout" style="text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; ">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-13ee4eba-168b-42dd-b55c-3a06d0bdd564">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-add-a-slideshow-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Add a Slideshow in WordPress</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-32f623a4-6062-49e7-8410-759f946f6e79">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-create-a-wordpress-testimonial-slider/" target="_blank" rel="noreferrer noopener">How to Create a WordPress Testimonial Slider</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-0133a2ec-8690-4f49-abe4-02361f5beb59">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-create-an-image-and-text-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Create an Image and Text Slider in WordPress</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-d339ee5d-d60f-4d70-b210-c6be90865a4f">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-overlay-text-on-wordpress-slider-images/" target="_blank" rel="noreferrer noopener">How to Overlay Text on WordPress Slider Images</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-18914bb9-81c2-40b2-8d5b-c2f6880050b3">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-add-a-text-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Add a Text Slider in WordPress the Right Way</a></span>
			</div>
			
		</li>
</div></ul>

<div class="wp-block-ub-social-share" id="ub-social-share-62b38701-8f32-4e30-951b-43fc97dae7aa">
			<div class="social-share-icons align-icons-center orientation-icons-row"><a aria-label="facebook-logo" target="_blank" rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-add-a-carousel-slider-in-wordpress%2F&amp;title=How%20to%20Add%20a%20Carousel%20Slider%20in%20WordPress" class="ub-social-share-facebook-container" style="border-color: #1877f2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-facebook" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#1877f2" fill="#1877f2" width="20" height="20" viewbox="0 0 264 512"><path d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg></span><span style="">share</span>
			</a><a aria-label="twitter-logo" target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-add-a-carousel-slider-in-wordpress%2F&amp;text=How%20to%20Add%20a%20Carousel%20Slider%20in%20WordPress" class="ub-social-share-twitter-container" style="border-color: #1d9bf0; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-twitter" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="color:#1d9BF0" fill="#1d9BF0" width="20" height="20" viewbox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg></span><span style="">tweet</span>
			</a><a aria-label="linkedin-logo" target="_blank" rel="nofollow" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-add-a-carousel-slider-in-wordpress%2F" class="ub-social-share-linkedin-container" style="border-color: #2867b2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-linkedin" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#2867b2" fill="#2867b2" width="20" height="20" viewbox="0 0 448 512"><path d="M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z"></path></svg></span><span style="">share</span>
			</a></div>
		</div>]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-add-a-carousel-slider-in-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Add a Slideshow in WordPress</title>
		<link>https://sliderberg.com/blog/how-to-add-a-slideshow-in-wordpress/</link>
					<comments>https://sliderberg.com/blog/how-to-add-a-slideshow-in-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[rajankur003]]></dc:creator>
		<pubDate>Sun, 22 Jun 2025 09:58:38 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=794</guid>

					<description><![CDATA[Want to display images, text, or videos in a rotating sequence without relying on bulky page builders? A slideshow does exactly that—and with the Sliderberg plugin, you can create one directly inside the WordPress block editor. Sliderberg is fast, flexible, and fully block-based, meaning you can add anything inside each slide: images, text, buttons, videos, [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Want to display images, text, or videos in a rotating sequence without relying on bulky page builders? A slideshow does exactly that—and with the <strong>Sliderberg</strong> plugin, you can create one directly inside the WordPress block editor.</p>



<p>Sliderberg is fast, flexible, and fully block-based, meaning you can add anything inside each slide: images, text, buttons, videos, or even full layouts.</p>



<p>Here’s how to create a beautiful slideshow using Sliderberg in just a few steps. Check out the demo below. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="808" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-55-58.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-812" style="border-width:1px;border-radius:3px"/></figure>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Step 1: Install and Activate Sliderberg</h3>



<p>First, you need to install the Sliderberg plugin:</p>



<ol class="wp-block-list">
<li>Go to <strong>Plugins → Add New</strong> from your WordPress dashboard</li>



<li>Search for <strong>Sliderberg</strong></li>



<li>Click <strong>Install Now</strong>, then <strong>Activate</strong></li>
</ol>



<p>Once activated, the Sliderberg block becomes available inside the editor.</p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="1024" height="554" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png" alt="How to Create a Slider With a Call-to-Action Button in WordPress" class="has-border-color has-main-accent-border-color wp-image-480" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-300x162.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-768x416.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44.png 1216w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-background" style="background-color:#3f82c475;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">For further detailed information, please refer to our documentation on &#8220;<strong><a href="https://sliderberg.com/docs/how-to-install-and-activate-sliderberg/" target="_blank" rel="noreferrer noopener">How to Install and Activate Sliderberg</a></strong>.&#8221;</p>



<h3 class="wp-block-heading">Step 2: Insert Sliderberg Block</h3>



<p>Open the post or page where you want to insert the review slider.</p>



<ol class="wp-block-list">
<li>Click the&nbsp;<strong>+</strong>&nbsp;icon to insert a new block.</li>



<li>Search for&nbsp;<strong>Sliderberg</strong>&nbsp;in the block search box.</li>



<li>Select the Slideberg block, and it will be inserted.</li>
</ol>



<p>Your first review slide is now ready for editing.</p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="928" height="606" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png" alt="" class="has-border-color has-main-accent-border-color wp-image-482" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png 928w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-300x196.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-768x502.png 768w" sizes="auto, (max-width: 928px) 100vw, 928px" /></figure>



<p>Select&nbsp;<strong>“Blocks Slider”</strong>&nbsp;after inserting the Sliderberg block.</p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="916" height="684" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png" alt="" class="has-border-color has-main-accent-border-color wp-image-483" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png 916w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-300x224.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-768x573.png 768w" sizes="auto, (max-width: 916px) 100vw, 916px" /></figure>



<h3 class="wp-block-heading">Step 3: Add Content to Your Slides</h3>



<ol class="wp-block-list">
<li>Upload Images or select a Solid color from the color picker.</li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="948" height="712" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_13-47-04-1.png" alt="" class="has-border-color has-main-accent-border-color wp-image-801" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_13-47-04-1.png 948w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_13-47-04-1-300x225.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_13-47-04-1-768x577.png 768w" sizes="auto, (max-width: 948px) 100vw, 948px" /></figure>



<p>For my case, I will add an image. </p>



<ol class="wp-block-list">
<li>Select the Upload option to add a custom image. </li>



<li>Select Your Image file from your directory and click &#8220;Open.&#8221;</li>



<li>Click the Select button, and it will be inserted into the editor. </li>
</ol>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="948" height="708" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-12-56.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-697" style="border-width:1px;border-radius:3px"/></figure>



<h3 class="wp-block-heading">Step 4: Add Text Content to your Slide</h3>



<p>Now, add text content to your slide. You can add Headings and paragraph blocks as text content. </p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="940" height="788" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-21-11.png" alt="" class="has-border-color has-main-accent-border-color wp-image-704" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-21-11.png 940w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-21-11-300x251.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-21-11-768x644.png 768w" sizes="auto, (max-width: 940px) 100vw, 940px" /></figure>



<p>You can choose the color of the text content from the right side panel.</p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="946" height="874" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-23-38.png" alt="" class="has-border-color has-main-accent-border-color wp-image-705" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-23-38.png 946w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-23-38-300x277.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-23-38-768x710.png 768w" sizes="auto, (max-width: 946px) 100vw, 946px" /></figure>



<h3 class="wp-block-heading">Step 5: Add More Slides</h3>



<ol class="wp-block-list">
<li>Click the Add Slide to add a new slide to the slider.</li>



<li>Click the Duplicate Slide button to add a new duplicate slide of the original.  </li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="752" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-26-17.png" alt="" class="has-border-color has-main-accent-border-color wp-image-802" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-26-17.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-26-17-300x239.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-26-17-768x612.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>If you choose the &#8220;Add Slide&#8221; button, you have to design the layout again. The Duplicate button lets you duplicate the layout, including the image. </p>



<p>If you choose the Duplicate Slide button, replace the image and text content. All styles and layouts will remain intact. </p>



<p>To change the image of the new duplicated slide, </p>



<ol class="wp-block-list">
<li>Select the slide first. </li>



<li>Click &#8220;Background Settings&#8221; on the right side.</li>



<li>Select Replace Image.</li>
</ol>



<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="812" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-34-59.png" alt="" class="has-border-color has-main-accent-border-color wp-image-803" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-34-59.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-34-59-300x259.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-34-59-768x662.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<p>Now replace the image of the slide. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="880" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-38-30.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-804" style="border-width:1px;border-radius:3px"/></figure>



<p>You can also replace your text content. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="808" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-46-26-1.png" alt="" class="has-border-color has-main-accent-border-color wp-image-806" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-46-26-1.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-46-26-1-300x257.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_14-46-26-1-768x657.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p class="has-background" style="background-color:#a7c6e4;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)"><strong>Repeat this process for all your slides, and your slideshow will be completed. </strong></p>



<h3 class="wp-block-heading">Step 6: Customize the Slideshow Settings</h3>



<p>Click the outer <strong>Sliderberg block</strong> (not a single slide) to open the settings sidebar. From here, you can:</p>



<ol class="wp-block-list">
<li>Go to Animation Settings</li>



<li>Set Transition Effects and Duration</li>



<li>Lastly, set Transition Easing.</li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="816" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-22-17.png" alt="" class="has-border-color has-main-accent-border-color wp-image-808" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-22-17.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-22-17-300x259.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-22-17-768x664.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>Next, you can select Autoplay Settings to adjust options related to Autoplay. </p>



<ul class="wp-block-list">
<li>Activate the &#8220;Enable Autoplay&#8221; option. </li>



<li>Adjust Autoplay Speed.</li>



<li>Enable the &#8220;Pause on Hover&#8221; option. </li>
</ul>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="814" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-39-21.png" alt="How to Add a Slideshow in WordPress" class="has-border-color has-main-accent-border-color wp-image-809" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-39-21.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-39-21-300x259.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-39-21-768x664.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<p>In the Navigation Settings, you get the settings related to the navigation controls. You can adjust the navigation type, placement, shape, size, arrow color, background color, opacity, and other settings. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="821" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-41-52.png" alt="" class="has-border-color has-main-accent-border-color wp-image-810" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-41-52.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-41-52-300x261.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-22_15-41-52-768x668.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>The Carousel mode allows you to turn the slide into a carousel. <strong>Since we are demonstrating how to create a slideshow, we will not modify any settings in the carousel. </strong></p>



<p>Here is the full demo of the slideshow. </p>


<div style="--swiper-navigation-color:#ffffff;--swiper-navigation-background-color:rgba(0, 0, 0, 0.5);--sliderberg-nav-opacity:1;--swiper-pagination-color:#ffffff;--swiper-pagination-bullet-inactive-color:#6c757d;--swiper-pagination-bullet-inactive-opacity:1;--sliderberg-min-height:400px;--sliderberg-easing:ease-out;" class="sliderberg-nav-square sliderberg-nav-medium sliderberg-effect-fade sliderberg-nav-h-space-between sliderberg-nav-v-center sliderberg-dots-h-center sliderberg-dots-v-bottom sliderberg-pagination-bullets align wp-block-sliderberg-sliderberg"><div class="sliderberg-swiper-wrap"><div class="swiper sliderberg-swiper" data-swiper-data='{&quot;speed&quot;:600,&quot;loop&quot;:true,&quot;slidesPerView&quot;:1,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:0,&quot;keyboard&quot;:{&quot;enabled&quot;:true},&quot;a11y&quot;:{&quot;prevSlideMessage&quot;:&quot;Previous slide&quot;,&quot;nextSlideMessage&quot;:&quot;Next slide&quot;},&quot;effect&quot;:&quot;fade&quot;,&quot;fadeEffect&quot;:{&quot;crossFade&quot;:true},&quot;autoplay&quot;:{&quot;delay&quot;:5000,&quot;disableOnInteraction&quot;:false,&quot;pauseOnMouseEnter&quot;:true},&quot;navigation&quot;:{&quot;nextEl&quot;:&quot;.swiper-button-next&quot;,&quot;prevEl&quot;:&quot;.swiper-button-prev&quot;},&quot;pagination&quot;:{&quot;el&quot;:&quot;.swiper-pagination&quot;,&quot;clickable&quot;:true}}'><div class="swiper-wrapper">
<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-08_04_48-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-230fd4379343a1ef374bad2ded022342">Hello Kittens!</h2>



<p class="has-base-color has-text-color has-link-color wp-elements-e618bdaaa83105f6c4818509917b6fb1">Kittens are young, playful, and curious baby cats, typically under a year old. They known for their soft fur, big eyes, and tiny paws.</p>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-07_58_09-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-230fd4379343a1ef374bad2ded022342">Hello Kittens!</h2>



<p class="has-base-color has-text-color has-link-color wp-elements-e618bdaaa83105f6c4818509917b6fb1">Kittens are young, playful, and curious baby cats, typically under a year old. They known for their soft fur, big eyes, and tiny paws.</p>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-07_47_18-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-230fd4379343a1ef374bad2ded022342">Hello Kittens!</h2>



<p class="has-base-color has-text-color has-link-color wp-elements-e618bdaaa83105f6c4818509917b6fb1">Kittens are young, playful, and curious baby cats, typically under a year old. They known for their soft fur, big eyes, and tiny paws.</p>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-20-2025-08_01_46-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-029d844b02123961574e0fabd19d1da3">Hello Corgi!</h2>



<p class="has-base-color has-text-color has-link-color wp-elements-97c7c7672f8a696cfbd7850b371eeaf7">Corgi&#8217;s are young, playful, and curious baby dogs, typically under a year old. They known for their soft fur, big eyes, and tiny paws.</p>

</div></div>
</div></div><button class="swiper-button-prev" aria-label="Previous slide"></button><button class="swiper-button-next" aria-label="Next slide"></button><div class="swiper-pagination"></div></div></div>


<p>Before doing anything else, you must save or publish your post or page. </p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Final Thoughts!</h3>



<p>Sliderberg lets you create stylish, customizable slideshows using nothing but the WordPress editor. If you want to showcase photos, rotating testimonials, or promoting services, you can build it quickly without relying on shortcodes or external editors.</p>



<p>Give it a try and turn your static content into something more interactive—one slide at a time.</p>



<p><strong>Read More!</strong></p>



<ul class="wp-block-list">
<li><a href="https://sliderberg.com/how-to-create-a-wordpress-testimonial-slider/" target="_blank" rel="noreferrer noopener">How to Create a WordPress Testimonial Slider</a></li>



<li><a href="https://sliderberg.com/how-to-create-an-image-and-text-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Create an Image and Text Slider in WordPress</a></li>



<li><a href="https://sliderberg.com/how-to-overlay-text-on-wordpress-slider-images/" target="_blank" rel="noreferrer noopener">How to Overlay Text on WordPress Slider Images</a></li>



<li><a href="https://sliderberg.com/how-to-add-a-text-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Add a Text Slider in WordPress the Right Way</a></li>



<li><a href="https://sliderberg.com/how-to-build-a-review-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Build a Review Slider in WordPress</a></li>
</ul>


<div class="wp-block-ub-social-share" id="ub-social-share-daf4e615-2f93-4d74-b63f-3e198da61fa7">
			<div class="social-share-icons align-icons-center orientation-icons-row"><a aria-label="facebook-logo" target="_blank" rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-add-a-slideshow-in-wordpress%2F&amp;title=How%20to%20Add%20a%20Slideshow%20in%20WordPress" class="ub-social-share-facebook-container" style="border-color: #1877f2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-facebook" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#1877f2" fill="#1877f2" width="20" height="20" viewbox="0 0 264 512"><path d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg></span><span style="">share</span>
			</a><a aria-label="twitter-logo" target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-add-a-slideshow-in-wordpress%2F&amp;text=How%20to%20Add%20a%20Slideshow%20in%20WordPress" class="ub-social-share-twitter-container" style="border-color: #1d9bf0; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-twitter" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="color:#1d9BF0" fill="#1d9BF0" width="20" height="20" viewbox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg></span><span style="">tweet</span>
			</a><a aria-label="linkedin-logo" target="_blank" rel="nofollow" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-add-a-slideshow-in-wordpress%2F" class="ub-social-share-linkedin-container" style="border-color: #2867b2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-linkedin" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#2867b2" fill="#2867b2" width="20" height="20" viewbox="0 0 448 512"><path d="M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z"></path></svg></span><span style="">share</span>
			</a></div>
		</div>]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-add-a-slideshow-in-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Create a WordPress Testimonial Slider</title>
		<link>https://sliderberg.com/blog/how-to-create-a-wordpress-testimonial-slider/</link>
					<comments>https://sliderberg.com/blog/how-to-create-a-wordpress-testimonial-slider/#respond</comments>
		
		<dc:creator><![CDATA[Moinul Maruf]]></dc:creator>
		<pubDate>Fri, 20 Jun 2025 23:28:26 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=735</guid>

					<description><![CDATA[Visitors often trust the opinions of others more than your own claims. That’s why testimonials work. But listing them all in one place can feel cluttered or easily overlooked. A testimonial slider fixes that by showing one quote at a time and letting each voice stand out. There are many ways to build sliders in [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Visitors often trust the opinions of others more than your own claims. That’s why testimonials work. But listing them all in one place can feel cluttered or easily overlooked. A testimonial slider fixes that by showing one quote at a time and letting each voice stand out.</p>



<p>There are many ways to build sliders in WordPress, but not all of them work well with text. Some require shortcodes. Others force you into templates. If you’re using the block editor and want full control over the content layout, a block-based slider is a better choice.</p>



<p>This guide will show you how to create a testimonial slider using <a href="http://www.wordpress.org/plugin/sliderberg" target="_blank" rel="noreferrer noopener">Sliderberg</a>. You’ll use regular blocks to add your content, and everything stays inside the editor with no special formatting or extra tools.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>Create a WordPress Testimonial Slider</strong></h2>


<div style="--swiper-navigation-color:#000000;--swiper-navigation-background-color:#e9a4ed;--sliderberg-nav-opacity:1;--swiper-pagination-color:#ffffff;--swiper-pagination-bullet-inactive-color:#ff09e3;--swiper-pagination-bullet-inactive-opacity:1;--sliderberg-min-height:400px;--sliderberg-easing:ease-in-out;" class="sliderberg-nav-square sliderberg-nav-large sliderberg-effect-fade sliderberg-nav-h-space-between sliderberg-nav-v-center sliderberg-dots-h-center sliderberg-dots-v-bottom sliderberg-pagination-bullets align wp-block-sliderberg-sliderberg"><div class="sliderberg-swiper-wrap"><div class="swiper sliderberg-swiper" data-swiper-data='{&quot;speed&quot;:700,&quot;loop&quot;:true,&quot;slidesPerView&quot;:1,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:0,&quot;keyboard&quot;:{&quot;enabled&quot;:true},&quot;a11y&quot;:{&quot;prevSlideMessage&quot;:&quot;Previous slide&quot;,&quot;nextSlideMessage&quot;:&quot;Next slide&quot;},&quot;effect&quot;:&quot;fade&quot;,&quot;fadeEffect&quot;:{&quot;crossFade&quot;:true},&quot;autoplay&quot;:{&quot;delay&quot;:2500,&quot;disableOnInteraction&quot;:false,&quot;pauseOnMouseEnter&quot;:false},&quot;navigation&quot;:{&quot;nextEl&quot;:&quot;.swiper-button-next&quot;,&quot;prevEl&quot;:&quot;.swiper-button-prev&quot;},&quot;pagination&quot;:{&quot;el&quot;:&quot;.swiper-pagination&quot;,&quot;clickable&quot;:true}}'><div class="swiper-wrapper">
<div class="swiper-slide sliderberg-slide" style="background-color:#FFFFFF;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-overlay" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:#f66aef;opacity:0.1;pointer-events:none;z-index:1;"></div><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<figure class="wp-block-image size-thumbnail has-custom-border is-style-default" style="margin-top:0;margin-right:var(--wp--preset--spacing--xxx-large);margin-bottom:0;margin-left:var(--wp--preset--spacing--xxx-large)"><img decoding="async" src="https://maruf-moinul.towp.io/wp-content/uploads/2025/06/b7c994f5-5a2b-4371-b7a5-dc27c5e9bff0-150x150.png" alt="" class="wp-image-43" style="border-radius:90px"/></figure>



<h3 class="wp-block-heading"><em><strong>Verified User</strong></em></h3>



<p class="has-x-small-font-size"><strong>“Works just as expected. Clean design and simple to manage.”</strong></p>



<p class="has-text-color has-link-color has-large-font-size wp-elements-e91071f063fbff33292dece936400c07" style="color:#e66e0c">★★★★★</p>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-color:#FFFFFF;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-overlay" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:#f66aef;opacity:0.1;pointer-events:none;z-index:1;"></div><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<figure class="wp-block-image aligncenter size-thumbnail has-custom-border" style="margin-right:var(--wp--preset--spacing--xxx-large);margin-left:var(--wp--preset--spacing--xxx-large)"><img decoding="async" src="https://maruf-moinul.towp.io/wp-content/uploads/2025/06/79981820-7cc7-4151-8956-7c5424f4f8fa-150x150.png" alt="" class="wp-image-48" style="border-radius:90px"/></figure>



<h3 class="wp-block-heading"><em><strong><strong><em>WordPress Site Owner</em></strong></strong></em></h3>



<p class="has-x-small-font-size"><strong>“The overall experience has been smooth and reliable so far.”</strong></p>



<p class="has-text-color has-link-color has-large-font-size wp-elements-e91071f063fbff33292dece936400c07" style="color:#e66e0c">★★★★★</p>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-color:#FFFFFF;min-height:330px;position:relative;overflow:hidden;"><div class="sliderberg-slide-overlay" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:#f66aef;opacity:0.1;pointer-events:none;z-index:1;"></div><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:330px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<figure class="wp-block-image size-thumbnail is-resized has-custom-border is-style-rounded" style="margin-right:var(--wp--preset--spacing--xxx-large);margin-left:var(--wp--preset--spacing--xxx-large)"><img decoding="async" src="https://maruf-moinul.towp.io/wp-content/uploads/2025/06/56946b54-f913-479e-ab83-d9a446a62b32-150x150.png" alt="" class="wp-image-46" style="border-radius:90px;width:150px;height:auto"/></figure>



<h3 class="wp-block-heading"><strong><strong><em>Longtime Customer</em></strong></strong></h3>



<p class="has-x-small-font-size"><strong>“Exactly what I was looking for. No extra steps or confusion.”</strong></p>



<p class="has-text-color has-link-color has-large-font-size wp-elements-e91071f063fbff33292dece936400c07" style="color:#e66e0c">★★★★★</p>

</div></div>
</div></div><button class="swiper-button-prev" aria-label="Previous slide"></button><button class="swiper-button-next" aria-label="Next slide"></button><div class="swiper-pagination"></div></div></div>


<p>A testimonial slider looks simple on the front end, but it gives you control over structure, spacing, and interaction. Using Sliderberg’s block-based approach, each testimonial becomes its own slide, with room for names, roles, star ratings, and styled quotes.</p>



<h3 class="wp-block-heading"><strong>Step 1: Install and Activate Sliderberg</strong></h3>



<p>From your WordPress dashboard, go to Plugins and click Add New. Search for Sliderberg Slider Blocks, then install and activate it. The slider block will now appear inside your editor.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="462" src="https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-1-1024x462.png" alt="Install and Activate Sliderberg" class="has-border-color wp-image-756" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-1-1024x462.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-1-300x135.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-1-768x346.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-1-1536x692.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-1.png 1724w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_dd18803c-9aaf-495a-9915-7c4ea04b9b2c"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 2: Add the Slider Block to Your Page</strong></h3>



<p>Open the page or post where you want to place the slider. Click the plus icon, search for Sliderberg, and insert the block. When prompted, choose Blocks Slider as the type.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="476" src="https://sliderberg.com/wp-content/uploads/2025/06/2-6-1024x476.png" alt="" class="has-border-color wp-image-761" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2-6-1024x476.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/2-6-300x139.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2-6-768x357.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/2-6.png 1530w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_3f1a966e-44e7-40a8-8a9d-69dd69690029"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 3: Set the Background for the First Slide</strong></h3>



<p>You’ll see a slide with a blank background. Choose a solid color or upload a subtle texture or soft image. Once the background is set, Sliderberg will automatically add a Heading and Paragraph block to the slide.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="522" src="https://sliderberg.com/wp-content/uploads/2025/06/3-6-1024x522.png" alt="" class="has-border-color wp-image-762" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/3-6-1024x522.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/3-6-300x153.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/3-6-768x391.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/3-6-1536x783.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/3-6.png 1695w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_2ac5ac8c-8ebb-43a6-bfd6-ad26a2c6bd70"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 4: Add Testimonial Content</strong></h3>



<p>Use the Heading block for the customer’s name or title. Use the Paragraph block for their feedback. You can use a Star Rating block, an Image block for a profile photo, a button block to trigger action, or any other blocks that fit into your description.&nbsp;</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="481" src="https://sliderberg.com/wp-content/uploads/2025/06/4.1-2-1024x481.png" alt="" class="has-border-color wp-image-760" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/4.1-2-1024x481.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-2-300x141.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-2-768x361.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-2-1536x721.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-2.png 1748w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>To reposition everything together, select the slide’s parent container and adjust the alignment or spacing using the sidebar settings.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="476" src="https://sliderberg.com/wp-content/uploads/2025/06/42-1024x476.png" alt="" class="has-border-color wp-image-759" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/42-1024x476.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/42-300x139.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/42-768x357.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/42-1536x714.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/42.png 1812w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_6add912f-1031-4cfb-bb5e-becaf69ea5f2"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 5: Add More Testimonials</strong></h3>



<p>Click <strong>Add Slide</strong> to create a new slide and repeat the process. Each slide can have different content, or you can use the <strong>Duplicate Slide</strong> button if you want to copy a layout and just change the text. This is useful when your slides follow the same format.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="483" src="https://sliderberg.com/wp-content/uploads/2025/06/5-3-1024x483.png" alt="" class="wp-image-763" srcset="https://sliderberg.com/wp-content/uploads/2025/06/5-3-1024x483.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/5-3-300x142.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/5-3-768x362.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/5-3-1536x725.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/5-3.png 1725w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_95cb0e59-38da-45ec-85dc-a8dab1285b91"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 6: Customize the Slider</strong></h3>



<p>Click the outer edge of the slider to select it. From the settings panel, you can change the transition effect, enable autoplay, adjust the speed, and style the arrows and dots. For testimonials, a Fade transition usually works well because it keeps the flow calm and easy to read.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="478" src="https://sliderberg.com/wp-content/uploads/2025/06/6-3-1024x478.png" alt="" class="wp-image-769" srcset="https://sliderberg.com/wp-content/uploads/2025/06/6-3-1024x478.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/6-3-300x140.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/6-3-768x358.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/6-3-1536x717.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/6-3.png 1817w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_19c4cdfa-2494-405f-a021-41dbd66704dc"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h4 class="wp-block-heading"><strong>Final Thoughts</strong></h4>



<p>Testimonial sliders help your visitors connect with real experiences, one at a time. When built directly inside the editor, they become easy to update, easy to style, and fully part of your content. You can adjust the layout, background, and animations to match your site without using a separate builder.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-create-a-wordpress-testimonial-slider/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Create an Image and Text Slider in WordPress</title>
		<link>https://sliderberg.com/blog/how-to-create-an-image-and-text-slider-in-wordpress/</link>
					<comments>https://sliderberg.com/blog/how-to-create-an-image-and-text-slider-in-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[Moinul Maruf]]></dc:creator>
		<pubDate>Fri, 20 Jun 2025 15:09:51 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=676</guid>

					<description><![CDATA[Let’s say you want to promote a new product line, feature a service, or tell a short story with visuals. A single image may catch the eye, but without context, it doesn’t say much. At the same time, plain text lacks the visual draw to keep visitors engaged.&#160; A combined image and text slider solves [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Let’s say you want to promote a new product line, feature a service, or tell a short story with visuals. A single image may catch the eye, but without context, it doesn’t say much. At the same time, plain text lacks the visual draw to keep visitors engaged.&nbsp;</p>



<p>A combined image and text slider solves this by keeping attention on each slide while delivering your message clearly. It creates a natural pairing between visuals and copy, guiding the viewer without overwhelming them.</p>



<p>In this article, we’ll cover everything to help you learn how to create an image and text slider in WordPress. Let’s start. </p>



<h2 class="wp-block-heading"><strong>Create an Image and Text Slider in WordPress</strong></h2>



<p>A structured layout matters just as much as the content. With <strong><a href="https://wordpress.org/plugins/sliderberg/" target="_blank" rel="noopener">Sliderberg</a></strong>, you’ll be using familiar block-based tools to build slides where image and text work together in every frame.  </p>



<h3 class="wp-block-heading"><strong>Step 1: Install the Slider Plugin</strong></h3>



<p>From your WordPress dashboard, go to the plugin section and add a new plugin. Type <strong><a href="https://wordpress.org/plugins/sliderberg/" target="_blank" rel="noopener">Sliderberg</a></strong> in the search bar, then install and activate it once it appears.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="462" src="https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-1024x462.png" alt="Install the Plugin" class="has-border-color wp-image-680" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-1024x462.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-300x135.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-768x346.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install-1536x692.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/Sliderberg-install.png 1724w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_a97326f5-f249-45de-9d81-6728cba2d98e"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 2: Insert the Image and Text Slider Block</strong></h3>



<p>Open the editor for any page or post and add a new block using the block inserter (+ sign).&nbsp; Search for Sliderberg Slider and insert it into your content. Right after adding the block, select the layout type called <strong>Blocks Slider</strong> to continue.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="454" src="https://sliderberg.com/wp-content/uploads/2025/06/2-5-1024x454.png" alt="Insert the Image and Text Slider Block" class="has-border-color wp-image-684" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2-5-1024x454.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/2-5-300x133.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2-5-768x341.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/2-5-1536x681.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/2-5.png 1797w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_a243d20b-19a8-46a0-81ac-93afc51ab58f"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 3: Add a Background Image or Color to the Slide</strong></h3>



<p>Before editing any content, choose a background for the default slide. You can set either an image or a solid color. Once the background is applied, a Heading and Paragraph block will automatically appear inside the slide. These are fully editable and function like standard Gutenberg blocks.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="557" src="https://sliderberg.com/wp-content/uploads/2025/06/3-5-1024x557.png" alt="Add a Background Image or Color to the Slide" class="has-border-color wp-image-685" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/3-5-1024x557.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/3-5-300x163.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/3-5-768x417.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/3-5-1536x835.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/3-5.png 1586w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_7acd5238-ae58-461f-9afb-89309511c91e"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 4: Edit and Style the Text Content in the Slider</strong></h3>



<p>Click into the Heading or Paragraph block to enter your message. Use the toolbar and sidebar settings to change size, color, alignment, or font.&nbsp;</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="510" src="https://sliderberg.com/wp-content/uploads/2025/06/4.1-1-1024x510.png" alt="Use the toolbar and sidebar settings " class="has-border-color wp-image-686" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/4.1-1-1024x510.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-1-300x149.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-1-768x382.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-1-1536x765.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-1.png 1764w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>To shift the position of the overall content inside the slide, select the parent slide container and use the alignment tools. You can also replace the Paragraph block with any other block using the inserter.&nbsp;&nbsp;</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="468" src="https://sliderberg.com/wp-content/uploads/2025/06/4.2-1-1024x468.png" alt="Alter content position and insert new blocks" class="has-border-color wp-image-687" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/4.2-1-1024x468.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/4.2-1-300x137.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/4.2-1-768x351.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/4.2-1-1536x702.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/4.2-1.png 1920w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_664d06d7-e131-415c-8f07-d54f52c75f8c"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 5: Adjust Global Slider Setting</strong>s</h3>



<p>Click the outer edge of the main slider to access the full block settings. From here, you can change the transition style, animation speed, autoplay options, and navigation appearance. These changes apply across all slides for a consistent look.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="524" src="https://sliderberg.com/wp-content/uploads/2025/06/5-2-1024x524.png" alt="Adjust Global Slider Settings" class="has-border-color wp-image-688" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/5-2-1024x524.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/5-2-300x154.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/5-2-768x393.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/5-2-1536x786.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/5-2.png 1715w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_da927ccd-269f-4ecc-9584-8fb2655de105"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 6: Add More Image and Text Slides</strong></h3>



<p>Once your first slide is ready, click <strong>Add Slide</strong> to create new ones. Each slide starts with the same structure, but you can customize the background, text, and layout individually or keep them uniform depending on your content needs.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="537" src="https://sliderberg.com/wp-content/uploads/2025/06/6-2-1024x537.png" alt="Add More Image and Text Slides" class="has-border-color wp-image-690" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/6-2-1024x537.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/6-2-300x157.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/6-2-768x403.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/6-2-1536x806.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/6-2.png 1673w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_f137e2fc-1009-4005-96b4-6a71163eba6c"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Conclusion</strong></h3>



<p>A slider that combines images and text can do more than just decorate a page. It helps you shape a clear message, guide the viewer’s focus, and make your content feel more alive. With the right balance between visuals and words, each slide becomes a small but meaningful story.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-create-an-image-and-text-slider-in-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Overlay Text on WordPress Slider Images</title>
		<link>https://sliderberg.com/blog/how-to-overlay-text-on-wordpress-slider-images/</link>
					<comments>https://sliderberg.com/blog/how-to-overlay-text-on-wordpress-slider-images/#respond</comments>
		
		<dc:creator><![CDATA[rajankur003]]></dc:creator>
		<pubDate>Fri, 20 Jun 2025 14:56:33 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=672</guid>

					<description><![CDATA[Displaying customer reviews in a slider is a smart way to build trust and keep your site interactive. A review slider rotates testimonials, making your page more dynamic without overwhelming the layout. With the Sliderberg plugin, you can create a clean, customizable review slider right inside the WordPress block editor. In this guide, you&#8217;ll learn [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Displaying customer reviews in a slider is a smart way to build trust and keep your site interactive. A review slider rotates testimonials, making your page more dynamic without overwhelming the layout. With the <strong><a href="https://wordpress.org/plugins/sliderberg/" target="_blank" rel="noreferrer noopener">Sliderberg</a></strong> plugin, you can create a clean, customizable review slider right inside the WordPress block editor.</p>



<p>In this guide, you&#8217;ll learn how to build a review slider using Sliderberg—complete with names, photos, review text, and ratings.</p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Step 1: Insert Sliderberg Block</h3>



<p>Open the post or page where you want to insert the review slider. After that, follow the following. </p>



<ol class="wp-block-list">
<li>Click the <strong>+</strong> icon to insert a new block.</li>



<li>Search for <strong>Sliderberg</strong> in the block search box.</li>



<li>Select the Slideberg block, and it will be inserted.</li>
</ol>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="928" height="606" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png" alt="" class="has-border-color has-main-accent-border-color wp-image-482" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png 928w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-300x196.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-768x502.png 768w" sizes="auto, (max-width: 928px) 100vw, 928px" /></figure>



<p>Select <strong>“Blocks Slider”</strong> after inserting the Sliderberg block.</p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="916" height="684" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png" alt="" class="has-border-color has-main-accent-border-color wp-image-483" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png 916w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-300x224.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-768x573.png 768w" sizes="auto, (max-width: 916px) 100vw, 916px" /></figure>



<div class="wp-block-group has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-8217c53c wp-block-group-is-layout-constrained" style="background-color:#4686c745;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
<p>Before proceeding to the tutorial part, you must first install and activate the plugin. You can check out the documentation on <a href="https://sliderberg.com/docs/how-to-install-and-activate-sliderberg/"><strong>how to install and activate Sliderberg</strong></a>. </p>
</div>



<h3 class="wp-block-heading">Step 2: Insert Your Image</h3>



<ol class="wp-block-list">
<li>Click <strong>Upload (1)</strong> if you want to add an Image to your Slide. <strong>Or</strong> you can select an existing one from the <strong>media library</strong> <strong>(2)</strong></li>
</ol>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="940" height="760" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-02_11-33-36-1.png" alt="" class="has-border-color has-main-accent-border-color wp-image-159" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-02_11-33-36-1.png 940w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-02_11-33-36-1-300x243.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-02_11-33-36-1-768x621.png 768w" sizes="auto, (max-width: 940px) 100vw, 940px" /></figure>



<p>2. Now select the image to upload from your directory.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="948" height="708" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-12-56.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-697" style="border-width:1px;border-radius:3px"/></figure>



<h3 class="wp-block-heading">Step 3: Add Your Text Content &amp; Customize</h3>



<p>Add your text content to your image. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="940" height="788" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-21-11.png" alt="" class="has-border-color has-main-accent-border-color wp-image-704" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-21-11.png 940w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-21-11-300x251.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-21-11-768x644.png 768w" sizes="auto, (max-width: 940px) 100vw, 940px" /></figure>



<p>You can choose the color of the text content from the right side panel. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="874" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-23-38.png" alt="" class="has-border-color has-main-accent-border-color wp-image-705" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-23-38.png 946w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-23-38-300x277.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-23-38-768x710.png 768w" sizes="auto, (max-width: 946px) 100vw, 946px" /></figure>



<p>Now, click on the image of the slide and click &#8220;Overlay Settings.&#8221;</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="750" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-26-08.png" alt="" class="has-border-color has-main-accent-border-color wp-image-706" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-26-08.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-26-08-300x239.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-26-08-768x611.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<p>Select the overlay color from the color picker. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="814" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-29-33.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-709" style="border-width:1px;border-radius:3px"/></figure>



<p>Now, adjust the overlay opacity, and you are done. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="812" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-20_20-31-05.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-710" style="border-width:1px;border-radius:3px"/></figure>



<p>After finishing all the customization, you must save or publish the post. So that&#8217;s how you overlay text on WordPress slider images using Sliderberg. </p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Final Thoughts</h3>



<p>Text overlays are a simple way to turn static slider images into interactive content sections. With Sliderberg, you don’t need any custom code or third-party builders—use blocks you already know. Try combining bold headings with buttons or taglines to guide your visitors and drive engagement.</p>



<p><strong>Read More!</strong></p>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-72aacd04-10f0-4ddd-97d7-371ffe25109a"><div class="ub-block-list__layout" style="text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; ">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-5833cbd0-71ab-4f9e-b692-e51d50fac69a">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-build-a-review-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Build a Review Slider in WordPress</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-02a36dcc-c599-4503-87fd-2eac6e21aa22">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-add-a-video-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Add a Video Slider in WordPress</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-4e3ffa46-c4ba-4764-8f52-1d5dd5ee6481">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-create-a-slider-with-a-call-to-action-button/" target="_blank" rel="noreferrer noopener">How to Create a Slider With a Call-to-Action Button in WordPress</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-ec0beb71-de8e-4b8a-aade-7e849a0283ef">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-add-a-text-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Add a Text Slider in WordPress the Right Way</a></span>
			</div>
			
		</li>
</div></ul>

<div class="wp-block-ub-social-share" id="ub-social-share-899fe50d-0e59-4e19-a93c-b075ee1fbe18">
			<div class="social-share-icons align-icons-center orientation-icons-row"><a aria-label="facebook-logo" target="_blank" rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-overlay-text-on-wordpress-slider-images%2F&amp;title=How%20to%20Overlay%20Text%20on%20WordPress%20Slider%20Images" class="ub-social-share-facebook-container" style="border-color: #1877f2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-facebook" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#1877f2" fill="#1877f2" width="20" height="20" viewbox="0 0 264 512"><path d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg></span><span style="">share</span>
			</a><a aria-label="twitter-logo" target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-overlay-text-on-wordpress-slider-images%2F&amp;text=How%20to%20Overlay%20Text%20on%20WordPress%20Slider%20Images" class="ub-social-share-twitter-container" style="border-color: #1d9bf0; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-twitter" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="color:#1d9BF0" fill="#1d9BF0" width="20" height="20" viewbox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg></span><span style="">tweet</span>
			</a><a aria-label="linkedin-logo" target="_blank" rel="nofollow" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-overlay-text-on-wordpress-slider-images%2F" class="ub-social-share-linkedin-container" style="border-color: #2867b2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-linkedin" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#2867b2" fill="#2867b2" width="20" height="20" viewbox="0 0 448 512"><path d="M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z"></path></svg></span><span style="">share</span>
			</a></div>
		</div>


<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-overlay-text-on-wordpress-slider-images/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Add a Text Slider in WordPress the Right Way</title>
		<link>https://sliderberg.com/blog/how-to-add-a-text-slider-in-wordpress/</link>
					<comments>https://sliderberg.com/blog/how-to-add-a-text-slider-in-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[Moinul Maruf]]></dc:creator>
		<pubDate>Thu, 19 Jun 2025 17:50:18 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=622</guid>

					<description><![CDATA[Sometimes you want to display multiple messages in a compact space without relying on flashy images or complex layouts. Maybe you&#8217;re highlighting customer feedback, rotating feature points, or showing step-by-step instructions. Text blocks just sit there. Sliders with images feel like overkill. A text slider fits right in. It focuses purely on the message, letting [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Sometimes you want to display multiple messages in a compact space without relying on flashy images or complex layouts. Maybe you&#8217;re highlighting customer feedback, rotating feature points, or showing step-by-step instructions. Text blocks just sit there. Sliders with images feel like overkill.</p>



<p>A text slider fits right in. It focuses purely on the message, letting you rotate through short pieces of text with smooth transitions. You can add it to a blog, a service page, or even within a pricing section where content needs to stay readable and in motion.</p>



<p>In this article, we’ll walk you through the process of adding a text slider to your WordPress site using the <a href="https://wordpress.org/plugins/sliderberg/" target="_blank" rel="noopener">Sliderberg</a> plugin. Let’s start.&nbsp;</p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h2 class="wp-block-heading"><strong>Add a Text Slider in WordPress</strong></h2>



<p>In the following steps, you’ll insert the slider block, set a background for each slide, add your text content, and customize the overall slider settings. Here’s how to do it.</p>



<h3 class="wp-block-heading"><strong>Step 1: Install and Activate Sliderberg</strong></h3>



<p>Start by installing the <strong>Sliderberg </strong>plugin from the WordPress plugin directory. Once activated, it will appear as a new block inside the WordPress block editor.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="462" src="https://sliderberg.com/wp-content/uploads/2025/06/1-3-1024x462.png" alt=" Install and Activate Sliderberg" class="has-border-color wp-image-660" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/1-3-1024x462.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/1-3-300x135.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/1-3-768x346.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/1-3-1536x692.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/1-3.png 1724w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_5bfe8ef2-8692-4d49-84b8-ffe655a70f8d"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 2: Add the Sliderberg Block</strong></h3>



<p>Open the editor for the page or post where you want the text slider. Click the “+” button and search for <strong>Sliderberg</strong>. Insert the block. After that, you will be asked to choose a slider type. Choose the <strong>Blocks Slider</strong> to proceed.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="511" src="https://sliderberg.com/wp-content/uploads/2025/06/2-4-1024x511.png" alt="Add the Sliderberg Block" class="has-border-color wp-image-662" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2-4-1024x511.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/2-4-300x150.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2-4-768x383.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/2-4.png 1338w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_17d347d0-73f7-4f60-a247-67fd0a8da54b"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 3: Add a Background to the First Slide</strong></h3>



<p>When the slide appears, the first thing you’ll see is the background selection interface. You won’t be able to add or edit any content until you choose a background. You can upload an image, select one from your media library, or pick a solid color from the options provided. Once the background is selected, the slide will load with a <strong>Heading</strong> and a <strong>Paragraph </strong>block by default, ready for you to edit.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="687" src="https://sliderberg.com/wp-content/uploads/2025/06/3-4-1024x687.png" alt=" Add a Background to the First Slide" class="has-border-color wp-image-663" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/3-4-1024x687.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/3-4-300x201.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/3-4-768x515.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/3-4.png 1301w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_95283381-e499-467e-9e8a-0e2298e6e9b8"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 4: Add and Style Text Content</strong></h3>



<p>Click on the heading and paragraph blocks to add your text. You can use the toolbar or right sidebar to change alignment, font size, text color, and spacing.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="583" src="https://sliderberg.com/wp-content/uploads/2025/06/4.1-1024x583.png" alt="change alignment, font size, text color, and spacing." class="has-border-color wp-image-665" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/4.1-1024x583.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-300x171.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/4.1-768x437.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/4.1.png 1525w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>If you want to change the position of the entire content group, click on the parent container of the slide and use the position tools available in the settings. You can also adjust the background, overlay, and related settings in the same panel.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="487" src="https://sliderberg.com/wp-content/uploads/2025/06/4.2-1024x487.png" alt="change position, background, overlay, and related settings" class="has-border-color wp-image-666" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/4.2-1024x487.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/4.2-300x143.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/4.2-768x365.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/4.2-1536x730.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/4.2.png 1751w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>If you want to add more content to the slide, such as extra paragraphs or a button, click the plus icon inside the slide and choose any block from the inserter.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="470" src="https://sliderberg.com/wp-content/uploads/2025/06/4.3-1024x470.png" alt="Add more blocks
" class="has-border-color wp-image-667" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/4.3-1024x470.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/4.3-300x138.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/4.3-768x352.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/4.3.png 1506w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_b59affd0-5b7a-4844-b69e-c5769d7d6c2b"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 5: Add More Slides</strong></h3>



<p>Click the <strong>Add Slide</strong> button to insert another slide. Each new slide will follow the same structure. Choose a background first, then add your text. If you want to keep a consistent layout, you can use the <strong>Duplicate Slide</strong> button to copy an existing one.</p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="464" src="https://sliderberg.com/wp-content/uploads/2025/06/5-1024x464.png" alt="Add More Slides" class="has-border-color wp-image-668" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/5-1024x464.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/5-300x136.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/5-768x348.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/5-1536x697.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/5.png 1700w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_3c653aed-b48f-426b-bd02-c3e9365970b1"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading"><strong>Step 6: Customize Slider Settings</strong></h3>



<p>Select the main slider block to open the settings panel. From there, you can choose the transition style, enable autoplay, and adjust navigation controls. You can also fine-tune the placement and styling of arrows and dots, and much more. </p>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="508" src="https://sliderberg.com/wp-content/uploads/2025/06/6-1-1024x508.png" alt="Customize Slider Settings" class="has-border-color wp-image-670" style="border-color:#4687c7;border-width:2px;border-radius:9px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/6-1-1024x508.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/6-1-300x149.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/6-1-768x381.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/6-1-1536x761.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/6-1.png 1715w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_1408d4d8-e4d0-455d-b182-a9b52b75ec6b"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 3px solid #ccc; margin-top: 2px; "></div></div></div>


<p><strong>Final Thoughts</strong></p>



<p>A text slider is a simple way to highlight key messages without overwhelming the page. With Sliderberg, each slide works like any other block layout, so you can focus on writing and design without learning anything new. Once it&#8217;s set up, updating or rearranging your content is just as easy as editing a paragraph.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-add-a-text-slider-in-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Build a Review Slider in WordPress</title>
		<link>https://sliderberg.com/blog/how-to-build-a-review-slider-in-wordpress/</link>
					<comments>https://sliderberg.com/blog/how-to-build-a-review-slider-in-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[rajankur003]]></dc:creator>
		<pubDate>Thu, 19 Jun 2025 15:40:36 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=631</guid>

					<description><![CDATA[Displaying customer reviews in a slider is a smart way to build trust and keep your site interactive. A review slider rotates testimonials, making your page more dynamic without overwhelming the layout. With the Sliderberg plugin, you can create a clean, customizable review slider right inside the WordPress block editor. In this guide, you&#8217;ll learn [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Displaying customer reviews in a slider is a smart way to build trust and keep your site interactive. A review slider rotates testimonials, making your page more dynamic without overwhelming the layout. With the <strong>Sliderberg</strong> plugin, you can create a clean, customizable review slider right inside the WordPress block editor.</p>



<p>In this guide, you&#8217;ll learn how to build a review slider using Sliderberg—complete with names, photos, review text, and ratings. See the demo of the review slider below that I will create today for this tutorial. </p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="1372" height="636" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-33-37.gif" alt="" class="wp-image-652"/></figure>



<p>Now, let&#8217;s proceed to the steps for creating this awesome review slider. </p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Step 1: Install and Activate Sliderberg</h3>



<p>To begin, install the Sliderberg plugin:</p>



<ol class="wp-block-list">
<li>Go to <strong>Plugins → Add New</strong> in your WordPress dashboard.</li>



<li>Search for <strong>Sliderberg</strong> in the plugin search box.</li>



<li>Click <strong>Install Now and then activate</strong> the plugin. </li>
</ol>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="554" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png" alt="How to Create a Slider With a Call-to-Action Button in WordPress" class="has-border-color has-primary-accent-border-color wp-image-480" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-300x162.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-768x416.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44.png 1216w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Now you’re ready to create your review slider.</p>



<h3 class="wp-block-heading">Step 2: Insert Sliderberg Block</h3>



<p>Open the post or page where you want to insert the review slider. </p>



<ol class="wp-block-list">
<li>Click the <strong>+</strong> icon to insert a new block.</li>



<li>Search for <strong>Sliderberg</strong> in the block search box. </li>



<li>Select the Slideberg block, and it will be inserted. </li>
</ol>



<p>Your first review slide is now ready for editing.</p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="928" height="606" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png" alt="" class="has-border-color has-main-accent-border-color wp-image-482" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png 928w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-300x196.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-768x502.png 768w" sizes="auto, (max-width: 928px) 100vw, 928px" /></figure>



<h3 class="wp-block-heading">Step 3: Design the First Review Slide</h3>



<p>Select <strong>“Blocks Slider”</strong> after inserting the Sliderberg block. </p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="916" height="684" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png" alt="" class="has-border-color has-main-accent-border-color wp-image-483" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png 916w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-300x224.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-768x573.png 768w" sizes="auto, (max-width: 916px) 100vw, 916px" /></figure>



<p>Click the “<strong>Add Slide” button (1)</strong> to add more slides. Select<strong> </strong>a <strong>solid color </strong>for the slide<strong> (2)</strong>. For today&#8217;s tutorial, I will select a solid color. </p>



<figure class="wp-block-image aligncenter has-custom-border"><img loading="lazy" decoding="async" width="942" height="736" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_16-46-22.png" alt="" class="has-border-color has-main-accent-border-color wp-image-545" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_16-46-22.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_16-46-22-300x234.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_16-46-22-768x600.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<p>Once you have set your background, you can add the actual review content to your review slider. </p>



<p>Add Your Text content and heading in the slider.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="720" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_20-17-24.png" alt="" class="has-border-color has-main-accent-border-color wp-image-635" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_20-17-24.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_20-17-24-300x229.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_20-17-24-768x587.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<p>After adding the testimonial text, you can add star ratings. Since Sliderberg does not have its own Star Rating block, you can use the star ratings from below. </p>



<div style="max-width: 400px; margin: auto; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); font-family: sans-serif;">
  <h2 style="text-align: center;">Copy Star Ratings</h2>
  <p style="text-align: center; color: #555;">Click a button to copy the 5-star rating to your clipboard!</p>

  <div style="display: flex; justify-content: space-between; align-items: center; background: #f9f5ff; padding: 12px 16px; border-radius: 10px; margin-top: 20px;">
    <span id="stars1"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
    <button onclick="copyStars('stars1')" style="background: #9c27b0; color: white; border: none; padding: 6px 14px; border-radius: 8px; cursor: pointer;">Copy</button>
  </div>

  <div style="display: flex; justify-content: space-between; align-items: center; background: #e3f2fd; padding: 12px 16px; border-radius: 10px; margin-top: 12px;">
    <span id="stars2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f31f.png" alt="🌟" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f31f.png" alt="🌟" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f31f.png" alt="🌟" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f31f.png" alt="🌟" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f31f.png" alt="🌟" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
    <button onclick="copyStars('stars2')" style="background: #1976d2; color: white; border: none; padding: 6px 14px; border-radius: 8px; cursor: pointer;">Copy</button>
  </div>

  <div style="display: flex; justify-content: space-between; align-items: center; background: #e8f5e9; padding: 12px 16px; border-radius: 10px; margin-top: 12px;">
    <span id="stars3">★★★★★</span>
    <button onclick="copyStars('stars3')" style="background: #388e3c; color: white; border: none; padding: 6px 14px; border-radius: 8px; cursor: pointer;">Copy</button>
  </div>

  <script>
    function copyStars(id) {
      const text = document.getElementById(id).textContent;
      navigator.clipboard.writeText(text).then(function() {
        alert('Copied: ' + text);
      });
    }
  </script>
</div>



<p>You can directly copy and use these star ratings inside the Sliderberg block. Here&#8217;s the demo below. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="766" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_20-54-58.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-642" style="border-width:1px;border-radius:3px"/></figure>



<h3 class="wp-block-heading">Step 4: Insert Image (Optional)</h3>



<p>You can also add an image after or before the star rating. To add an image, insert the Column block and select the 5th style. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="940" height="874" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_20-58-25.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-643" style="border-width:1px;border-radius:4px"/></figure>



<p>Now, select the middle column and insert the image block. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="776" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_20-59-47.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-644" style="border-width:1px;border-radius:3px"/></figure>



<p>Click on the <strong>Add Image</strong> button <strong>(1)</strong>, upload your image, or select an image file from your media library <strong>(2)</strong>. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="786" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-00-23.png" alt="" class="has-border-color has-main-accent-border-color wp-image-645" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-00-23.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-00-23-300x250.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-00-23-768x639.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>For the tutorial, I will upload my custom image for the review slider. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="804" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-02-06.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-646" style="border-width:1px;border-radius:3px"/></figure>



<p>The Image block lets you adjust the image alignment and resize it according to your needs. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="860" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-03-18.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-647" style="border-width:1px;border-radius:3px"/></figure>



<p>Lastly, add the reviewer&#8217;s name. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="822" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-06-23.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-648" style="border-width:1px;border-radius:3px"/></figure>



<h3 class="wp-block-heading">Step 5: Duplicate the Slide</h3>



<p>In this step, you can create a new slide or duplicate the current slide. If you wish to add a new slide, click the <strong>Add Slide</strong> button. </p>



<p>Alternatively, you can click the <strong>Duplicate</strong> button to duplicate the current slide, which is a faster way to maintain consistent formatting. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="736" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-12-38.png" alt="" class="has-border-color has-main-accent-border-color wp-image-649" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-12-38.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-12-38-300x234.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-12-38-768x600.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<h3 class="wp-block-heading">Step 6: Slider Customization</h3>



<p>After finishing creating the review slider, customize the whole appearance of the review slider. </p>



<p>You can customize the slider by editing its <strong>width, animation, autoplay, navigation</strong>, and <strong>carousel settings</strong> from the right-side panel. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="830" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-17-22.png" alt="" class="has-border-color has-main-accent-border-color wp-image-650" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-17-22.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-17-22-300x264.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-19_21-17-22-768x677.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<p>Here is the full review slider below. </p>


<div style="--swiper-navigation-color:#ffffff;--swiper-navigation-background-color:rgba(0, 0, 0, 0.5);--sliderberg-nav-opacity:1;--swiper-pagination-color:#3ccb6e;--swiper-pagination-bullet-inactive-color:#6c757d;--swiper-pagination-bullet-inactive-opacity:1;--sliderberg-min-height:400px;--sliderberg-easing:ease-in;" class="sliderberg-nav-square sliderberg-nav-medium sliderberg-effect-zoom sliderberg-nav-h-space-between sliderberg-nav-v-center sliderberg-dots-h-center sliderberg-dots-v-bottom sliderberg-pagination-bullets alignwide wp-block-sliderberg-sliderberg"><div class="sliderberg-swiper-wrap"><div class="swiper sliderberg-swiper" data-swiper-data='{&quot;speed&quot;:700,&quot;loop&quot;:true,&quot;slidesPerView&quot;:1,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:0,&quot;keyboard&quot;:{&quot;enabled&quot;:true},&quot;a11y&quot;:{&quot;prevSlideMessage&quot;:&quot;Previous slide&quot;,&quot;nextSlideMessage&quot;:&quot;Next slide&quot;},&quot;effect&quot;:&quot;creative&quot;,&quot;creativeEffect&quot;:{&quot;prev&quot;:{&quot;opacity&quot;:0,&quot;scale&quot;:0.95},&quot;next&quot;:{&quot;opacity&quot;:0,&quot;scale&quot;:1.05}},&quot;autoplay&quot;:{&quot;delay&quot;:5000,&quot;disableOnInteraction&quot;:false,&quot;pauseOnMouseEnter&quot;:true},&quot;navigation&quot;:{&quot;nextEl&quot;:&quot;.swiper-button-next&quot;,&quot;prevEl&quot;:&quot;.swiper-button-prev&quot;},&quot;pagination&quot;:{&quot;el&quot;:&quot;.swiper-pagination&quot;,&quot;clickable&quot;:true}}'><div class="swiper-wrapper">
<div class="swiper-slide sliderberg-slide" style="background-color:#aecae6;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Impressive Slider plugin for WordPress</h2>



<p>I’m impressed with the plugin—it lets you slide just about anything in WordPress. I tested it with images, galleries, videos, posts, and even WooCommerce products. </p>



<p>★★★★★</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img decoding="async" src="https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/1-1.png" alt="" class="wp-image-932" style="width:119px;height:auto"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>
</div>



<p class="has-small-font-size">Istiak Ryhan. Founder of Dotcamp LLC. </p>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-color:#65d6b3;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Simple, Fast, and User-Friendly Slider Plugin</h2>



<p>Lightweight and easy to use with an intuitive interface. Just be sure to select the correct slide before editing. Fast and reliable overall.</p>



<p>★★★★★</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img decoding="async" src="https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/3.png" alt="" class="wp-image-933" style="width:139px;height:auto"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>
</div>



<p class="has-small-font-size">Imtiaz Rayhan. Founder of Ultimate Blocks. </p>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-color:#edc0e8;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Best Slider Plugin Ever!</h2>



<p>This is the best slide block plugin I’ve used—extremely user-friendly and works seamlessly with the Gutenberg editor.</p>



<p>★★★★★</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img decoding="async" src="https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/4.png" alt="" class="wp-image-934" style="width:155px;height:auto"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>
</div>



<p class="has-small-font-size">Akash. A WordPress User.</p>

</div></div>
</div></div><button class="swiper-button-prev" aria-label="Previous slide"></button><button class="swiper-button-next" aria-label="Next slide"></button><div class="swiper-pagination"></div></div></div>


<p>Once you have created the review slider, save or publish the post or page. </p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Final Thoughts!</h3>



<p>With Sliderberg, building a review slider becomes a quick and customizable task. You can showcase social proof in a format that doesn’t take up much space but leaves a strong impression. Everything remains editable within the WordPress block editor, granting you complete control over design and content.</p>



<p>Try it out and let your happy customers speak for you—one slide at a time.</p>



<p><strong>Read More!</strong></p>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-b9ee2366-9f30-4d7d-83c5-453a11f410a7"><div class="ub-block-list__layout" style="text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; ">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-611caa1d-d5bf-4f3e-81a4-794a3793766d">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-create-a-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Create a Slider in WordPress (Step-by-Step Tutorial)</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-43999533-ed89-4750-b54a-80b96dedead2">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-create-a-slider-with-a-call-to-action-button/" target="_blank" rel="noreferrer noopener">How to Create a Slider With a Call-to-Action Button in WordPress</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-c8e25994-abdb-44f2-91bc-13638538a486">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-add-a-video-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Add a Video Slider in WordPress</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-62c64803-de69-40a6-9649-828efe059ce6">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/best-wordpress-slider-block-plugins/" target="_blank" rel="noreferrer noopener">Best WordPress Slider Block Plugins Compared (2025 Edition) &#8211; Sliderberg</a></span>
			</div>
			
		</li>
</div></ul>

<div class="wp-block-ub-social-share" id="ub-social-share-6d0fa806-93b5-404b-ad2d-25f02abf2ae9">
			<div class="social-share-icons align-icons-center orientation-icons-row"><a aria-label="facebook-logo" target="_blank" rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-build-a-review-slider-in-wordpress%2F&amp;title=How%20to%20Build%20a%20Review%20Slider%20in%20WordPress" class="ub-social-share-facebook-container" style="border-color: #1877f2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-facebook" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#1877f2" fill="#1877f2" width="20" height="20" viewbox="0 0 264 512"><path d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg></span><span style="">share</span>
			</a><a aria-label="twitter-logo" target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-build-a-review-slider-in-wordpress%2F&amp;text=How%20to%20Build%20a%20Review%20Slider%20in%20WordPress" class="ub-social-share-twitter-container" style="border-color: #1d9bf0; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-twitter" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="color:#1d9BF0" fill="#1d9BF0" width="20" height="20" viewbox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg></span><span style="">tweet</span>
			</a><a aria-label="linkedin-logo" target="_blank" rel="nofollow" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-build-a-review-slider-in-wordpress%2F" class="ub-social-share-linkedin-container" style="border-color: #2867b2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-linkedin" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#2867b2" fill="#2867b2" width="20" height="20" viewbox="0 0 448 512"><path d="M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z"></path></svg></span><span style="">share</span>
			</a></div>
		</div>


<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-build-a-review-slider-in-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Add a Video Slider in WordPress</title>
		<link>https://sliderberg.com/blog/how-to-add-a-video-slider-in-wordpress/</link>
					<comments>https://sliderberg.com/blog/how-to-add-a-video-slider-in-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[rajankur003]]></dc:creator>
		<pubDate>Tue, 17 Jun 2025 15:13:16 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=520</guid>

					<description><![CDATA[Video sliders can instantly make your site more engaging. You can showcase product demos, client testimonials, or background visuals to draw attention. With the Sliderberg plugin, you can build a fully functional video slider right inside the WordPress editor—no extra builder or coding needed. This guide shows you how to create a video slider using [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="has-link-color wp-elements-d3bfa7ede7dd292c68f55d515cd5d986">Video sliders can instantly make your site more engaging. You can showcase product demos, client testimonials, or background visuals to draw attention. With the <strong><a href="https://wordpress.org/plugins/sliderberg/" target="_blank" rel="noreferrer noopener">Sliderberg</a></strong><a href="https://wordpress.org/plugins/sliderberg/" target="_blank" rel="noopener"> </a>plugin, you can build a fully functional video slider right inside the WordPress editor—no extra builder or coding needed.</p>



<p>This guide shows you how to create a video slider using Sliderberg and display embedded or uploaded videos inside each slide. The demo of the video slider I am going to create is below. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="612" height="704" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_20-34-47.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-584" style="border-width:1px;border-radius:3px"/></figure>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Step 1: Install and Activate Sliderberg</h3>



<p>Start by installing the <strong>Sliderberg</strong> plugin if you haven&#8217;t already:</p>



<ol class="wp-block-list">
<li>Go to <strong>Plugins from your Dashboard</strong>.</li>



<li>Now, click th<strong>e Add New</strong> button.</li>



<li>Search for <strong>Sliderberg</strong> in the plugin search bar.</li>



<li>Click <strong>Install Now</strong>, then <strong>Activate</strong> the plugin.</li>
</ol>



<p>Once activated, the plugin will be available as a block inside the editor.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="554" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png" alt="How to Create a Slider With a Call-to-Action Button in WordPress" class="has-border-color has-primary-accent-border-color wp-image-480" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-300x162.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-768x416.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44.png 1216w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">Step 2: Insert Sliderberg Block</h3>



<p>Open or create a new post or page and launch the Block Editor.</p>



<ol class="wp-block-list">
<li>Click the <strong>+</strong> icon to add a block.</li>



<li>Search for <strong>Sliderberg </strong>in the search box.</li>



<li>Select Sliderberg when it appears. </li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="928" height="606" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png" alt="" class="has-border-color has-main-accent-border-color wp-image-482" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png 928w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-300x196.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-768x502.png 768w" sizes="auto, (max-width: 928px) 100vw, 928px" /></figure>



<p>Now, select the Block Slider option. It will open a new Slider Canvas.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="916" height="684" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png" alt="" class="has-border-color has-main-accent-border-color wp-image-483" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png 916w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-300x224.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-768x573.png 768w" sizes="auto, (max-width: 916px) 100vw, 916px" /></figure>



<p>Click the &#8220;<strong>Add Slide&#8221; button (1)</strong> to add more slides and <strong>select a solid color for your</strong> <strong>slide (2)</strong>. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="736" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_16-46-22.png" alt="" class="has-border-color has-main-accent-border-color wp-image-545" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_16-46-22.png 942w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_16-46-22-300x234.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_16-46-22-768x600.png 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /></figure>



<p>Add Your Text content and heading in the slider.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="938" height="646" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-19-58.png" alt="" class="has-border-color has-main-accent-border-color wp-image-562" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-19-58.png 938w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-19-58-300x207.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-19-58-768x529.png 768w" sizes="auto, (max-width: 938px) 100vw, 938px" /></figure>



<p class="has-background" style="border-radius:4px;background-color:#4686c740;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)"><strong>Tips:</strong> You can also add Images as your slide background. Again, you can change your width. </p>



<h3 class="wp-block-heading">Step 3: Insert a Video into the Slide</h3>



<p>In this step, we will add a video to our slide. </p>



<ol class="wp-block-list">
<li>Click the <strong>&#8220;+&#8221;</strong> (Add Block) icon.</li>



<li>Type Video in the block search bar. </li>



<li>Select the Video Block when it appears.</li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="946" height="690" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-21-00.png" alt="" class="has-border-color has-main-accent-border-color wp-image-563" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-21-00.png 946w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-21-00-300x219.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-21-00-768x560.png 768w" sizes="auto, (max-width: 946px) 100vw, 946px" /></figure>



<p>You can <strong>upload a video</strong>, <strong>select one from the media library</strong>, <strong>or insert one from a URL</strong>. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="744" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-22-21.png" alt="" class="has-border-color has-main-accent-border-color wp-image-564" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-22-21.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-22-21-300x236.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-22-21-768x605.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>But today, I will upload a custom video for my slider. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="852" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-28-01.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-565" style="border-width:1px;border-radius:3px"/></figure>



<p>The settings related to the video block are located on the right-side panel. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="760" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-29-28.png" alt="" class="has-border-color has-main-accent-border-color wp-image-566" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-29-28.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-29-28-300x242.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-29-28-768x618.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>After that, you can place a CTA button at the bottom of the video block. This helps you guide visitors to take action directly from the video.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="942" height="828" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_18-36-29.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-567" style="border-width:1px;border-radius:3px"/></figure>



<h3 class="wp-block-heading">Step 4: Duplicate and Customize More Slides</h3>



<p>To add more video slides, click <strong>Duplicate Slide</strong> in the Sliderberg toolbar at the top of the editor. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="940" height="834" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-33-41.png" alt="" class="has-border-color has-main-accent-border-color wp-image-569" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-33-41.png 940w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-33-41-300x266.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-33-41-768x681.png 768w" sizes="auto, (max-width: 940px) 100vw, 940px" /></figure>



<p>After that, change the background color of your slide. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="950" height="824" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-39-29.png" alt="" class="has-border-color has-main-accent-border-color wp-image-572" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-39-29.png 950w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-39-29-300x260.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-39-29-768x666.png 768w" sizes="auto, (max-width: 950px) 100vw, 950px" /></figure>



<p>Next, you must update your text content in the slide and the button. </p>



<p class="has-main-color has-text-color has-background has-link-color wp-elements-bcd1ca1951ac9cf930f9bd3b6a7a4ca3" style="background-color:#4686c740;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)"><strong>Tips:</strong> Learn more about <a href="https://sliderberg.com/docs/how-to-add-or-change-background-colors-to-slides/" target="_blank" rel="noreferrer noopener"><strong>how to add</strong></a> or<a href="https://sliderberg.com/docs/how-to-add-or-change-background-colors-to-slides/" target="_blank" rel="noreferrer noopener"><strong> Change Background Colors to Slides from here.</strong></a></p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="948" height="848" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-35-13-1.png" alt="" class="has-border-color has-main-accent-border-color wp-image-571" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-35-13-1.png 948w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-35-13-1-300x268.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-35-13-1-768x687.png 768w" sizes="auto, (max-width: 948px) 100vw, 948px" /></figure>



<p>Next, select the video block inside the slider and click &#8220;<strong>Replace</strong>&#8221; <strong>(1)</strong>. After that, you can replace your video by uploading a new one or selecting one from the media library <strong>(2)</strong>. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="826" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-46-54.png" alt="" class="has-border-color has-main-accent-border-color wp-image-573" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-46-54.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-46-54-300x263.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_19-46-54-768x672.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>And here is the final video slider below. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="930" height="864" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-17_20-36-51.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-585" style="border-width:1px;border-radius:3px"/></figure>



<p>Don&#8217;t forget to save or publish your post or page when you are satisfied with the slider. </p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h2 class="wp-block-heading">Final Thoughts</h2>



<p>Sliderberg enables you to create sleek, responsive video sliders without relying on third-party builders. Add videos, layer in text and buttons, and control how each slide behaves—all using familiar WordPress blocks.</p>



<p>If you&#8217;re looking to showcase your story or highlight key content with motion, this is a great starting point.</p>



<p><strong>Read More!</strong></p>


<ul style="padding-left: 1.1em; text-align: left; color: #0693e3; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-100f9f39-a6ef-4928-bf28-f31e8d45fbda"><div class="ub-block-list__layout" style="text-align: left; color: #0693e3; column-count: 1; --ub-list-mobile-column-count: 1; ">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-baa8ac03-d65f-4a81-a2fe-ae87c65815c0">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-create-a-slider-with-a-call-to-action-button/" target="_blank" rel="noreferrer noopener">How to Create a Slider With a Call-to-Action Button in WordPress</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-cfd577c3-e8a8-4e22-b815-b808f10b2e09">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/how-to-create-a-slider-in-wordpress/" target="_blank" rel="noreferrer noopener">How to Create a Slider in WordPress (Step-by-Step Tutorial)</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-1a030379-d105-4e36-9b56-4e8caec61a44">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#000000" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text"><a href="https://sliderberg.com/best-wordpress-slider-block-plugins/" target="_blank" rel="noreferrer noopener">Best WordPress Slider Block Plugins Compared (2025 Edition) &#8211; Sliderberg</a></span>
			</div>
			
		</li>
</div></ul>

<div class="wp-block-ub-social-share" id="ub-social-share-3c630569-72b5-4ac8-86f7-36f69cf643c9">
			<div class="social-share-icons align-icons-center orientation-icons-row"><a aria-label="facebook-logo" target="_blank" rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-add-a-video-slider-in-wordpress%2F&amp;title=How%20to%20Add%20a%20Video%20Slider%20in%20WordPress" class="ub-social-share-facebook-container" style="border-color: #1877f2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-facebook" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#1877f2" fill="#1877f2" width="20" height="20" viewbox="0 0 264 512"><path d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg></span><span style="">share</span>
			</a><a aria-label="twitter-logo" target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-add-a-video-slider-in-wordpress%2F&amp;text=How%20to%20Add%20a%20Video%20Slider%20in%20WordPress" class="ub-social-share-twitter-container" style="border-color: #1d9bf0; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-twitter" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="color:#1d9BF0" fill="#1d9BF0" width="20" height="20" viewbox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg></span><span style="">tweet</span>
			</a><a aria-label="linkedin-logo" target="_blank" rel="nofollow" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-add-a-video-slider-in-wordpress%2F" class="ub-social-share-linkedin-container" style="border-color: #2867b2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-linkedin" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#2867b2" fill="#2867b2" width="20" height="20" viewbox="0 0 448 512"><path d="M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z"></path></svg></span><span style="">share</span>
			</a></div>
		</div>]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-add-a-video-slider-in-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Create a Slider With a Call-to-Action Button in WordPress</title>
		<link>https://sliderberg.com/blog/how-to-create-a-slider-with-a-call-to-action-button/</link>
					<comments>https://sliderberg.com/blog/how-to-create-a-slider-with-a-call-to-action-button/#respond</comments>
		
		<dc:creator><![CDATA[rajankur003]]></dc:creator>
		<pubDate>Sun, 15 Jun 2025 09:15:38 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=476</guid>

					<description><![CDATA[A slider with a Call-to-Action (CTA) button is one of the best ways to highlight offers, promote services, or guide visitors to take action, right from the top of your page. If you&#8217;re using the WordPress block editor, the Sliderberg plugin makes it incredibly easy to build that kind of slider without writing any code. [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="has-link-color wp-elements-46c056c5c107646d216cfd769ed587e7">A slider with a Call-to-Action (CTA) button is one of the best ways to highlight offers, promote services, or guide visitors to take action, right from the top of your page. If you&#8217;re using the WordPress block editor, the <strong><a href="https://it.wordpress.org/plugins/sliderberg/" target="_blank" rel="noopener">Sliderberg</a></strong> plugin makes it incredibly easy to build that kind of slider without writing any code.</p>



<p class="has-main-color has-text-color has-background has-link-color wp-elements-14de9ec8b02efa73ea8e0ba58271db5c" style="border-radius:4px;background-color:#3f82c44f">The Best thing about <strong>Sliderberg is that it allows you to use any Block in the Gutenberg Editor. </strong>Therefore, using Sliderberg, you can slide anything and everything. </p>



<p>In this guide, you&#8217;ll learn how to create a fully functional slider with headings, background images, and a CTA button using Sliderberg. </p>



<p>If you&#8217;d like to see the demo first, I&#8217;ll show it to you below. </p>


<div style="--swiper-navigation-color:#ffffff;--swiper-navigation-background-color:rgba(0, 0, 0, 0.5);--sliderberg-nav-opacity:1;--swiper-pagination-color:#ffffff;--swiper-pagination-bullet-inactive-color:#6c757d;--swiper-pagination-bullet-inactive-opacity:1;--sliderberg-min-height:400px;--sliderberg-easing:ease;" class="sliderberg-nav-circle sliderberg-nav-medium sliderberg-effect-slide sliderberg-nav-h-space-between sliderberg-nav-v-center sliderberg-dots-h-center sliderberg-dots-v-bottom sliderberg-pagination-bullets align wp-block-sliderberg-sliderberg"><div class="sliderberg-swiper-wrap"><div class="swiper sliderberg-swiper" data-swiper-data='{&quot;speed&quot;:500,&quot;loop&quot;:true,&quot;slidesPerView&quot;:1,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:0,&quot;keyboard&quot;:{&quot;enabled&quot;:true},&quot;a11y&quot;:{&quot;prevSlideMessage&quot;:&quot;Previous slide&quot;,&quot;nextSlideMessage&quot;:&quot;Next slide&quot;},&quot;effect&quot;:&quot;slide&quot;,&quot;navigation&quot;:{&quot;nextEl&quot;:&quot;.swiper-button-next&quot;,&quot;prevEl&quot;:&quot;.swiper-button-prev&quot;},&quot;pagination&quot;:{&quot;el&quot;:&quot;.swiper-pagination&quot;,&quot;clickable&quot;:true}}'><div class="swiper-wrapper">
<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_34_39-PM-300x200-1.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Sliderberg</h2>



<p><strong>Slide Anything and Everything!</strong></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="border-radius:10px;background-color:#3f82c5" target="_blank" rel="noreferrer noopener">Get Sliderberg!</a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_34_34-PM-2.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Sliderberg</h2>



<p>No. 1 Slider Plugin for Gutenberg!</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="background-color:#892020" target="_blank" rel="noreferrer noopener">Get it for free!</a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_34_37-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Sliderberg</h2>



<p>Slide Any Block You Like.</p>



<div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-d445cf74 wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="background-color:#85bec3" target="_blank" rel="noreferrer noopener">Try Sliderberg</a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_34_36-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Sliderberg</h2>



<p>Slide Any Content You Want!</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="background-color:#8fbd8f" target="_blank" rel="noreferrer noopener">Try Sliderberg Free</a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_38_05-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-96af66a340d3bafd901f0ffbe09f2588">Sliderberg</h2>



<p class="has-base-color has-text-color has-link-color wp-elements-d115dc34d8e391c7c0bf33ea6eb63ba8">The New Gutenberg Slider Plugin</p>



<div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-d445cf74 wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="background-color:#2966a3" target="_blank" rel="noreferrer noopener">Try Free!</a></div>
</div>

</div></div>
</div></div><button class="swiper-button-prev" aria-label="Previous slide"></button><button class="swiper-button-next" aria-label="Next slide"></button><div class="swiper-pagination"></div></div></div>


<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading">Step 1: Install and Activate Sliderberg</h3>



<p>Start by installing the <strong>Sliderberg</strong> plugin if you haven&#8217;t already:</p>



<ol class="wp-block-list">
<li>Go to <strong>Plugins from your Dashboard</strong>.</li>



<li>Now, click th<strong>e Add New</strong> button.</li>



<li>Search for <strong>Sliderberg</strong> in the plugin search bar.</li>



<li>Click <strong>Install Now</strong>, then <strong>Activate</strong> the plugin.</li>
</ol>



<p>Once activated, the plugin will be available as a block inside the editor.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="554" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png" alt="How to Create a Slider With a Call-to-Action Button in WordPress" class="has-border-color has-primary-accent-border-color wp-image-480" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-1024x554.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-300x162.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44-768x416.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_11-29-44.png 1216w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">Step 2: Add the Sliderberg Block</h3>



<p>Open or create a new post or page and launch the Block Editor.</p>



<ol class="wp-block-list">
<li>Click the <strong>+</strong> icon to add a block.</li>



<li>Search for <strong>Sliderberg </strong>in the search box.</li>



<li>Select Sliderberg when it appears. </li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="928" height="606" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png" alt="" class="has-border-color has-main-accent-border-color wp-image-482" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25.png 928w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-300x196.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-26-25-768x502.png 768w" sizes="auto, (max-width: 928px) 100vw, 928px" /></figure>



<p>Now, select the Block Slider option. It will open a new Slider Canvas.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="916" height="684" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png" alt="" class="has-border-color has-main-accent-border-color wp-image-483" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43.png 916w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-300x224.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-28-43-768x573.png 768w" sizes="auto, (max-width: 916px) 100vw, 916px" /></figure>



<p>Here, you can add slide background images or colors for your slide background. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="930" height="858" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-30-44-1.png" alt="" class="has-border-color has-main-accent-border-color wp-image-485" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-30-44-1.png 930w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-30-44-1-300x277.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-30-44-1-768x709.png 768w" sizes="auto, (max-width: 930px) 100vw, 930px" /></figure>



<h3 class="wp-block-heading">Step 3: Add Background and Slide Content</h3>



<p>Now, let&#8217;s add Slides and Background Images for your Sliders. </p>



<ol class="wp-block-list">
<li>Click Add Slide to add slides. You can add as many slides as you want.</li>



<li>Click the Upload or Media Library button to add Images for your Slides.</li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="914" height="852" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-52-35.png" alt="" class="has-border-color has-main-accent-border-color wp-image-486" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-52-35.png 914w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-52-35-300x280.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_12-52-35-768x716.png 768w" sizes="auto, (max-width: 914px) 100vw, 914px" /></figure>



<p>Click the &#8220;Upload&#8221; or &#8220;Media Library&#8221; button to upload and select an image for the slider. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="928" height="756" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_13-03-46.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-489" style="border-width:1px;border-radius:3px"/></figure>



<p>Now add your Heading and content in the dedicated position. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="924" height="758" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_13-09-16.png" alt="" class="has-border-color has-main-accent-border-color wp-image-490" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_13-09-16.png 924w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_13-09-16-300x246.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_13-09-16-768x630.png 768w" sizes="auto, (max-width: 924px) 100vw, 924px" /></figure>



<h3 class="wp-block-heading">Step 4: Add and Style the CTA Button</h3>



<p>After that, follow the following.</p>



<ol class="wp-block-list">
<li>Click the <strong>+</strong> icon to add a block.</li>



<li>Search for Buttons in the search box.</li>



<li>Select the Buttons block when it appears. </li>
</ol>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="926" height="644" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_13-12-12.png" alt="" class="has-border-color has-main-accent-border-color wp-image-491" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_13-12-12.png 926w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_13-12-12-300x209.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_13-12-12-768x534.png 768w" sizes="auto, (max-width: 926px) 100vw, 926px" /></figure>



<p>When the button is inserted, add your Call-to-Action text and set the position. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="928" height="788" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_14-23-05.gif" alt="" class="has-border-color has-main-accent-border-color wp-image-492" style="border-width:1px;border-radius:3px"/></figure>



<p>After selecting the button block, you can adjust the button&#8217;s width from the <strong>Settings</strong> option on the right side panel. </p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="928" height="760" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_14-24-03-1.png" alt="" class="has-border-color has-main-accent-border-color wp-image-495" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_14-24-03-1.png 928w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_14-24-03-1-300x246.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_14-24-03-1-768x629.png 768w" sizes="auto, (max-width: 928px) 100vw, 928px" /></figure>



<p>In the Button&#8217;s style menu, you can edit the color, typography, dimensions, and border &amp; shadow of the button. Customize the button block as you like. </p>



<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="944" height="858" src="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_14-50-05.png" alt="" class="has-border-color has-main-accent-border-color wp-image-496" style="border-width:1px;border-radius:3px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_14-50-05.png 944w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_14-50-05-300x273.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2025-06-15_14-50-05-768x698.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>After customizing the first slide, repeat <strong>Steps 3 and 4 to create additional slides with a Call-to-Action</strong> button. </p>



<p>After finishing creating the slider, it looks like this. </p>


<div style="--swiper-navigation-color:#ffffff;--swiper-navigation-background-color:rgba(0, 0, 0, 0.5);--sliderberg-nav-opacity:1;--swiper-pagination-color:#ffffff;--swiper-pagination-bullet-inactive-color:#6c757d;--swiper-pagination-bullet-inactive-opacity:1;--sliderberg-min-height:400px;--sliderberg-easing:ease;" class="sliderberg-nav-circle sliderberg-nav-medium sliderberg-effect-slide sliderberg-nav-h-space-between sliderberg-nav-v-center sliderberg-dots-h-center sliderberg-dots-v-bottom sliderberg-pagination-bullets align wp-block-sliderberg-sliderberg"><div class="sliderberg-swiper-wrap"><div class="swiper sliderberg-swiper" data-swiper-data='{&quot;speed&quot;:500,&quot;loop&quot;:true,&quot;slidesPerView&quot;:1,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:0,&quot;keyboard&quot;:{&quot;enabled&quot;:true},&quot;a11y&quot;:{&quot;prevSlideMessage&quot;:&quot;Previous slide&quot;,&quot;nextSlideMessage&quot;:&quot;Next slide&quot;},&quot;effect&quot;:&quot;slide&quot;,&quot;navigation&quot;:{&quot;nextEl&quot;:&quot;.swiper-button-next&quot;,&quot;prevEl&quot;:&quot;.swiper-button-prev&quot;},&quot;pagination&quot;:{&quot;el&quot;:&quot;.swiper-pagination&quot;,&quot;clickable&quot;:true}}'><div class="swiper-wrapper">
<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_34_39-PM-300x200-1.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Sliderberg</h2>



<p><strong>Slide Anything and Everything!</strong></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="border-radius:10px;background-color:#3f82c5" target="_blank" rel="noreferrer noopener">Get Sliderberg!</a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_34_34-PM-2.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Sliderberg</h2>



<p>No. 1 Slider Plugin for Gutenberg!</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="background-color:#892020" target="_blank" rel="noreferrer noopener">Get it for free!</a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_34_37-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Sliderberg</h2>



<p>Slide Any Block You Like.</p>



<div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-d445cf74 wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="background-color:#85bec3" target="_blank" rel="noreferrer noopener">Try Sliderberg</a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_34_36-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading">Sliderberg</h2>



<p>Slide Any Content You Want!</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="background-color:#8fbd8f" target="_blank" rel="noreferrer noopener">Try Sliderberg Free</a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://dev-elegantphotography.pantheonsite.io/wp-content/uploads/2025/06/ChatGPT-Image-Jun-7-2025-01_38_05-PM.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h2 class="wp-block-heading has-base-color has-text-color has-link-color wp-elements-96af66a340d3bafd901f0ffbe09f2588">Sliderberg</h2>



<p class="has-base-color has-text-color has-link-color wp-elements-d115dc34d8e391c7c0bf33ea6eb63ba8">The New Gutenberg Slider Plugin</p>



<div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-d445cf74 wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://it.wordpress.org/plugins/sliderberg/" style="background-color:#2966a3" target="_blank" rel="noreferrer noopener">Try Free!</a></div>
</div>

</div></div>
</div></div><button class="swiper-button-prev" aria-label="Previous slide"></button><button class="swiper-button-next" aria-label="Next slide"></button><div class="swiper-pagination"></div></div></div>


<p>When you&#8217;re done, please update or publish your post or page. </p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h2 class="wp-block-heading">Final Thoughts</h2>



<p>Sliderberg makes it easy to build sliders that don’t just look good—they drive action. You can highlight products, promote offers, or link to landing pages with just a few blocks. </p>



<p>Everything remains within the native editor, eliminating the need for third-party builders or custom code.</p>



<p>Try it out and turn your slider into a section that truly works for your goals.</p>


<div style="gap: 20px;" class="align-button-center ub-buttons orientation-button-row ub-flex-wrap wp-block-ub-button" id="ub-button-ac843949-951a-44bd-9b12-50ff0a2961bd"><div class="ub-button-container">
			<a href="https://wordpress.org/plugins/sliderberg/" target="_blank" rel="noopener noreferrer" class="ub-button-block-main   ub-button-flex" role="button" style="--ub-button-background-color: #4687c7; --ub-button-color: #ffffff; --ub-button-border: none; --ub-button-hover-background-color: #313131; --ub-button-hover-color: #ffffff; --ub-button-hover-border: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 10px;; border-top-right-radius: 10px;; border-bottom-left-radius: 10px;; border-bottom-right-radius: 10px;; ">
				<div class="ub-button-content-holder" style="flex-direction: row">
					<span class="ub-button-block-btn">Try Sliderberg Today!</span>
				</div>
			</a>
		</div></div>

<div class="wp-block-ub-social-share" id="ub-social-share-3066147e-aceb-43a0-b2e7-24f615912bfd">
			<div class="social-share-icons align-icons-center orientation-icons-row"><a aria-label="facebook-logo" target="_blank" rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-create-a-slider-with-a-call-to-action-button%2F&amp;title=How%20to%20Create%20a%20Slider%20With%20a%20Call-to-Action%20Button%20in%20WordPress" class="ub-social-share-facebook-container" style="border-color: #1877f2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-facebook" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#1877f2" fill="#1877f2" width="20" height="20" viewbox="0 0 264 512"><path d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg></span><span style="">share</span>
			</a><a aria-label="twitter-logo" target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-create-a-slider-with-a-call-to-action-button%2F&amp;text=How%20to%20Create%20a%20Slider%20With%20a%20Call-to-Action%20Button%20in%20WordPress" class="ub-social-share-twitter-container" style="border-color: #1d9bf0; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-twitter" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="color:#1d9BF0" fill="#1d9BF0" width="20" height="20" viewbox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg></span><span style="">tweet</span>
			</a><a aria-label="linkedin-logo" target="_blank" rel="nofollow" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fsliderberg.com%2Fblog%2Fhow-to-create-a-slider-with-a-call-to-action-button%2F" class="ub-social-share-linkedin-container" style="border-color: #2867b2; background-color: transparent; box-shadow: none; ">
				<span class="social-share-icon ub-social-share-linkedin" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#2867b2" fill="#2867b2" width="20" height="20" viewbox="0 0 448 512"><path d="M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z"></path></svg></span><span style="">share</span>
			</a></div>
		</div>


<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-create-a-slider-with-a-call-to-action-button/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Create a Slider in WordPress (Step-by-Step Tutorial)</title>
		<link>https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/</link>
					<comments>https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[Moinul Maruf]]></dc:creator>
		<pubDate>Thu, 05 Jun 2025 05:51:10 +0000</pubDate>
				<category><![CDATA[How To]]></category>
		<guid isPermaLink="false">https://sliderberg.com/?p=299</guid>

					<description><![CDATA[Sliders are one of the most effective ways to highlight important content without overwhelming the page. Whether you&#8217;re showcasing new products, sharing testimonials, or featuring blog highlights, a slider lets you do it all in a compact, interactive format. While WordPress offers plenty of slider plugins, most of them either feel outdated or pull you [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Sliders are one of the most effective ways to highlight important content without overwhelming the page. Whether you&#8217;re showcasing new products, sharing testimonials, or featuring blog highlights, a slider lets you do it all in a compact, interactive format.</p>



<p>While WordPress offers plenty of slider plugins, most of them either feel outdated or pull you out of the editor with clunky interfaces and shortcodes. If you&#8217;re using the block editor, you’ll want something that works where you work with complete control over layout, content, and styling.<br>This tutorial will show you how to create a custom slider using <a href="https://wordpress.org/plugins/sliderberg/" target="_blank" rel="noopener">Sliderberg Slider Blocks</a>, a plugin built specifically for the WordPress block editor. Let’s begin.</p>


<div style="max-width: -moz-fit-content; " class="wp-block-ub-table-of-contents-block ub_table-of-contents" id="ub_table-of-contents-5b2ce98f-6b24-48bb-ba80-56094d0503fd" data-linktodivider="false" data-showtext="show" data-hidetext="hide" data-scrolltype="auto" data-enablesmoothscroll="false" data-initiallyhideonmobile="false" data-initiallyshow="true"><div class="ub_table-of-contents-header-container" style="">
			<div class="ub_table-of-contents-header" style="text-align: left; ">
				<div class="ub_table-of-contents-title">Create a Slider in WordPress</div>
				<div class="ub_table-of-contents-header-toggle">
			<div class="ub_table-of-contents-toggle" style="">
			 [<a class="ub_table-of-contents-toggle-link" href="#" style="">hide</a>]
			</div>
		</div>
			</div>
		</div><div class="ub_table-of-contents-extra-container" style="">
			<div class="ub_table-of-contents-container ub_table-of-contents-1-column ">
				<ul style=""><li style=""><a href="https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/#0-step-1-install-and-activate-sliderberg" style="">Step 1: Install and Activate Sliderberg</a></li><li style=""><a href="https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/#1-step-2-insert-the-slider-block-and-choose-a-type" style="">Step 2: Insert the Slider Block and Choose a Type</a></li><li style=""><a href="https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/#2-step-3-add-your-slides" style="">Step 3: Add Your Slides</a></li><li style=""><a href="https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/#3-step-4-edit-and-arrange-slide-content" style="">Step 4: Edit and Arrange Slide Content</a></li><li style=""><a href="https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/#4-step-5-reorder-or-delete-slides" style="">Step 5: Reorder or Delete Slides</a></li><li style=""><a href="https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/#5-step-6-adjust-slider-settings" style="">Step 6: Adjust Slider Settings</a></li><li style=""><a href="https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/#6-demo-slide-r" style="">Demo Slider</a></li></ul>
			</div>
		</div></div>

<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_d35376d3-88f7-4fca-aec5-5b2ad1ec4425"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading" id="0-step-1-install-and-activate-sliderberg">Step 1: Install and Activate Sliderberg</h3>



<p>From your WordPress dashboard, go to Plugins and click Add New. Search for “Sliderberg Slider Blocks,” then click Install Now, followed by Activate.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="462" src="https://sliderberg.com/wp-content/uploads/2025/06/1-1-1024x462.png" alt="" class="has-border-color wp-image-302" style="border-color:#4687c7;border-width:2px;border-radius:10px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/1-1-1024x462.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/1-1-300x135.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/1-1-768x346.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/1-1-1536x692.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/1-1.png 1724w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_e2975713-b1e3-4b81-8611-9e8afaf70e0b"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading" id="1-step-2-insert-the-slider-block-and-choose-a-type">Step 2: Insert the Slider Block and Choose a Type</h3>



<p>Open a page or post in the editor. Click the plus icon, search for “Sliderberg,” and insert the Sliderberg Slider block. When prompted, select Blocks Slider to continue.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="432" src="https://sliderberg.com/wp-content/uploads/2025/06/2-2-1024x432.png" alt="" class="has-border-color wp-image-320" style="border-color:#4687c7;border-width:2px;border-radius:10px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/2-2-1024x432.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/2-2-300x126.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/2-2-768x324.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/2-2-1536x647.png 1536w, https://sliderberg.com/wp-content/uploads/2025/06/2-2.png 1782w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_84c58ce8-ff17-46df-b043-683b4a2a155b"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading" id="2-step-3-add-your-slides">Step 3: Add Your Slides</h3>



<p>Click the Add Slide button to insert a new slide. To begin, click inside the slide and either upload an image, choose one from your media library, or set a background color.&nbsp;</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="741" src="https://sliderberg.com/wp-content/uploads/2025/06/3-2-1024x741.png" alt="" class="has-border-color wp-image-321" style="border-color:#4687c7;border-width:2px;border-radius:10px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/3-2-1024x741.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/3-2-300x217.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/3-2-768x555.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/3-2.png 1489w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_6c901ba7-0738-4cb1-9de4-4ff485bb615f"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading" id="3-step-4-edit-and-arrange-slide-content">Step 4: Edit and Arrange Slide Content</h3>



<p>Use the block inserter to add blocks such as Image, Heading, Paragraph, or Button inside any slide. Arrange and style the content using the editor tools just like you would with regular blocks.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="481" src="https://sliderberg.com/wp-content/uploads/2025/06/4-1-1024x481.png" alt="" class="has-border-color wp-image-322" style="border-color:#4687c7;border-width:2px;border-radius:10px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/4-1-1024x481.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/4-1-300x141.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/4-1-768x361.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/4-1.png 1252w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_fda1871a-26ac-4676-b445-0dde9879ed43"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading" id="4-step-5-reorder-or-delete-slides">Step 5: Reorder or Delete Slides</h3>



<p>Use the navigation arrows below the slider to browse through your slides. To delete a slide, select it and click the Delete Slide button at the top. To reorder slides, use the Move Left or Move Right arrows in the slide’s block toolbar.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="567" src="https://sliderberg.com/wp-content/uploads/2025/06/5-new-1024x567.png" alt="" class="has-border-color wp-image-323" style="border-color:#4687c7;border-width:2px;border-radius:10px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/5-new-1024x567.png 1024w, https://sliderberg.com/wp-content/uploads/2025/06/5-new-300x166.png 300w, https://sliderberg.com/wp-content/uploads/2025/06/5-new-768x425.png 768w, https://sliderberg.com/wp-content/uploads/2025/06/5-new.png 1488w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_a94fe9ea-99af-4728-99e5-89b7be63cb34"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading" id="5-step-6-adjust-slider-settings">Step 6: Adjust Slider Settings</h3>



<p>Select the main slider block to open the settings panel. You’ll find options to change transition effects, enable autoplay, customize navigation arrows and dots, adjust spacing, and set colors.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="306" height="860" src="https://sliderberg.com/wp-content/uploads/2025/06/6.png" alt="" class="has-border-color wp-image-326" style="border-color:#4687c7;border-width:2px;border-radius:10px" srcset="https://sliderberg.com/wp-content/uploads/2025/06/6.png 306w, https://sliderberg.com/wp-content/uploads/2025/06/6-107x300.png 107w" sizes="auto, (max-width: 306px) 100vw, 306px" /></figure>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_b823df7c-6b51-403c-a20a-050666b44767"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 30%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #4687c7; margin-top: 2px; "></div></div></div>


<h3 class="wp-block-heading" id="6-demo-slide-r"><strong>Demo Slide</strong>r</h3>


<div style="--swiper-navigation-color:#ffffff;--swiper-navigation-background-color:rgba(0, 0, 0, 0.5);--sliderberg-nav-opacity:1;--swiper-pagination-color:#ffffff;--swiper-pagination-bullet-inactive-color:#6c757d;--swiper-pagination-bullet-inactive-opacity:1;--sliderberg-min-height:400px;--sliderberg-easing:ease;" class="sliderberg-nav-circle sliderberg-nav-medium sliderberg-effect-slide sliderberg-nav-h-space-between sliderberg-nav-v-center sliderberg-dots-h-center sliderberg-dots-v-bottom sliderberg-pagination-bullets align wp-block-sliderberg-sliderberg"><div class="sliderberg-swiper-wrap"><div class="swiper sliderberg-swiper" data-swiper-data='{&quot;speed&quot;:500,&quot;loop&quot;:true,&quot;slidesPerView&quot;:1,&quot;slidesPerGroup&quot;:1,&quot;spaceBetween&quot;:0,&quot;keyboard&quot;:{&quot;enabled&quot;:true},&quot;a11y&quot;:{&quot;prevSlideMessage&quot;:&quot;Previous slide&quot;,&quot;nextSlideMessage&quot;:&quot;Next slide&quot;},&quot;effect&quot;:&quot;slide&quot;,&quot;navigation&quot;:{&quot;nextEl&quot;:&quot;.swiper-button-next&quot;,&quot;prevEl&quot;:&quot;.swiper-button-prev&quot;},&quot;pagination&quot;:{&quot;el&quot;:&quot;.swiper-pagination&quot;,&quot;clickable&quot;:true}}'><div class="swiper-wrapper">
<div class="swiper-slide sliderberg-slide" style="background-image:url(https://unlimited-lizard-4bd4f5.instawp.xyz/wp-content/uploads/2025/06/0df0254c-0a7b-4370-a35b-e35bdfb368c1.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h3 class="wp-block-heading has-text-align-center has-base-color has-text-color has-link-color wp-elements-ca4d4ef48e0a001e70e80f3aa38b160b" id="7-meet-marley">Meet Marley</h3>



<p class="has-text-align-center has-base-color has-text-color has-link-color has-base-font-size wp-elements-1b9a5e127ba9c548bbe20501793939dc">Energetic, loyal, and ready for a home filled with belly rubs.</p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--1"><a class="wp-block-button__link has-base-color has-text-color has-link-color has-text-align-center wp-element-button"><strong>Adopt Marley</strong></a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://unlimited-lizard-4bd4f5.instawp.xyz/wp-content/uploads/2025/06/7ac7e223-8c5d-4a2b-aba0-579e99639a37.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h3 class="wp-block-heading has-text-align-center has-base-color has-text-color has-link-color wp-elements-0202b2fb109bee378294e53284dc6cb8" id="8-double-the-cuteness">Double the Cuteness</h3>



<p class="has-text-align-center has-base-color has-text-color has-link-color has-base-font-size wp-elements-9c58002959dbffa2a6563a374bcf171b"><strong>Snuggle buddies looking for someone to love them both.</strong></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--2"><a class="wp-block-button__link has-base-color has-text-color has-link-color wp-element-button">Meet the Kittens</a></div>
</div>

</div></div>

<div class="swiper-slide sliderberg-slide" style="background-image:url(https://unlimited-lizard-4bd4f5.instawp.xyz/wp-content/uploads/2025/06/ed939534-cf37-43d5-9381-ffbfcb2dc298.png);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:scroll;min-height:400px;position:relative;overflow:hidden;"><div class="sliderberg-slide-content" style="display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-height:400px;padding:20px;width:100%;box-sizing:border-box;;position:relative;z-index:2;">

<h3 class="wp-block-heading has-text-align-center has-base-color has-text-color has-link-color wp-elements-57775d1e228fafd9eb5c22aa7f591e79" id="9-slow-and-steady-wins-your-heart" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">Slow and Steady Wins Your Heart</h3>



<p class="has-text-align-center has-text-color has-link-color has-base-font-size wp-elements-25f82694e1c5e02c2a6a372a0c3f7d71" style="color:#fdf9ff;padding-top:0;padding-bottom:0">This peaceful little explorer is waiting for a quiet home.</p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--3"><a class="wp-block-button__link has-base-color has-text-color has-link-color wp-element-button">Adopt Now</a></div>
</div>

</div></div>
</div></div><button class="swiper-button-prev" aria-label="Previous slide"></button><button class="swiper-button-next" aria-label="Next slide"></button><div class="swiper-pagination"></div></div></div>


<h4 class="wp-block-heading" id="10-conclusion-"><strong>Conclusion</strong></h4>



<p>Sliders let you present content in a focused, scroll-free layout. Whether it&#8217;s images, products, or announcements, building one directly in the block editor keeps everything simple. With the right plugin, you can create and manage sliders without leaving the editor. You have full control over layout, style, and behavior, and updating your slider is just as easy as editing any other block.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://sliderberg.com/blog/how-to-create-a-slider-in-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Page Caching using Disk: Enhanced 

Served from: sliderberg.com @ 2026-04-17 17:35:05 by W3 Total Cache
-->