Showit Design & Canvas Customization Guide: Master Canvases, Mobile Design & Visual Effects

Showit has revolutionized website design for creatives by offering pixel-perfect control without requiring code. At the heart of this flexibility lies the canvas system, a unique approach that allows designers to build websites as layered, interactive compositions rather than rigid page structures.

This level of control is one of the main reasons creatives choose Showit over other platforms, especially when working with a custom Showit website design or investing in a fully tailored build.

Understanding how canvases work is essential for creating professional, responsive websites that stand out. This guide walks you through everything from adding your first canvas to implementing advanced visual effects that captivate visitors.

Understanding Showit Canvases: The Foundation

Canvases are the building blocks of your Showit website. Think of them as individual sections or layers that stack vertically to create a complete page. Each canvas can contain text, images, buttons, and other design elements that you position exactly where you want them.

If you’re new to the platform, you may want to start with a broader overview of what Showit is and how it works before diving deeper into advanced canvas customization

According to Showit’s design documentation, a page is the sum of all content you see when scrolling, while canvases are the individual sections that make up that page. This modular approach gives you unprecedented control over your website’s structure and design.

Site Canvases vs Page Canvases

Showit offers two types of canvases: site canvases and page canvases. Site canvases are reusable sections that appear across multiple pages, such as navigation menus and footers. When you update a site canvas, the changes automatically reflect everywhere that canvas appears.

Page canvases, on the other hand, are specific to individual pages. They’re perfect for unique content sections that don’t need to be repeated elsewhere on your site. This distinction becomes especially important when building larger sites or planning a full custom Showit website development project.

How to Add a Canvas in Showit

Adding a canvas to your Showit website is straightforward. Open your design in the Showit app and navigate to the page where you want to add a new section. In the left panel, click the plus icon next to your existing canvases or use the canvas dropdown menu.

You’ll have several options: add a blank canvas, duplicate an existing one, or select from Showit’s template library. Blank canvases give you complete creative freedom, while template canvases provide pre-designed starting points that you can customize.

If you’re working with a purchased layout, this step pairs well with learning how to add a purchased Showit template correctly so your canvases stay organized from the start.

For site canvases that will be reused across pages, click the Site tab in the left panel and create your canvas there. This ensures it’s available for global use across your entire website.

Canvas Types and Settings

Showit offers three canvas type settings that control how your canvas behaves:

Normal canvases have a fixed pixel height that you set manually. This is ideal when you need precise control over section dimensions.

Window Height canvases automatically adjust to fill the visitor’s browser window, perfect for hero sections and full-screen landing pages. You set a minimum height, and the canvas expands to fit larger screens while maintaining content centered vertically.

Grow with Content canvases are especially important for blog SEO and layout consistency. If you’re optimizing blog performance, pairing proper canvas setup with Showit SEO best practices makes a noticeable difference.

Mastering Stacking Order in Showit

Stacking order determines how canvases layer in relation to each other, particularly important when using sticky elements like navigation menus. By default, most canvases have a stacking order of 1, which means they sit at the same level.

When you need a canvas to appear above others, such as a navigation menu that stays visible while scrolling, you increase its stacking order value. A navigation canvas typically needs a stacking order of just 2 or 3, one number higher than regular content canvases.

This is critical when building advanced UI elements such as notification bars or interactive menus that must stay visible while scrolling.

You can adjust stacking order in the Canvas tab of the right-side Properties Panel. The key principle is to use the lowest number necessary to achieve your desired effect. Excessively high stacking order values complicate troubleshooting and make future edits more difficult.

Stacking Order Best Practices

Keep stacking order values simple and logical. Reserve values of 1 for standard content canvases, 2-3 for navigation elements, and 4-5 for special popups or notification bars.

Document your stacking order choices if you’re working on complex sites or collaborating with other designers. This prevents confusion and makes maintenance easier down the line.

Remember that stacking order works hand-in-hand with the sticky setting. Sticky positions a canvas at the top or bottom of the viewport, while stacking order determines whether it appears above or below other elements.

Designing for Mobile: Showit’s Dual-View System

One of Showit’s standout features is the ability to design mobile and desktop versions completely independently. This isn’t responsive design where elements automatically resize; instead, you craft two distinct experiences optimized for each screen size.

When you add an element to your desktop design, it automatically appears in your mobile view. However, the placement, size, and styling can be adjusted separately for each view. This gives you precise control over how your website looks on phones versus computers.

Side-by-Side Editing

