Despite being a no-code tool, Silex allows developers to write custom HTML, CSS, and JavaScript. This can be used to create advanced features or custom designs that are not possible through the no-code interface.
¶ Custom Code block
This section needs contributions, create an issue and ask questions
¶ Head editor
Insert custom HTML code in the HEAD tag of your site.
This code will be inserted in the <head> tag of the website.
It is common to use this feature for:
- embed fonts
- add embed tags for analytics or else
- include JS or CSS frameworks
- add custom scripts and css styles
- add important tags, e.g.
alternate,canonical,viewporttag - this should be done by Silex automatically, vote for this feature in the roadmap
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300..800&display=swap" rel="stylesheet" data-concat>
<!-- Analytics or other embed codes -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- Include JS or CSS frameworks (here vuejs) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- add custom scripts and css styles -->
<style>
@media (max-width: 480px) {
.blog-hero-img {
display: none; /* This is a bad example as you can do this with Silex UI, so don't do it with custom code */
}
}
</style>
<!-- Important html tags -->
<link rel="stylesheet" href="https://act.surfrider.eu/css/page.css">
<meta property="og:locale" content="fr">
<meta property="og:locale:alternate" content="en">
<link rel="alternate" hreflang="en" href="https://act.surfrider.eu/en/" data-concat>
<link rel="canonical" href="https://act.surfrider.eu/">
<meta name="viewport" content="width=device-width"><meta charset="UTF-8">