• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Genesis framework / Basics / Genesis Responsive Slider Tutorial

Genesis Responsive Slider Tutorial

How to set-up up your Genesis Responsive Slider Plugin just the way you want it.

Not all StudioPress themes have a built in slider, if yours does, read on.

First install and activate the Genesis Responsive Slider Plugin

If your Genesis based theme is not mobile responsive, use the Genesis slider. If you have a mobile responsive theme that is based on the Genesis framework, use the Genesis Responsive Slider.

The first thing to do after installing the Genesis Responsive Slider plugin is find out what size image is used in the slider for your specific theme. You must enter these size settings in the plugin’s settings page.

Finding the correct size for your slider images

(These instructions are for Firefox web browser.)

  • Go to the StudioPress.com site and find the demo for your theme.
  • When you’ve found the demo page for your theme, right click the slider image and choose “View image info”.
  • You’ll see a pop up, look for “Dimensions”.
  • Make a note of the size listed under dimensions.

Find your Genesis Responsive Slider image size using Firefox view image info dialogue box.

  • Go to, Dashboard > Genesis > Slider Settings.
    • Display Settings >
    • Maximum Slider Width (in pixels):
    • Maximum Slider Height (in pixels):
    • Enter the sizes you got from your web browser. (See image below.)

Genesis responsive slider display settings width and hight.

Next, make four blog posts.

  • Assign all four posts to a new empty category.
  • Attach a featured image, of the right size, to each blog post.

Adding a featured image.

You now have four blog posts, in their own category (you could call the category, slides). All four blog posts have the correct sized featured images assigned to them.

Go to Dashboard > Genesis > Slider Settings.

Go to dashboard - Genesis slider settings

Choose the type of content to use in your slider:

  • Would you like to use posts or pages? (Choose posts.)
  • By Taxonomy and Terms: (Which category are your slide posts in?) Choose a term or category to determine what slides to include.
  • Pick the category that contains the posts with featured images that you’ve just made. (My posts were in a category called slides.)
  • Click the blue save button to save your work.

Choose Posts and the category containing your slider posts.

Go to Appearance > widgets.

Appearance - widgets
Drag the Genesis Responsive slider widget into the Home Slider widget area. The slider widget area will have a different name on each site, but it should be obvious which one it is.

Dragging Genesis slider widget in to widget area.

Genesis slider save button.
Click the blue Save button.

Test to see if your slider is working.

You did remember to drag the slider widget in to the slider widget area didn’t you :-)


 

Genesis slider settings – advanced

The Genesis Responsive Slider is mobile responsive.

The only other major difference between the Genesis Responsive Slider settings and the Genesis Slider settings, is the number of transitions available. If you have the Genesis slider widget, experiment and see which transition you like. (Slide, fade etc.)

Genesis responsive slider has just two transition effects…

  • Slide
  • Fade

Genesis slider has more effects…

  • Scroll right, left, down, up.
  • Fade
  • Wipe
  • Cover up, down, left, right.
  • Rewind slides.
  • Loop slides.

Choosing which images or pages to show in your slider.

In the previous video I showed you how to select the images for your slider by using blog posts from a specific category.

Another good way to select the images to use in the Genesis Responsive Slider is to choose PAGES (not posts) in the first dialogue box at the top of the screen. Then where it says Include or exclude by page ID, type a list of page ID’s that you want to use.

To do this you need to know the id number of each individual page you want to include in your slider.

Choosing slider posts by page id

Finding page id numbers…

  • Dashboard > Pages > All Pages.
  • Hover your mouse over any page title.
  • Look at the bottom of your web browser screen.
  • Find the “post=247” etc. This is the ID number.
  • Note the number for each page you want to use.
  • List these numbers with a comma between each number 247,263,270 etc.

Find page id

In the section that says Include or exclude by page ID…

  • You MUST select Include from the drop down list.
  • Place your comma separated list in the “List which post ID’s to include” section.
  • Take care, one box is for post or page ID’s one box is for Taxonomy ID. Choose post ID. (Not the taxonomy box!)

Include post id

Number of slides to show.

  • This needs to be the same as the number of id’s you’ve listed. So if your list of page id’s has three id numbers in it, type 3 in the number of slides to show box.

Number of posts to offset.

  • If you want to show all posts from a particular category but don’t want to show the most recent post for some reason, offset by 1.

Display settings…

  • Find the correct image sizes for your theme’s slider and enter them here.
  • Select to show or hide the previous and next arrows in the slider.
  • The responsive slider also lets you display a pagination, progress indicator.

Genesis slider width and hight settings.

Content settings…

  • Do not link slider to post or page.
  • Display post or page title in slider.
  • Display content in slider.
  • Hide title and content on mobile devices (responsive slider only).

If you choose to display content (text) in the slider, you can display the excerpt or content. If you choose Display Post Content, limit the number of characters displayed. If you display too many characters the text in the slider will break out of the bottom of the box.

In the “More Text” dialogue box, type the words you would like as the click-able link text. When clicked, the more text links to the full post or page.

How much text will display in the image slider.

Slider Excerpt Width. How wide do you want the text box in your slider to be?

  • Genesis Slider uses a pixel width, 50 pixels etc.
  • Genesis Responsive Slider uses a percentage with 50% of slider width etc.

From my experience, this excerpt width doesn’t always work.

