Tech | Web Team

The Flavor Picker

The Flavor Picker Add-on adds a lovely and functional Header to the top of your page. Preview a live example.

Helpful Tips!

  • Only one header per page.
  • Only one Add-on folder per page.
  • Put all your add-ons in the same add-ons bucket.
  • No less than 2 flavors, no more than 6.
  • Keep your titles and text neat and concise.
  • Flavor Picker image is exactly 600 x 300 px.
  • To view your work you must preview the parent page.

Walk Through and Jump to Points in Video

Creating your Flavor Picker Add on

  • The Flavor Picker Header will be at the top of your page.
  • The Flavor Picker Header will have a singular static image with its own navigation menu embedded in the header.
  • This navigation menu can be rolled over and further pertinent information, and links are revealed. 
  • To create a Flavor picker header right click your Add-Ons folder, select Insert and choose Flavor Picker Header.

Insert Flavor Picker Header Add-on

  • A fresh content area loading dock will appear on the right hand side of the screen.
  • Lock the page so you can edit it.

Flavor Picker Header Content Fields

Pick your Flavor Image.

  • Click the Browse tab in the top left of the Image field.
  • The Media Browser dialog box will now pop up.

Flavor Picker Header Select Image

  • On the left hand side, you will see the Media Tree.
  • Find the image file you wish to use for your flavor picker header, click it and then OK.
  • Keep in mind, images used in the flavor picker header need to be very specifically sized.
  • 600 pixels wide by 300 pixels tall. Show this!
  • You will need to use an external photo editing software to make sure it is the correct size before you upload it into the media library. Our handy guide to Pixlr will show you how.
  • Once you have selected your image, scroll down and enter the image title.

Flavor Picker Header Position Title

  • The image title will overlay the image you have selected.
  • You can adjust the placement of the title by using the drop down menu under title location.
  • Save and Preview the parent page.
  • Now that you have your image and title it is time to add your flavors.

Making Flavors!

  • You must have at least 2 flavors for the flavor picker header to function.
  • We suggest that you have between 3 and 6 flavors, if you want it to look nice.
  • To add a flavor right click the Flavor Picker Header file you just created.
  • Left-click Insert and then left-click Flavor.

Flavor Picker Header Insert Flavor

  • A dialog box will appear prompting you to enter the name of this flavor.
  • Just make sure you name it something obvious if you ever need to find it again to edit it.
  • Once you name the flavor, click OK.
  • You will see that a fresh content loading dock has appeared on your right.
  • Lock this page so you can edit it.

Individual Flavor Content Editor Fields

  • Enter in the Title.
  • This is the title that will appear in the left hand navigation of the flavor picker header.
  • Enter in a short description.
  • This will appear underneath your title in the same navigation bar and is meant to entice people to scroll over that section.
  • Enter in a content title.
  • This is the title that will appear in the pop up box when a user scrolls over this particular part of the navigation bar.
  • We strongly suggest you make the title and the content title the same.
  • Next you will be able to enter meatier content in the content section.
  • You can add text and links here but we strongly suggest you avoid putting too much content here.
  • To enter your concise content, click Show Editor and enter in your content into the content dialog box that opens.
  • This behaves just like your primary text editor so please use the clipboards and formatting tools to avoid breaking the flavor.
  • When you have entered in your content, click Apply.
  • As we mentioned before you will need to create multiple flavors for the Flavor Picker Header to work properly.
  • Just follow the steps we just went through to create all of your flavors.

Organize your flavors

  • Once you have created all the flavors you need you can reorder them to your liking.
  • Just right-click the individual flavors.
  • Scroll down the pop up menu to the Sorting option.
  • Left-click and then choose the position you wish the particular flavor to be in.
  • You may need to fool around with this a bit to get it exactly right but once you do, make sure you SAVE!
  • Preview the parent folder you created your flavor picker heading under.

Final Flavor Picker Header Product

 

Flavor puppy

FAQ

Oh man! These flavors are fun! I want like a million of them! Can I?

Confused KittenPlease don't. Really, 3-6 flavors are the most that can fit in the header without causing overlap. If you are really into this kind of information organization you should probably look into tabs within your page.

My flavors are overlapping or look shmooshed, what is going on?

You have probably tried to put too much text into the title field and the text field for your flavor. Keep it short and easy to read.

Why can't I put an image in here?

It looks bad. On a few occasions a small logo can work in the content field for a flavor but more times than not it takes over the content. This isn't a page, it's just something pretty to give information and direct people to points in the page or other points in the site.

Best Practices

  • Winning Guinea PigBe concise about your flavor titles.
  • Keep the content of your flavor simple and text oriented.
  • Putting images and excessive text will just make it look cluttered.
  • The flavors are not their own pages, they are to direct people to specific content within a parent folder or other pages.
  • Use at least 3 flavors and no more than 6.
  • Make sure your flavors are only representing the most important content of your page builds.
  • Flavor pickers are best for parent pages to direct people to the sub pages within.

 

 

Page last updated: 8/7/2014