Website CMS Management

Owned by George Worrell
Last updated: Mar 20, 2024
7 min read

Website Management Overview

CMS_ScreenShot.jpg
CMS TOOL

CMS Managed Components

Portions of the website http://FIO.net are managed through the Webflow CMS collections system.

It is located in the left-hand rail midway down as seen in this screenshot.

The following are the key area that can be managed on the site:

CMS_ScreenShot.jpg
CMS TOOL

CMS Managed Components

Portions of the website http://FIO.net are managed through the Webflow CMS collections system.

It is located in the left-hand rail midway down as seen in this screenshot.

The following are the key area that can be managed on the site:

 

 

States of Content in Webflow

  • Draft - Saves a draft of the work your are working on.

  • Published - Will published your work to the test instance and/or live website

    • NOTE: New work will not be pushed out into the wild until it is published.

  • Unpublished - Will unpublished your work to the test instance and/or live website

 

 

States of Content in Webflow

  • Draft - Saves a draft of the work your are working on.

  • Published - Will published your work to the test instance and/or live website

    • NOTE: New work will not be pushed out into the wild until it is published.

  • Unpublished - Will unpublished your work to the test instance and/or live website

 

Components

 

 

What’s New Tiles

  • Purpose

    • The purpose of the What’s New Tile section is to highlight the three most current and exciting things happening at FIO

    • Only 3 can be published at once

      • As the tile ages out, it should be switched to draft mode (if a legacy copy is needed)

      • Tile must be published to display on the website

  • Manage Elements

    • Feature Icon / Image

      • 125px X 125px png files

    • Styling

      • Background Color

        • Add background hex color (brand colors)

          • #765CD6

          • #22A2FF

          • #B65CD6

          • #252525

    • Year

      • Select Current Year

    • Content

      • Name - This is title of the tile

      • Slug - The slug is auto-generated based on the name

      • Description - The description populates the main content area within the Tile

    • CTA

      • Button Text - This is the button text

      • Button Link - This links the button to the relative view

        • Opens new tab for the user to access external details

 

 

What’s New Tiles

  • Purpose

    • The purpose of the What’s New Tile section is to highlight the three most current and exciting things happening at FIO

    • Only 3 can be published at once

      • As the tile ages out, it should be switched to draft mode (if a legacy copy is needed)

      • Tile must be published to display on the website

  • Manage Elements

    • Feature Icon / Image

      • 125px X 125px png files

    • Styling

      • Background Color

        • Add background hex color (brand colors)

          • #765CD6

          • #22A2FF

          • #B65CD6

          • #252525

    • Year

      • Select Current Year

    • Content

      • Name - This is title of the tile

      • Slug - The slug is auto-generated based on the name

      • Description - The description populates the main content area within the Tile

    • CTA

      • Button Text - This is the button text

      • Button Link - This links the button to the relative view

        • Opens new tab for the user to access external details

 

 

Top Banners

  • Purpose

    • The purpose of the top banner is to quickly highlight an action for the user to take or informational highlight

    • Only 1 can be published at once

      • The top banner must be published to display on the website

  • Manage Elements

    • Content

      • Name - This is title of the top banner

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Text - The description populates the main content area within the top banner

      • Turn ON Banner

        • Must be enabled for the banner to be displayed

    • CTA

      • Text

        • Text can be hyperlinked in order to drive the user to specific actions or view.

        • Create a hyperlink within the text field

      • Close

        • This is hard coded and allows the user to dismiss the banner

 

 

 

 

Progress

  • Purpose

    • To highlight and demonstate the FIO protocol’s growth and maturity since it’s first launch

  • Manage Elements

    • Content

      • Name - This represents the title of the progress

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Description

          • Provides short description within the tile

        • Link

          • Opens new tab for the user to access external details

        • Icon

          • Feature Icon / Image

            • 125px X 125px png files

        • Order

          • Selects display order

        • Year

          • Filters by the progress year

        • Type from collection

          • Filters by collection type

          • Can have multiple collection types selected

        • Date

          • Provides date of event/progress

Progress Years

  • Purpose

    • To bind the progress highlight to the year it occured

  • Manage Elements

    • Content

      • Name - This represents the year

      • Slug - The slug is auto-generated based on the name

Progress Types

  • Purpose

    • To bind the progress highlight to the type of progress category

  • Manage Elements

    • Content

      • Name - This represents the progress type

      • Slug - The slug is auto-generated based on the name

    • Custom Field

      • Order filtering list - Provides the numerical order in the list for filtering on the progress page

 

 

 

 

 

Eco-systems

  • Purpose

    • To highlight and demonstate FIO’s vast network and eco-system

  • Manage Elements

    • Content

      • Name - This is title of the top banner

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Rank

        • Logo

        • Type

          • Filters by partner type

        • Feature

          • Filters by the feature

          • Can be multi-selected

        • URL

          • Opens new tab for the user to access the ecosystem/partner page

        • Shows or hides guides section

          • This links both the eco-system user guide and the video guide

