# CMS instructions

In terms of the CMS, we tried to simplify the content management backend-wise and keep it simple. Even though we will do some minor backend updates, at this stage it is fully functional and usable.

## 1. Backend initial login

First thing you need to do is to login. Use your domain name and add "/backend" in the end in order to do so. Once you are logged in, every time you open website, the editing tool will appear in the corner.


Every piece of the text content can be edited on the wensite. The only exception is the graph on the left at https://invenion.io/#was-wir-k%C3%B6nnen:venture-studio

Content can be edited in 4 different modes (each of the modes will be described in the following sub-chapters):
- front-end editing
- back-end functional editing (tab "Structure")
- backend translation tool (tab "Settings" -> "Translate Messages")
- back-end piecewise editing (tab "Pages")

In 90% of the cases you will use first two modes. Translation editing is mainly handy for the headings, buttons and some interactive parts of the pages that will be used in the remaining cases. Piecewise editing is trully an exception case, so if there is a part of the website that needs to be regularly adjusted through the "Pages" tab, let us know and we will convert this to the functional editing.

Important notice: do not forget that your website is built in two languages. Therefore, adjust text accordingly to the layout, so check if you didn't insert way too much text. Also, remember to implement changes in both languages.

## 2. Front-end editing

This is the easiest way to implement text adjustments in any language. Simply login to the backend, open your website page and click the editing icon in top left, this way you will enter the editing mode. Now click the text that you want to change and directly type the new text. Once you are done, hit green tick in the top left or cancel the process by clicking the red cross in the top left of the page.


Front-end editing works best for the longer pieces of texts and some subheadings. You can change almost anything text-wise, including allignmetn, font weight, adding bullets and etc. Unfortunatelly, you cannot always use the front-end editing, especially in some cases of interactive or layout-effecting elements, such as buttons or section headings (h1). In order to see what can be edited, just hover over the element with the cursor and it will be highlighted. Sometimes you can long-press Shift to see all of the editing elements, but it might take a bit to appear.

## 3. Back-end functional editing

This is also quite easy editing mode as it is realised though the custom linked functions to quickly change the dynamic parts of the content. This editing option is available by going to the backend panel and selecting "Structure" tab.

Simple rule of thumb if you need to choose this option is by answering the question: "Does it follow the certain editing pattern?"

In our case, following elements are considered dynamic:
- Footer (includes address, phone and linkedin link)
- Services (divided into two major categories with underlying categories with sub-categories, containing services that can be marked with partners, such as Casetak) on the separate pages
- Team (photo, name, description, links) on the about us section
- How we work (new "circles" can be added but not recommended, logos can be changed, text and bullets as well) on the main page
- Miscellaneous (email for the request forwards, calendly link, cookies text)

To change any of the parts just go to the respective sub-tab and follow the functional logic. Once you are done with the changes, **REMEMBER TO SAVE IT**, you can do it by clicking a "Save" button on the bottom or with CTRL+S.

If you want us to add more functions, let us know. We can also do a page builder for you, where you will be able to create new pages based on the layout of the existing pages.

## 4. Back-end translation tool

Some of the elements on our website are utilised repeatedly, and therefore, should remain consistent across all the screens. Apart from the buttons text, this is also relevant to some of the text in figures (for example, text in the circles on block 2 on the main page) and headings (because of the animation effect combined with the extra element).

WARNING: THIS TEXT IS CASE SENSITIVE

Just go to "Settings" -> "Translate Messages" and an amazing table will appear. The left column shows you the content, this column cannot be edited, for the simplicity of orientation we decided to keep the German text instead of ID. If you want to change text in GE version of the website, select "Deutsch" and add the edits. And example of the editing can be seen if you scroll below: you will see that I changed the text for one of the dynamic headers for the first page to display it with the lower case.

Same applies to English, as far as I was adding all of the English content myself (this way I was checking for the possible visual incoherences for non-German), all of the column in English is already filled in.

Ignore the right column.

Once you add the new text, you do not need to save anything but just in case click "Clear cache button" above the table. When checking the results on the website make sure to clean cache (ctrl+f5 for most of the browsers).

## 5. Back-end piecewise editing

This option is available in the tab "Pages". Here you can edit almost everything, but more likely you will need it mainly for the "Menu" edits and creation of new pages.

If you need to edit something: make sure that you tried previous editing types (as far as in pages it is less structured than in other methods and therefore easier to break smth), then go to tab "Pages". If you need to edit menus, then go to the "Menus" sub-tab, if you need to edit content on the page, go to "Content" sub-tab (or "Pages" for the legal pages). There find your piece of content, edit and save. Most likely you will not gonna need it for editing, and if you do, please, let us know.

If you want to create a new page, select "create new" and add you content: it can include any text, links or media, all of the content follows the design style and is fully responsive. Here is an example of the [test page](https://invenion.io/test-page) that i did in less than 1 minute.

# How to add podcasts

Podcsts are added in the "Blog" section


To create new one, just select "New post". Then the post editor will be shown as displayed above. Here it is important to know two things:
- how to embed external code (podcast player or YT videos)
- how to add sidebar information

## Adding embeds

Click on the camera icon in the editor (between picture and audio icon) and select "Embedded code" (middle opttion).


Then paste the embedded code in the field and save. For the YT videos you can find the code for embedding by right clicking the video and selecting "Cope embed code".

# Working with the sidebar info

In podcasts you have to work with two sidebars:
- for the catalogue hovers
- episode-specific sidebar information

We made it with the intuition that in future you will come up with more video content, therefore we added "Categories" tab, which can be modifed on the left bar, and every content can be defined as a part of certain categories. As far as currently you have only one categoty (Podcasts), filters in the catalogues will not appear until another post will have diffrent category.


Also, remember, that every episode requires its "thumbnail" in the catalogue, which is filled in the "Manage" tab as shown below.


Lastly, "Podcast settings" will help you set up sidebar hover text on the catalogue page. All of the fields are rather straightforward, the only thing that I will mention is that you can skip some of the fields if you want to do so and that field "Author" can be used to indicate the episode host (e.g. Khalid/Julian).


On the right you can add sidebar information that will be visible in the sidebar once user clicks on the specific episode. To simplify it, we made it so that you can define the common description for the content category and by default it will appear so for every episode, unless the box is checked and custom description is entered. To edit category description, go to the category section on the left, select the category you need and then the editor will appear. Sidebar support everything the main section does, the only thing that you need to keep in mind is that some of the desktop devices are quite limited in terms of height, therefore try to keep descriptions short.

## Adding links to the podcasts

Go to Structure>Podcasts to add the links to the podcast platforms.


Things to remember:
- website is done in two languages, therefore do not forget to add the translations to every piece of text
- you can define any structure within the field of the episode.