32min

Levisto - Visual Stories or Lessons Template

Introduction

Levisto is a no-code, responsive storyteller template that will help you to easily create and share bite-sized stories or lessons using virtual cards.

Features

  • Responsive design
  • Landing page
  • Story creation
  • User Authentication
  • Members Area
  • Admin dashboard

Data Structure

Block

The block data type contains a background image, font, illustration, preset, Sound FX, Story referenced and Text.

This is simply a list of stories.

NCC Illustrations

This contains icons and illustrations used in the development of story cards. They come as images, with tags.

NCC Images

Like the illustrations, the images carry tags.

Songs

Songs used in storytelling carry information such as artist, name, song file and tags.

Sound FX

Other sounds come as audio with tags and title.

Story

A story is identified by an Avatar, Background Music, BG Music, Blocks, Category, Claps, Demo, Featured, Status, Submitted.for featured, Theme, and Title.

User

This contains the user's Bio, DP (image), name, and Stories Applauded , admin .

Pages

index

On this page, you will find a well-arranged display of featured stories. The easily navigated page also has a box to creating a new story, the Categories link and a Submit button to quickly refer one to saved drafts.Custom states:StateNoteElementCategory SelectedThe value of this state reads "yes" when a category is selected, and "no" when cards are resetPopup categoriesselect

my-stories

This page shows all the user's published stories and drafts. A user can edit his/her stories here.

settings

This page shows a user's profile - photo, name and description. Changes to these details can also be made on this page.

story-editor

Stories are fully developed on this page.

submit-illustrations

Members of the community share icons, illustrations on this page for other members to use in telling their stories.

submit-music

Similar to the submission of illustrations, this page allows a member submit a melody or music which can be used by other members in telling their stories. Music and audio used in the workflow are controlled using the Howler.js music / audio player and Audio Recorder & Visualiser plugins (to aid the addition of an audio recorder to the app).

explore

This page contains stories created by other members of the community.Custom states:StateNoteElementCategory SelectedThe value of this state reads "yes" when a category is selected, and "no" when cards are resetPopup categori select

profile

The profile page shows a user's bio, username and collection of story cards.Custom states:StateNoteElementSelected CategoryThe value of this state reads "no" when Stories Category is reset, and "yes" for every established categoryprofile

story

This is simply a story card page.

story-unavailable

An unpublished story, when selected, props up this page.

submit-images

Submit Images page allows users (members) share pictures which can be used by others in building stories.

admin-panel

This template has an admin dashboard that is used to make changes to the database via frontend. In the dashboard, the admin can delete users or stories created. Also it comes with statistics graph which displays information by month and year.

Reusable Elements

The footer contains other information about the app, and social links.

Signup / Login Popup

Users are allowed to signup and login to the app.

Header

The header contains the logo. The header content can be changed.

Things to Note

This app has been developed with CSS Tools, jQuery and Relative Time with Moment.js plugins to enhance element actions in the app.

Admin dashboard: comes with security measure which prevents the deleting or editing features to not work in the template.What that means is that you will not be able to use the admin features at full unless you'll buy this template and enable the editing feature.

To enable these features after purchase, set the user data type with Admin field to yes means the features are enabled and if No respectively disabled.

Document image

Done!

Release Notes

Update: 15 Sep 2021

  • template responsive design reworked
  • added "Add content" button in admin panel
  • added a new page for uploading SoundFX

Demo to preview the template