How to Use PhotoBiz Design Settings and Live Preview

How to Use the Design Tab and Live Preview in the PhotoBiz Website Builder

Overview

The DESIGN section in your PhotoBiz Website Builder allows you to customize your website's overall appearance. From this area, you can manage your logo, colors, fonts, styling, graphics, backgrounds, animations, and other website-wide design settings.

You can also preview your website on different screen sizes and review design changes before saving them. Global design settings help maintain consistent branding throughout your website while allowing individual blocks to have their own customized appearance.

This guide explains how to access the Design section, use the live preview, customize your global design settings, and apply changes to your website.

PHOTOBIZ DRAFT WEBSITES

Ready to Redesign Your Website?

Go beyond updating colors and fonts. Redesign your pages, refresh your branding, and explore new layouts while your current website stays live. Build from a template or use the PhotoBiz AI Website Creator to generate pages, content, SEO metadata, and image alt text.

DESIGN WITH CONFIDENCE

Build Now.
Launch Later.

Create and preview your new website before launching. Your previous website stays saved, so you can revisit it later.

LEARN ABOUT DRAFT WEBSITES

STEP ONE

This opens the Website Builder, where you can manage your website's pages, content, and design settings.

STEP TWO

Click DESIGN at the top of the Website Builder.

This opens the Design section, where you can view your current website template, preview your website, and access your global design settings.

STEP THREE

The DESIGN section displays your current website template along with a preview of your website.

Use the desktop, tablet, and mobile icons above the preview to see how your website appears on different screen sizes.

To customize your website's global design settings, click EDIT DESIGN SETTINGS in the upper-right corner.

STEP FOUR

The EDIT DESIGN SETTINGS panel opens on the right side of your screen.

Click the options in the vertical menu to customize your website's logo, colors, fonts, styling, graphics, backgrounds, and other global design settings.

As you make adjustments, the website preview updates so you can see how your changes will look before saving.

Helpful Tip: Clicking outside the settings panel closes it. To continue editing, click EDIT DESIGN SETTINGS again.

FINAL STEP

After customizing your preferred design settings, click SAVE to apply your changes.

Your updated design settings take effect on your live website when saved. No separate publishing step is required.

Click VIEW SITE at the top of the Website Builder to open your live website and confirm that your changes appear as intended.

Understanding Global Design Settings

The DESIGN section allows you to control your website's overall appearance using global design settings. These settings help maintain consistent branding across your website without requiring you to customize every page individually.

Click EDIT DESIGN SETTINGS to access the following options.

Logo

The LOGO section allows you to manage your website's logo, favicon, compact logo, and branding preferences.

You can use your account's existing branding settings or choose custom branding for your website.

For detailed instructions, see How to Change Your Website Logo.

Colors

The COLORS section allows you to customize your website's global color palette. These settings control supported text, buttons, backgrounds, and other design elements throughout your website.

You can choose colors that complement your photography and maintain a consistent appearance across your website.

For detailed instructions, see How to Customize Your Website Colors.

Fonts

The FONTS section allows you to customize your website's typography, including available heading, body text, and other font settings.

Your global font selections help maintain a consistent appearance across your website unless individual blocks have their own customized font settings.

For detailed instructions, see How to Customize Your Website Fonts.

Styling

The STYLING section allows you to adjust available website-wide styling options, including spacing and padding.

These settings help control the spacing between website elements and the overall appearance of your website's layout.

For detailed instructions, see How to Adjust Website Spacing and Padding.

Graphics

The GRAPHICS section allows you to customize the global design style used for supported buttons, social media icons, search and cart icons, and Form Block fields.

You can choose from available graphic styles to maintain a coordinated appearance throughout your website.

For detailed instructions, see How to Customize Website Graphics.

Site BG

The SITE BG section allows you to customize your website's background. You can use a background image and adjust available display settings to control its appearance.

This setting applies to your website's overall background rather than the background of an individual content block.

For detailed instructions, see How to Customize Your Website's Background Image.

Footer BG

The FOOTER BG section allows you to customize the background displayed behind your website's footer.

You can choose background options that complement your website design and help distinguish the footer from the main page content.

For detailed instructions, see How to Customize Your Website's Footer Background.

CSS/JS

The CSS/JS section allows you to add or manage custom CSS and JavaScript for advanced website customization.

Custom CSS can be used to modify supported visual elements beyond the standard design settings. JavaScript can provide additional functionality or integrations.

Custom code should be tested carefully to make sure it works as expected and does not interfere with your website's appearance or functionality.

For detailed instructions, see How to Add Custom CSS to Your Website.

Detail Page Layouts

The DETAIL PAGE LAYOUTS section allows you to customize the appearance of supported detail pages throughout your website.

These settings control how individual blog posts, products, services, and Scheduler services are displayed when visitors open their detail pages.

Choose the appropriate guide for the type of detail page you want to customize:

Helpful Tip: Detail page layout settings are different from the layout options available for individual blocks in the Website Builder. To customize a block's layout, click BUILDER and open the page containing that block.

Animations

