Using smart components to edit the menu in one place and update changes to all other pages of the website.
Pinegrow PRO is required because we’ll use Smart components.
Let’s say we have an existing website or template with multiple pages. All pages share the same menu and we want to avoid having to edit the menu on all pages whenever the menu changes.
Note, if we would be creating the website from scratch it would be better to use Master pages.
Instead we want to edit the menu in one place and then apply this change to all pages where menu is used.
With Pinegrow and Smart components this is easy!
- Define the menu on the main page as a smart component.
- Make certain classes editable on menu items, so that pages can have different menu items selected as active.
- Change existing menus on other pages into instances of our new menu component.
Open the main page (usually index.html), select the menu and in ACT panel add Define component action.
Fill in the component id and name.
For detailed instructions read How to define a component?
Make active items editable
Our menu looks like “HOME | SERVICES | CONTACT…”, where active page is somehow highlighted. In Bootstrap, this is done by adding the class “active” to the selected menu item.
If we would use the menu component as it is now, the component would be exactly the same on each page of the website. That means that Home menu item would be selected everywhere.
We will use Editable areas to make menu items selectable:
One-by-one, select each menu item, add Define editable area action from ACT panel, fill in the id (for example, menuitem), turn off editable content and list “active” class as editable.
Do Components -> Update to process the changes.
Now, all we have to do is convert menus on other pages into instances of our menu component:
- Open a page.
- Select the menu.
- In LIB panel right-click on the Menu component and select Make selected instance of.
- If needed, set the appropriate menu item as active.
- Repeat the process for all remaining pages.
Read more about converting elements into component instances.
Now, whenever we need to change the menu we just do the change on the main page where the component is defined and use Component -> Update to apply the change to all component instances.
Quick update will update all open pages. Update whole project will update all pages in the project. Remember, that in both cases you need to manually save changed files.
Last updated on February 14, 2017 at 8:54 pm