User manual details

02 Edit event website

You can set up an own website for each event.
What is the event website?
Each event has its own website, where they can display all information about the event and where participants can register. The event website can be adapted by 'Event Details -> Edit Website' and you can set texts, images and links within a given structure.
 
Customize the design
Yve has a white label approach that allows you to customize colors and names of control elements:
  • Background and colors: upload a background image and adjust the colors of the text, links, tabs, borders, ....
  • Navigation: determine whether the event website has a navigation bar above and a sidebar to the right of the page. This navigation element is only necessary if you have several events simultaneously for a participant or a community.
  • Tabs: specifies the name for the tabs. Tabs are displayed as soon as they have a content, regardless of the name.
  • Buttons text and color: You can set the color and the name of the login button (on the event website), the registration button (public registration) and the community button (on the event website)
 
Salutation and display name
On the event website and in the emails, you can have a personalized salutation and the name of the participant displayed. If you select Individual salutation if available, yve checks for each participant whether a salutation is created in the contact details for him. If yes, this is used, otherwise the general salutation is used.
 
In the general address yve decides which form of the address is chosen: female, male or unknown. You must specify the appropriate text for these three variants.
 
Finally, you decide which name parts are displayed after the title: first name and / or title. Yve then automatically adds a comma to the end.

 
Set website content
The event website has a predefined structure, you can edit the contents of each element:
  • Header: The header area is always displayed on all tabs. This is usually the title of the event or the banner of your event
  • Tab: You can display 0-7 Tabs below the header. A tab is displayed as soon as it has a content. If you do not want to display a tab, simply delete its contents.
  • Public page: If you have started a public registration, you can set the text that appears next to the registration form. Here you can also see the URL for the registration and can determine which information is requested. Finally, you can specify the texts for a closed registration and the text after the registration. Caution: The information on your public website is freely accessible on the Internet and may also be recorded by search engines.

As an account holder, you are responsible for the content of your event website. Caution: remember to submit the legally required data for your imprint, data protection and any general conditions to your event website and public page.
 
Responsive design
Yve uses a so-called responsive design. Yve automatically detects the width of the screen and adjusts the display. This makes your website easy to read on a PC as well as on a smartphone. There are four levels of representation:
  • Large screens (e.g., desktop with HD monitor)
  • Medium sized screens (e.g., desktop with small monitor)
  • Small screens (e.g., touchpad)
  • Mini screens (e.g., smartphone)

We recommend developing your website for large screens and testing the other sizes by making your browser window narrower. Texts are automatically collapsed to the width of the screen, and yve automatically adjusts all images larger than the respective screen to 100% of the screen. From the touchpad and smaller level, the sidebar is displayed below, the navbar is collapsed and the tabs are stacked horizontally.
 
The following widths apply to large screens (important when you want to insert a banner across the entire width, for example):
  • Website: 840px content + 2 * 30px border
  • Public page: 690px Content + 2 * 30px border

 
The HTML Editor
The editor, with which you can change the content for the web pages, automatically translates your entries into HTML - you do not need to program anything. The following menu options are available in the editor:
  • Edit text: you can search, copy and paste in the text, and undo actions
  • Change font: you can display your text in bold, italic, or underline.
  • Inserting images: You can upload images to our server and then position the image in your text. Position the cursor where you want the image to appear. Click on the 'Image' button, then 'Browse Server' and then 'Upload'. Now you can use a file browser to search the image file on your PC. Then click on 'Open' and then on your picture as soon as it is uploaded to our server. Now you can adjust the width / height and use 'Orientation' to decide whether text should flow around the image. With 'Ok' the image is displayed in the editor, press 'Ok' again to save. If you want to delete an image from our server, simply click on the 'x' icon in the upper right corner of the image in the server file browser. Caution: deleting the image on the server affects every reference to that image.
  • Insert links: enter the name of the link in the editor and mark it with the cursor. Then click on 'Link' and enter the URL. When they click on 'Browse Server', they can upload a document to our servers, which can be downloaded using this link (see above). Caution: make sure that your links are https:// if possible, ie SSL encrypted. If you include a link with only http:// without SSL, your page will display a warning in browsers in the upper left corner of the URL (yellow exclamation mark for the certificate, will be marked with 'parts of the web page not secured' if you click on it).
  • Insert table: position your cursor and then click on 'table'. Now you can specify the number of columns and rows, the frame (0 for no frame), and cell spacing. The table is the ideal way to accurately position elements like images on your page. Caution: HTML5 ignores table cell spacing (celpadding). Go to 'Advanced' and add the following commands under 'style': 'border-collapse: separate; border-spacing: 5px;' (Replace 5px with your distance).
  • Insert lists: they can insert numbered or point lists
  • Horizontal line: Insert line for better readability. Caution: Be sure to use this feature for separating lines, as it will automatically adjust the screen width.
  • Page break: this function inserts a page break, which can only be seen on the pdf version.
  • Change alignment: they can change the alignment of their text
  • Change font: You can change font, size, and color
  • Show source code: If you are able to program HTML, you can display the HTML code of your page and make changes. Caution: this is only for HTML professionals. Some HTML tags are disabled for security reasons and are automatically removed by yve, e.g. Script tags or URL parameters. Removing the tags can cause a difference between the display in the editor and the display on the web page. Please check if your HTML code is accepted and displayed correctly on the web page.
  • Merge tags: Insert a placeholder (see below)
 
Variable content with placeholders (Merge Tags)
You can insert variable content with placeholders (we call them merge tags). You will then see the placeholder in the editor with | * yve _.... * | Which is then automatically updated by yve with the individual contents, e.g. salutation is replaced. The following merge tags are available for the event website:
  • Button survey: sets the response button to this location. The response button opens the questionnaire.
  • Button community: sets a button with a link to the event community.
  • Survey responses: puts the questions and answers of the participant to this place.
  • Greetings: sets the individual salutation to this place as defined under salutation.
  • Logout link: sets a link with which the participant can log off
  • Contact familyname: sets the surname of the participant
  • Contact firstname: sets the first name of the participant
  • Contact title: sets the participant's title
  • Contact company: puts the company of the participant
  • Contact email: sets the participant's email
  • Sales contact: sets the sales manager of the participant
 
Internationalization: Set language
With yve you can display all content in English or German. There is an English and a German content for all displayed content. If you omit one of the languages, the other language is automatically displayed.
 
For each contact, you can specify which language is chosen for him: 'Contact Details -> Language'. If this value is not filled, your account language will be selected. Each participant can change the language at any time via the upper navigation bar.
 
 
Tips for the perfect website
  • If you want to have a simple website without tabs, simply create all content in the header and delete the contents for all tabs. This way no tabs are displayed and the website is one flat page.
  • The best designs are often very simple: match the colors well together, position your texts so that they can be read without scrolling and don't over use pictures
  • If you only perform one event, you should consider switching off the navigation (Navbar + Sidebar) so that the participants do not get confused by the options and are completely focused on your page. Remember to add a logout merge tag so that the participant can log out.
  • You can count on the fact that some of your participants do not want to read long texts, but only want to make a quick statement. Therefore, position the login button as best as possible on the first page.
  • If possible, renounce texts to images. Due to the responsive design, large images are always adapted to screen widths. If you look at the event website on a smartphone, the text in a picture becomes very small and possibly barely readable.
  • Remember that you enter your legal information. As an account holder, you are responsible for the content.