Edit By Device

  • Knowledge Base
  • Responsive Website Builder
  • Edit By Device
  • Duda Support > Responsive Website Builder > Editing a Site

Overview

Edits made to one device will appear on all devices. For example, when a row is deleted on the tablet view of your site, the row will also be missing on the desktop and mobile views of your website. This is because your site is responsive, thus sharing content across all devices. However, you may want to differentiate which content appears on which devices. You can use our edit by device features to accomplish this, and serve your visitors content that is appropriate for the device they are accessing your website from.

Guide

When making edits to a specific device, it's often necessary to switch views. To learn how to do this, go to Switching Views.

View information bars

Some widgets and features may only appear on certain devices. To change the style of a widget on a certain device, switch to that device view and then make your change.

editbydevice1_en-US.png

Rows & General Changes By Using Hide-on-device

Almost everything in the editor, with the exception of the header and footer, can be edited on a per-device basis by making the content specific to that device. To do so:

  1. Copy the content that you would like to be device-specific. (Right-click the widget, click 'copy', then click 'paste'.)
  2. Right-click on one of the widgets, select 'Hide on device', then select the device where you want the widget to be hidden. For example, setting a button to 'Hide on Desktop' will remove the button from the desktop, but will still be shown in the tablet and mobile website.
  3. Click on the original content and select 'Hide on device', then hide the content on the device(s) on which you don't want to change this content. For example, if you set your copy button to 'Hide on Desktop', you would set the original button to 'Hide on Tablet' and 'Hide on Mobile'. This way, you will have two different buttons; one showing on your desktop and a different one showing on your tablet and mobile.
  4. If you want the content to be different on all three devices, you can copy it again (so you have a total of three copies of the same content) and have a different button displayed on each device.
  5. Once you've followed these steps, you now have two (or three) identical but different pieces of content, each displayed on a different device. Any further changes made to this content will only affect the device on which it's set to show.editbydevice2_en-US.png

Header Logo or Title

The header logo or title can be customized by device, per your choosing. While editing the tablet or mobile views, there is an option to enable or disable the ability to customize the title by device.

editbydevice3_en-US.png

Edits That DO NOT Affect Other Devices

There are several edits in the editor that can be changed without affecting mobile. These are:

  • Spacing (Margins and padding)
  • Positioning
  • Width
  • Height
  • Site/Page background
  • Font size (it will not affect text that has been edited in mobile before)

Every other edit you make in the each device view will affect other devices. 

Besides the list above, there are other edits that you can make to settings without affecting other devices too. Just look for the "Edits only affect this device" icon in the editor - see below:

2018-05-17_16-52-50.png

Widget Specific Changes

While some widgets work fine across all devices, there are some drastic differences between devices which creates a need for a different set of features or design preferences per device.

Below is a list of widgets with design suggestions and notes for tailoring certain widgets on certain devices.

Background Images

Due to drastic differences in aspect ratios between devices, it's important to take special care with how you design images in your website.

For example, a full page background on a row might look great on a desktop device, but horrible on a mobile device. This might be because desktop devices are more suited to larger width images, while mobile is the exact opposite.

background_picture.png

You can set a different PAGE background per device in the global design settings. It's recommended to use a wide background image for desktop, and a narrow one for mobile or tablet.

Slider Widget

As with the background image, the images you selected for the desktop version of the slider widget may not look as great for tablet or desktop. It's recommended to either:

  • Adjust the frame size for the slider to fit on mobile or
  • Hide the slider on desktop, and create a version specifically for mobile instead

Images and Icons Widget

The image widget's size is not automatically adjusted in the mobile version. It's important to check your mobile devices where the image widget is used to make necessary adjustments to fit.

Hover Effects on Tablet/Mobile devices

Compared to desktop devices, tablet and mobile devices do not have a hover effect at all. Any "hover" layout or option is disabled on tablet/mobile devices.

Maps Widget

The Map widget has device specific options for when it will show as a button or a map.

Contact Forms Widget

Contact forms will always appear one input per line on mobile.

vCita Widget

The vCita online scheduling widget has an option to only show a button, on the device of your choosing. 

Considerations

When editing device specific widgets, remember to check all views before publishing your website. Widgets can be easily misplaced when using the 'Hide on Device' option.  

For more information about switching views, read this article.

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!