Getting Started with Showit: Navigating the Showit Interface

When it comes to designing your website with Showit, the interface is where all the magic happens. It’s your creative playground—the space where you’ll design, tweak, and customize every element to make your site truly your own. But if you’re new to Showit, it can feel a bit intimidating. What’s where? How do you find what you need? Don’t worry—I’ve got you. This guide will help you confidently navigate the Showit interface so you can dive into designing without a hitch.

The Left Sidebar: Your Website’s Blueprint

Think of the left sidebar as the backbone of your website. This is where you’ll organize your site structure and navigate between pages.

Site Settings: At the top, you’ll find options to manage site settings like site name, domain, blog connection, and social links.
Design Settings: This is where you’ll establish your brand foundation. Add your fonts, define your color palette, and set other global styles that will make your site cohesive and polished. Think of this as your visual branding hub.
Media Library: Your central storage for all the images, videos, and files you’ll use on your website. Upload everything here to keep your content organized, and simply drag and drop files onto your canvas when you need them.
Pages: At the very top, you’ll see a list of all your pages—Home, About, Services, Blog, and anything else you add. Clicking on a page takes you to its canvas, so you can start editing.
Blog Templates: If your site includes a blog, this is where you’ll customize your post layouts. Showit integrates with WordPress for blogging, but the design templates are managed in Showit. You can edit how your blog posts and category pages look—keeping them perfectly on brand. You can also use these pages for other content that you need more control over.
Canvases: Each page is made up of individual canvases (aka sections). These are the building blocks of your page—like your hero section, testimonials, or contact form. You can rearrange canvases by dragging and dropping them, duplicate them, or delete the ones you don’t need.
Site Canvases: These are reusable canvases you can use across multiple pages (like your footer or a call-to-action banner). If you edit a site canvas, the changes will automatically update everywhere it’s used.
Page Panel: Once you select a specific page from the page list, you can click on the page panel at the top showing the canvases and content for that specific page. This is where you can dive into editing the details of each page, like rearranging canvases, adding new ones, or customizing existing elements. Unlike the page list, which displays all the pages on your site, the page panel focuses solely on the structure and content of the page you’re currently working on.

Pro Tip: Naming your pages and canvases clearly (like “About Header” or “Testimonials Section”) will help you stay organized as your site grows.

The Canvas Area: Your Creative Playground

The canvas area is the large, central workspace where you’ll design your site.

Drag-and-Drop Design: The beauty of Showit is that you’re not stuck in rigid grids. You can click on any element—text, images, shapes—and move it wherever you want.
Layering Elements: Showit allows you to layer elements, like stacking a text box on top of an image or placing a button over a shape. Use the layer panel (located in the left sidebar) to adjust the order of elements if something gets hidden.
Zoom and Guides: Need precision? Use the zoom tool to focus on specific areas of your design. You can also activate gridlines and snap-to guides to ensure everything aligns perfectly.
Mobile vs. Desktop View: At the bottom, you can toggle between the desktop and mobile versions of your site. Showit allows you to design these separately, so your website looks amazing on all devices.
Bottom Toolbar Buttons:
- Text: Quickly add headings, paragraphs, or other text boxes to your canvas by clicking the “T” icon. It will automatically add the headings and text based on your global design settings, but you can customize fonts, colors, and alignment to fit each page.
- Element: This is where you can add shapes like rectangles, lines, or even create buttons for your design. Use these elements to create call-to-action buttons, dividers, or visual accents.
- Media: Add images, videos, or even GIFs to your canvas using this button. Simply upload your file to the media library (or select from existing ones) and drop it right onto the canvas.

Pro Tip: The canvas area has no rules—embrace your creativity! But remember, balance and spacing are key to keeping your design clean and professional.

The Right Sidebar: Your Customization Hub

The right sidebar is where all of the customization happens. Every time you select an element on your canvas, this sidebar will populate with settings specific to that element.

Canvas settings: Want to add a background color or image to a section? Just click on the background and you’ll make those changes. You can even upload videos as background elements for an extra wow factor. This is also where you will adjust the canvas size and sticky elements.
Text Settings: Click on a text box, and you’ll be able to adjust the font, size, color, alignment, and more for just that specific text element. You can even include animations like fade-ins or slide-ins and click actions to link to a page, canvas, social link or external URL.
Image Adjustments: When working with images, the right sidebar lets you crop, resize, and adjust opacity. You can also link images to specific pages or URLs, making them clickable.
Size + Position: Adjust the size, alignment, and position of any selected element with precision. This is where you ensure everything is perfectly placed on both desktop and mobile views.
Click Actions: Add functionality to your elements! Use this tab to assign actions, like linking to another page, opening an external URL, triggering a pop-up, or scrolling to a specific canvas on the page.
Transitions: Bring your designs to life with animations! Use transitions to create smooth effects like fades, slides, or reveals between canvases or elements for a more engaging experience.
Hover: Customize how elements respond when a user hovers over them. Change colors, adjust opacity, or even swap images to make your site feel more interactive and polished.
Effects: Add that final touch of magic! Effects allow you to apply drop shadows, color overlays, or blurs to your elements, helping them stand out and giving your site a dynamic, professional look.
Mobile-Specific Edits: One of the coolest things about Showit is the ability to customize your mobile site separately. Each element has its own mobile settings that can be changed independently of the desktop settings so things can have different settings for each.

Pro Tip: Always preview your changes in both desktop and mobile modes to ensure your design looks great everywhere.

Recap

The Showit interface might feel overwhelming at first, but once you know where everything is, it’s like having the ultimate creative toolkit.

Use the Left Sidebar to organize your pages and canvases.
Dive into the Canvas Area to design and bring your vision to life.
Head to the Right Sidebar to customize each element and make it uniquely yours.

With this quick tour of the Showit interface, you’re now ready to start building your dream website. Whether you’re working on your homepage, crafting a killer about page, or adding that perfect call-to-action button, Showit makes it easy to create a site that’s as unique as your brand.