Webpage Components 

  Documentation | Webpages  | Webpage Components


This page shows you all the available web components and provides some extra information on how they work. You have a few to choose from when adding components. All these components display automatically well on either big or small screen.

 You can use any of these components by selecting the edit option and filling out the desired styles, then click save. 

popupimage

New Components!

Image Card

This is an image card

Buttons are optional and you can use font awesome icon classes for the buttons too!

Image Card 2

We created this version of the image card too. It also has the option for a button.

Call to Action 2.0

A nicer version of the Call to Action.

This also has an optional button.

Accordion 



Accordion is a list of headers that can be clicked to reveal or hide associated content. You can click to see more information, or you can put as much or as little information as required in this type of component.

Example of Accordion. Click Me

When users click on an accordion to open it. They can see more information. Use multiple accordions for a Frequently Asked Questions page (FAQ) or for tips.

 Call to Action 


An image on the left or right and and a text area with an optional button.

This is useful if you want an image in the left or right, some text and optionally a button that links to somewhere, including in a new window if required.

cta-image1


Example of Call to Action


 Card 


 Different style cards and different sizes (if you use size 4/12 you can get 3 cards nicely in a row. If you use size 3/12 you can get 4 cards nicely in a row. There’s also a type of card where it has very little text in it. This theme is called ‘light’. 

It has a button which is optional and along with styles, this control you can add a pre-built theme which is from bootstrap 4.

Example of Card

Here is some text.

Carousel 

It is a component that lets you add any control you see on the page to a carousel, which is a full page scrolling control.

Useful if you would like several heros on a main landing page.

 Contact Us 


The Contact Us form allows visitors of the page to start interaction by inputting their name, email address, a phone number, and their message. It is one of the best ways to start building a relationship with your website audience.

An email with the contacts details and question is sent to the site administrator, these contacts are not automatically added to the member database. If you want to create users for these contacts to use in a mail campaign you should add each user manually as they arrive.

The "I'm not a robot" prevents spambots from filling your email inbox with fake contact requests.

Contact us

Countdown


This is a countdown to a date with your own countdown timer to a specific date.

267
Days
20
Hours
35
Min
19
Sec
267 days 20 hours 35 minutes 19 seconds

Disclaimer


 It states the limits of your liability for the use of your website and the information it contains. If you want to ensure that your legal concerns are addressed, it is important that you put a disclaimer.



Disclaimer: This is not a medical site. * enter the disclaimer information here *

Discussion


A widget that if you put on any page, people who are logged in will be able to see it and they can add to the conversation.

This is a social media control which allows users to discuss, like, add images / photos and documents to any page. Users can also flag inappropriate comments. You can subscribe to a discussion to get emails when users add content.

Display Code

The purpose of this is to show on a webpage, if you want to provide coding examples you can use this control so the code is easier to read.

public function helloworld(){
alert('hello world');
}

Footer


It is a section or area at the very bottom of a webpage containing important information. It is useful for including material that you want to appear on every web page.

If you put the footer at the bottom of the main home page (\) then you can use this on other pages too, in the other pages settings click the "use default home page footer" checkbox and this footer from the home page will be used. It means you only have to update the footer in one location.

You can create a different footer manually for other pages if you prefer or have no footer.

Header


A header appears at the top of every page and is the first thing that visitors see when they visit the site. It contains common information about the site, such as site logo, site navigation and main contact information.

Example of header

* write information here *

Hero


This is a web component  that consists of big banners that can link off to a page. You can have text in the text area or just provide a title for it.




Hero 2.0


This is a same component type like Hero but with more editing tools like background video, html text, link URL, button text, mobile background image and such.



Pro Tip:

End the text in the field  Description (optional)  with two full stops .. and the component will do a typing effect.

Hero 2.0First slide

Hero 2.0




Icon card


You can use a Font Awesome Icon that you can add to the top or members itself uses Font Awesome for every icon that they see on the dashboard and in the menu.

Example of Icon Card

This is a rocket icon from here.

Icon Card 2.0

The new icon card 2.0 you can add buttons and it has a nice border.

1109

Icon Card Stats

Use live statistics.  Expose Insight Report stats by putting the GUID of the statistic inside the font awesome icon field in this format stat:2EF33C3A-B7E5-4EC8-8F9B-8D98634B3350 

Image


An image is a visual representation of something. You can insert image and size it from 1/12 to 12/12 or full screen, whichever you like.

popupimage

JavaScript

JavaScript is a scripting language that can add dynamics and special effects to the site. You can add custom JavaScript by using third-party tools like Google search or animations to pages, form or anything else that you want to add to the system.

This component has a HTML section and a Javascript section, both are optional. You can use the two to embed features from other sites such as forms and embed controls.


Page List

A page list is a simple ordered list of pages on the site. It matches a URL pattern and displays all the pages and any pages that matches meta information (title, description, and teaser image in a list). You can resize the boxes that are displayed too.


Creating a Web Page

details about web page and how to create one

Read More

Setting Security (Roles)

details about how a web page can add security

Read More

Name and URL

details on how to choose a name and url

Read More

Changing Order (Switch to Page List View)

details on how to change order

Read More

Enabling or Disabling a Page

details about enabling or disabling a page

Read More

Including in Main Menu

details how to include page in main menu

Read More

Using the Main Footer

details about using the main footer

Read More

Creating a Folder

details about creating a folder

Read More

Animations and Layout (CSS)

Details on how to add animations to any control, as well as use CSS to control other styling such as padding and margin.

Read More

Moving Webpage Components (Drag and Drop)

details on how to move webpage components using the drag and drop

Read More

Enabling or Disabling a Web Component

details on how to enable or disable a web component

Read More

Custom Styles (Colours and Fonts)

details about custom styles, colours and fonts

Read More

 PageNextPrevious 

This is a web component that shows the next page in order or in a series.

It shows the page teaser (if provided) and the title and description and a link to the page.

Url : Set the url to find the pages to display.

Size : You can adjust the size of the preview in bootstrap sizes 1 to 12.

Depth : You can optionally set the depth for the number of childpages/folders, if blank this defaults to 100. e.g. Set url to \ and depth to 0 to show the top level pages like a menu.

PDF Viewer


A viewer that displays PDF files on the site. PDF file format is used when you need to save files which cannot be altered but still need to be easily accessed.

Failed to load PDF file.

1 of

Registration Form


This is used to sign up customers for subscriptions, services, or other programs or plans.

You can put a registration form where it suits you.

You can add custom fields to your members database (see Custom User Fields in Documentation) and they will appear here if you elect them to, you can also make them mandatory.


Registration


Australia

The company it is for:  (e.g Company XYZ)  

What is key purpose of this new mition system (e.g. replace existing website / membership platform)  

I accept the terms and conditions of using this website.



Share


These social media share buttons is the share control that lets the user share the current page on a social medium. If you have social media things set up on the homepage’s footer, it will automatically create the share icons for you for that platform.

Subscription


This shows all the prices for each subscription or term that are published and active, or creates a list of your subscriptions and payment amounts that are visible on your site.


Filter

Standard

All features.

Unlimited Members / Unlimited Staff.
 

Monthly data limits:
Includes 2500 sms messages, 20000 emails per month, Basic Azure Database, 10GB diskspace,  200 Address lookups.

Monthly

Start Date: 2022-01-20

AU $499.95

Exc GST

Business

All features.  
Unlimited Members / Unlimited Staff.  

Monthly data limits:
Includes 5000 SMS messages, 40000 emails per month, Standard Azure Database, 20GB diskspace, 1000 Address lookups.

Monthly

Start Date: 2022-01-20

AU $1,199.00

Exc GST

Mega

All features.  
Unlimited Members / Unlimited Staff.  

Monthly data limits:
10,000 SMS messages
500,000 emails
Standard Azure Database (3 months offsite backups)
1TB disk space
1TB Network Traffic

Monthly

Start Date: 2022-01-20

AU $2,999.00

Exc GST

Text


It is a big textbox where you can put content in. You can use large text, medium text, or small text. You can also add code or change the text to bold or italics and create links.


Example of Text

Here you can use a textbox control to put any text in.

User Directory


Directories are a list of people that have specific role. Put this on a page and make it accessible to various members so they can have social interactions with each other, or you can put a list of all the different people that have a specific role and lock the page down so that only people in that role have it. This is a good way of letting staff or trainees find each other.

Amy Mitchell

userimage

 Video 

 

A component where you can add videos to the site or to the dashboard, media library, document, or a secure document library. Just upload the video and enter the display name, keywords, description or a short explanation of what the file is. You can upload video or use a YouTube link, or your own custom embed code (Vimeo, etc.)  

Bootstrap padding and offset


Bootstrap is used to modify the appearance of the element in a web site. There is a field called custom CSS where you can add different bootstrap padding and animations. You can also custom class to each component. This allows you to add bootstrap classes such as these:

mi-auto

margin left auto

mr-auto

margin right auto use this with the above one to centre a box in the screen

offset-md-2

This will offset the container, so you don’t have to put a filler box before it. This one is a size 2 – replace 2 with any value between 1 and 11.

(Note: you can use more than one custom class on the component)

Size (bootstrap sizing)


You can size these components to be full screen which we call size 12. With bootstrap sizing, you adhere to the 12-column system which means everything is broken up into 12. 

Example: You want to have things that are size 2, so you’ll have 6 of them. We could have things with a size 6 and have 2 of them. We can size every one of these components differently.


Animations and Layout (CSS)

Details on how to add animations to any control, as well as use CSS to control other styling such as padding and margin.

Read More

powered by mition