Styla Modules

TLDR: Any Styla content is built out of modules. You drag and drop, then fill with content in our CMS at editor.styla.com. You can also see them rendered on any Page or Magazine. Modular Content usually consist of a single module.

The below modules can be used in the Editor to build Pages. More will be added in the future and can be developed on a client request.

Banner:

• it is probably the most versatile of the modules with dozens of variations you can configure with its multiple settings,
• consists of: background image, title, text field, CTA button - and each of them is optional,
• background image can be cropped automatically or manually to align several banners in one row,
• rich text editor can be used for the text element with additional styleable tags: three levels of headlines, ordered list, unordered list, quote, link, strong, italic.

Text:

• It consist of: title, text field, CTA button - and each of them is optional,
• rich text editor can be used for the text element with additional styleable tags: three levels of headlines, ordered list, unordered list, quote, link, strong, italic.

Image:

• It consists of: background image, caption text, link URL,
• background image can be cropped automatically or manually to align several images in one row,

Divider:

• used to separate different content groups on a page,
• consists of text and full-width line per default but different properties like backgrounds can be added.

Product:

• used to direct users to product pages or to add products to the cart directly from Styla content,
• comes in three variants: slider, grid, mosaic and allows for several options so even with several product groups on a page, each of them can look different,
• it consists of: product image, title, description, category, brand, price, link URL, "add to cart" button - all depending on product data Styla gets from you,
• product data comes from product integration with your shop and when adding new product to the module, you can search for name or sku or filter products by category,
• products can be set manually too.

Product Details:

It's a variant of the Product module above with just one product spanning full module width.

Editorial Shopping:

• used to combine mood images with products,
• consists of a background image and hotspot buttons that, upon clicking/tapping display an overlay with product details,
• product data comes from product integration with your shop and when adding new product to the module, you can search for name or sku or filter products by category,
• products can be set manually too.

Navigation:

• a bar with links in a flexbox that can be aligned horizontally or vertically, depending on settings you choose,
• four types of links can be set: exterial, internal, relative, to another module,
• anchor links for each new module are created automatically.

Video:

Embeds videos with players based on links from YouTube and Vimeo.

Text on Video:

A merge of the banner and video modules, so you can set a banner with a video in background with it.

Your Stories:

• displays a feed consisting of Pages marked as Stories,
• can be set to only display Stories with a given category or tag and a given number of Stories,
• can be linked to each other to build a Magazine,
• if products added to a Story, they will appear in the feed.

Instagram:

• displays a number of latest stories coming from an Instagram user's feed,
• they are sourced via Instagram API and Styla needs an authorised API user to fetch them.

HTML:

• can be used to render any HTML content and provide a custom CSS for it,
• inline JavaScipt is blocked for security reasons but iframes with JS can be embedded,
• in order to include an external interactive content like maps or videos, place your content in an iframe and include it in the module like this:

<iframe src="https://mywebsite.com/maypage" width="100%" height="1600px"></iframe>

• Drag and drop a module onto a page row.
• You can have up to three modules per row and divide it into two or three equal parts or 1/3 and 2/3.
• You can also set additional properties per layout row: margin on top of it, alignement for modules inside it, internal spacing and row width.
• Fill your module with content: text, images, links, products, videos, HTML code.
• You can duplicate modules and rearrange them on a page.
• You can set a module to hide on desktop or mobile and change its appearance on one of them.

Authenticating Styla to display your Instagram content:

Styla cannot source your Instagram content via Instagram API without your consent. In order to give this consent, log in to Styla Editor and follow the steps below.

1. Drag and drop Instagram Module on your page and press Edit
2. Choose an authentication method (by clicking the "Instagram" or "Facebook" links) in the module settings.
3. Log in and follow the instructions on the page. Please make sure to grant Styla all the requested rights.
4. Now you can choose your Instagram ID from the dropdown list.

First method: Instagram
You can authenticate with a simple Instagram account using this method. Please note that the number of likes and comments won't be shown in the Instagram Module using this method.
Second method: Facebook
Using Facebook requires an account linked to a Facebook business account managing a page connected to an Instagram business account. The Styla integration will break if the account used is removed from the Facebook business account or when the business account, or the page, are disconnected from the Instagram business account. It is possible to show the number of likes and comments using this method.

Making sure your .mp4 videos play on Safari/iOS:

If you host .mp4 video files that you include in Text on Video modules then please make sure the server on which you host them provides Accept-Ranges: bytes setting in file headers. Without this videos won't play on iOS devices. You can find more details in an article by Apple here.

Including a single Instagram post:

You cannot do this using the Styla instagram Module (it includes a feed, not a single post). But you can include a single post by doing the following:

1. Get embed code from the post on Instagram,
2. Drag&drop an HTML module on your page,
3. Turn the "Enable inline javascript" switch on (the embed code relies on inline JS),
4. Paste the embed code in the HTML module,
5. Paste the below code directly above the Instagram embed code:

<script>
if(window.styla)
{
let scriptTag = document.createElement("script");

scriptTag.setAttribute("async","");
scriptTag.setAttribute("src","https://www.instagram.com/embed.js");
document.getElementById("stylaContent").appendChild(scriptTag);

}
</script>

Including a single Twitter post:

Similar to embedding a single Instagram Post, you can also embed a Twitter post, when you follow these steps:

1. Get embed code from the post on Twitter,
2. Drag&drop an HTML module on your page,
3. Turn the "Enable inline javascript" switch on (the embed code relies on inline JS),
4. Paste the embed code in the HTML module,
5. Paste the below code directly above the Instagram embed code:

<script>
if(window.styla)
{

let scriptTag = document.createElement("script");
scriptTag.setAttribute("async",""); scriptTag.setAttribute("src","https://platform.twitter.com/widgets.js");

document.body.appendChild(scriptTag);

}
</script>