Showit’s side-by-side editor displays both desktop and mobile views simultaneously. This allows you to see how changes affect each version in real-time, significantly speeding up your design workflow.

As you build out your desktop design, tweak the mobile version canvas by canvas rather than waiting until the end. This prevents the overwhelming task of fixing an entire site’s mobile layout all at once.

Syncing and Splitting Design Elements

Most design features in Showit can be synced or split between mobile and desktop. Hover over any design element in the Properties Panel and click the three dots to access sync options.

When you split a design element, you can edit it independently on mobile and desktop. For example, you might want larger font sizes on desktop but smaller, more readable sizes on mobile. Split the font setting to customize each view separately.

To merge designs back together, click the mobile or desktop icon and choose to merge using that view’s settings. This overwrites the other view with your selected design.

Hiding Elements by Device

Some elements work beautifully on desktop but clutter mobile layouts. Showit lets you hide individual elements or entire canvases from specific views.

In the left panel’s Page tab, click on a canvas to see its elements. You’ll notice mobile and desktop icons next to each element. Toggle these icons to show or hide elements on specific devices.

For entire canvases, click the three dots next to the canvas name and uncheck “Visible On Desktop” or “Visible On Mobile” as needed. This is particularly useful for complex navigation menus that require different mobile approaches.

Mobile Layout Assistance

If you’ve already designed your desktop site and need to adapt it for mobile, Showit’s Layout Mobile feature can help. Select a canvas, click the three dots next to its name, and choose “Layout Mobile” from the dropdown.

You’ll see several options: Auto generates a mobile version based on dimensions, Scaled creates a duplicate of the desktop layout, and Stacked centers and resizes elements vertically for easy manual placement.

Copy Canvas Styles and Copy Element Styles let you transfer design settings without changing positioning. These tools provide a starting point, though you’ll likely need to make manual adjustments for optimal mobile presentation.

Creating Parallax Effects for Visual Depth

Parallax scrolling creates a sense of depth by having background elements move at different speeds than foreground content. This subtle animation adds visual interest and modern polish to your website.

To add parallax effects in Showit, set an image or video as your canvas background. In the Canvas Background tab of the Properties Panel, you’ll see a Scroll setting with three options.

“Scroll with Page” is the default setting where backgrounds move normally with scrolling. “Parallax” makes the background scroll at a slower rate than the page content, creating that signature depth effect. “Fixed” keeps the background completely stationary while other elements scroll over it.

Parallax works best on canvases with sufficient content to enable scrolling. The effect becomes most noticeable on longer sections where the speed difference between background and content is clearly visible.

Combining Parallax with Other Effects

For maximum impact, combine parallax backgrounds with carefully positioned foreground elements. Layer text and images over parallax backgrounds to create dynamic, magazine-style layouts.

Consider using parallax selectively rather than on every canvas. Too much movement can distract visitors and slow down page performance. Reserve parallax for hero sections, testimonials, or portfolio showcases where you want to create memorable moments.

Adding Video Backgrounds to Canvases

Video backgrounds bring your website to life with movement and storytelling potential. Showit supports video backgrounds on canvases, though there are technical requirements to ensure optimal performance.

Videos must be under 30 seconds long and under 8MB in file size. They should have no audio track, as Showit automatically mutes background videos to prevent unwanted sound.

To add a video background, select your canvas and navigate to the Canvas Background tab in the right panel. Click to add media and upload your video file. You’ll see options to control playback: loop the video continuously or play it once.

The “Fill” setting ensures your video covers the entire canvas area without black bars, though this may crop edges on different screen sizes. Adjust the video’s focal point to control which part remains centered.

Video Background Best Practices

Compress your videos thoroughly before uploading. Tools like HandBrake or online compressors can drastically reduce file sizes while maintaining visual quality.

Choose videos with subtle, slow movement rather than fast-paced action. Gentle animations like waving grass or flowing water work better than rapid cuts or busy scenes that compete with your content.

Note that video backgrounds only work on desktop views in Showit. For mobile, use animated GIFs as an alternative. These create a similar movement effect while respecting mobile browser limitations and data constraints.

Implementing Hover Effects for Interactivity

Hover effects provide visual feedback when visitors move their cursor over elements, making your website feel responsive and professionally polished. Showit offers built-in hover settings plus options for custom CSS effects.

Select any element on your canvas and navigate to the Hover tab in the Properties Panel. Set the hover type to “Custom” to define unique hover behaviors for that specific element.

You can adjust hover opacity to make elements fade or brighten on hover. Change colors to highlight clickable items. Modify timing to control how quickly the hover transition occurs.

