The topbar is literally a bar at the top of some of your school’s pages. It is visible to the logged out users and contains links (in the form of buttons) that can lead to various other pages of your school, your external website, your LearnWorlds blog and so on.


Your topbar is one of the first things someone sees when they visit your school. So, let’s take care of it! 



First of all, let’s find your topbar:


From your admin menu visit “All Pages” → “Topbar (before login)”


If you want to use a different template for your topbar, hover over the [+] icon on the top right, then “Top Bars” and choose the one you like the most. In this support article the first one is used. 




How to duplicate topbar elements


While our topbar templates come with some buttons for you to add links to your pages, courses or sign up forms, you might need more. 


You can do this by simply duplicating an existing button!


This is how.


1Select a button and click on “Duplicate”. 


The new element appears next to the original one:



2You can now change the text in the new element



3Add the link to the page you want this button to take the user to. Click on the onClick Actions:


The Link Manager pops up. Let’s add a link to a URL for now:



And we are done! Now the “PLANS” button will be taking the user to the www.learnworlds.com/plans page. 


More information on our Links Manager can be found here.



Activate the default mail/dial client on the computer of a visitor when they click on your email address/phone number


Now, wouldn’t it be nice if the visitor could just click on your email address or phone number on your top bar and have their mail or dial client activated, with your address or phone number already filled in?



To do this for the email address:


1Select it and click on the OnClick Actions option, to see the Link Manager.



2Select “Email Link” and type in your email address:

Don’t forget to click “OK”! 


If you need more information on our Links Manager check this article here.



To do the same for your phone number: 


1select your phone number and click on “Insert HTML code” from the formatting bar.

2Delete the text inside the pop up window and paste this code instead (after changing the phone number in the code to yours):


<a href="tel:+18558999555">+18558999555</a>





Finally, click “Save” on the top of the page! Now if a visitor clicks on your email or your phone number, the respective app will open on their computer. 


For example, clicking on the email opens my default email app (it’s called “Thunderbird”, it can be “Mail” by Apple on your Mac) with the address “hello@learnworlds.com” already chosen as the recipient email address. 




Note that your topbar is not visible in cell phones, as it adjusted to a "hamburger" menu.  If you want this trick to be there for visitors viewing your school on mobile as well, you can add it in your "Contact" page, next to the contact form. See how to do this here



That’s it! Super easy to set it up. Why not do it and save your school visitors time? ;-)