Picture button text - Post ID 272270

User 418919 Photo


Registered User
245 posts

I'd like to make my own button links. IE: a picture with the word Home on it for my "Home" page. I'm not sure if I'm using the right terminology or not. It's the buttons at the top of a site that say; Home, About Us, Contact Us, etc.
Attachments:
User 379556 Photo


Registered User
750 posts

I have done it as follows using Button Link elements. Please forgive the possibly excessive detail if the reader is already familiar with using background pictures etc.

(a) I click on the Resources icon at the top of the screen, click on the Add Files button, and select the picture that I want to use. I then click on OK to close the Project Resources box.
(b) I use the Content panel (menu icon) at the right to add a Button Link element.
(c) I go to the Design panel (pencil icon) at the right for the following actions.
(d) I use the Dimensions section to set the Width and Min-height to suitable figures
(e) I go to the Background section and click on the New Image button, and in the Resource drop-down menu that appears I select Local Image. That opens the Project Resources box where I click on the picture, and then on the Select button. Still in the Background section I click on the Size drop-down menu and select Contain.
(f) I edit the button text to whatever words I want, and in the Dimensions section I position the text using the Padding adjustments.
(g) I complete the Href box for the link.

Frank
User 418919 Photo


Registered User
245 posts

YAYYY, Frank! You are speaking language this newbie can understand. Thanks.
User 418919 Photo


Registered User
245 posts

Is the Href box set to Home or whatever the button says?
User 122279 Photo


Senior Advisor
11,627 posts

You have to do that yourself. If the button says 'Home', then set the href to 'index.html' (delete that #).
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 418919 Photo


Registered User
245 posts

Thanks Inger. What do I set the href to for the rest of the pages?

The Type on all of them = Button Link

The Classes on the home/index is xButton but the rest are nav

The pages I put on the title lines are:
Pre-Register | All About You! Bridal Expo
Links to Exhibitors – All About You! Bridal Expo
Exhibitor Information and Form – All About You! Bridal Expo
Map and Ticket Sales to the All About You! Bridal Expo

User 2846109 Photo


Ambassador
339 posts

you set the href to be whatever page you want the button to take you.

for example:
home would be index.html
or any other page would just be the page name as it appears in RFF with the extension such as:
register.html (if that was a real page) You need to use the names that are found in the 'manage project' window. Not the names that appear in the 'title' area.

if you wanted it to take you to an external site page you would just list the entire url such as:
http://www.coffeecup.com/

or if you wanted it to go to a specific anchor spot on a page you would list it with the page name and a # and the anchor name like:
index.html#gallery
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 418919 Photo


Registered User
245 posts

This is a screenshot of the manage project:
Are these names okay?
Attachments:
User 103173 Photo


VP of Software Development
0 posts

Barbara Thompson wrote:
This is a screenshot of the manage project:
Are these names okay?

No, that is not correct and will cause you all sorts of issues. Page names should be all one word and lower case. If you want to use multiple words, use dashes to separate them.

What you have there now should be used for the title of the page. That you set for each page under the Settings pane.

Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 418919 Photo


Registered User
245 posts

As always, thanks.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.