Editing & modification guide
A comprehensive guide to edit and modify the Illumio Webflow project.
Before attempting to do any of the described below steps please make sure to be properly acquainted with basic usage of Webflow Editor and (when trying to modify things inside Designer) Webflow Designer.
Intro to managing the CMS content
Editors could update both static and dynamic content as necessary. The suggested way of editing dynamic content is using Collections tab in the editing mode rather than modifying content directly on the page.
We have a lot of different Collections to handle different parts of the build, some of them have more specific and less obvious uses than the others. We will explain each one and point out the most useful Collections for editors that they will likely use 95 percent of time.
Absolute majority of all fields in all Collections have proper descriptive help text added to help remember their purpose, but for best results make sure to compare what you see inside the CMS item to what you see on the live site.
A general heads up for all text entries: please try to not use the forced double breaks to create a space after paragraphs - this is already taken care of with styling of the paragraph elements.
The Collections will be listed here in order as they appear in the Editor.
Collections list and brief description
The following is a short description of all the existing Collections on the project and their purpose.
Support modals
This is where we can modify the content of initially hidden modals for the Support page:
Adding new items to this Collection will produce additional cards on the Support page, while removing them will in turn remove the cards from that page.
Pages (for manual related resources)
This is an auxiliary collection that serves as a helper for designers to create special Collection items that can then be manually placed on a specific page to create a manually assigned list of related resources.
Note that adding new items to this Collection will not produce any visible results as any new item will then have to be manually added to a specific page. Removing items will result in empty Related Resources sections on pages which used the deleted item.
Editors likely may want to modify related resources for existing collection items. This is as simple as adding and removing items in the corresponding field. Use filtering by typed letters for easier selecting of resources.
TAP
This is where we manage all TAP items.
There are two different "kinds" of partners, in addition to the visual devision into three sections. Basically one kind has the additional information present on the Illumio site, like, for example here. And second kind has an external link that has all the description and information on the partner's website.
Once we put an external link this is where the "Learn more" button on the index page will lead. If we are adding a partner that has an information on Illumio site we need to continue filling in the fields for the content. For details of how the TAP template looks refer to Figma design file or check any of the existing items.
Resources
The Resources collection has one of the most complex structures and a lot of conditional visibility on a collection template page, so pay attention to the help texts, and compare the fields to the existing items. Below is a rundown of a few selected settings.
Ungated: all resources are Gated by default, meaning that to download a file user will have to first fill out a form. Switching this on will make the item instantly available without the need to fill that form.
Content type: there are two main content types which influence the layout of the resource item page. Video will have a video directly on a page, and document will have a link to download the pdf file of the resource item.
Persona, Role, Use case: these are the attributes that were transferred from the old Resources collection on Hushly but are not used currently anywhere on the new site, even for filtering the list of resources on the index page.
Related resources, Universal tags: the Related resources section at the bottom of each item works like this - there are three versions of this section, only one will be visible depending on certain conditions. First, if nothing is set in the Universal tags or Related resources fields the section will simply show three random resources. Second, if a Universal tag field has some tags specified the section will show resources that uses same tag. Lastly, if there are resources selected in the Related resources field only these resources will be shown in this section.
Video embed: it is very important to always use "code" element when inserting Wistia embed codes here.
Wait for the "plus" symbol to appear, then select the brackets symbol, and insert the embed code into the appearing modal window.
Video embed DE/JA: there could be a situation where we have a special translated/subbed video for specific language, like German or Japanese. For cases like this please insert relevant video into either of the fields also using the same "code" element method as above. Important to note is for things to work properly all three fields should be filled with embeds. For example when we have a special German version but no Japanese version of a video we still need to add at least normal English version to a Video embed JA (duplicating it from the main Video embed field). Otherwise when looking at a Japanese version of the page the video will not be shown. Don't ask, just a technical limitation.
Video identifier EN/DE/JA: when the above situation is true (we have a separate video for a specific language) fill all three of these fields with "en"/"de"/"ja" identifiers in the relevant ones. Failing to do so will result in multiple videos shown.
Benefit # - icon/text: all of these items make it possible to create a more complex layout with Benefits section followed by additional text section as seen on this example.
Resources industries
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Resources collection.
Resources use cases
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Resources collection.
Resources topics
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Resources collection.
Resources products
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Resources collection.
Resources roles
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Resources collection.
Resources personas
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Resources collection.
Resources funnel stages
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Resources collection.
Resources asset types
This is a category collection and will likely never require any editors manipulations. Please do not try adding new items here without asking for a developer help because of the way things are set up somewhere (we use specific images for specific asset type and document type, and this is manually set up on the template page).
Resources content types
This is a category collection and will likely never require any editors manipulations. Please do not try adding new items here without asking for a developer help because of the way things are set up - we have a "hardcoded" number of items here, on which some layouts depend.
Glossary items
One thing to note is that there are three different fields that use the same text content for the moment: Short description, summary description and SEO description. First is used on the Glossary index page while second is what appears in the sidebar on each item page. SEO description is exactly that. For meta titles glossary items use the main Name field content.
Customer stories
Note how the featured section on the Customer stories index page is split into two parts - left and right, where left story sports large preview image, while right stories are simpler in appearance. There are two different switches to set primary and secondary featured items.
There are two versions of hero image for the items to make sure that mobile layout has an image that is more adapted to the layout.
Main video embed: it is very important to always use "code" element when inserting Wistia embed codes here.
Wait for the "plus" symbol to appear, then select the brackets symbol, and insert the embed code into the appearing modal window.
Hero background video ID: Make sure to read the help text to understand what you have to insert there.
Story: there is a one particular thing to be aware of when editing content for the main story field. The quote creation is not super straightforward as it is a complex structure that has not only main quote inside the quote element but also a quoted person title and their company. These are the rules to create a proper layout:
- Use a "quote" element to wrap the quote content
- Inside a quote text any text that is bolded will be the title of the person quoted (as in - it will go into the next line and will have a different font)
- Inside a quote any text that is italicised will serve as an attribution of the person quoted, this can be a company name or their title or whatever. It will go onto the next line as well and will have a smaller text size.
Customer solutions
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Customer stories collection.
Customer industries
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Customer stories collection.
Podcasts
Embed: it is very important to always use "code" element when inserting Simplecast embed codes here.
Wait for the "plus" symbol to appear, then select the brackets symbol, and insert the embed code into the appearing modal window.
OG image and Thumbnail image are different as thumbnail is square and OG should likely be a more traditional rectangular shape.
Webinars
All webinars items lead to the BrightTalk platform directly so there are no webinar pages on the Illumio site, only index list of outer links.
The Upcoming webinars section will be automatically populated when there are webinars in the future (those that have a future date set in the item properties). Depending on how many future webinars there are the layout will change to accommodate them.
Guests: this field should be kept shorter if possible because of the way layout looks - the shorter the line the better from a visual point of view.
Description: this content will be truncated to 3 lines.
Link APAC/AMS/EMEA: Webinars for different timezones have different links on the BrightTalk so they are different here as well. But once a webinar has passed all of these links will lead to the same place, it is unnecessary to clean them or modify in any way after the webinar has aired.
APAC/AMS/EMEA date and time: these times are only to show inside the registration dropdown, the actual sorting uses main Date field.
Team members
This collection include all team members, leadership and employees for convenience.
Last name: note that this field is necessary apart from regular name to sort members properly.
Setting Status for a person will make them appear on either Leadership or Careers pages.
Portrait field can have portraits of any shape - no need to make them round for the Leadership page for example, it will be taken care of with image styles.
Employees experience Video embed: it is very important to always use "code" element when inserting Wistia embed codes here.Wait for the "plus" symbol to appear, then select the brackets symbol, and insert the embed code into the appearing modal window.
Wait for the "plus" symbol to appear, then select the brackets symbol, and insert the embed code into the appearing modal window.
News
Source: for internal news releases this should say "Illumio", otherwise it is a name of the external source.
External link: if the link is set the main button on a news item will lead here.
News categories
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main News collection.
Awards
All items' links in this collection lead to the external sources where the award was received.
Neither Source nor Description fields are used in the current layout design.
Universal tags
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within any main collection
Blog posts
As with Customer stories index page the Blog index page has a featured section split into two parts - it has primary and secondary featured items, where primary is more prominent.
Blog authors
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Blog posts collection.
Blog categories
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Blog posts collection.
Events
Events could be either external or internal, meaning that in the second case visitors will register right on the Illumio site while in the first case the registration link will lead them elsewhere.
Featured events section started as being an Upcoming events section but now even past events could end up being here.
External registration link: if this is set the event is external and "Learn more" button for this event on the Events index page will lead there.
Speaker # - Name/Title/Company/Image: we may add up to four speakers for an event description (if this is an internal event).
Events GEO tags
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Events collection.
Events types
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Events collection.
GH departments
This is an auxiliary collection that was used to set up a Greenhouse jobs page. Please do not use it as Greenhouse integration works automatically anyway.
GH jobs
This is an auxiliary collection that was used to set up a Greenhouse jobs page. Please do not use it as Greenhouse integration works automatically anyway.
Intro to the build management
Editors could update both static and dynamic content as necessary. The suggested way of editing dynamic content is using Collections tab in the editing mode rather than modifying content directly on the page.
We have a lot of different Collections to handle different parts of the build, some of them have more specific and less obvious uses than the others. We will explain each one and point out the most useful Collections for editors that they will likely use 95 percent of time.
Absolute majority of all fields in all Collections have proper descriptive help text added to help refresh their purpose, but for best results make sure to compare what you see inside the CMS item to what you see on the live site.
A general heads up for all text entries: please try to not use the forced double breaks to create a space after paragraphs - this is already taken care of with styling of the paragraph elements.
The Collections will be listed here in order as they appear in the Editor.
Events types
This is a category collection and will likely never require any editors manipulations as adding new items to it can be achieved from within the main Events collection.