Anyone who works with me knows that I’m partial to certain themes. Why? Well because they allow for customizations without code– in other words, I can train YOU to be master of your design. That’s empowering right?
One of those themes is Weaver II Pro. For $30.00– you have the ability to create a website that has many of the advanced features you see on Genesis and Thesis themes. In fact, if you are considering a new theme, Weaver II is the best theme (for the money) in terms of being able to change things around without code. Plus, if you work with me — I’ll train you one on one.
Today I want to highlight the photo slider on Weaver II pro. Many of you have this theme, and can make one right on your own site too!
I’m currently working on a site for Rebecca. Go to her site and try it to get the feel for the dynamic way the slides move.
All those photos slide out of the way when you hover, and I put a text overlay that explains the category.
The beauty of this is you can put it virtually anywhere on your site. So here’s how you do it.
1. In a visual editor like PicMonkey or Photoshop, pick anywhere from 3 to 8 photos. Adjust the size to 320×200.
2. In your dashboard, click on Media, then Add New. Upload all those photos to your WordPress site.
3. Leave that window open and open a new tab.
4. This time go to Appearance and Menus.
5. Hit the + button and create a new menu. Label it Slider Menu and then hit save.
6. Add menu items. Don’t know how? Use the boxes on the left. You can add custom links (meaning individual posts…you have to type in the URL manually), pages, or categories. Reference my menu post if you’re not sure how to do it.
7. When you’re done, hit save. Leave the tab open so you can see the order of your menu. THIS IS THE ORDER YOU MUST PUT THE PICTURES IN.
8. Now open a third tab. You should have three open. One that has your photos uploaded into the library, one that has the menu you just created, and one new one. Go to Appearance, Shortcodes + Pro.
9. At the top of the screen, click on Slider Menu.
10. Don’t be intimidated. It’s not that hard. First things first, click the button that says enable.
11. Then write in the number of slides.
12. Leave everything else at the default (for now).
13. Where it says slider image locations, you have to put the photo URLS in the order that your menu bar is. So check your menu for the first item, then click on the tab with the photos all lined up. Hover over the image and click edit.
14. A new page will open up. Copy the URL of the photo and put it in the first field on the slider page.
15. This is where you upload the photos that will act as your visual menu. You’ll see slider menu 1 and a bunch of fields to enter photo URLS. Repeat until all your slides are filled in. Then hit save slider menu.
Weaver allows you three separate sliders. IF you go back to the top of the screen you’ll see the ID of the slider you just made.
That shortcode is what you need. Now, this can go anywhere, but for today, I’ll show you how to put it where Rebecca’s is, right under the header and menu bar, right before the main content.
1. Go to appearance, and click Weaver II Pro Admin.
2. Click on Advanced options.
3. Then click on html insertion.
4. When you get to pre-main code, add the shortcode.
5. Hit save!
And there you have it. A photo menu slider that is dynamic. The photos can link to pages, categories, individual posts, even external links. You can even adjust the fonts and colors and width of the slider. It also allows you to do vertical sliders too. Have fun!
And please don’t hesitate to ask me if you get stuck!