There are two options on how to create a new page:

1.) stating from scratch – you will find helpful information here:

https://wordpress.org/documentation/article/create-pages/

Important:

Don’t forget to review and adjust the SEO title and meta description (see the “Extras” section below).

2.) duplicating an existing page (article, resident, etc.)

When you hover over the name, a new menu appears below. There, you can click on “Duplicate This.” It’s recommended to use a similar existing item as a starting point, then update the necessary elements and delete anything that’s not needed. Always make sure to replace old content, especially in the right-hand menu.

Screenshot

Important:

Make sure that all required fields (marked with a red asterisk) in the right-hand side menu are filled out and updated. Don’t forget — this is something that often gets missed. Also, don’t forget to review and adjust the SEO title and meta description (see the “Extras” section below).

You will find helpful information here:

https://wordpress.com/support/schedule-a-post-or-page/

After, or even better, before, publishing a page or article, it’s essential to test it. Be sure to check both desktop and mobile.

You will find helpful information here:

https://wordpress.com/support/page-post-revisions/

We recommend making the content as concise and relevant as possible. A varied layout can help structure the content. Ideally, each page should consist of a simple and accessible introduction, a somewhat more complex and detailed main section, and a conclusion. The conclusion can contain additional teasers linking to content or a call to action (button, form, etc.).

Examples for block elements for each part:

introduction – you can start with a headline, followed by a lead that briefly explains the key message of the page in a few sentences. Alternatively, a media header can be used to introduce the content visually.

main section – this section can include images, longer text elements, and accordions to hide expandable content. Teasers provide a brief preview and link to additional information. Colorful elements can be used selectively to create visual focal points. Quotes serve as a valuable element to lighten up text and enhance readability.

ending – At the end, a conclusion can be included or links to other pages can be provided. Teasers or other closing elements, such as a button leading to additional content, work well for this purpose.

Important

Always structure your content clearly using proper HTML heading levels (H1, H2, H3, Paragraph etc.). Web crawlers rely on this hierarchy to understand the organization of the page, which directly affects SEO and accessibility. Each page should contain only one H1, followed by well-ordered subheadings. The perceived relevance of content is influenced by its placement within this structure — content under an H1 is considered most important, while deeper levels (H2, H3, Paragraph etc.) provide supporting information.

The Switzerland Innovation trademark stands for excellence, global appeal, innovation, security, and Swissness.

The website design is based on the Switzerland Innovation Park corporate manual. Detailed information can be found in the manual, which is available upon request.

The corporate design is integrated into the website in a way that it cannot be altered or disregarded during editing. While parameters such as color, font size, or column width can be adjusted in individual blocks, these always adhere to the corporate design and fit into the overall design.

It is only important that media placed in WordPress, such as images, conform to the standard. More on this under “Media.”

The language used on the website should be clear and reflect the spirit of Switzerland Innovation Park.

Text input should be kept as concise as possible to ensure messages remain brief and user-friendly. The style is formulaic yet simple, aiming to reach the widest possible audience. Where possible, choose softer or more neutral language to maintain an approachable and inclusive tone.

The color can be selected for each page. To do this, select the theme options item in the left menu and assign colors to the pages. Every page that is not listed separately is pink.

Colorcodes:

green – everything only Main Campus related: HQ, Hortus, …
blue – everything only Novartis Campus related
yellow – everything only Jura related
pink – everything else

Colors should be used sparingly as accents rather than dominant elements. The website design should remain clean and minimal, with ample white space, allowing color to draw attention to specific content elements.

Excessive use of color can make the interface feel cluttered or overwhelming. This should be avoided to maintain a clean and focused design.

The menu is well-structured and always designed from the user’s perspective. Major changes should ideally be coordinated within a team. It is essential to consider the external viewpoint when structuring the menu. Menu items must be clearly labeled and easy to understand, especially for new users.

Never list more than seven items per menu. If there are more, we recommend using a submenu. The menu can be customized in WordPress on the Menu page. Always make sure the words are not too long and test it on desktop and mobile.

The footer links to additional pages and less important topics. It also contains all contact information.

The image and video world also aims to reflect SIP’s standards and quality. Therefore images and videos must be professionally photographed or filmed.

The visual language should capture the essence of the company and create an inviting and authentic identity. Less is more – the images should be deliberately neutral in color, bright, calm, and inviting. Good white balance is essential in unfavorable lighting conditions. Playing with focus and blur also adds value to the imagery. Inappropriate elements in the background or in focus that disrupt the composition of the image should be removed if possible.

It’s important that what’s happening is clear in the images. The effect shouldn’t be too staged; a reportage style with a camera tracking real scenes appears much more natural and suitable for the purpose.

Images should not exceed 1 MB in file size. Videos are best linked via Vimeo to reduce loading times.

Image formats used on the site:

Header Desktop 1920 x 1080 px (16:9)
Header Mobile 1080 x 1920 px (9:16)

