What is the Tutorial About?

A step-by-step guide on how to create an auto-scrolling logo slider on your WordPress website using Bricks Builder. This feature is a dynamic way to showcase your partnerships, certifications, or portfolio in a visually engaging manner. It’s a great tool for website design, plugin installation, and troubleshooting.

Tutorial Steps

1. Start a New Section:
   Navigate to your WordPress dashboard and open the page where you want to add the logo slider. After your hero banner, add a new section.
2. Insert a Slider:
   In the new section, click on ‘Add Element’ and select ‘Nestable Slider’ from the list. This slider allows you to arrange your logos flexibly.
3. Create Your First Slide:
   In the nestable slider, create your first slide. This should include a heading (the name of the company or certification) and an image (the logo). Customize the slide to match your website’s aesthetics.
4. Duplicate the Slide:
   Once you’re satisfied with your first slide, duplicate it for the rest of your logos. Replace the heading and image for each slide accordingly.
5. Configure the Slider Settings:
   In the slider settings, set the slider to loop from left to right. Set the ‘Autoplay Interval’ to zero for a smooth, continuous scroll. Adjust the ‘Visible Slides’ to determine how many logos should be visible at once.
6. Add Custom CSS:
   To ensure a smooth scrolling effect, add the CSS code below to the slider.

   root :where(.splide__list, .splide__slide){
     transition-timing-function: linear !important; 
   }

7. Adjust the Slider’s Size:
   Depending on your website’s design, you may need to adjust the height of the slider. This can be done in the slider options.
8. Preview Your Work:
   Always preview your changes to ensure everything looks and works as expected. Make any necessary adjustments to the slider text, size, or speed.

Use Cases for this Tutorial

• Showcasing Partnerships:
  Display logos of your partner companies or clients to build credibility.
• Highlighting Certifications or Affiliations:
  Show off your memberships or certifications from professional organizations.
• Displaying Portfolio Logos:
  If you’re a designer or agency, showcase logos you’ve designed for clients.
• Featuring Sponsors:
  If your website is for an event or non-profit, display logos of your sponsors.