Choose whether to display a section on a page to all visitors or only those using a specific device.

Kartra pages are mobile-friendly by design, meaning that the contents of a page will always adjust to fit the size of the screen someone is using to view it. You can use the view icons at the top of the page builder to see how your page will look for different screen sizes.

Optimize a page design for different devices

To fine-tune the design of a page and show different content depending on whether someone is visiting from a mobile device or a computer, you can add individual sections specifically for each device type.

  1. Go to Pages
  2. Open a page or create a new one.
  3. Add or locate a section you want to customize for different devices. Edit it until any content that should be displayed for all devices is complete.
  4. Clone the section. You will now have two copies of the same content block.
    • To create different views for desktop, tablet, and mobile, clone until you have three sections. Each section will have a unique ID number.
  5. Set the visibility for each section. Click the blue gear icon on the right side of the section, then click the pencil icon to edit.

    Edit a section to change device visibility
    • At the top of the configuration panel, select Hide.
    • All device types are set to “Show” by default. Click to set the visibility for the section – the section will show for any device that is “on” and highlighted in blue. The section will be hidden for devices that are turned “off” and grey.
    • Click Apply to save the configuration.
  6. Use the buttons at the top of the page to switch between desktop, tablet, or mobile view in the page builder. You will only see the section(s) configured to show for the device type you are viewing.

When the page is published, test your page by opening it on each device type. If changes are needed, use the device views in the page builder to see each customized section and update or delete it.

Updating the page

To edit a page with sections that are set to show or hide based on device, toggle between the device views in the page builder to see and edit each version.

Toggle between device views in the page builder

  • Switch to mobile view to see and update any sections set to show for mobile
  • Likewise, switch to tablet or desktop view to see sections configured for those device types

Pro tip

If you edit and republish a page but do not see the changes you made when looking at it from a different view, there may be a hidden section you need to update.

Open the page and switch between mobile, tablet, and desktop views. Check the page content in each view to ensure that any changes are made in each view.