How to Create a Fullwidth Slider

Would you like to create a fullwidth slider but you’re not sure how to use the HTML we show in this article? No worries! There are other ways but this can depend on the theme you’re using. We’ll show you how we create a fullwidth slider using a Soliloquy Slider and a little bit of CSS.

• Setup
  1. Install and activate the CSS Addon
  2. Create or edit your slider
  3. Enable the Fullwidth slider settings
  4. Publish or Update the slider
  5. Create a page and add your shortcode
  6. The CSS
• FAQs
  • Is this the only way of creating a fullwidth slider?
  • Why is the content edge to edge as well?

Setup

Step 1 – Install and activate the CSS Addon

Your first step will be to install and activate the Soliloquy CSS Addon.

If you need any assistance in installing addons, please take a look at this article.

For this instance, we’ll be installing the CSS Addon.

Step 2 – Create or edit your slider

Next, create a new slider or edit an existing one. You can follow along with our documentation for creating your first slider.

Step 3 – Enable the Fullwidth slider settings

After you’ve added your images, there are some specific settings you’ll need to enable on your slider before you can create a fullwidth slider.

Take a look at the image below to see the settings we’ve used for our fullwidth slider.

As you can see, we’ve set the Image Size dropdown to fullwidth and set the image width and height to be rather large. For the purpose of this documentation use the width 3000px and the height at 800px. You can of course change these settings to meet your specific needs as you see fit.

Step 4 – Publish or Update the slider

Finally, the last step in the settings on the slider will be to click Publish or Update on your slider.

Step 5 – Adding the fullwidth slider shortcode

Now it’s time to add your fullwidth slider shortcode to a page or post. You can either create a new page (or post) or choose to edit any page or post.

Some themes will give you a specific page template to use for fullwidth pages or if you are using a page builder, you can automatically create a fullwidth content area and then just simply add your slider shortcode to this area.

However, a lot of themes don’t give you a fullwidth page template so for the purpose of this documentation, we’re going to show you how to create one by simply using CSS.

Once you create a new page and publish it or edit any page, you’ll notice that the URL for the page will contain a number like what’s shown in the image below.

As you can see, our page ID for this particular page is 5241438 so any time we want to target any CSS for a specific page ID, we’d use this number in our CSS.

Now that we know our page ID then only thing left to do is add our fullwidth slider shortcode to this page.

Step 6 – The CSS

The CSS we’re using for this demo shown below is this.

Simply copy and paste that CSS above to your Misc tab of your slider under the Custom Slider CSS box (the last box on the tab) or you can add this CSS to your WordPress » Appearance » Customize » Additional CSS and click Publish to save the changes.

Check out our demo of this in action!

Would you like to see what other fun things you can do with CSS. Take a look at all of our CSS tutorials.

FAQs

Q: Is this the only way of creating a fullwidth slider?

A: Not at all! You can take a look at our article on How to Create a Fullwidth Image Slider in WordPress.

Q: Why is the content edge to edge as well?

A: Unfortunately if you’re theme does not give you a dedicated fullwidth space or template, using CSS in this manner will also affect any content you have on the page. This is why it’s best to use a page builder for something like this as it can be more easily done to create some fullwidth sections and some content sections that have a fixed width.