Element Tutorials

How to use the Container Element to style and structure page sections

The Container element is used to structure page sections and create overlays with image and video backgrounds.

Written by Karl Jones
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.

Written by Karl Jones
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.

Written by Nick Raushenbush
Updated over a week ago

Create scrolling sections with the Slider Element

The slider, sometimes known as a carousel, allows you to create scrolling sections on your page.

Written by Karl Jones
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.

Written by Karl Jones
Updated over a week ago

Adding text with the Text Element

The Text Element allows for you to add text content right into your page.

Written by Karl Jones
Updated over a week ago

Animating your Shogun Content

Introducing Content Animations! Use our new point-and-click controls to add beautiful interactive animations to your page elements.

Written by Andy Fisher
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.

Written by Karl Jones
Updated over a week ago

How to overlay text, buttons, and other elements on an image or video, using the Container element

Use the Container element to create a background, and then overlay text, buttons, and any other elements on top of the background.

Written by Karl Jones
Updated over a week ago

Adding images using Unsplash

You can now use Unsplash in order to populate your Shogun image elements!

Written by Karl Jones
Updated over a week ago

A Guide to the Add to Cart Button

The Add to Cart (ATC) Button lets customers shop your products from any Shogun page.

Written by Nick Raushenbush
Updated over a week ago

How to display product data on any page using the Product Box

Display product data fields like Product Image, Product Title, Product Price, and more.

Written by Karl Jones
Updated over a week ago

Using the Table element

A table can be useful to display data in an organized, structured manner.

Written by Monique Hubert
Updated over a week ago

Use the Icon Element to add icons to your page content

The icon element taps into Font Awesome's open source library of almost 1,000 icons

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.

Written by Nick Raushenbush
Updated over a week ago

Can I add a shadow to my content?

Drop shadows can give the illusion of elevation to your elements and add depth to your page.

Written by Karl Jones
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.

Written by Karl Jones
Updated over a week ago

Building forms with the Form Box Element

The Form Box allows you to build your forms, with form blocks to add the fields that you need.

Written by Karl Jones
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.

Written by Karl Jones
Updated over a week ago

Export Shogun form data

Now that you have visitors submitting information on your forms, it's time to export it!

Written by Karl Jones
Updated over a week ago

Setting up reCAPTCHA for your Page Builder forms

Prevent bot submissions and prevent your forms from fraud or abuse.

Written by Karl Jones
Updated over a week ago

How to add images using the Image Element

Tips on how to add styles and effects to images within the Shogun editor.

Written by Karl Jones
Updated over a week ago

Using an Image Element or a Container Element for a background image

There are currently two methods of adding a background image to your page, find out more information about which suits you more.

Written by Karl Jones
Updated over a week ago

How to create a text image overlay

Text, buttons, and other elements can be dragged on top of Images.

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 into your page.

Written by Karl Jones
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.

Written by Karl Jones
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.

Written by Karl Jones
Updated over a week ago

How to embed HTML code in Shogun

If you are looking to add custom code or integrate a 3rd party app, the HTML element is very useful.

Written by Nick Raushenbush
Updated over a week ago

Applying Saved Styles to your products

Saved styles allow you to create default styles that can be used across your pages to create a consistent style.

Written by Karl Jones
Updated over a week ago