You’re in the right place if you use the Woodmart WordPress theme and want to change how the slider on your home page looks. When people visit your site, sliders are often the first thing they see. You can use a good one to get people’s attention, draw attention to your most important items, and make your website look polished and professional.
You can use Elementor or WPBakery to follow this guide, which will show you how to change the Woodmart slider in the right way. Based on this detailed lesson from our YouTube channel, Preet Tech Ideas, we’ll talk about everything from how to set up your device to how to style it expertly.
✅ By the end of this blog, you’ll learn how to:
✔ Add and edit sliders
✔ Change images, text, and animations
✔ Create responsive sliders for all screen sizes
✔ Optimize sliders for better website speed
✔ Customize call-to-action buttons and product highlights
🎥 Prefer watching instead of reading?
You can follow the full step-by-step tutorial in this video where we show exactly how to customize the Woodmart slider from start to finish.
Let’s jump right in!
🔧 What does the Woodmart Slider do?
The Woodmart slider is a part of the Woodmart WordPress theme that can be changed. It’s usually the first thing people see on your site and can be found on the home page. You can add pictures, text, buttons, movies, and even animations to this slider. It depends on how your theme is set up whether you can create it with Elementor or WPBakery.
Woodmart uses either:
🟢 Elementor Page Builder
🟢 WPBakery Page Builder
You can change how the scale looks and works with either choice.
🧰 Step 1: Getting to Woodmart’s Slider
1. Access the WordPress Dashboard by logging in.
- Log in to yourdomain.com/wp-admin.
2. Click on Pages > All Pages.
- Just go to your site and click on “Edit with Elementor” or “Edit with WPBakery,” whichever one you use.
3. Move the cursor to the slider area.
- This goes at the top of the page most of the time. You can start changing the area by clicking it.
📝 Tip:
Keep in mind that if you use a demo import, your slider will already be set up with demo material. You can change this right away.
🖼 Step 2: Change the background image of the slider
To change the picture on the slider:
👉 Using Elementor:
- Click on the slider section.
- Go to Style > Background
- Upload your image under “Background Type > Classic”.
- Use high-quality images (1920x1080px works well).
- Adjust the position (center, top-center, etc.)
- Set background-size to cover
👉 Using WPBakery:
- Click on “Row Settings” of the slider row
- Choose Design Options > Background
- Upload or replace the existing image
- Set position and size accordingly
🔒 Pro Tip:
To make your page load quickly, use images that have been compressed. This can be done with tools like TinyPNG or ShortPixel.
Step 3: Change the text in the slider
Your slider usually has:
- A Main Heading
- A Subheading
- A Call-to-Action Button
To modify text:
- Click on the text area.
- Change the text of the heading or subheading
- To emphasise something, use style (bold, underline)
- Keep it concise and focused, with a maximum of 5–10 words.
🎯 For instance:
Old Text: Welcome to Our Shop
New Text: Get 50% off stylish designs
🎨 Step 4: Designing the Slider
Font and Color:
- Go to the “Style” tab and select “Typography
- Pick a clean style that is easy to read.
- Change the color, size, and space
- Stick to your brand’s colors.
Animations:
- Add welcome effects like zoom, fade in, or slide left.
- Do not use too many effects; they can be annoying.
- Only use one video for each part.
📱 Step 5: Make the slider work on mobile devices
Your icon needs to look good on phones since more than 70% of people who visit sites do so on their phones.
👉 Elementor:
- Click the responsive mode icon in the bottom left area of Elementor.
- Navigate to the “Mobile” view.
- Modify the image location, text size, and padding.
- Hide things that are too big for small screens
👉 WPBakery:
- In the row and column choices, use the responsive settings
- Set the borders and padding for mobile
- Change the size of the text and hide extra elements
🧲 Step 6: Linking Products or Buttons
You can include links to:
- Product pages
- Collections
- Contact or offer pages
- External URLs
How :
- Click on the button part
- Under “Link,” Paste the URL you want to access.
- Choose whether to open it in the same tab or a new one.
- Use strong, short CTA text:
- 🔘 Shop Now
🔘 Learn More
🔘 Get Discount
🧠 Advanced Tip: Use more than one slide.
You can use more than one slide. For more variety, add more:
- Make a copy of your present slide
- Change the words and background
- Adjust the transition time and delay to the recommended range of 3–5 seconds.
- For branding, use the same style every time.
You can also disable auto play and add dots or lines to move around by manually.
📤 Step 7: Preview and Save Your Changes
Make sure you save your work and see how it looks on:
- Desktop
- Tablet
- Mobile
Press “Update” and look at the homepage before you post it. Small changes should be made based on what works best on all devices.
🧩 Bonus: Slider Speed Optimization
If you don’t set them up right, sliders can slow down your site. How to keep that from happening:
✅ Compress images
✅ Limit slides to 2–3
✅ Use lazy load or defer scripts
✅ Don’t use video backgrounds unless essential
✅ Use caching plugins like WP Rocket or LiteSpeed Cache
🎯 Conclusion
You can make your site stand out by changing how the Woodmart slider looks. The slider is where it all begins, whether you’re showing off goods, advertising a sale, or just making an introduction for your visitors.
You can quickly make a beautiful, mobile-friendly homepage slider by following the steps in this blog post and watching our full video guide.
Preet Web Vision can help you if you’re stuck or want a website that is made just for you.
📌 Ready to transform your homepage with a stunning slider?
🎨 Customize it yourself with this guide or…
🧑💻 Let the experts at Preet Web Vision do it for you.
👉 Call us at +63-9633112000 or email hello@preetwebvision.com
👉 Visit our site: Preet Web Vision
👉 Subscribe for more tutorials:
📺 Preet Tech Ideas (English)
📺 Preet WebXP (Hindi)
Let your website speak for your brand—beautifully, fast, and right from the first click.