Homepage Slider Images

[Janice]

Hi Bill,

Where do I add the slide that is to appear on the homepage?

I have made a page called “home” and used the home template.

I have 3 posts with featured images … is it these featured images that make up the slide on the homepage at the top (the large images)?

How do you set this up exactly?

Many Thanks
Janice

[Bill Robbins]

Janice,

Gotcha. With the home page template the slides used are the ones in Media > Slides. You could use a gallery for the home page slideshow if you use a template other than the home page one.

Here’s a quick video on using the Slides section for the home page:

If you have trouble, let me know,
Bill

[Janice]

Many Thanks Bill, all sorted now! 🙂 Wishing you a Magical Christmas!

[Bill Robbins]

You too Janice!

[Jayme]

Hi Bill,

I just went through your video step by step and did what you said to set up the slide and it’s not showing up on the home page, Can you tell me why?

What is my pixel size supposed to be for these images? Pixel width X height?

I LOVE this theme, but it’s not looking at all like the theme I thought I was purchasing. (the one that shows the Bottega cafe) I don’t understand how to set the menu up either or get those block images that lead people to other pages as well.

Here is how the site is looking now (I obviously have a lot to fix)
http://new.glenjunction.com/

Your prompt help and feedback is greatly appreciated, I am behind on this project.

thanks,
Jayme

[Bill Robbins]

Jayme,

Thank you for your business first of all. I took a look at your site and it looks like you haven’t set up a home page yet which is why it’s displaying your latest post instead of your slider. Here’s how to do that:

1. Go to the “pages” section of your WordPress dashboard and create a page called “Home.”
2. In the right hand column while creating the page, you’ll see a box labeled “Page Attributes.”
3. In that box there is a drop-down for page templates. Choose “Home” and then publish your page.
4. Next go to the Settings section of your dashboard and select “Reading.”
5. At the top of this page you can choose to have the front page display your latest posts or to display a static page.
6. Choose to use a static page and then select your “Home” page from the drop-down.
7. Update your settings.

That should add in your home page. If you need help setting up your food menus and such, you can find the theme documentation at https://support.organizedthemes.com/2415/bottega-theme-instructions/

If I can help, just let me know.

Enjoy your weekend,
Bill

[Jayme]

Hi Bill,

Thank you so much for your prompt response. Okay, did what you said, slider is working, but my images are too wide, here’s what’s happening…

http://new.glenjunction.com/

what pixel width and height should these images be? And is that at 72dpi or can I do 300?

In the meantime I will review your post on the food menus.

Look forward to your help.

Jayme

[Jayme]

Bill,

I am noticing now that if I stretch my browser, the slider images are cut in half,
if I reduce the width of my browser window, they show full width. How do I prevent that?

?

Jayme

[Bill Robbins]

Great question. You want to make the images 960 pixels wide by 350 pixels tall. WordPress will scale/crop the images smaller, but it won’t scale them up if they are smaller than that size. You’ll get the best results by cropping ahead of time.

There are a few plugins out there that can serve higher dpi images to devices that support them. If you’re not using one of those, just go with a good quality image at 72 dpi.

Thanks,
Bill

[Bill Robbins]

Sorry my last response was to the question above it, not the last one.

Since the theme is responsive, when the browser is smaller, the slideshow images are also smaller. If you’re using an image that’s smaller than 960 by 350 it may be close to fitting when the browser window is smaller due to the slider being smaller too.

If you’ll go with 960 by 350 images they will scale properly.

[Jayme]

I was off by a pixel, I guessed the size from using images off the template example.

Where is it listed the size I should use for menu boxes? It appears to be square, what do those sizes need to be?

Jayme

[Bill Robbins]

The featured boxes are 178 pixels square.

I’m in the process of updating the theme used in our support site. Adding in an image sizes section for each theme is high on my list of needed features.

[Jayme]

Setting up the food menu, I just made a breakfast menu, image is not showing up. I’m not understanding the menu groups. I would like to display 4 menu boxes. Breakfast Lunch Appetizers Desserts…. I created the images but do not understand page attributes. Also, do you know why “Family Restaurant” is sitting at the bottom like it is? How do I get rid of this?

Many thanks for your help, it’s greatly appreciated.

[Jayme]

Guess who?

Also, there’s now a white box and when I hover over it, it says serving up breakfast and lunch, that’s not what I want. I have created all 4 menu images, how do I remove that one? I don’t even know how I created it.

Trying not to cry!

[Bill Robbins]

Jayme,

The row of boxes across the home page are the “featured images” of the posts from a category you select on the theme options page. It will display up to the five most recent posts from that category.

It’s possible to redirect a post to a menu group if you need to. When you’re editing a post, directly below the main content box you’ll see a spot labeled “Redirect Post.” Just enter the URL you’d like to direct that post to and update/publish your post. That will let you add an image and title to your front page and then direct it somewhere else.

One options is to create a category just for that front row. I believe that’s how I have the demo set up.

The “Family Restaurant” that’s at the bottom of the home page looks to be the “title” from a “tag cloud” widget that’s on the home page. Since there are no tags, nothing else is being shown right there just now.

Let me know if you have other questions,
Bill

[Bill Robbins]

Jayme,

Looking at your site too, I believe if you’ll stick this in the Custom CSS box on the styling tab of the theme options page, it will help out your navigation menu:

#home-media {
	clear: both;
}
#navigation {
	width: 700px;
	margin-top: 17px;
}

[Bill Robbins]

That box is a post. That row is tied to posts and not menu items. You can redirect any individual one to a menu group or item if you’d like to.

[Jayme]

