Tutorials

Learn to master website creation with these tutorials

Nick Raushenbush avatar Charles Wecker avatar
32 articles in this collection
Written by Nick Raushenbush and Charles Wecker
The Basics

6-Min Quick Start to Shogun

This video will help you get started using Shogun. It goes over some of the basics around Sections, Columns, Margins/Padding, and Mobile.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

5-Min Guide to Margins and Padding

Margins create space between elements, and Padding creates space within an element, inside of the page builder.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How to use the Section element to style and structure page sections.

The Section element is used to structure page sections and create overlays with image and video backgrounds.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Use Columns to align content and create horizontal dropzones.

To place elements side by side, simply drag an element next to another one, or use the Columns element to create horizontal drop zones.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Responsiveness: Make Your Pages Great for Mobile

Learn responsive design and how to make your pages optimized across devices for mobile, tablet, desktop and widescreen.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How To Create A Standard Page in Shogun

This is how you can create a basic page in Shogun. Try this when you're getting started.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Use Screen Settings to Create Unique Page Viewing Experiences Across Devices.

Perfect mobile responsiveness by choosing whether an element or section displays on Widescreen, Laptop, Tablet, or Mobile.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How To Make a Full Width Page

If you want to make a page full width, use a Section element and toggle the full width button, or use the landing page style layout.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How To Re-Use Content using Shogun's Snippets

Snippets are how you can easily re-use an element, section, or even an entire page. You can re-use Snippets across your pages.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Creating Pages Faster Using Our Pre-Made Page Templates

Ready-to-go page layouts to help you get started with page design, or show you what is possible with the editor.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Why You Should Be Using Blocks and How to Use Them

Blocks are pre-made page sections that you can re-style to taste.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Optimize for SEO: Using Meta Fields

Learn how to use the Meta Title and Meta Description fields for your pages in Shogun, to help optimize for search (SEO).
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How To Create Custom Blog Post Layouts

This video tutorial will teach you how to create and edit custom article layouts in Shogun.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago
Elements

How To Create a Text Image Overlay

The Image element has a great text overlay feature where you can place and style text on top of an image.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How To Add a Youtube Or Vimeo Video to a Page

Learn how to use the Video element to embed a Youtube or Vimeo video player into your page.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

How To Use and Style Buttons in Shogun

The button element is a great way to drive your CTA's. This video teaches you how to configure, style and position buttons.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Create Scrolling Sections with the Slider

The slider, sometimes known as a carousel, allows you to create scrolling sections on your page.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

De-Clutter Your Pages Using Tabs

The tab element allows you to organize your page by placing content on different tabs.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Create Expanding and Collapsing Sections with Accordions

The accordion element allows you organize your page content with expanding and collapsing sections.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Creating a Sense of Urgency with the Countdown Timer

The countdown timer is great for ecommerce websites looking to create a sense of urgency with sales.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Use Social Buttons to link to Facebook, Twitter, Instagram, and more.

The social icon buttons are great for linking to Facebook, Instagram, Twitter, YouTube, Email, and more.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Use the Map element to Embed a Google Map

Use the power of Google Maps to show your location with the Map element.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Use the Table Element to Build Perfect Boxes

A table can prove useful in a variety of situations, and allow for clean design lines.
Charles Wecker avatar
Written by Charles Wecker
Updated over a week ago

How To Add and Style Images in Shogun

The image element can be resized and styled using our Aviary plugin. Click the the Edit Image button after adding the image to the page.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Embed your Instagram Feed into a Page

Add your Instagram feed to any page using the Instagram element. Display description and hashtag content or just the images.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago

Using the Form element to Receive Messages and collect Email Data From Customers

The form element can be used to collect form responses and email addresses from visitors to your Shogun pages.
Nick Raushenbush avatar
Written by Nick Raushenbush
Updated over a week ago