Eco-systems Types

  • Purpose

    • To bind the eco-system partner to an eco-system type

  • Manage Elements

    • Content

      • Name - This represents the eco-system type

      • Slug - The slug is auto-generated based on the name

    • Custom Field

      • Order filtering list - Provides the numerical order in the list for filtering on the ecos-system page

Eco-systems Features

  • Purpose

    • To bind the eco-system partner to eco-system features

  • Manage Elements

    • Content

      • Name - This represents the feature type

      • Slug - The slug is auto-generated based on the name

    • Custom Field

      • Order filtering list - Provides the numerical order in the list for filtering on the progress page

 

 

Eco-system User Guide

  • Purpose

    • To demonstrate to the user, the many use cases and how to interact with the FIO protocol

  • Manage Elements

    • Content

      • Name - This is title of the User Guide

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Reference to the eco-system

          • Select and search for the partner to associated the user guide with OR

          • Create an eco-system partner from this view also

        • Rich Text

        • Description for heading subpage

        • Short Description

        • Icon

          • Feature Icon / Image

            • 250px X 250px png files

 

 

Eco-system Video Guides

  • Purpose

    • Video linking to demonstrate to the user, the many use cases and how to interact with the FIO protocol

  • Manage Elements

    • Content

      • Name - This is title of the Video Guide

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Icon

        • Short description for ecosystem page

        • Reference in ecosystem

          • Select and search for the partner to associated the user guide with OR

        • YouTube video identifier

 

 

People Behind FIO

  • Purpose

    • To highlight all the people helping to manage and grow the FIO Protocol

  • Manage Elements

    • Content

      • Name - This is title of the person

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Tag

          • Indicates person’s affiliation or role

        • X Link

          • Opens new tab for the user to access external details

        • LinkedIn Link

          • Opens new tab for the user to access external details

        • Photo

        • Section

          • Places the person in one of three main sections

            • Board

            • Committee

            • Contributor

        • Order

          • Selects display order

        • Github Link

 

 

Research and Education

  • Purpose

    • To highlight real world application and coverage of the FIO protocol / token in the public eye

  • Manage Elements

    • Content

      • Name - This is title of the tile

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Description

          • Provides short description within the tile

        • URL Link

          • Opens new tab for the user to access external details

        • Icon

          • Feature Icon / Image

            • Max width 250px, max height 60px

          • Design Assets

        • Order

          • Selects display order

 

 

Get Involved Tiles

  • Purpose

    • To highlight how individuals can get involved with the FIO protocol

  • Manage Elements

    • Content

      • Name - This is title of the role

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Icon

          • Feature Icon / Image

            • 125px X 125px png files

        • Content

          • Provides short description within the tile

        • Background Color

          • Add background hex color (brand colors)

            • #765CD6

            • #22A2FF

            • #B65CD6

            • #252525

        • Order

          • Selects display order

 

 

Dashboard Tiles

  • Purpose

    • To highlight the many different elements of the FIO app and it’s use

  • Manage Elements

    • Content

      • Name - This is title of the tile

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Icon

          • Feature Icon / Image

            • 425px X 325px png files

        • Content

          • Provides short description within the tile

        • Background Color

          • Add background hex color (brand colors)

            • #765CD6

            • #22A2FF

            • #B65CD6

            • #252525

        • Order

          • Selects display order

 

 

Integration Tiles

  • Purpose

    • To highlight the many different integration opportunities of the FIO protocol

  • Manage Elements

    • Content

      • Name - This is title of the tile

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Icon

          • Feature Icon / Image

            • 125px X 125px png files

        • Background Color

          • Add background hex color (brand colors)

            • #765CD6

            • #22A2FF

            • #B65CD6

            • #252525

        • CTA Text

        • CTA Link

          • Opens new tab for the user to access details

        • Description

          • Provides short description within the tile

 

 

Differentiator Tiles

  • Purpose

    • To highlight how the FIO protocol is different from other L1 protocols

  • Manage Elements

    • Content

      • Name - This is title of the tile

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Icon

          • Feature Icon / Image

            • 125px X 125px png files

        • Description

          • Provides short description within the tile

        • CTA Link

          • Opens new tab for the user to access details

        • Background Color

          • Add background hex color (brand colors)

            • #765CD6

            • #22A2FF

            • #B65CD6

            • #252525

        • Flip Card Description

 

 

Benefits Tiles

  • Purpose

    • To highlight the benefits of the FIO protocol

  • Manage Elements

    • Content

      • Name - This is title of the tile

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Description

          • Provides short description within the tile

        • Icon

          • Feature Icon / Image

            • 75px X 75px png files

 

 

Privacy Policies

  • Purpose

    • To allow the privacy policy content to be managed

  • Manage Elements

    • Content

      • Name - This is title of the view

      • Slug - The slug is auto-generated based on the name

      • Custom Field

        • Content