Hide Elements

Customize your web page while it is being displayed in your app.

7MB

How to Hide Website Elements in App _ No Sweat with Twinr.mp4

In this section, you can hide the unwanted elements(like footer) from the website which are not important to show in the mobile app. These settings won't affect your actual website. It will be applied only when your web page is being displayed in your mobile app.

Hide elements from the Mobile App

This will allow you to hide any webpage element dynamically from the page.

Example : Here I want to remove the header portion from the mobile app. Shown in red box. Remember that it will be just removed from mobile app. The website will still look similar.

• Element's identifier: Here you need to enter the HTML tag selector that you want to remove from the web page. Let's take a look at an example of the following code snippet which is going to hide above red highlighted section. You need to search it by doing right click on the webpage and click on inspect element.

<div class="vc_row wpb_row vc_row-fluid vc_custom_1547458063113 et_custom_uniqid_62e44448d64de">
<div class="wpb_column vc_column_container vc_col-sm-12 et_custom_uniqid_62e44448d6349">
<div class="vc_column-inner"><div class="wpb_wrapper">        
<link rel="stylesheet" href="https://ecommercely.twinr.site/wp-content/themes/xstore/css/modules/builders/et-slider.min.css" type="text/css" media="all">
<style>.slider-4881 .et-loader:before{background-color:#f7f7f7}</style>

For example, you want to remove <div> tag from your web page only while its being displayed in your mobile app. You need to find out class or id property of that element. In our case, here we have class property available. So, we can use body as our element's identifier. So, all the elements with the body class name will be removed from the web page.

Here, the associated class for the header is vc_custom_1547458063113 which looks unique to the div. You can try to remove from inspect elements page too to see if it is really hiding it. Or you can always see it in out preview app.

If you are using class property then enter .body or if using id property then enter #body in the Element's identifier field. So, make sure you append . at the start if using class and # in case of id property.

Here I am giving it as below.

This is how you can remove some element from the web page. If you have any issue and need help then don't hesitate to contact our support.

Example of elements

What you find in website inspect code	What you have to put in element identifier
<div class="wp-header">...</div>	.wp-header
<div id="wp-header">...</div>	#wp-header
<header>...</header>	header
<div class="any non unique element" data-block="section1_sub">...</div>	[data-block="section1_sub"]