Device type
About content customization according to device type
Studies have shown that user behavior is different on mobiles, tablets, or desktops. With If-So’s device type condition, you can easily optimize your website’s content experience for each device. You can choose to replace some of your page content, replace the whole page, or add new content on certain devices only.
Adaptive design solution
Unlike responsive design, If-So’s solution is a server-side solution. This means that the content you set to be displayed on certain devices will not be loaded on others. This results in faster page loading, and a convenient way to manage and optimize content.
Which content can be customized using the device type condition?
Same as with all of If-So’s dynamic triggers, any of the website’s content can be customized. This includes titles, texts, images, calls to action, buttons, and more.
How can your site benefit from device-based content?
Usage examples:
- Display a click to call button on mobile devices, and a phone number on desktops.
- Combine with the schedule condition: show mobile visitors a click to call button during opening hours, and replace it with a contact form when the business is closed.
- Prevent the loading of sliders and other long loading content on mobile devices.
- Create a whole different version of your homepage (or any other page) and redirect mobile visitors to the new, optimized page.
Possible Use Cases
Display a click to call button on mobile devices
Suggest downloading the right app for the user’s device
Redirect mobile visitors to a new page
If-So’s device type condition can be used to redirect mobile visitors to a new page. The following JavaScript code creates an auto-redirect to a page of your choice (make sure to replace http://www.example.com with the URL of the page you want to redirect to). To create the redirect on mobile devices only, create an If-So trigger with a Device Type condition, and paste the code into the relevant content field (See step by step instruction below).
<script>
window.location.replace("https://www.example.com");
</script>How to set up device-based content
- On your WordPress dashboard, go to “If-So → Add New Trigger
- Click on “Select a condition” and select “Device“.
- Check the device (or devices) you would like to display customized content on.
- In the content field, set the content to be displayed on the devices you have checked.
- In the default content field, set content to be displayed on the devices you have not chosen (optional, can be left blank).
- Press “Publish” and paste the shortcode generated by If-So in your website.
- Download and activate the If-So Dynamic Content WordPress plugin and the Conditional Elementor elements integration.
- In the Elementor editor, select the element you want to display based on device type.
- In the element settings panel, go to the If-So tab.
- Choose the Device condition and check the device (or devices).
- Click Publish to save the page.
- Download and activate the If-So Dynamic Content WordPress plugin.
- In the Gutenberg editor, select the block you want to display based on device type.
- In the block settings sidebar, open the If-So Conditions panel.
- Choose the Device condition and Check the device (or devices).
- Click Update to save the page.
Screenshots
FAQs
- Does If-So work with caching plugins and server-side caching?
Yes.
Whether you are using a caching plugin or server caching, you can navigate to the plugin settings and enable the “Page Caching Compatibility” option.
With the option enabled, dynamic triggers will be rendered in a separate request that will take place after the loading of the cached version.
- Is it possible to set up conditional redirects (redirecting users to different pages based on conditions)?
Yes, you can set up conditional redirects based on any If-So condition.