Twinr Builder Resources
  • 🙌Getting Started
    • What is Twinr?
    • Fun Fact
  • 📱Create App
    • Create App from Template
      • Blank
      • E-Commerce App
      • News App
      • Restaurant App
  • 👥Organization
    • Create Organization
    • Invite Members
  • 🖥️Dashboard
    • App Dashboard
    • Preview App
    • Delete App
  • 📲Setup Branding Info
    • App info
    • Launch screen
    • App Permissions
      • Camera Permission
      • Photo Library Permission
      • Microphone Permission
      • App Tracking Transparency
      • Location Permission
      • Read External Storage
    • App Settings
      • Enable portrait only mode
      • Prevent App Sleep
      • Enable/Disable iPad Support
      • Customize Minimum Android Version
  • 🎨Setup Theme
    • Overview
    • Bottom Tab bar
    • Navigation bar
      • Button setting
    • Status bar
  • 📲Screen Customization
    • External URL Handling
    • Apply Custom CSS
    • Apply Custom JavaScript
    • Hide Elements
    • Page Refresh
    • Login
      • General
      • Login Page
    • Tab bar(Bottom tabs)
      • Add New Screen
      • Delete Screen
      • Rearrange Screen
      • General
      • Navigation Bar
        • Navigation Bar Title
        • Navigation Bar Buttons
          • Back Button
          • Linker Button
          • Cart Button
          • Custom Button
          • Hamburger Menu
          • Native Link Sharing
          • Native Notification Screen Button
      • Tab Screen - External URL Handling
      • Responsible URL
      • Tab Screen - Hide Elements
      • Tab Screen - CSS
      • Tab Screen - Scripts
  • 🛠️App Configuration
    • Add New Configuration
  • 🔗Extensions
    • Overview
    • Page Loader
    • Pull to Refresh
    • Custom User Agent
    • Custom Fonts
    • Cache Policy
    • No Internet View
    • App Review
    • App Onboarding
    • Multi Language
    • In-App Purchase (IAP)
      • iOS In-App Purchase (IAP)
      • Android In-App Purchase (IAP)
    • Deeplink
    • Force App Update
    • Account Delete
    • Dynamic Titles
  • ⚙️Integrations
    • Overview
    • Firebase Push Notification
      • Enable Push Notification
      • Send Push Notification
    • Push Permission Reminder
    • Personalized Push Notification
    • Abandoned Cart Push Notification
    • Native Notification Screen
    • AdMob
      • Create Android & iOS Apps
      • Create Ads on AdMOb
      • Setup AdMob Integration
    • Firebase Analytics
      • Auto Tracked Analytics
      • Custom Analytics
      • How to check Analytics in Firebase?
  • Plugins
    • Overview
    • WooCommerce
    • Shopify
    • Preshtashop
  • Engage
    • Overview
    • Engage Dashboard
    • One Time Campaigns
    • Event Triggered Campaigns
      • Order Created
      • Order Status Change
      • Product Created
      • Product Re-stock
      • Product Out-of-stock
      • Product Low Stock
      • Coupon Created
    • Welcome Push Notification
    • Inactivity Push Notification
  • 📊App Analytics
    • Overview
    • Acquisition & Retention
      • Number of Sessions
      • Number of Unique Sessions
      • Daily Active Users
      • Total App Sessions
      • New App Sessions
      • Session by Platform
      • Average Session Length
      • Session by Devices
      • Retention
    • Revenue
      • Sales
      • Orders
      • Total Revenue - Current vs Previous Period
      • Total Orders - Current vs Previous Period
      • Revenue by Device
      • Average Order Value by Device
      • Order by Device
      • Orders by New vs. Returning Users
      • Top 10 Popular Products
      • Promo Code Revenue vs Revenue
  • JS Bridge
    • What is the JS Bridge?
    • AdMob Interstitial Ad
    • Change App Language
    • Push Notification - Device Token
    • Request Account Delete
    • Native Datastore
  • 🚀Publish Apps
    • Publishing to the Google Play Store
      • Setup Android Signing Information
      • Get Android Build File
      • Create Your Google Developer Account
      • Setup your App on Google Play Store
      • Submit Your App to Production
      • Reset Android Signing Key
    • Publishing to the Apple App Store
      • Create Your Apple Developer Account
      • Setup Annual Payment for your Apple Developer Account
      • Create Your Apple Bundle ID
      • Setup iOS Signing Info
      • Get iOS Build File
      • Add Users to Your App Store Connect Team (Optional)
      • Add Users to TestFlight (Optional)
      • Submit Your Build to The App Store
  • 👤Twinr Account
    • Change Password
    • Billing & Payments
    • Invoices
    • Update Payment Method
    • Enable 2-Step Authentication
  • 👩‍💼Support
    • Contact Support
    • On-demand Services
      • End-to-End App Solution(All Inclusive)
      • App Development
      • App Publishing
      • App Screenshots
      • Login Script
      • Push Notification Setup
  • 🤝Partnership & Earnings
    • Twinr Partnership Model
    • Agency Plan
    • Become an Affiliate
  • ❓FAQs
    • Subscription
    • Preview your App
    • App Customization
    • Build APK & IPA
    • Publishing App
Powered by GitBook
On this page
  • Hide elements from the Mobile App
  • Example of elements

Was this helpful?

  1. Screen Customization

Hide Elements

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

PreviousApply Custom JavaScriptNextPage Refresh

Last updated 1 year ago

Was this helpful?

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"]

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