Getting Started with Your New Account

Welcome to Hostonce! For those who recently completed the Hostonce signup, here is a series of tutorials on getting started with your new account. You would explore, optimize, and fully control your new account. Hostonce facilitates you with all the required tools, whether you’re starting a portfolio, blog, or a business website.

Accessing your New Hostonce Account

Now that your Hostonce sign-up has been done, the time has come to log in and start building and customizing your website with all the updated features.  

Go to hostonce.com and log in to your browser.

Put your relevant email ID and password.

Can’t remember your credentials? Navigate to the Hostonce log-in page and reset your password.

Note: Bookmark the login page in your browser to access it later!

Optimization on Hostonce Account

After you have done your Hostonce sign-up, optimization increases your website speed, resulting in better SEO and improving user experience as like Ultahost

Why Optimization is Important

Website optimization helps:

• Speeds up your website, boosting users’ engagement
• Make the website mobile-responsive & user-friendly
• Help the website rank higher on search results.
• Reduces bounce rate through active users.

Image – Hotspot

The feature of image hotspots gives your images a lifelike quality. It makes your visuals more appealing, whether creating educational content, exhibiting your products, or stressing vital features.

What are Hotspots

Hotspots are hoverable or clickable areas on the image that expose popups, tooltips, or links when they are engaged. They’re best for:

• Walkthroughs
• Infographics
• Tutorials
• Pricing

How to Add an Image Hotspot on Hostonce

Follow these steps after logging in with the hostonce.com login:

Upload your image

Go to the editor and upload the targeted image to filter it.

Drag and Drop Hotspot Icons

Now, leverage the built-in drag-and-drop interface to set hotspot icons in the desired place. You can customize each shape, color, and size.

Add Tooltips, Popups, and links.

• Click or hover over hotspots to customize:
• Tooltip text for brief notes
• Links to pages and products or outbound links
• Popups with images, styles, or elaborate information

Note: If you want a dynamic presentation flow, merge Image-Hotspot with Media-Text-Sliders.

Timeline

So, you have completed the Hostonce sign-up. Now, using the Timeline block is the most visually appealing way to showcase your story.

The timeline is there to help you if you’re exhibiting your company’s growth, a project plan, or a historical story. It helps categorize complex journeys into clear and organized steps.

Why Use the Timeline Block?

The Timeline block is perfect for:

• Project milestones
• Company History
• Event countdowns
• Product development cycles

It colors your content with a dynamic continuity, keeping your users informed and engaged.

How to Create a Timeline on Hostonce

To get started, log in through hostonce.com, then follow these steps:

1. Add a Timeline Block

Navigate to your page editor and click Add Block > Timeline.

2. Customize Your Entries

For each entry:

• Add a title 
• Include dates or timeframes
• Write a brief description
• Optionally, insert icons or images to add context.

3. Design the Layout

Choose vertical, horizontal, or zig-zag styles keeping in mind your site’s visual appeal. Customize fonts, sizes, colors, and spacing to suit your brand.

Note: Combine Timeline with the Adv Heading block to label each section clearly and professionally.

Stack Gallery

Exhibit your visuals with grace and dynamic quality using the Stack Gallery block on Hostonce. After completing your Hostonce sign-up, you can start organizing your images in visually appealing and well-structured layouts that stack, either vertically or horizontally.

What Is Stack Gallery?

Stack Gallery allows you to showcase multiple images in a clean, sleek, scroll-friendly format. It is perfect for:

• Portfolios and photo collections
• Product showcases
• Step-by-step visuals
• Blog and editorial layouts

It offers a modern look while guaranteeing your images remain the main point.

How to Add a Stack Gallery on Hostonce

Log in through hostonce.com, and follow these steps:

1. Insert the Stack Gallery Block

From the editor dashboard, click Add Block > Gallery > Stack Gallery.

2. Upload Your Images

Select and upload multiple images. You can also reorder them via drag-and-drop to control how they appear.

3. Choose Layout Style

Select:

