Edit in specific screens with ease!
​
Click on the desired icon at the top of the Shogun dashboard to set the element controls to edit only for that screen size.
​
The list of screen specific edit icons and the screen sizes they apply to are listed below:
​

Clicking on a specific screen setting means that changes made to an element while that screen icon is engaged, will only take effect on that screen.

In situations where a setting needs to be applied to an element across all screens, you can click on the All screen sizes icon:

For example, you can apply settings to a container across all screens by first clicking on the All screen sizes icon as seen below:

As can be seen in this example, both the minimum height of 300 px and the red background color were set for all screen sizes.

Using our Screen specific buttons we can change the color we applied to our container in our above example, for different screen sizes.

We can do this by simply clicking on the desired screen icon and adjusting the color in the right side menu, as seen below:

You can easily identify the screen you're currently editing in by:

When screen specific edits applied to a control, icons showing the screens in which these edits have been made show to the right of the Main tab in the right side menu of the editor:

In the screen shot above, based on the icons, any edits that have been made for this element, were made for both Large and Medium screens in the Main tab.

This ensures that inadvertently overwriting screen specific edits are a thing of the past.​

With the improvements to Responsive Editing you can now resize the width of the editable screen to preview your layout, at different dimensions, in the editor.
​

​
​In order to preview your resized layout in the editor as shown in the screen capture above, you'll need to adjust the drag handles on the left and right of the layout.

​Please note: when the page is previewed it will be previewed at the dimensions of the device being used.

Unfortunately, not all element controls are are available to be edited in specific screens with our improvements to Responsive Editing.
​
Some element controls will change in all views despite the screen that has been selected. For example, a heading elements type, whether H1, H2 etc. can only take one heading type for all screen sizes:

​

So setting a heading element to be H2 for example using any screen specific edit will change all screens to be H2. So do you have to remember which settings will make changes across all screens?

Not at all. Identifying these controls will be simple as a tool tip pops up to confirm that the changes will affect all screens.

A very important fact that was often overlooked, is that the visibility settings inherited from parent elements are always applied to child elements.

What does that mean, when we say the visibility settings inherited from parent elements are always applied to child elements?

Well let's take a look back at our editor the recent improvements to Responsive Editing.
​
For example, the Image element in the screen shot is in a Container:

The Container is set to show only on Desktop and Laptop. If the Image is then set to show only on Tablets and Mobile screens it will not show anywhere:

​This is because the Image inherited only showing on Desktop and Laptop and so setting it to show on Tablets and Mobile screens will case to not show anywhere.

As we discussed above, before the improvements to Responsive Editing, element visibility was not immediately obvious, in either the layout tab or right side menu.

With our feature improvement, Child elements in the layout tab and right side menu now show the visibility control settings they have inherited.

Let's revisit, our Image element in a Container but this time with the Improved responsive editing workflow turned on:
​

You'll notice that the pop menu for the Container element shows the icons for the screens where the element are visible.

When the Image element is ​clicked, these icons also show as the Image inherits its visibility from the Container it is in:

As an additional feature, the Image element can no longer be enabled for any screens where the containing element is not visible.

Yes. Responsive Editing can be enabled and disabled if you'd like to use the old responsive editing controls. You can click on Settings in the Shogun dashboard, scroll down to Editor section and enable/disable the switch to the right of Enable improved responsive editing workflow.