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.

Currently available

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 nd Styla needs an authorised API user to source 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.

How to use them

  • 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.