Create a stage and edit the design.

ONevents offers a powerful Stages module that allows you to create versatile digital platforms. Whether landing pages, registration areas, or admin dashboards – Stages gives you complete control. The integrated grid system allows you to structure your content in HTML and customize it with CSS. A particularly useful feature: Placeholders allow for the dynamic integration of content, keeping your stages flexible and adaptable.

The empty stage #

At the beginning, a stage in ONevents is like a blank, white sheet of paper – ready for your creative ideas. Using the integrated HTML editor, you can place the initial elements and gradually build your desired structure. Whether text, images, or interactive components – you have complete freedom to customize your stage and develop it entirely according to your ideas.

Building the structure #

The easiest way to create a basic structure in your stage is to use a row. By using <div class="row"> You can organize content neatly and clearly. Everything you place between the tags will be displayed within this line:

<div class="row">
  This is the content.
</div>

In this way, you lay the foundation for a flexible layout that you can further adapt and expand as needed.

The view is edited in the HTML editor for the control room>>Stage 1.

Integrate grid system #

The grid system allows you to arrange the elements within the rows in a targeted and responsive manner. This allows you to optimally display content on different screen sizes. By using classes such as col- For example, you can set the width of the elements in relation to the total width of the page:

  
Left area

  
Right area

This ensures that your stage remains well-structured and user-friendly on all devices – whether desktop, tablet or smartphone.

Use of placeholders #

Using placeholders and HTML tags, you can flexibly fill the previously created structure of your stage with content. Placeholders offer the possibility of inserting dynamic content such as user names, event details, or personalized data. Combined with HTML tags, this allows you to create versatile layouts:

<div class="row">
  <div class="col-3">
  </div>
  <div class="col-md-6">
	<br>
    <img src="%LOGO_SRC%" width="100%" alt="Event-Bild">
	<br>
	<br>
    <h1>Welcome %USER.FIRST_NAME% %USER.LAST_NAME%</h1>
    <br>
    <p> Your QR code</p>
    <img src="data:image/png;base64,%USER.QRCODE%" width="100%">
  </div>
  <div class="col-6">
  </div>
</div>

This allows you to make your stage not only static, but also dynamic and adaptable, optimally responding to the needs of users.

Customize the design of the elements with CSS #

Once the stage has been structured using the grid system and placeholders, you can customize the design accordingly. You have two options: You can either use global CSS classes to ensure a consistent design across multiple stages, or you can use inline CSS to style specific elements.

For example, with global CSS classes you can define the layout and appearance centrally for all stages:

.custom-header { font-size: 24px; color: #333; }

The global CSS can be found in the event settings in the space.

Inline CSS, on the other hand, offers a quick way to make individual adjustments directly in the HTML:

 style="color:%PRIMARY_COLOR%;">Welcome %USER.FIRST_NAME% %USER.LAST_NAME%
 Your QR code 

This flexibility allows you to customize the appearance of your stage and adapt it to the requirements of your event or project.

Upload background #

For even more customization, you can also upload a background to a stage in ONevents, which will be displayed as a visual highlight. This allows you to further personalize the appearance of your stage and create a coherent atmosphere. The background can be an image, a color gradient, or even a video that emphasizes the impact and theme of your event.

Set menu title and icon #

In addition to the design and structure of the stage, you can also define the menu title and the corresponding icon in ONevents. These settings ensure that your stage is clearly displayed in the navigation bar and provides users with quick access.

The menu title defines how the stage is named in the menu, while the icon serves as a visual identifier. This allows visitors to recognize the content at a glance.

These adjustments ensure that your stage is presented in a clear and user-friendly manner, not only in terms of content but also in terms of navigation.

Define the visibility of a stage #

Finally, you need to define the stage's visibility. In ONevents, you have the option to precisely define who has access to your stage's content. You can make the stage publicly accessible so that any visitor can view it, or you can restrict access to specific user groups.

For example, a stage can be visible only to logged-in guests, which is ideal for exclusive content or personalized areas. Alternatively, you can configure the stage so that only admins or event organizers can access it. This flexibility allows you to tailor visibility to the exact needs of your event or platform and ensure that only the right people have access to the relevant content.

Special functions of a stage #

Another useful feature in ONevents is the ability to automatically award a certain amount of currency (such as virtual points or credits) when a stage is opened. This option is particularly well-suited for gamification approaches, reward systems, or exclusive content where participants should be rewarded for their progress or for accessing certain areas.

You can easily configure this feature by specifying the number of currency units awarded each time a stage is opened. Once a user enters the stage, the specified amount of currency is automatically credited to their account. This creates additional incentives for participants and encourages engagement with your content.

Using stage templates #

If templates have already been created for stages in the space, you can also load and use them. This is especially useful for maintaining consistent designs and structures across different stages or for efficiently reusing previously created layouts.

When you load a template, you can retain the existing stage content and design and customize it as needed. This saves time and ensures your stages look consistent and professional. Templates can be edited to meet your needs, making specific adjustments and updating the content accordingly.

To use an existing template for a stage, simply change the type to "Template." This will recognize the stage as a template, and you can easily apply the predefined designs and layouts.

Here are the steps summarized:

1. Select template: Go to the existing templates in the space.
2. Change type: Change the stage type to “Template”.
3. Customize and use: Customize the template as needed and use it for your new stages.

This method allows you to use templates efficiently while ensuring that your stages are consistent and professionally designed.

Further information #