• Vertical Stack – Images are displayed one after another, top-to-bottom.
• Horizontal Stack – Ideal for side-scrolling or panoramic collections.

4. Add Captions (Optional)

Include descriptive text, titles, or links under each image to enhance context and engagement.

Note: Combine the Stack Gallery with the Image and Quote block for storytelling or testimonials with visual appeal.

Performance & Best Practices

• Use optimized image formats (like WebP) to reduce loading time.
• Limit the number of high-res images per gallery to maintain speed.
• Preview on both desktop and mobile to ensure responsive stacking.

Media-Text Slider

Craft responsive and interactive content with a flair for storytelling using the Media-Text Slider on Hostonce. This is great for tutorials, case studies, service features, or product highlights. It also allows you to merge images or videos with informative text in a dynamic slider format.

Why Use Media-Text Slider?

After your Hostonce sign-up, you can use the Media-Text Slider to:

• Tell a step-by-step product story
• Showcase features with visuals and explanations
• Walk users through processes or tutorials.
• Present client success stories or reviews

This block increases engagement by giving users something to scroll through and interact with. It does so without overwhelming them with static content.

How to Set Up a Media-Text Slider on Hostonce

1. Log in at hostonce.com.
2. From your site editor, click Add Block > Media > Media-Text Slider.

1. Add Slides

Each slide contains:

• Media: Upload an image or embed a video
• Text: Add a title, short paragraph, and optional CTA button
• Alignment: Choose if the media appears on the left or right

2. Customize Transition Effects

Choose from fade, slide, or zoom effects to match your site’s style.

3. Adjust Slider Settings

• Auto-slide or manual navigation
• Set the timing and delay
• Enable arrows or pagination dots.

Note: Combine this block with a Call to Action slide at the end to guide users toward either signup or purchase!

Use Case Example

Product Tour Media-Text Slider

• Slide 1: Image of product dashboard + feature overview
• Slide 2: Video demo + short description
• Slide 3: Customer review + profile image
• Slide 4: Call to Action – “Start Your Free Trial”

Content Slider

Add movement and responsiveness to your website with the Content Slider block on Hostonce. After completing your Hostonce sign-up, this tool lets you showcase multiple types of content.  It results in a clean, rotating slider format.

What Is a Content Slider?

The Content Slider is a flexible, all-in-one block that shows different pieces of content in a carousel-style layout. It’s ideal for:

• Highlighting services or products
• Sharing testimonials
• Featuring blog posts
• Announcing promotions or events

Unlike the Media-Text Slider, which pairs media with text in each slide, the Content Slider allows you to mix and match content types across different slides.

How to Use the Content Slider on Hostonce

Start by logging in through Hostonce dashboard:

From your site editor, click Add Block > Slider > Content Slider.

2. Create Each Slide

For each slide, choose your content type:

• Text: Headlines, descriptions, and CTAs
• Images: Upload photos, graphics, or infographics
• Videos: Embed from YouTube, Vimeo, or upload directly
• Mixed: Combine content elements for richer presentations.

3. Set Transitions & Navigation

Customize:

• Transition effects (slide, fade, zoom)
• Auto-play or manual control
• Navigation arrows or dots

4. Customize Styling

Adjust fonts, spacing, colors, and alignment to maintain brand consistency across all slides.

Note: End your slider with a Call to Action block to convert visitors into leads or subscribers.

Use Case Examples

• Services Slider: Each slide highlights one key service with an icon and a short description
• Testimonials Slider: Rotate through customer quotes with profile images
• Promo Slider: Feature ongoing discounts or upcoming events

Team

Showcase the real people behind your brand using the Team block on Hostonce. This feature lets you introduce your team members to a modern and professional layout. It leads to enhancing trust, transparency, and user engagement.

Why Do You Need to Add a Team Section?

After your Hostonce sign-up, adding a Team section is a perfect way to:

• Give a Human element to your brand
• Exhibit leadership or departments
• Add credibility with expertise and bios.
• Enhance user trust and connection.

