Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Create HTML Sliders

Would you like to create an HTML slider? Well, Soliloquy can do that too! Let’s walk through the steps on how you can create HTML Slides.

  1. Create or Edit Slider
  2. Add HTML Slide
  3. Style HTML Slider with CSS (optional)
  4. Configure Your Slider (optional)
  5. FAQs

 


Step 1 – Create or Edit Slider

The first step is to create or select a slider to edit.

Step 2 – Add HTML Slide

From the slider edit screen, select the Select Files from Other Sources button from the Native Slider section.

select image from other sources

This will open the Insert Media lightbox. Select the Insert HTML Slide link from the left sidebar:

insert-html-slide

This will then display the following fields for you to add your first html slide:

  • HTML Slide Title – required
  • HTML Slide Code

Enter the title (for your organizational purposes only), and add your HTML:

insert your html code to the slider

When you’re finished, select the Insert into Slider button to add your html slide:

insert your html slide

Here is an example of our code:

<div class="blockquote"><p>I used to custom build rotators for every project since I hadn't found a tool with the flexibility I needed. Now I have Soliloquy. It works great out of the box, has an easy-to-use interface, and gives you the power to customize everything with hooks and filters.</p>

<div class="quote-image"><img src="#" alt="bill" /></div>
<div class="quote-footer">Bill Erickson<strong> at <a href="#" target="_blank">at billerickson.net</a></strong></div>

</div>

Step 3 – Add your CSS to accent your new HTML slide (optional)

Since you’ve used HTML to create your slide, you will want to create some CSS to make the HTML look good. Alternatively, you could use your theme’s class and id’s name when creating your HTML for easier use. But for this instance, we’re going to use our own CSS and using the Soliloquy CSS Addon.

You can use CSS to apply your own CSS to slider images.

  • Apply CSS to Specific Slider: Use the CSS Addon to apply the CSS from this doc to a specific slider on your site.
  • Apply CSS to ALL Sliders: To apply the CSS from this doc to affect ALL sliders on your site, add to your active theme‚Äôs style.css file.
.blockquote {
    max-width: 100%;
    margin:0 auto !important;
}
.blockquote p {
    font-size: 16px;
}
.quote-image {
    float: left !important;
    display: inline-block;
    margin: 20px 0 !important;
    max-width: 20%;
    width: 75px !important;
}
.quote-image img {
border-radius: 50%;
}
.quote-footer {
    margin-top: 50px !important;
    margin-left: 90px !important;
}

Step 4 – Configure Your Slider (optional)

Lastly, we recommend you configure the dimensions of your slider in the Config tab to make sure it displays in the correct proportions to best highlight your html! The CSS above is for demonstration only and can vary based on your theme.

That’s it! Publish or update your slider and you’ve successfully created a html slider!


FAQs

Q: Can I add multiple html slides at one time?

A: Yes! You can select the Add Another HTML Slide button at the top of the Insert HTML Slide lightbox to add more slides at one time.

add another html slide

This will output an additional set of fields each time you select it, allowing you to more quickly populate a html slider.

[i]
[i]