CMS Development

RSM1
Member

Adding a phone number to a custom coded template

SOLVE

We have a custom coded landing page template that we are using. However, we would like to add a clickable phone number in the upper right corner to match our main website. 

 

Can someone help us with the necessary steps to address this. 

 

Landing Page (with template) - https://info.model1.com/ford-transit

Main Website - https://www.model1.com/

0 Upvotes
1 Accepted solution
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Adding a phone number to a custom coded template

SOLVE

Hey @RSM1,

usually Landing Pages doesn't have a header navigation (where a potential phone number is located). 

In order to add your number to the page there are a few things that you might to look into. 

 

Depending on how your page is build up, you want to check the template first. The easiest way to check it is to open your landing page and select "edit template" in the template area of the page settings. This should take you to the code inside the Design Manager. There are many approaches on coding a template so following steps are based on the most common ones.

 

1. Your template is using a header.html file

If you find something like 

 

it means that you have to look for this specific file since it's responsible for all headers.

 

Those files are so called "global partials". This means that you have to apply the changes once and it will auto-update for all pages that uses this partial. 

Aditionally those files can utilize something like drag&drop elements or are written in some sort of code(most times HTML and Hubl). If your header has something like

 

{% dnd_area 'headerArea'%} 
   {# some code here #} 
{% end_dnd_area %}

 

you should click on the "open global editor" button in the top and go from there by adding a rich-text or simple text and put the code from below into it 

 

If it doesn't contain such code you can "hardcode" the phonenumber into the template(this is also option 2) like this:

 

<a href="tel:8663357775">(866) 335-7775</a>

 

(tip: in order to have clickable numbers, the phone number has to be a number only)

or use the corresponding Hubl tag(which makes it easier for your future-you) like

 

<a href="tel:{{site_settings.phone_number|cut(' ')|cut('(')|cut(')')|cut('-')}}">{{site_settings.phone_number}}</a>

 

This will put the phone number you're putting in the office location, which is located in

Settings(gear icon top right) -> E-Mail -> Location -> Phone number into the code. This means: If you should change the phone number there, it will auto update it everywhere you're using this token. 

 

Last but not least, you'll most likely need to apply some CSS rules in order to keep the same look & feel.

 

 

Hope this helps,

 

best,

Anton

Anton Bujanowski Signature

View solution in original post

2 Replies 2
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Adding a phone number to a custom coded template

SOLVE

Hey @RSM1,

usually Landing Pages doesn't have a header navigation (where a potential phone number is located). 

In order to add your number to the page there are a few things that you might to look into. 

 

Depending on how your page is build up, you want to check the template first. The easiest way to check it is to open your landing page and select "edit template" in the template area of the page settings. This should take you to the code inside the Design Manager. There are many approaches on coding a template so following steps are based on the most common ones.

 

1. Your template is using a header.html file

If you find something like 

 

it means that you have to look for this specific file since it's responsible for all headers.

 

Those files are so called "global partials". This means that you have to apply the changes once and it will auto-update for all pages that uses this partial. 

Aditionally those files can utilize something like drag&drop elements or are written in some sort of code(most times HTML and Hubl). If your header has something like

 

{% dnd_area 'headerArea'%} 
   {# some code here #} 
{% end_dnd_area %}

 

you should click on the "open global editor" button in the top and go from there by adding a rich-text or simple text and put the code from below into it 

 

If it doesn't contain such code you can "hardcode" the phonenumber into the template(this is also option 2) like this:

 

<a href="tel:8663357775">(866) 335-7775</a>

 

(tip: in order to have clickable numbers, the phone number has to be a number only)

or use the corresponding Hubl tag(which makes it easier for your future-you) like

 

<a href="tel:{{site_settings.phone_number|cut(' ')|cut('(')|cut(')')|cut('-')}}">{{site_settings.phone_number}}</a>

 

This will put the phone number you're putting in the office location, which is located in

Settings(gear icon top right) -> E-Mail -> Location -> Phone number into the code. This means: If you should change the phone number there, it will auto update it everywhere you're using this token. 

 

Last but not least, you'll most likely need to apply some CSS rules in order to keep the same look & feel.

 

 

Hope this helps,

 

best,

Anton

Anton Bujanowski Signature
RSM1
Member

Adding a phone number to a custom coded template

SOLVE

Thanks for this, @Anton I will be giving this a shot today! 

0 Upvotes