Code Block

A code block is a lexical structure of code grouped together.

Fabl Code Block

Code blocks can be added anywhere in your story, but as a best practice, we recommend to add these either at the top of the story (right after your banner) or at the bottom section (right before the footer).

Code blocks can be placed within any section or as standalone elements.

1. Add a new code block

1 - In the editor mode, click on the plus symbol to insert a new component from the options available.
2 - Select Code.
3 - A Code block will automatically be added to your section.

2. Edit your code block

To edit a code block, hover over the line of the designated code area and click on “Edit Code Snippet”.
The code editor window will open where you can add your script.
Here you can define new behaviours and their corresponding CSS classes.

After you made your edits, click UPDATE and then check the results in the live story.

3. Add a CSS class to a content element

After you defined your CSS class name in the code editor, you can assign that class attribute to any content element available on the platform.

1 - Click on the element you want to edit
2 - Click on Options>Settings
3 - Type in the class name in the input field
4 - Save your edits and view the story

Already an experienced user?

See what else you can do to enhance your story.