Default Slider

To create your own slides for the default slider all you need to do is create a new post where the Featured Image field (located in the right sidebar of the post) is the slide image. Any text you enter into the WYSIWYG editor will appear over the slide. If you leave this empty you will just see an image.

Formatting the Slide Text

Wrapping your slide text in <h1> or <h2> tags will give it a heading style and wrapping it in <p> tags will give it a body style. For example the following HTML will produce the same result as the first slide on the CityLogic demo site:

<h2>Super Adaptable</h2>
<p>
Anything and everything you need
</p>

Adding a Button

To add a button to a slide just add a normal HTML link to the URL you would like the button to direct to and give it a class of “button” like this:

<a href="https://www.outtheboxthemes.com/" class="button">Button Text</a>

Creating a Slider Post Category

Once you’ve added an image and possibly some text or a button assign it to a new post category such as “Slider”. This category will be used to filter out the slide-specific posts from the blog posts and should be dedicated to the slider. If you share this category with posts that you wish to display on your site they too will become “slide posts” and disappear from your blog.

Assigning the Post Category to the Slider

Once you’ve created a slider post category and assigned your slide posts to it navigate to Appearance > Customize > Slider. If you wish to include posts from multiple categories you can do this by holding down the Ctrl (Windows) / Command (Mac) button when you select the categories.

Displaying The Slider on All Pages and Posts

The Premium version of CityLogic has “Display the slider on all pages” and “Display the slider on the blog posts” settings which will allow you to display the homepage slider on all of your pages or all of your posts respectively. If you’d prefer to set individual sliders for your pages you can do that as well.

Transition Effect

The default transition effect of the slides is “Uncover Fade”. The Premium version has a variety of transition effects to choose from:

  • Uncover Fade
  • Uncover
  • Cover Fade
  • Cover
  • Fade
  • Crossfade
  • Scroll
  • Direct Scroll

Slideshow Mode

The Premium version of CityLogic has a slideshow mode for the Default Slider which sets it to autoscroll. You are also able to set the speed with which the slideshow runs.