Skip to main content
All CollectionsGetting StartedNext Steps
Mastering Responsive Editing: Enhancements that will simplify your workflow
Mastering Responsive Editing: Enhancements that will simplify your workflow

Be Excited! With the improvements to Responsive Editing you're no longer restricted to editing your layouts in 4 generic screen size buckets. This feature now allows you to visualise your layout for any size of screen within each device type view.​

Updated over 2 weeks ago


Screen specific editing

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:

Specific screen size settings and the screens they can be applied to.
  • Extra small screens (767 px and smaller)

  • Small screens (991 px to 768 px)

  • Medium screens (1199 px to 992 px)

  • Large Screens (1200 px and wider)

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.

Applying a setting across all screens

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

The location of the All screen sizes icon in the Shogun editor.


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

Use All screen sizes button to apply settings to a container that will show on all screens.

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.

Applying a setting to specific screens

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:

Setting the background color of a container based on screen size

How do I know which screen size I'm currently editing?

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

  • Looking to the screen selector icons at the top of the dashboard:

    The location of the Screen selector.

    The screen selector above shows that the Large screen icon has been selected.

  • Or, looking to the tip in the right side menu above the Main tab:


    Please note: when editing in all screens there is no tip above the Main tab in the right side menu.

How do I know which elements have screen specific edits applied to them?

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:

Screen Icons indicating the views where edits have been made.

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.​


Preview your page in a range of different screen sizes

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.

Can all elements be edited for specific screens?

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:

The location of the tool tip identifying a control that applies to all screens.


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.

Where are my editable elements visible?

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

Visibility conflicts before the Responsive Editing improvement

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:

Setting a container to be visible on Desktops and Laptops.

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:

Shogun dashboard showing the visibility icons above the Container and the matching settings in the right side menu under Visibility.


​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.

Visibility settings are easy to see with the Responsive Editing improvements

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:

Shogun dashboard showing the visibility icons above the Image and the matching settings in the right side menu under Visibility.

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

FAQs

Can I disable the Improved Responsive Editing Workflow feature?

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.

Did this answer your question?