The ANIMATIONS section allows you to customize available animation effects for your website.

Animations can add movement to supported website elements, including how blocks appear as visitors scroll through your pages.

For detailed instructions, see How to Change Block Load Animations.

You can also customize animations for specific website elements:

How Global Design Settings Work

Global design settings provide the default appearance for supported elements throughout your website.

For example:

Your global font settings provide default typography unless an individual block uses customized fonts.
Your global color settings control supported text and design elements unless customized settings override them.
Your website background is managed separately from backgrounds applied to individual blocks.

If you customize an individual block, such as an Images Block or Text Editor Block, those changes apply to that block without changing your website's global design settings.

This allows you to maintain consistent branding while giving specific pages and sections their own appearance.

DESIGN vs. BUILDER: What's the Difference?

The PhotoBiz Website Builder includes separate areas for managing your website's overall appearance and editing individual pages.

DESIGN

Click DESIGN to customize website-wide settings, including your logo, colors, fonts, styling, graphics, backgrounds, custom CSS/JS, detail page layouts, and animations.

These settings control the overall appearance of supported elements throughout your website.

BUILDER

Click BUILDER to edit your website's individual pages and footer.

From the Builder, you can update text and images, add or rearrange blocks, change block layouts, and customize individual block settings.

You can also edit your footer's content and layout without changing your website's overall template.

Helpful Tip: If you want to change the appearance of one specific section of your website, use BUILDER to customize that block. If you want to change the default appearance of your entire website, use DESIGN.

Changing Your Website Template

You can also change your website's overall template from the DESIGN section.

Click CHANGE TEMPLATE in the upper-right corner to browse available templates and preview different website designs.

Templates control your website's overall design framework, including navigation placement, logo positioning, site width, and available header and footer layouts.

Changing your template does not delete your existing website pages, blocks, images, or content. However, their appearance may change depending on the new template and design settings you select.

You can preview a template using your existing website content before applying it to your live website.

For step-by-step instructions, see How to Change or Preview Your Website Template in PhotoBiz.

Using the Live Preview

The Design section includes a live preview that allows you to review your website's appearance while making design changes.

You can use the preview to:

See how your website looks on desktop, tablet, and mobile screen sizes.
Review font and color combinations.
Compare styling and background changes.
Check how your selected design settings affect your website's appearance.

The preview updates as you adjust your settings, allowing you to review your design before saving.

Your changes do not affect your live website until you click SAVE.

After saving, your updated design settings take effect on your live website. No separate publishing step is required.

What Your Clients See

While you make adjustments using the live preview, visitors continue to see your previously saved website design.

After you click SAVE, your updated global design settings appear on your live website.

Changes to fonts, colors, graphics, backgrounds, and other global design options may affect multiple pages. However, individual blocks with customized settings may continue using their own styling.

Your existing website pages, images, text, and navigation remain in place when you update global design settings.

Troubleshooting & FAQ

Why didn't my font or color change on every block?

Individual blocks can have their own customized fonts, colors, and styling settings that override your global design settings.

Click BUILDER, open the page containing the affected block, and review its individual customization options.

Can I preview design changes without affecting my live website?

Yes. The live preview allows you to review changes before saving. Your live website continues to display its previously saved design until you click SAVE.

Do I need to publish my website after saving design changes?

No. Changes made in the DESIGN section take effect when you click SAVE. No additional publishing step is required.

Why did the design settings panel disappear?

Clicking outside the right-side design settings panel closes it.

To reopen the panel, click EDIT DESIGN SETTINGS in the upper-right corner of the Design section.

Where do I change the layout or content of an individual page?

Click BUILDER at the top of the Website Builder.

From there, you can open a page, edit its content, add or rearrange blocks, and customize individual block layouts and styling.

Can I change my website template without losing my content?

Yes. Changing templates preserves your existing pages, blocks, images, and website content.

You can preview a different template before applying it. For instructions, see How to Change or Preview Your Website Template in PhotoBiz.

Can I redesign my website without affecting my current live website?

Yes. PhotoBiz Draft Websites allows you to work on a separate website design while visitors continue to see your current live website.

You can build from a template or use the PhotoBiz AI Website Creator to generate a new website, including page content, SEO metadata, and image alt text.

For detailed instructions, see How to Create and Publish a Draft PhotoBiz Website.

Want Help With Your Website Design?

If you'd like personalized assistance with your website's design settings, layout, or overall appearance, PhotoBiz offers 1-on-1 Coaching.

A coaching session can help you learn how to customize your website and make the most of the available Website Builder tools.

For a complete website redesign or rebrand, explore our PhotoBiz Custom Website service.

Need Help?

Support Hours: Monday to Friday, 9am to 6pm EST

Phone: 866.463.7620

Support Channels: Phone, Live Chat, Support Ticket

Previous Post Next Post

How To Change Templates

October 13, 2026

How To Use Text + Image Blocks

October 9, 2026

How To Use Image Blocks

October 8, 2026

How To Customize Website Colors

June 23, 2026

PhotoBiz Global Design Settings Guide