Preview the Website Before Publishing

Before publishing your recent changes, previewing your website is essential to understand exactly how it will appear to your visitors. Think of it as a final dress rehearsal to ensure every element—from your latest blog post to that new contact button—looks polished and professional.

Preview Options

To view your site across different platforms, click the Desktop Icon in the Website Editor and choose from these display options:

• Desktop - The default editor view that shows the website as seen on standard computer screens.

• Tablet and Mobile - Displays how your layout automatically adjusts for smaller screens and tablets.

• App -  Preview your website as it will appear as an installed app on your users' devices (Android, iOS)

• New Window - Opens a live preview in a separate browser tab, providing the most accurate representation of the visitor experience.

• Return to Edit Mode - Once you are finished reviewing your work, click this button to jump back into the editor.

Mobile Settings

While SITE123 sites are responsive by nature, you can use the Mobile Settings to fine-tune specific visual elements for handheld devices:

• Header and Font - Adjust the Header height and the Header font size to ensure your branding remains clear without taking up too much screen space.

• Menu Appearance - Customize the Menu Type and Menu Color for the mobile popup menu to match your brand's aesthetic.

• Layout and Spacing - Use Text Align to position your menu text and Space between pages to control the vertical distance between navigation links.

App Settings

Control aspects of the website's App version 

• App Homepage -  Use this option to determine what your users see when they open the app, choose between the Regular Mobile Homepage, your users' Client Zone, or your Store. Once your users click on the App icon on their devices, they will see the selected option.
• Opening Screen Logo -  Use this option to determine if the App icon will display your logo or automatically generate one based on your website name
• Open Screen Background - Use this option to set the background color of your App version, choose between Black, White, or the website Main color. This option is currently only available for Android devices. 
• Visitor Installation Popup -  Use this option to notify your users of the option to add your website as an app on their mobile devices. This option is currently only available for Android devices. 

Notes

• Dynamic Adjustments - The mobile-specific settings allow you to solve layout issues—like text being too large on small screens—without affecting the desktop version of your site.

• Consistency Check - Using the "New Window" preview is highly recommended before a major launch, as it allows you to test links and buttons in a clean browser environment.

• User Experience - Pay close attention to the Menu Color and Text Align on mobile; a high-contrast, centered menu is often easier for visitors to navigate with their thumbs.