Behind the scenes of "How to create captivating 360 degree videos"

​How to use Setka software to build exceptional user experiences

​Setka Editor was developed by developers who have spent years creating various kinds of online publications. They know the real needs of editors and designers, and have wired them into the tool to ensure that the interface is seamless and easy to use for those with no design background. You may want to learn a few tricks to create something truly outstanding.

1| ​Start with a very big idea

​The story of RYOT studio and its creative approach to producing innovative videos have inspired us. So we decided to create a unique layout that highlighted the subject, and experiment with the team's 360-degree picture.

2| Select a versatile grid network

Here is the one we have picked for Jessica Lauretti 's interview with RYOT:

6 Rows (940px)
20px duvet, margins 40px min

This grid works best for large posts, as it leaves sufficient space for custom illustrations / large pictures. You can learn more about grid and grid networks here.

​Learn more about Setka Editor or sign up for a FREE 14-day trial.

3| Fill the post with a 360 degree photo

​The RYOT team took a 360-degree video, so we needed to find a web player for that. We find a suitable device on GitHub, Picture Sphere Viewer. We tried it out, and that went well. But for mobile we had to adjust it a bit (now the gyroscope is working), and then add iframe into the post itself.

4| ​Using large illustrations

As you’re using Setka Editor to edit and design posts, all the content you add lives inside the post. The background image or the images used as post illustrations cannot go beyond the width of the post itself. The post width is defined by the WordPress theme you’re using. If the post width in your theme is constrained by sidebars or other theme settings, you can change it to 100%-width for any given post by installing a dedicated plugin – Fullwidth Page Templates, or manually editing the CSS files of your WordPress theme. After you implement these adjustments, you’ll be able to use full screen images. To learn more about image settings, visit our Help Center.

5| Add glitch effect

​We used a free action for Photoshop to create an animated gif (Portrait of Jessica). Then we changed the final result with pauses set between frames.

6| Set up an unusual background

We used an online glitch device found on GitHub, and a picture of the RYOT office shelves, to create the context pattern. Then we cleaned up and combined the glitched image parts with the background cover image, the 360-degree photo and the image gallery at the bottom.

​Learn more about Setka Editor or sign up for a FREE 14-day trial.