One of the main updates to X5 is to the NEW Navigation bar designer
Giving visitors a smooth and stylish user experience with a range of new, easy-to-customise
navbar designs that work across all popular browsers and platforms. Create attractive
and dynamic navbars from scratch using new buttons or by customising the included
navbars’ backgrounds, colours etc. Plus, add navigation menus that pop up from any
standalone button or graphic.
How to use:-
- Select the navbar toolbar button
- From the new navbar settings window choose your navbar design
- Navbar Type Tab is the same as X4 to select your navbar structure.
- Now the new appearance tab is where the fun starts. Here there is a option to take
the navbar button into the button studio, by clicking the pencil logo next to the
button , where you can make the design you require. See below Button studio.
Before
taking the button into the studio you may want to check out the preset button designs
by clicking the Button. - You can also take the pop up menu into the button studio depending on the navbar
type.
If you want to make up your navbar from scratch, you can “Insert a Button” and then
convert to a navbar after using the design studio.
- Select the Insert button from the toolbar
- In the Edit button dialogue don’t change the button label unless your going to use
it on it’s own. Before taking the button into the studio you may want to check out
the preset button designs by clicking the Button.
- Take the button into the Button studio by clicking the pencil logo next to the button
and once you have done your design come out of the studio and place it on your page.
Now you can use it as a single button or……………
- With the button still selected click the Convert to Navbar button in the context
toolbar. The button changes to a navbar.
- You can still double click this new navbar to open the navbar settings dialogue to
adjust as necessary.
NEW Button Studio
Create high-quality, custom buttons using design tools in WebPlus X5’s Button Studio.
Shapes, colours, text, effects and much more are just a click away, and can be transformed
into amazing buttons to be used on their own or in navigation bars. Creating rollovers
and copying design elements from different button states is easy too. You can also
use buttons from the stylish, pre-designed collection.
Once you take your button into the Button studio you can design to your hearts content.
Using Quick Shapes, Images, effects and text.
To practice the use of the studio start by “Inserting a button” and take it into
the studio.
You will have a blank button with the words Button. Look at this screen shot of the
studio as you would see it at this default state.
- At the bottom is the “Button States” that the button can have and you can change
the design to what ever you like.
- To see/work on each state, double click the state you wish to work on.
- If you require the background of each button to be the same - double click the “Background”
state and design the background with QS, images and effects. You will find that each
thumbnail of the button states will reflect your design.
- If you require the “Hover” to be different then double click this state and put your
new design over the top of the Background design. You will find the text will always
be on top.
- To change the design of the text select the text on one of the states and you will
see the context text toolbar appear.
- On the toolbar you can change the Font, Colour and the normal formatting adjustments.
- If you require the text on “Hover” to be a different colour, double click this state
and select the text. You will note a button on the context toolbar “Change all text”
deselect this by clicking it. Now any adjustment to the text on this state will only
be adjusted on this state.
- Once you are happy with your design click the “Commit changes” (top left) or if your
don’t want to change then click “Cancel”
When you have done your design and put the navbar on the page you may find a green
explanation mark at one end. This is to warn you that the navbar needs to be stretched
larger to accommodate the buttons.
Something we are going to look at later, is Panels, you will find in a context toolbar,
when you have a navbar selected, an option to “Convert to a Panel”. This will allow
you to change a navbar to a panel, but keep the functionality of a navbar, and be
able to hide it and then allow it to be made visible by the actions as the panels
use. Please see X5 Panels.
I hope this help page gives you an insight into the New Navbars and Button Studio.
But there is nothing like getting your hands on and actually seeing it for yourself
so get stuck in and you may surprise yourself.
Pop Up Menu
Whilst we are looking at Navigation there is a new right click option, on a Quick
Shape(QS), image or button to a Pop Up menu.
- Right click an QS, image or button
- Select Pop Up menu
- In the Menu setting put a tick in the “Show a Pop Up menu for navigation links for
this object”
- Now you have the same options of structure as you would in a normal navbar or a custom
menu.
- “Menu appearance” to give the pop up menu it’s own design.
Check out the QS to the right
Tutorials