Image single 1440 x 1080 px (4:3) oder 1080 x 1440 px (3:4)
Image duo 1080 x 1440 px (3:4) oder 1080 x 1920 px (9:16)

Teaser 720 x 405 px (16:9)

Teaser Article 720 x 720 px (1:1)
→ all important image content must be placed in the center of the image, as it will be cropped to a square shape

The Residents/Alumni can be edited in the side menu «residents». Add a new resident or alumni or duplicate an existing one by hovering over the page.

Screenshot

You can use all blocks to build the page like on any other page.

It’s important to adjust the tags and type tags in the right-hand menu, also add the name and specify the type (resident/alumni) there. The Logo should have a transparent background and be a PNG format.

Screenshot

In the submenu on the left side under residents you can manage the tags and types.

Screenshot

The Partners can be edited in the side menu «Partners». The Logo should be an svg format.

For articles, we recommend the following general structure: Introduction: Headline, lead with a short introduction Main body: clearly structured with all information Conclusion: with a teaser for other articles or a specific call to action (button, form) If the article is very long, we recommend using the lead with an index and distributing anchors throughout the text, or generally structuring the article visually, e.g., with headings or blocks that break up the reading flow: spacing, images, quotes, etc.

Important:
In the right-hand menu, an image and short description must be added for the teasers and the presentation in the overview. You can also add the meta description and keywords there.

What also should be considered:

• use the headline with a big space if this is the first element on the page
• use the small headline for long titles
• add a date to the post
• the byline block goes right under the headline
• the lead index together with the anchors form a table of contents
• use the article teaser to select other related content
• add SEO title and meta description
• Check for right tag (Blog, News)

After each post, set up translation to FR.

Check list for publishing:

• Make sure the date of the article and the publishing date are the same
• Translate article and get it proof read
• EN: Replace article on the corresponding site page (Jura, MC or NC).
• FR: Replace article on the corresponding site page (Jura, MC or NC).
• EN: Make sure it appears in home page
• FR: Make sure it appears in home page
• EN: Ad as a quote on resident page
• FR: Ad as a quote on resident page

To chance or add new team members go to the left wordpress menu and click “Team”. Make sure to fill out all the fields on the right menu: name, function, picture and sit etc. Then add as many design blocks as you want like on any page.

New team member tags can be edited in the submenu on the left: “site types”.

The events are uploaded externally via the “Modern Events Calendar (MEC)” plugin. The content cannot be edited in WordPress.

There are two interactive maps on the website that can be edited in the CMS:

Sites map (Area map)
There’s a special section in the dashboard where you can edit the contents of the Maincampus map (see screenshot).

Main Campus map
There’s a special section in the dashboard where you can edit the contents of the Maincampus map (see screenshot). However, the flags in the map must be updated by the programmer. Contact: Jonas Manser 

Main Campus HQ map
This map is managed in a separate CMS. Tenants are generated automatically by matching the data with that of the Media Table. However, you can add your own tenants at any time. If there are updates to the Media Table, you can synchronize the latest data. Manually created tenants are not affected by this.

If you want to customize a page, you should make sure that you select the language in the WordPress menu at the top of your browser window. This will avoid errors when customizing a language version.

Create the page in English. Once all content is in the page, click the + in the column on the right.

See screenshot

On the right side, under “Language,” click the edit icon for “French” (see screenshot).
This will display the original English version and the French translation. The translation can now be edited (see screenshot).

OptinMonster is a powerful lead generation plugin for WordPress that helps create targeted pop-ups and opt-in forms. It enables you to capture email addresses and grow your subscriber list through customizable campaigns and triggers. By improving user engagement, OptinMonster helps increase conversions and sales.

Hotjar is a behavior analytics tool that helps you understand how users interact with your website through heatmaps, session recordings, and feedback polls. It provides insights into user behavior to improve website usability and optimize conversions. By visualizing clicks, scrolls, and navigation patterns, Hotjar helps identify pain points and areas for enhancement.

The analyses can help optimize the website. Using the data and the design blocks, individual elements can be rearranged on the page to ensure they are visible.

Google Analytics is a web analytics service that tracks and reports website traffic and user behavior. It provides detailed data on how visitors find and interact with your site, helping to measure marketing effectiveness. This information supports data-driven decisions to improve user experience and business performance.

Redirects can be added to the Yoast SEO Premium tool. Simply enter the old and new URLs.

See screenshot

In the Yoast SEO tool, add at least the “Focus keyphrase” as well as the “SEO title” and the “Meta description” for each page.

See screenshot

For further details please follow this link to the Yoast Webseite.

Sina Kohlbrenner
Manager Marketing & Communications
Sina.Kohlbrenner@baselarea.swiss

Arianna Ramirez
Associate Manager Marketing
Arianna.Ramirez@baselarea.swiss

Beat Lüscher
Managing Partner & Consultant
beat.luescher@gestalter.ch

Melissa Gutekunst
Design
melissa.gutekunst@gestalter.ch