Pahamify Web Documentation

When we talk about the difference of usage between template and component in our elementor website, it can be dubious sometimes since the usage is quite similiar. In simpler way, let we differentiate Template as a place you can put more than one Component or more and not only that, in template you can make a specific post page Component too, such as: Blog post, Career post, or TCM post. Meanwhile in component we can make a specific component based on display condition too, but when this documentation written (10 Nov 2021) we still not implement it. So to standardized the usage between this two feature, let we put it like this:

Template:

1. Better use it As Post Page Default, you can set the default condition such as post category
   
2. It is good to make section wrapper for atomic component so you can give specific logic function instead put it in the atomic component.
3. Template really helpful when you want to make a specific category page, so you can combine it with post page, for example Rockstar Teacher Page.
4. When you have a Component but this atomic component need a certain logic in another place, you can try to use this as wrapper section template. So if there is another page that need to use this component with different logic or copywriting or content outside atomic component, you can use this template to make another wrapper section.
5. Regarding Shortcode, template more stricter when it come to implement this, since sometimes the content such as copywriting and image can be different in every page so it quite difficult to use it in template level.

Component:

1. When come to component please make sure to make it as Atomic as possible so if there is component that another division can edit, if by anychance they messed up something, it will only messed up in the component they editted and will not reflected to entire page.
2. If you need to make a complex component but your atomic component design will be used in other page with different layout, make sure you put general logic function, id, and class in your atomic component and handle the specific style in the wrapper, if you ask the reason, sometimes there is a layout that will messed up your style so it is better to prepare a certain Id or class that can you give your custom style based on layout in the respective page.
3. Regarding Shortcode, it is more flexible to use when it comes to component than in templates.

After we try to differentiate the both of them, their have a simmilarity usefull feature and that is Shortcode. Maybe you will ask what is shortcode? In easier way, shortcode is a Code that can render your template or component with the same content as its in. in Example if you have a template or component that contain word “Cat is Kawaii” then if you use short code it will render the same word as in the template.

Meanwhile, it is different if you import it directly, you can change the feature you give inside your page, so you can change the word “Cat is Kawaii” to another word based on content you need in the respective page. so To make it simple, Use Shortcode if you want the content the same as it is or one component with the same content for more than one page, and use import if you want to get only the layout but still can edit the content for respective page you need it.