Move page heading on top of banner

  • 1
  • Question
  • Updated 6 years ago
On my website www.belfastmh.co.uk

Can I move the page heading down/left/right (currently blank) to sit on top of the banner in place of the telephone number? I want to make the telephone number clickable on a mobile device.

Thanks
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello graham

Have you considered using the Telephone button for your Mobile Publishing? You will find this option in the Mobile Publishing dialogue box under "Buttons". This may be the most slick solution for making your phone number available to your customers on a mobile phone.

If you'd prefer to achieve this the way you described it above, please let me know.
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes
Hi Stefan

I am not keen on the mobile publishing just yet, I would prefer to keep the full site for the meantime until more mobile customisation functionality is added.

Can you share some more of your seemingly unending CSS/HTML wisdom :)
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Graham

Alright, but then I'm not sure if I understand your question correctly. You said you wanted to move the Page Heading on top of your banner. Do you want the Page Heading to inlcude your telephone number as a clickable link? Where should the link take you to? I'd recommend to (also) use the most important keywords in your Page Heading because as a h1 tag it will be very important for search engines.

Looking at the Style you chose, I can see that the Page Heading is above the navigation which is above the banner area. I played a little around with it, but I'm afraid it would be too much of a mission to move the page heading on top of your banner area. If you really want it, it would make more sense to change the Style to one that displays the Page Heading on top of the banner area by default.
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes
Hi Stefan

I want the page heading to display the telephone number so when someone is browsing on a mobile device they can just tap the phone number and it will call us. It does not need to be a clickable link.

If it cannot reasonably be done then it is no big deal :)

I might try to add some key words to the page heading but in the background colour so they are not visible.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Graham

That's easily done. All you need to do is to use this easy custom code in an HTML or Text Widget:
<a href="tel:your number goes here">Your text or image goes here</a>
If you're not so familiar with code, you should use a Text Widget because you will be able to format the text you added using the Text Editing Toolbar after you have closed the HTML Editor of the Text Widget. The Text Widget also allows you to get the element into the right position using the margin values (click on "margin" on your Text Widget).

You could even try to get this element on top of your banner image by increasing the bottom margin value of the Text Widget. Just play a little around with it.

Let me know how that goes.
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes
Excellent, that is it. How simple! Thank you :)

Maybe this one is a little harder... on my current home page I have changed the footer arrangement, is there an easy way to make this the same for all pages so I don't have to change them all individually?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Graham

Yola doesn't offer a feature to copy page elements comfortably or apply them to all pages yet. But there is a workaround, and by now I'm sure that you will not be afraid of any coding, will you? :-)

What I basically did was to view the source code of your home page and find the code for your footer area. If you add this code to an HTML Widget at the end of each page, you will be able to reproduce your footer. I have created a test page named "test" on your website which you can easily delete again on your own. This page is not linked to and not inlcuded in your navigation.

If you go to that test page, you will find your footer twice: The first one is your original footer as you arranged it using our widgets. The second one is the same footer created by the underlying HTML/CSS code using an HTML Widget. If you click on "Edit" on the HTML Widget, you will be able to view the necessary code in the editor. Copy this code completely, go to each page of your website, drag and drop an HTML Widget to the bottom of the page, and paste the HTML code into the editor. This will not spare you going to every page, but you can insert your whole footer with a few clicks and keys.

I hope we will have an easier solution for this in future.

Enjoy it! ;-)
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes
I owe you for this one, much more so than for all the other help you have given me! That just saved me a LOT of time!

All done and looking good 8)

Thank you again!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
It's my pleasure, Graham! If you want to give something back, spread the word, upgrade to Yola Gold, or simply enjoy working with Yola. ;-)