For text elements, you have additional options like changing font, size, letter spacing, and underline on hover. Shapes can alter border size and color. These settings help guide visitors toward clickable elements and important calls-to-action.

Advanced Hover Effects with Custom Code

For more sophisticated hover effects beyond Showit’s built-in options, you can add custom CSS. This allows effects like scaling images on hover, changing button backgrounds, or creating smooth color transitions.

One popular effect is the image zoom on hover. Select your image, go to the Advanced tab, and add a CSS class name like “hover-expand”. Then in your page’s Advanced Settings, add custom CSS that scales the image to 1.1 times its size when hovered.

Button hover effects require wrapping both the button shape and text in the same link, then using CSS to change background and text colors simultaneously. This creates professional-looking buttons that change state when visitors interact with them.

Hover Effects on Mobile

Remember that hover effects are designed for cursor-based interactions and don’t translate to touch devices. Mobile visitors tap rather than hover, so hover states won’t display on phones and tablets.

For mobile, focus on clear visual hierarchy and obvious tap targets rather than relying on hover feedback. Ensure buttons and links have sufficient size and spacing for easy tapping.

Building Dropdown Menus in Showit

Dropdown menus help organize navigation without cluttering your header. Showit doesn’t have built-in dropdown functionality, but you can create professional dropdowns using canvas views and click actions.

Canvas views allow you to create different states of the same canvas. View 1 shows your default navigation bar. View 2 reveals the dropdown menu when triggered. This approach works for both desktop and mobile navigation.

Creating Desktop Dropdown Menus

Start by navigating to your main navigation canvas. Click the three dots next to the canvas name and select “Add Canvas View”. Design your navigation bar in View 1 as usual.

Create View 2 by duplicating View 1, then add a rectangle as the dropdown background beneath your navigation item. Insert text elements for each submenu option and style them to match your site’s aesthetics.

Select the navigation item that should trigger the dropdown. In the Click Actions panel, set it to change the canvas view to View 2. This makes the dropdown appear when clicked.

To close the dropdown, add a click action on the same navigation item in View 2 that changes back to View 1. This creates a toggle effect.

Finally, adjust the stacking order of your navigation canvas to ensure it appears above other page content. Set it to 2 or 3 so the dropdown displays over canvases below.

Mobile Dropdown Navigation

Mobile navigation requires a slightly different approach due to touch interactions and limited screen space. Create a separate canvas for mobile navigation with a hamburger icon instead of full menu text.

View 1 shows just your logo and hamburger icon. View 2 reveals the full menu. Add touch-friendly sizing with minimum 48px height for clickable items to ensure easy tapping.

Set click actions on the hamburger icon to switch between views. Include a close icon in View 2 or make menu items toggle back to View 1 when selected.

Hide desktop-specific navigation elements from mobile using the visibility toggles in the left panel. This prevents both navigation versions from appearing simultaneously.

Dropdown Menu Best Practices

Keep dropdown menus consistent with your overall site aesthetics. Match fonts, colors, and spacing to create a cohesive experience.

Test your dropdown menus on various devices and browsers. Preview your site thoroughly to ensure click actions trigger properly and transitions feel smooth.

For accessibility, use clear labels and ensure keyboard navigation works for users who don’t use a mouse. While Showit has limitations in this area, thoughtful design can improve usability for all visitors.

Optimizing Canvas Performance

Well-organized canvases load faster and provide better user experiences. Name your canvases clearly to reflect their purpose, making site management easier as your website grows.

Compress all images before uploading to Showit. Large, unoptimized images slow down page load times and frustrate visitors. Aim for the smallest file size that maintains visual quality.

Limit the number of canvases per page when possible. While Showit handles multiple canvases well, excessive sections can impact scroll performance, especially on mobile devices.

Use window height canvases strategically rather than on every section. These canvases require JavaScript to calculate browser dimensions, so overuse can slightly impact performance.

Common Canvas Troubleshooting

If elements aren’t appearing in the correct order, check your stacking order settings. Remember that higher numbers appear on top of lower numbers.

When mobile layouts look jumbled, use the Layout Mobile feature to get a fresh start, then manually refine positioning. The side-by-side view makes this process much easier.

For hover effects that aren’t working, verify the hover type is set to “Custom” rather than “None” or a default setting. Also confirm the element has sufficient time set for the transition to be visible.

If dropdown menus won’t trigger, double-check your click actions are pointing to the correct canvas views. Small typos or incorrect view selections will prevent the toggle from working.