Behind the scenes of “Getting your customers to cross the river”

How to use Setka tools to design outstanding content experience

Setka Editor was created by developers who’ve spent years building different kinds of online publications. They know the real needs of editors and designers, and have wired them into the tool, making sure the interface is seamless and easy to use for those without a background in design. To create something really outstanding, you might want to learn some tricks.

We asked Accent art director Dmitry Raspopov to share the tricks he used designing one of our recent posts — “Getting your customers to cross the river: Chris Lema Shares the 5 Stages of Creating a Compelling Business Narrative”.

1

Choosing the right grid system for your idea

Here’s the one we’ve picked for the interview with Chris Lema:

6 columns (940px)

20px gutter, 40px min margins

This grid works best for wide posts, leaving  enough space for custom illustrations. You can learn more about grid systems and grids here.

2

Using full width 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 – Full width 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.

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

3

Use our Smart quote tool

The Smart quote tool transforms plain text into a quote. To apply it, choose the Smart design feature in Setka Editor, select any sentence or paragraph you want to make into a quote and click on the quote button on the left. The selected text will get visually highlighted and will stand out from the rest of the content. To learn more about Smart design tools, click here.

4

Highlighting key points with specially designed cards

To make sure that the readers get the key message of the post and find it fun and easy to read, we decided to highlight some of Chris’ advice with special cards. The design of the cards allows you to use custom backgrounds. This supports the point you want to get across, and helps to make the post more visually rich.

We loved the card design with the background we’ve used, and saved it as a snippet, so we can quickly add a similar card to other posts. You can learn more about designing snippets in our Help Center.

5

Matching the background with the colors of the illustrations

We loved Chris’ river metaphor and further highlighted it by adding the blue background to one of the chapters of the post. You can read more about backgrounds here.

6

Adding animation

You can use Setka Editor to animate texts, images and infographics. You can apply animation to a paragraph, image or the whole grid. You can also set different directions (from left to right, upwards/downwards), zoom (in and out) and rotation. To make the post experience more fun, we decided to animate some of the additional blocks. To learn more about animations for Setka Editor, click here.

7

Saving the post as a template

You may want to publish posts with an identical structure and similar design elements as those you’ve created before. Similar to snippets, post templates save your time when creating new posts. To learn more, click here.

To check out the result, visit Accent, our publication about digital media, journalism, and design.