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

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 to see more information.

 Call to Action 


An image on the left or right and a link off to somewhere. This is useful if you want an image in the left or right, some text and optionally a button that links to somewhere.

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’. 

Example of Card

Carousel 

It is a component that lets you add any control you see on the 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.

Contact us

Countdown


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

365
Days
22
Hours
58
Min
03
Sec
365 days 22 hours 58 minutes 03 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.

Example of Disclaimer

* 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.

Display Code

The purpose of this is to show the code of the webpage.

Example of Display Code

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.

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.

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.

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

Name and URL

details on how to choose a name and url

Read More

Setting Security (Roles)

details about how a web page can add security

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

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.

Loading PDF…

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.

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’ll automatically create the share icons for you.

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: 2021-10-14

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: 2021-10-14

AU $1,199.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

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.

 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)

Animations


Animations can make users or visitors stay on the site longer because it can highlight the website elements. For example, try these animation classes:

animate_animated animate_shakeY

The component will shake

animate_animated animate_fadeInDownBig

The component will make a grand entrance

animate_animated animate_bounce animate_delay-2s

The component will bounce, but will wait for 2 seconds first

adding animations custom CSS on every field add bp and animations and footers

add find an image select

Search the images

Save

If you want the images to be bigger make the foreground image bigger using the editing tool or just add some extra html

background image/foreground 

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.


Moving Webpage Components (Drag and Drop)

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

Read More

powered by mition