If the design settings are not enough, you can add your own CSS and HTML to your website. Depending on what the code should do, there are four places for it. All of them are available in every package.
Where your code goes
- Own stylesheet for the whole website: Settings → Header Area, section Own, additional CSS stylesheet. Your CSS rules apply to every page and to the mobile layout as well.
- Code in the head area: Settings → Header Area, section Own, additional HTML code (between <head> and </head>). This is the place for
<style>and<link>tags, additional meta tags or web fonts. - HTML at the beginning or end of every page: Settings → General, section Sitewide, fields Beginning of each page and End of each page. Suitable for counter codes and similar snippets that must appear on every page.
- Code inside a single page: in the content editor via Add Block → Special → Embedded HTML, for example for a map, a widget or the embed code of a video. The HTML Editor in the toolbar additionally lets you edit the HTML of the page content directly.
Add your own stylesheet
- Write your CSS rules in a text editor and save the file with the extension
.css. - Upload the file under Files → Upload Files (see Upload files). CSS files belong to the folder for code files; Automatic folder select puts them there.
- Open Settings → Header Area and choose the file under Own, additional CSS stylesheet in the field URL (to the .css file):.
- Click Save and reload your website.
If you only need a few rules, you can instead put them into the field HTML Code under Own, additional HTML code (between <head> and </head>) inside a <style>...</style> tag.
Embed code on a page
- Open the page under Pages → Manage Pages → Edit Page Content.
- Click Add Block (or Add Element after on an existing element), open the tab Special and choose Embedded HTML.
- Paste the code and save the page.
Good to know
- Your changes are live immediately; there is no separate test version of your website.
- Own CSS also applies to the mobile layout. Avoid fixed widths and use
max-width: 100%so that your elements fit on small screens (see Mobile-friendly websites). - Complete HTML files (
.htm,.html) can be uploaded with the Premium package only. For the basics of HTML see What is HTML?.