Editing Your Website for Different Devices in the Website Editor

You can customize how your website appears on different screen sizes—mobile phones, tablets, monitors, and wide monitors—using the Device Preview button in the DecoNetwork Website Editor. This tool not only lets you preview how your website looks on various devices, but also allows you to edit your website layout and content for each device type individually.

Why Device-Specific Editing Matters

Modern websites must adapt to a variety of screen sizes to provide a smooth and user-friendly experience. By customizing content specifically for mobile, tablet, and desktop views, you can ensure your site looks great and functions well for all visitors.

How to Edit Your Website for Different Devices

1. Access the Website Editor
   • Go to Admin > Websites in your DecoNetwork admin area.
   • Click Manage next to the site you want to modify.
   • Select Edit Website > Website Pages
2. Open Device Preview Mode
   • In the Website Editor, look at the bottom of the left toolbar.
   • Click the Device Preview icon ( a monitor icon).
     • A flyout will appear showing four device options:
       • View in Mobile Device
       • View in Tablet Device
       • View in Monitor
       • View in Wide Monitor
3. Select a Device View
   • Click on the icon for the device type you want to work with.
   • The editor will switch to show how your website appears on that screen size.
4. Edit in That View
   • While in a selected device view, you can move, resize, hide, or change elements specifically for that device.
   • For example, you might hide a large image on mobile but show it on desktop.
5. Save and Publish
   • Once you’ve made your changes, click Save, then Publish to apply them to your live site.

Notes

• Changes made in a specific device view only apply to that view.
• Device-specific editing gives you control over responsive behavior without needing custom code.

Related Articles

• Website Pages WYSIWYG Editor
• Using Widgets in the Website Editor