Excerpt Location, Where will the text box appear in the slider?

  • Top right.
  • Top left.
  • Bottom right.
  • Bottom left.

Make sure you click the blue save button to save your changes.

The save button

And don’t forget to drag the slider widget in to the slider widget area :-)

Sidebar

StudioPress and Genesis Tutorials
  • StudioPress and Genesis Tutorials
StudioPress themes Free with this hosting.

My StudioPress and Genesis Tutorials

  • StudioPress Sites Review
  • Genesis Responsive Slider Tutorial
  • Genesis Featured Post Widget Tutorial
  • StudioPress Core Skills
  • Simple Hooks Tutorial
  • Genesis Simple Edits Tutorial
  • Genesis Dambuster plugin basic settings
  • Beaver Builder Tutorial – The Basics
  • Elementor Tutorial: a Quick Start Guide
  • Changing the color scheme of Altitude, Magazine Parallax Pro themes
  • Basic StudioPress Theme Customization (Old Post)
  • Genesis Framework Widget Areas Tutorial
  • Genesis Grid Loop Tutorial
  • Simple URLs (plugin) Tutorial
  • Simple Sidebars Tutorial
  • Simple Social Icons Plugin
  • Customizing the WordPress Query
  • Category and Tag Archive Listing Pages
  • Adding an author box below posts
  • Choosing the right StudioPress theme (a review)
  • Genesis eNews Extended and Mailchimp
  • StudioPress Pricing Table
  • StudioPress Flexible Layouts
  • Genesis CSS learn how to tweak and customize your site
  • Icons used in StudioPress themes
  • Images in homepage text widgets
  • Using Genesis Column Classes To Build Layout Grids
  • Sticky Header or Menu in Genesis
  • Plugins used in StudioPress themes
  • Genesis Simple FAQ plugin
  • Strong Testimonials Plugin – The Basics
  • Cornerstone Content: a simple how to guide
  • Genesis Portfolio Pro
  • Setup Generate Pro theme
  • Setup Hello Pro
  • Set up Altitude Pro theme
  • Setup – Executive Pro Theme
  • Parallax Pro Theme Review
  • Setup Parallax Pro Theme
  • Changing Google Fonts in a Genesis child theme (Parallax Pro)
  • Setup Daily Dish Pro theme
  • Setup Metro Pro theme
  • Foodie Pro Overview
  • Smart Passive Income Pro Theme: set up guide
  • Academy Pro theme Setup Guide
  • Authority Pro Theme: setup guide
Install the Genesis Framework
  • Are you ready to take your first steps? Watch as I install WordPress and Genesis.

Rainmaker Platform – a Review

  • Discover if you need the Rainmaker Platform
FoodieProTutorials
Build your own Genesis child themes with Dynamik Website Builder

Genesis Design Palette Pro

  • Customize your theme with Genesis Design Palette Pro

DIY Webdesign with Dynamik Website Builder AND Genesis Extender plugin

  • Genesis Child Theme Tutorial with Dynamik Website Builder
  • StudioPress theme customisation with the Genesis Extender plugin
  • Dynamik Fixed Background Image

StudioPress Accelerator

  • StudioPress Accelerator, the budget-friendly way to get a seriously fast website.

Are you getting stuck setting up a StudioPress site?Please let me know if you get stuck.

Disclosure: I receive compensation from some of the companies whose products I review.

How my affiliate links work…

  • I only get paid if someone buys a product. Not because someone clicks a link.
  • You pay the same price using my links or the StudioPress site.
  • If I earn some commission I can spend some more time making more tutorials.
  • P.S. Thanks to all those folks who have bought through my links.
  • It's much appreciated :-)

Philip Gledhill web design

Philip Gledhill is a Bradford web designer and WordPress assistant.

Genesis Extender

Customise your Genesis child theme the easy way.

The Genesis Extender Plugin

Get The Genesis Framework

WordPress Hosting

WordPress Hosting, Which Deal is Best For You?

Genesis – StudioPress resources

There are many good websites where you can find information about the Genesis Framework.

I use the sites listed below on a weekly or even daily basis to find answers, solutions and basic information.

I hope you find them as useful as I have.

Bill Erickson
WordPress Consultant

  • Tutorials
  • Code

Designs by Nick the Geek
Genesis based WordPress development and tutorials for everyone

  • Genesis Explained a good introduction to the code that makes Genesis work

Greg Rickaby
Front-End Developer @WebDevStudios

  • Code Snippets

Christopher Cochran
web/tech/design/music

  • The Visual Hook Guide

Carrie Dils

Genesis Developer and Web Designer

  • Genesis Tutorials and Information

Carrie Dils course on Lynda.com

  • There are two Genesis courses on Lynda.com. Up and Running with Genesis and Customizing Themes. Both are well worth a look. And if you're new to Lynda.com you can usually get a 7 day free trial.

Sridhar Katakam

  • Loads of WordPress and Genesis tutorials. Well worth a look.

Genesis For Beginners

  • pdf book

StudioPress.tv

  • Some basic videos from StudioPress

Brian Gardner

  • Code snippets and info from the man behind StudioPress

Sure Fire Web Services Inc
Web Design Tips, WordPress Development Help,and Genesis Framework Tutorials

  • Useful Genesis links page

WP Smith

  • Genesis code snippets

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top