How to Set Up the Team Block on Hostonce

To begin, log in through hostonce.com and follow these steps:

1. Add the Team Block

In your website editor, go to Add Block > People > Team.

2. Add Team Members

For each person, you can include:

• Profile image
• Full name and job title
• Short bio or description
• Social media links or email

3. Customize the Layout

Choose from various styles:

• Grid or card format
• Horizontal or vertical alignment
• Hover effects for bios or contact icons.

4. Style It to Suit Your Brand

Adjust colors, fonts, spacing, and photo shapes to stay consistent with your website design.

Note: Use the Tabs & Accordion alongside your Team section for department-specific team lists or FAQs about working with your company.

Use Case Example

Meet Our Team

Ark Lacobs – Founder:  Turning ideas into scalable web solutions.

Tash Jako – Head of Department: Passionate about design and storytelling.

Anne Lous – Marketing Strategist: Helping brands grow through effective campaigns.

Call to Action (CTA)

Turn visitors into loyal customers with the Call to Action block on Hostonce. After completing your Hostonce sign-up, this vital feature helps drive user engagement by guiding them to take specific, goal-oriented actions. Signing up, purchasing, or getting in touch would be the result.

What Is a Call to Action?

A Call to Action (CTA) is a visually distinct block that entices users to do something immediately. 

Common examples include:

• “Start Your Free Trial”
• “Contact Our Team”
• “View Pricing Plans”
• “Download Now”

How to Add a CTA Block on Hostonce

After logging in at hostonce.com, follow these steps:

1. Add the CTA Block

On your page editor, go to Add Block > Engagement > Call to Action.

2. Customize the Content

Each CTA block typically includes:

• Headline
• Short description
• Action button with custom text and link

3. Choose a Layout Format

Select from:

• Full-width banners
• Split layout (image + CTA text)
• Minimal inline CTAs for subtle prompts

4.  Suits Branding

Customize:

• Button color, size, and hover effect
• Backgrounds (solid, gradient, or image)
• Fonts and spacing

Note: Place CTA blocks after sections like Content Slider, Pricing Table, or Quote to draw attention at high-engagement points.

An Exceptional CTA Example

Headline: “Bring Your Vision to Life”

Description: “Sign up with Hostonce today and build a beautiful, fast website in minutes.”

Button: (Start Now) Link to signup or landing page

Tabs & Accordion

Structure your content and improve readability with the Tabs & Accordion block on Hostonce. Ideal for FAQs or feature comparisons, this layout helps you present large amounts of information in a clean, skimmable, and user-friendly format.

What Are Tabs & Accordions Blocks?

• Tabs: Helps users switch between different content sections without leaving the page.
• Accordion: Collapsible panels that expand or collapse to reveal or hide content. They are ideal for mobile-friendly layouts.

After your Hostonce sign-up, you can use these tools to declutter your content while enhancing the user experience.

How to Add Tabs or Accordion Blocks on Hostonce

Start by logging in at hostonce.com, then:

1. Add the Block

Go to the site editor, and move to Add Block > Layout > Tabs & Accordion.

2. Choose a Layout Type

Select either:

• Tabs – for horizontal or vertical tabbed content
• Accordion – for FAQ-style drop-downs or layered info

3. Customize Each Section

For each tab or accordion item, add:

• Title 
• Body content – text, images, videos, or even embedded blocks
• Optional icons for visual enhancement

4. Adjust Style Settings

• Control open/close behavior (single open, all collapsible, etc.)
• Style the borders, icons, hover effects, and spacing.
• Match the design to your brand theme and colors.

Note: Merge Tabs & Accordions with the Content Slider or Pricing Table block to deliver layered information effectively without spoiling the user experience.

Use Case Examples

Tabs for Product Features

• Tab 1: Overview
• Tab 2: Tech Specs
• Tab 3: User Reviews
• Tab 4: Support

Accordion for FAQs

• “What does the premium plan include?”
• “How do I log in to Hostonce?”
• “Can I change templates after publishing?”

FAQs