Bianca – Slider

Last updated on

Below are instructions on how you can edit and use the slider in the Bianca theme.

How to add a slider to a page

Follow the instructions below if you want to add the slider to a new page. Kadence Blocks’s Posts block is used to create the slider and your posts will be displayed automatically.

Step #1: Load the scripts and CSS

In order for the slider to work, you’ll have to add a class to the page to load the scripts. This is so the slider scripts + CSS will run only on the page with the slider instead of all pages of your site.

  1. Go to Pages > create a page or open the page you want to have the slider in the editor
  2. Scroll down to the “Custom fields” section *
  3. Click on “Enter new”
  4. Add body-class to the Name field and nd-slider-active to the Value field
  5. Click on “Add Custom Field” and publish the changes

* If you can’t see the “Custom fields” section, you have to enable it – while you’re in the page editor, click on the 3 dots in the top right corner of the page > select “Preferences” > select “General” > scroll down to “Advanced” > check “Custom fields” and click on “Enable & Reload”.

Step #2: Add the slider

  1. Go to Pages > open the page you want to have a slider in the editor
  2. Click on “Design Library” from the top of the page
  3. Select “Bianca” from the top to access the theme’s block collection
  4. Click on “Slider Layouts” from the left
  5. Choose a layout and click on it

And that’s it! You can follow the rest of the instructions if you want to learn how to change the number of posts, the number of slides visible at once, the layout of the slider and so on.

Change the number of posts

To change the number of posts the slider will loop through, click here for instructions.

Display posts from one or more categories

If you want to display posts from one or more categories (or tags), click here for instructions.

Change the number of slides

The instructions below will show you how to change the number of slides displayed at once (1 slide, 2 slides, 3 slides, etc).

  1. Go to Pages in your WordPress dashboard > open the page with the slider in the editor
  2. Click on the Posts block
  3. Select the “Advanced” tab from the right sidebar
  4. Expand “Advanced”
  5. The second class (the class after nd-slider) in “Additional CSS class(es)” is the one that determines how many slides are visible at once
  6. Here are the available classes you can use (add only one of them!):
    • nd-slider-1 (1 slide, full)
    • nd-slider-1-center (1 slide, centered)
    • nd-slider-2 (2 slides)
    • nd-slider-2-center (2 slides, centered)
    • nd-slider-3 (3 slides)
    • nd-slider-3-center (3 slides, centered)
    • nd-slider-4 (4 slides)

Change the layout of the slider

While you can use the Design Library to select a new layout for the slider, only changing the class might be more useful if you’ve already made changes (like adding an excerpt, a button, etc).

  1. Go to Pages in your WordPress dashboard > open the page with the slider in the editor
  2. Click on the Posts block
  3. Select the “Advanced” tab from the right sidebar
  4. Expand “Advanced”
  5. The third class (the class after nd-slider and the class for the number of slides) in “Additional CSS class(es)” is the one that determines the layout of the slider
  6. Here are the available classes you can use (add only one of them!):
    • nd-slider-overlay (the text will be on top of the image)
    • nd-slider-overlay-middle (the text will be in the middle of the image)
    • nd-slider-below (the text will be below the image)
    • nd-slider-behind (the text will be slightly on top of the image)
    • nd-slider-aside (the text will be on the left side of the image; I recommend showing only 1 slide at a time with this layout for best results)

Change the size of the slider image

  1. Go to Pages in your WordPress dashboard > open the page with the slider in the editor
  2. Click on the Posts block
  3. Select the “Style” tab from the right sidebar
  4. Expand “Image Settings” > select one of the options from the Image Ratio dropdown

1 slide (full and centered)

The size (height) of the slider image for nd-slider-1 and nd-slider-1-centered has to be changed via CSS.

Go to Appearance > Customize > Additional CSS and add the CSS below. Change the size in padding-bottom to your liking. The size in “min-width: 768px” is for desktop. The size in “max-width: 767px” is for mobile.

Full slide

@media screen and (min-width: 768px) {
.nd-slider-1 .post-thumbnail {
padding-bottom: 600px !important;
}
}
@media screen and (max-width: 767px) {
.nd-slider-1 .post-thumbnail {
padding-bottom: 360px !important;
}
}

Centered slide

@media screen and (min-width: 768px) {
.nd-slider-1-center .post-thumbnail {
padding-bottom: 460px !important;
}
}
@media screen and (max-width: 767px) {
.nd-slider-1-center .post-thumbnail {
padding-bottom: 360px !important;
}
}

Pagination: use dots instead of arrows

If you want to use dots instead of arrows for the pagination, do this:

  1. Go to Pages in your WordPress dashboard > open the page with the slider in the editor
  2. Click on the Posts block
  3. Select the “Advanced” tab from the right sidebar
  4. Expand “Advanced” > add this class to the “Additional CSS class(es)” field
nd-slider-dots

Make sure you leave space between the last class and the new class, like this:

nd-slider-overlay nd-slider-dots

not this:

nd-slider-overlaynd-slider-dots

Slider content (title, meta, excerpt, button)

Open the page with the slider in the editor > click on the Posts block.

  • Change the entry title size: click on the “Style” tab from the right sidebar > expand “Title Size” > click on the last icon below “Font Size”. You can change the size on tablets + mobile, too, by clicking on the tablet and mobile icons next to the desktop icon.
  • Add categories above the entry title: click on the “Style” tab from the right sidebar > expand “Category Settings” > check “Enable Above Title Category”.
  • Add meta below entry title: click on the “Advanced” tab from the right sidebar > expand “Meta Settings” > check “Enable Meta Info” and select what you want to display (date, author, etc).
  • Add excerpt and/or button: click on the “Advanced” tab from the right sidebar > expand “Content Settings” > check “Enable Excerpt” and/or “Enable Read More”. If you want to shorten the excerpt, check “Enable Custom Excerpt Length”.

Change the colors

All the CSS below has to be added to Appearance > Customize > Additional CSS.

Background
.nd-slider .entry-content-wrap {
background: var(--global-palette9);
}

Or this for a semi-transparent background (0.6 determines how transparent the background is):

.nd-slider .entry-content-wrap {
background: rgba(255,255,255,0.6);
}
Entry title
.nd-slider .entry-title a, .nd-slider .entry-title a:visited {
color: var(--global-palette3);
}
.nd-slider .entry-title a:hover {
color: var(--global-palette3);
}
Entry meta
.nd-slider .entry-taxonomies, .nd-slider .entry-taxonomies a, .nd-slider .entry-taxonomies a:visited, .nd-slider .entry-meta, .nd-slider .entry-meta a, .nd-slider .entry-meta a:visited {
color: var(--global-palette3);
}
.nd-slider .entry-taxonomies a:hover, .nd-slider .entry-meta a:hover {
color: var(--global-palette3);
}
Snippet
.nd-slider .entry-summary {
color: var(--global-palette3);
}
Button
.nd-slider a.post-more-link, .nd-slider a.post-more-link:visited {
color: var(--global-palette3) !important;
background: var(--global-palette8) !important;
outline: 1px solid var(--global-palette9) !important;
}
.nd-slider a.post-more-link:hover {
color: var(--global-palette3) !important;
background: var(--global-palette7) !important;
}

The “outline” line is for the border around the button.