I hear what you are saying about the row of boxes, but unclear how to set that up. I see the featured row category, but when I toggle on it, says uncategorized, so how do I set that up?

I think I’d rather create a category, then do a redirect thing.

Okay, fixed the Family Restaurant.

I changed the header bar to white because it wasn’t looking too great as a color against the small logo. Unfortunately their logo is very narrow. Can I create something different with that bar and what pixel size does that bar need to be? I’d rather put a nice message across that bar and have the logo small on the left or something. It’s not looking good at all. I have photoshop and can design anything, I’m just so unclear what size to make these things. (in pixels)

Now I’ve lost the menu bar because it’s white on white. Where do I turn menu items text into a color so they show up?

[Jayme]

Put in the CSS code, thanks. Now if I can just resolve header and put an image in there so it’s not this long white ugly box.

Step by step I am not understanding how to set up those menu boxes as posts.

I’m not a WP guru in the least, can you tell?

I’ve set up the About Us, Directions, Contact Us page, when I’m on those pages, not clear how to navigate back to home.

I’m unclear what happens if I create a nice header image in the header bar, that is going to conflict with page navigation text, right?

Thanks for your help.

[Bill Robbins]

Non-WordPress people are always welcome.

Here’s how I would set up the row of images. First create the first post that you’d like to go there. While you’re writing the post, look in the right hand column and you’ll see a box labeled Categories. At the bottom of that section is a spot where you can create a new category. I’d make called “featured” and then publish the post. Then go to the theme options page and select that category to be what’s displayed in the featured row. Now the five most recent posts that you add to that category will be displayed there.

The redirection is used if you’d like to have your visitors click on one of the images and go someplace other than that post. In the demo, the last image on the right redirects to our staff page for example.

---

The site is 960 pixels wide so you’ll want your header to be at least that tall. On smaller devices the header actually gets taller as things move around a bit so you’ll want your header to be taller than the 100 pixels tall it is on a desktop monitor. Or you can have it fade into a solid color. That’s what I do in the demo so it fits naturally.

---

You can change the color of the links. Here a CSS snippet to do that:

.menu a, 
.menu a:visited {
	color: #000000;
}

.menu a:hover {
	color: #000000;
}

---

If you run into trouble, let me know,
Bill

[Jayme]

Hi Bill,

HAPPY MONDAY!

http://new.glenjunction.com

Back on this project again, starting to set up the menu boxes on the home page. I have more questions.

How do I turn those boxes (there’s only one there now) into a nice image? And what size image do I make them? Was it 178 pixels square?

2. How do I change my menu tabs at top to a color, they are there, as white and only show up if you hover over them.

3. When navigating to other pages, how do I show a home button?

That’s all for now.

thanks in advance,

Jayme

[Bill Robbins]

Jayme,

Happy Monday to you too. Let’s see if we can get your questions answered:

1. The images in the featured row are 178 pixels square. You can make them larger than that if you need to. Just make sure they are square so they scale down correctly.

2. You can change the menu items color. In the styling tab of the theme options page, place this in the Custom CSS box:

.menu a, 
.menu a:visited {
	color: #000000;
}

.menu a:hover {
	color: #000000;
}

The first part controls the menu items when you’re not hovering over them. The second part controls the color when you are hovering over an item. Just replace the 000000 with the color code you’d like to use.

3. In your navigation builder (Appearance > Menu), you can add your home page to the navigation like you did with the other pages. Just position it at the top and that will cause it to be on the left next to your logo.

Let me know if you have any trouble,
Bill

[Jayme]

Hi Bill,

Things are progressing thanks to your help!

I have more questions:

I am setting up the menu pages with featured images.

1. How do I change out the order in which they appear?
2. Is it possible to change the color of the slide up when I hover over the image, it doesn’t fill the whole box? (for example, the first one is directions with google map image.
3. Font sizes: http://new.glenjunction.com/about-us/
How can I change the font size of the subhead? About Us for example is too large.
4. Is it possible to put slider images on every page? If so, how?
5. http://new.glenjunction.com/about-us/ why is there a blue bar jetting out from the right hand side? How do I remove that?
6. Can I change font and size of body copy on the pages? How?

Jayme

[Jayme]

New Questions:

I like this set up:

United

It shows FB integration and Google Map location,
how do I set those up?

thanks!

Jayme

[Bill Robbins]

Jayme,

Let’s try and answer these questions:

1. Order. When editing a menu item, you’ll see a box in the right hand side that says “order.” You can enter a number in that box and WordPress will use that number to set the order from lowest to highest. You might count by 5’s so you can insert a new item in between other items if you need to later. The default is 0, so you’ll need to change them all to really see the effect.

2. Featured box background color: You can use this CSS snippet in your custom CSS box to change the background color:

.boxgrid { 
	background-color: #000000;
}

Just change the #000000 to the color of your choice there.

3. This snippet will change your page titles:

h1.post-title,
h2.post-title {
	font-size: 30px;
}

4. You can put a slider on every page. Use the “gallery” format (it’s in the right hand column when editing a page/post) and every image you’ve uploaded on that page/post will be included in the slideshow.

5. The blue is the background color of your sidebar. There is an option in the Styling tab of the theme options page where you can set it’s color.

6. The easiest way to change body copy font is with a plugin called WP Google Fonts. You can use it to pick out new fonts. To change the size, you can use this CSS snippet:

body { font-size: 17px; }

The Facebook and hours/time on the home page of the demo are made up of widgets. It looks like you already have the Facebook widget. You can add in the contact widget which has spots for your address and an embedded map too.

Take care,
Bill

[Author]

Posts