Picture button text

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.

Registered User
579 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.


Registered User
245 posts

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

Registered User
245 posts

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

Senior Advisor
11,012 posts
Online Now

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 RSD, RFF and RBB: http://www.horgenhonning.net/sharing/

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

295 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:

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:
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Registered User
245 posts

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

VP of Software Development
49,402 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.

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.