Component Content

Reusable Component Content: Read First

The creation of reusable component content items must be strategically planned out first. You should never decide to create/add one on a whim. When building a site, you must already know the content of each page and have a plan concerning which page(s) will have what reusable component content item(s) added to them. This will help prevent duplication of components and bloated lists of reusable content components.

Rules

  • You MUST follow the naming conventions outlined on this page when creating a reusable component content.

Create a new Reusable Component Content

Step 1, Go to the page

  1. Navigate to a page that you would like to create a reusable component content item for.

  2. Add a component normally into the Site Studio (Layout canvas) box on your page and edit it as you planned.

  3. Edit the component

  4. Name the reusable component content:

    1. In the topmost field of the component, replace the auto-text (that should just say what type of component it is) with what the name of this particular reusable component content should be.

Text component with a typing box

Naming Rules

  • Do not use capital letters

  • Use hyphens (NOT underscores) to separate the following chunks of info:

    • Start with the department/section name this component is concerned with

    • Division (if applicable)

    • Further section/lab/group name (if applicable)

    • Summary of what this component’s content contains

Do NOT include the type of component it is. That is redundant.

Example

I created a reusable content component that contains contact information for a ‘Smith’ lab in Epidemiology which is under Internal Medicine. The name of this reusable content component (following the rules above) could look like any of the following:

  • int med-epidemiology-smith-contact 

  • internal-med-epi-smith-contact-info

  • im-epi-smith-contact

As you can see, there are a number of acceptable ways to succinctly communicate the needed info.

Type the name of your component content in the text box. Use lowercase letters. Separate each word with hyphens.

The goal is to make this ever-growing list of reusable content components as organized as possible. This is especially important since we do not have folders to store them in.

Tip—Keep the naming conventions consistent. From the example above, whichever option I chose to go with above, I would make sure any future reusable content component I create for that same area of the site also follows the exact structure.

Step 2, Save your component

  • Click ‘Apply’ to save your edits.

  • Now go back into edit on that component, click the drop-down arrow next to ‘Apply’ and select ‘Save as component content.’

  • Save your page.

Save reusable component content by clicking the option next to apply.

Edit an existing Reusable Content Component

You can navigate to the reusable content component two different ways:

Option #1

  • Go to a page you know has a reusable content component on it and double click that component just as you normally would if you wanted to edit it.

  • Click the ‘Click here to edit’ to be taken to the reusable content component. The component will open in a new tab.

  • Edit the component like normal and save. 

Your edit to that component will now appear on every page that is using that reusable content component.

Component content warning notification

Option #2

  • Hover over ‘Site Studio’ > ‘Components’ then select ‘Component Content.’

  • You will be taken to a comprehensive list of all reusable component content items for the entire site.

  • At a glance you can see what component content is being used on pages and what isn’t

  • If you click on the ‘In use’ link a list of pages with that component will pop up.

  • Click on the ‘Edit’ button under the ‘Operations’ column for the reusable component content item you wish to edit.

  • Edit as normal and save.

Access component content by navigating the component menu under site studio..

Add an existing Reusable Component Content to your page

  1. Go to the page you wish to add the reusable component content to.

  2. Scroll down to the cohesion section and click the blue plus sign ‘Add content’ button.

  3. Change the drop-down option to ‘component content.’

  4. Add any reusable component content item in the list normally via drag-and-drop or the tiny plus sign.

  5. Save when done.

Select component content from the menu on the left of the screen.

If you have any questions or run into any issues, please submit a ticket via our intake form.