StoryBlok - Homescreen component editing

Homescreen Component Editing Screen

Look for the Page section on the right side of the screen, which is where you can make home screen changes. 

We already established 11 components called blocks. You can add more blocks, change the data, or delete them. It is also possible to drag and drop to rearrange the order of the home page components.

Each component on the right side of the screen is intended to mirror its appearance on the home page.

How:  Access to Space has been granted permission, navigate Space > Content > Page

What features does JMango360 B2B Solution StoryBlok offer?

In essence, the user can manage and update the content on their homescreen with the tool.

Edit home page banner

User can change the appearance of 1 or many promotion banners in StoryBlok. The modifications you can apply to the "Grid Banner" component are listed below.

How: Navigate Space > Content > Home. Double-click on blocks “Grid Banner" on Page section to edit. Then click Save to save changes.

Grid banner
Types	The image on the left and text on the right The image on the right and text on the left
Image	Select the number of images on the slideshow Change the image's position Scale image
Title	Change text color Change text size Change font Change font style. Default: Bold
Subtitle	Change text size Change text color Change font Change font style. Default option: Bold
Description	Change textsize Change text color Change font Change font style. Default option: Regular
Call To Action Button	Change button text color Change button link (Link to a product/module/feature/an external link) Change button color Change text on button (Default: Capitalize and bold)

Edit info

By making changes to the "Grid site info" and "Grid Info Widget" components, the user can display main information about their store or the site.

Grid site info

How: Navigate Space > Content > Home. Double-click on blocks “Grid Banner" on Page section to edit. Then click Save to save changes. 

Three information blocks are pre-setup for this component. If more blocks are required, the user can add them. New blocks will be displayed by selecting arrows to view more. Here is a list of the contents that the app owner can design for each info block.

Default block ( Site info)
Icon	Select icon from existing offered icons Change icon color
Title	Change font size Change font Change text style Change text
Subtitle	Change subtitle size Change font Change text style

Grid Info Widget

How: Navigate Space > Content > Home. Double-click on blocks “Grid Info Widget" on Page section to edit. Then click Save to save changes. 

Grid info widget is set up with 3 info blocks. The most important and succinct details regarding the company's services and goods will be presented in this part. The user can add more blocks if needed. Here is the list of things that can be changed.

Default block (Grid Info Widget)
Icon	Select icon from existing offered icons Change icon color
Title	Change font size Change font Change text style Bold and Capitalized Change text color
Subtitle	Change font size Change font Change text style Semi Bold Change text color
	Change font size Change font Change text style Regular Change text color

Edit promotion 

Promotion section

This is used by the user to change and display the promotion section on the home page.

How: Navigate Space > Content > Home. Double-click on blocks “Promotion Section" on Page section to edit. Then click Save to save changes.

Promotion section
Background image	User can input different image for the section
Title (Left side of section)	Change font size Change font weight Change text style Change text color
Subtitle1, Subtitle 2 (Right side of section)	Change font size Change font weight Change text style Change text color
Button (Display in the center of the section in black background and white text)	URL Text

Grid promotion widget

Users can edit a grid of "promotion widgets" on home page

If more blocks are required, you can add them; they will display in rows with three photographs with text per row.  

You can change 3 types to display image and text: 

• Text + button align left

• Text + button align right

• Text + button align vertical and horizontal center

How: Navigate Space > Content > Home. Double-click on blocks “ Grid Promotion Widget" on Page section to edit. Then click Save to save changes. 

And the contents in “Grid promotion widget" that the user can change in the table below

Grid promotion widget
Background image	Change image's position on the block Scale image
Title	Change text color Change text size Change font  Change font style
Subtitle	Change text color Change text size Change font  Change font style
Call to action button	Change button link (Link to a product/module/feature/an external link) Change button color

Edit featured 

The user can show up your best-featured products/categories to your users with these amazing designs with 3 components “Grid Featured Product", “Feature Categories", “Grid Feature Article". 

Grid Featured Products

Users can change the display of the section’s title by

• Change font size

• Change font weight

• Change text style. 

• Change text color

With Product block

Product blocks are default set up 4 products/ line and the users can add more blocks if needed. Product information that can be edited includes: 

• Product tag 

• Product image 

• Product name

• Product attribute

• Product price
  

• Product link
  

How: Navigate Space > Content > Home. Double-click on blocks “Grid Featured Products" on Page section to edit. Then click Save to save changes. 

Feature Categories

Featured products will be chosen and displayed here based on settings. App owners can set up:

Feature Categories
Promotion banner	Image            -  Scale image - Reposition image - Add URL Change text promotion banner color  Change button text Change button color Change button text color
Section Title	Align horizontal center with the line Change section color
Categories	Image Product numbers Link URL

How: Navigate Space > Content > Home. Double-click on blocks “Feature Categories" on Page section to edit. Then click Save to save changes. 

Grid Feature Article

This block can help the user link their articles to provide the user with useful information. 

App owner can edit: (articles)

• Title

• Description

• Date

• Article Link: can be linked with internal general-purpose page or external link
  

How: Navigate Space > Content > Home. Double-click on blocks “Grid Feature Article" on Page section to edit. Then click Save to save changes.

• Related Articles

• StoryBlok - Global Content Edit

  Global Content Edit Screen How: Access to Space has been granted permission, navigate Space > Content > Layout We have set up an area called Global Layout. This layout will include: Header - This applies for a desktop view of the website Navigation ...

• StoryBlok - Language Translation

  Language Translation Screen How: For setting: Access to Space has been granted permission, navigate Space > Setting > InternationalizationFor content translation: Access to Space has been granted permission, navigate Space > Content > Home The ...

• JMango360 B2B Solution - StoryBlok Overview

  Overview Storyblok is a user-friendly and powerful headless Content Management System (CMS) with a Visual Editor. It is an intelligent tool that assists businesses in taking care of their content in a systematic manner. Its visual composer allows ...

• StoryBlok - General Purpose Content Page Management

  General Purpose Content Page Screen Path: Access to Space has been granted permission, navigate Space > Content > Page On the left of the screen, you can see the list of general contents there and edit them.  To create a general content page, go to ...

• Upload and manage images

  Upload images Please use images and icons that you own the copyrights to or have permission to use to design your app. You are also advised to make use of images with the recommended sizes for the best display on apps. To upload images, do the ...