webMOBI Help Center
All Categories About Us Creating custom HTML content

Creating custom HTML content

By Ngage.ai Support
March 23, 2023

With webMOBI's about us module, you have the power to generate personalized HTML pages for exhibitors, sponsors, speakers, and even the event itself in a unique layout. This feature allows you to share tailored content in a custom format.

Your graphic designer can craft the content using various tools such as Adobe Photoshop, and publish it as an HTML page. You can see the custom HTML code by clicking on the source button in the WYSIWYG editor, which displays the source file. You can insert rich or HTML content and then click on source to preview the results.

Screenshot-2023-03-23-at-1.37.04-PM.png

For instance, you can use the following code to generate a custom HTML page.

Screenshot-2023-03-23-at-1.39.38-PM.png

Another example of incorporating round table information into a page is as follows:

The page layout for round table information can be designed as follows:

Screenshot-2023-03-23-at-1.41.36-PM.png

Screenshot-2023-03-23-at-1.41.50-PM.png

The HTML for this content is visible here

Screenshot-2023-03-23-at-1.43.36-PM.png

Designing a Custom Sponsor Panel: Introduction:

When creating a custom sponsor panel for your website, one of the key factors to consider is the size of the sponsor logos. The optimal size of these images depends on your design preferences, the space you want to allocate for each sponsor logo, and the overall layout of your website.

Recommended Image Sizes:

Generally, a size of 200x100 pixels works well for most cases, providing a clear and legible display of the sponsor logos without taking up too much space. However, it is important to experiment with different sizes to find the optimal dimensions that best suit your specific layout and design requirements.

Using Placeholder Images:

As you work on designing your custom sponsor panel, you may find it helpful to use placeholder images before acquiring the actual sponsor logos. Placeholder images with dimensions of 200x100 pixels can be easily created using online services like Placeholder.com. You can customize the dimensions of these images by modifying the URL, such as "https://via.placeholder.com/300x150.png?text=Sponsor+1" for a 300x150 pixel image.

Finalizing the Sponsor Panel:

Once you have obtained the actual sponsor images, simply replace the placeholder image URLs in your code with the actual image URLs. This will ensure that your custom sponsor panel displays the correct logos at the appropriate size, resulting in a professional and visually appealing presentation of your premium sponsors.

User Experience

Screenshot-2023-04-14-at-9.49.35-AM.png

Code Example

'<h2 style="text-align:center;">

Premium Sponsors

</h2>

<p>

<img src="https://via.placeholder.com/200x100.png?text=Sponsor+1" alt="Sponsor 1">

</p>

<h3>

Sponsor 1

</h3>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at malesuada justo. Ut tincidunt sit amet massa vel fermentum.

</p>

<p>

<img src="https://via.placeholder.com/200x100.png?text=Sponsor+2" alt="Sponsor 2">

</p>

<h3>

Sponsor 2

</h3>

<p>

Phasellus consequat dapibus justo, a viverra justo placerat ut. Donec et odio faucibus, tempus odio id, bibendum risus.

</p>

<p>

<img src="https://via.placeholder.com/200x100.png?text=Sponsor+3" alt="Sponsor 3">

</p>

<h3>

Sponsor 3

</h3>

<p>

Nullam sed magna non metus bibendum egestas. Fusce ac odio turpis. Aenean et massa in enim tempor cursus.

</p>'

Was this article helpful?

Thanks for your feedback!