πŸš€Quick Start | SA5 Layout Lib

How to Easily Add SA5's Layout Enhancements to Your Webflow Site

circle-check

How to Add the Library

circle-exclamation

Add this script to the site wide custom code HEAD area of your site. If you are only using it on specific pages, you can add it to page-specific custom code instead.

<!-- Sygnal Attributes 5 | Layout --> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-layout.css"> 
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/nocode/webflow-layout.js"></script>

Add the custom attributes for the features you need, described in each feature separately.

SA5 Library Developers

For SA5 library developers, use the extended syntax to support Sygnal Devmodearrow-up-right and Sygnal DevProxyarrow-up-right. These make it easier to develop and test code changes with Webflow sites.

<!-- Sygnal Attributes 5 | Layout --> 
<link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-layout.css"
  dev-href="http://127.0.0.1:4000/dist/css/webflow-layout.css"
  group="SA5 Layout"  
  > 
<script defer 
  src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/nocode/webflow-layout.js" 
  dev-src="http://127.0.0.1:4000/dist/nocode/webflow-layout.js"
  group="SA5 Layout"  
  ></script>

Last updated