Go to Shogun
All Collections
Element Tutorials
Element Tutorials
Learn to master website creation with these tutorials
+2
29 articles in this collection
Written by
Nick Raushenbush,
Karl Jones,
James Power
and 2 others
Structure
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
Content
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.
E
Written by
Edward Savoy
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
How do I make rounded buttons?
Oftentimes might want to round the edges of your buttons to make them 'pill-shaped'.
Written by
James Power
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
Forms
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
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
Media
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
Social
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
Advanced
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 content
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