Once a Web Story is created, you can display/embed it on your website using either of the two methods:
- Using Block
- Using Shortcode
Using Block #
You can use the Web Stories block provided by the Web Stories plugin to display the added stories on your website page/post.
- Click on the “+” icon and search for the Web Stories block.
- Once the block is added, you will further need to either embed a collection of your latest stories, select your own preferred stories or enter an URL of a story you want to display.
Selecting the Latest Stories option #
You can display the latest stories added to your website with this block option.
Once the Latest Stories option is selected for the Web Stories block, you will need to further select a Layout for the Web Stories block. The provided layout option are listed below:
- Box Carousel
- Circle Carousel
- Grid
- List
The following Web Stories Block settings are displayed for a page/post editor as it is added to your site page or post. Some of these settings will only be displayed depending on the block layout selected.
Layout Options #
Display Author: Enable this option to display the author name for each stories added.
Display Date: Enable this option to display the date when the story was created.
Display Excerpt: Enable this option to display the Story description text inside the Story list.
Use Sharp Corners: Enable this option to remove the border radius applied to the stories.
Display Archive Link: Enable this option to display the link to the Web Stories archive page on the Web Stories block.
Archive Link Label: Enter the archive link label here.
Display Title: Enable this option to display the Story title for each story.
Layout and Style Options #
Circle Size: Select the radius of the circular box in pixels where the stories are displayed.
Number of Columns: Select the number of columns for the stories grid.
Image Alignment: Select the alignment for the Story image when the stories are displayed in the form of a list.
Sorting and Filtering #
Order By: Select the order by which you want the stories to be displayed. The stories can be displayed based on the date they were published or based on the alphabetical order of the story title.
Order: Choose to display the stories based on either ascending or descending order of the order type selected.
Authors: Enter the name of the author/s whose stories you want to display inside the Story block. Separate the author names with commas or the Enter key.
Number of Stories: Select the number of stories you want to display inside the Story block.
Selecting the Selected Stories option #
You can choose to display your preferred stories inside the Web Stories block via this block option.
Once the Selected Stories option is selected for the Web Stories block, you will need to further select a Layout for the Web Stories block. The provided layout option are listed below:
- Box Carousel
- Circle Carousel
- Grid
- List
After selecting a block layout, you will need to select the web stories that you want to display inside the block.
The Web Stories block settings for the layouts provided under the Selected Stories option are the same as that of the Latest Stories option. However the Sorting and Filtering settings are missing inside the Selected Stories option.
Selecting the Single Story option #
You can either choose to select an existing story from your site, or add one with a URL on choosing the Single Story option.
On clicking the Select Story button, you can choose to display any one Story from your existing stories.
But if you choose the Insert from URL button then you will have to enter the URL of the story that you want to display.
The following Web Stories Block settings are displayed for a page/post editor on adding a Web Stories block selecting the Single Story option.
Embed Settings #
Title: Enter the Story Title here.
Poster Image: Select the poster image for the Story embedded.
Story dimensions: Enter the width and height value for the Story to be displayed.
Using Shortcode #
The Rishi Companion plugin provides two different shortcodes to display the stories created on your website.
You can use the below shortcode to add web stories section similar to the one displayed on the site header or footer section to your site posts and pages.
[WEB_STORIES]
And, you can use the following shortcode to display all your web stories on a single page/post.
[ALL_WEB_STORIES]
To display Web Stories using the Shortcode, you can follow the below steps:
- Click on the “+” icon and search for the Shortcode block.
- Once the block is added, you can enter your preferred shortcode inside the Shortcode field and Publish the changes made.
