Ionic 2/3 template selection

Hello, today I would like to give you important information about ionic template selection, how we make the template selection and finally we will open sample projects and examine sample templates together with you.


If you dont know how to open a new project you can review my guide !

1. What is the template?

First, we can understand template word as a theme. The designs you see on internet sites are usually in the form of a template, ie the arrangement of objects, colors, etc. basic and detailed things are actually a theme. From there you can think about the template for mobile platform accordingly. Ionic has 11 basic templates. When you open a project you have to choose one of these 11 templates.

2.Template selection

Template selection is the biggest factor when we open the progeny. Because the project you opened after this phase will be based on that template and you will continue to do your edits on this template.

Template selection is very relevant to what your application is (what you will do). For example, if you want a One-Page application, you can go to <super>, <tab>, <sidemenu> Using templats like it will be very unnecessary. Because unnecessary pages will be created and the size and load of the application will multiply.

Therefore, it is very useful for you to choose a template by considering how you implement it.

3.Ionic Template types

You can see the template types in the following picture.



ionic templates
ionic template

Let explain templates.

  • tabs: A simple template type that allows you to see menu transitions at the bottom or top of most applications.
  • blank:  A project that allows you to open an empty project, that is, nothing in it.
  • sidemenu: A simple project that lets you see pop-up menu transitions you see in some applications.
  • super: It is a template type that contains most things (intro screen, login screen, chat screen, etc.).
  • conference:   A conference app.
  • tutorial: A template type that contains various screens that you can see in Ionic functionality.
  • aws: A backend project that you can see related to Ionic’s backend.

4.Ionic Template Interfaces


ionic template Blank
ionic template Blank


ionic template Aws
ionic template Aws


ionic template Side
ionic template Side


ionic template Tutorial
ionic template Tutorial


ionic template Conference
ionic template Conference


ionic template Super
ionic template Super

Above you can see the interfaces of the templates.


As a result, if you are ready to use 11 different templates, you can choose the template that best suits you by looking at the above interfaces and you can start to develop your application.

Apart from these, you can get a ready theme by clicking here. Paid and free options available, you can access themes of all versions including ionic 1,2 and 3.



25 March 2018 at 14:27

Wow, incredible weblog structure! How lengthy have you ever been blogging for?

30 March 2018 at 21:31

Howdy! I just wish to give a huge thumbs up for the fantastic info you might have here on this post. I will probably be coming back to your weblog for much more soon.

8 May 2018 at 05:19

Thanks for helping out, superb information.

2 June 2018 at 18:11

So considerably great data on here.

3 June 2018 at 09:28

Really fascinating topic , thanks for posting .

3 June 2018 at 14:42

Pretty section of content. I just stumbled upon your internet site and in accession capital to assert that I get in fact enjoyed account your weblog posts. Any way Ill be subscribing to your feeds and even I achievement you access consistently quickly.

legacies panda
15 August 2018 at 03:26

Thanks dude, u are superb.

can you post a tutorial on ionic 3 side menu?

Harris Wedderburn
10 November 2018 at 09:11

Thanks for sharing..

Leave a Reply

Your email address will not be published.