SUPER-DUPER IMPORTANT: Make sure you are pasting that line in Text or Code mode OR ELSE THIS WILL NOT WORK!!! Step 2 – The Magic CSS so you can show and hide different content on different devices Your screen (if you are using WordPress) should now look something like this: In the example above I’m just using a one simple sentence but you can put ANYTHING in between the two opening and closing div tags (like photos, headings, youtube videos, galleries, etc…). Just by looking at that you should be able to tell that the top block will be for the DESKTOP content and the bottom block will be for MOBILE content. This is the content that will display on MOBILE DEVICES. This is the content that will display on DESKTOPS. In Text or Code or HTML mode, copy and paste the below code into your web page / widget / post and then Save your changes: PRO TIP: You should really consider using a combination of WordPress and Beaver Builder! Step 1 – The Demo Content you created a website using some random WordPress theme or Joomla or Drupal etc… and you want to show and hide different content on mobile and desktop devices! No problem! To do that we just need to use some magic CSS! Note: Yes, this method will also work on ANY Beaver Builder or Dynamik Website Builder site… but follow those methods which use some of the built in features of those platforms. Just by using some simple CSS can easily show and hide different content on mobile devices and on desktops regardless of how your website was created. Method #1: Show and hide different content on ANY platform Using a combination of CSS and a few Dynamik Website Builder settings you can easily show and hide content. Method #3: The Dynamik Website Builder Method See how to use the built in Responsive Layout settings on any Beaver Builder module to show and hide content. Learn how to use a few snippets of CSS to show and hide content on any website regardless of how the website was built.
Method #1: The Universal Method (Works On Any Platform)
NOTE: This content is from our web designer training program That’s why you’ll find three different ways below to show and hide content depending on how your website has been created.Ĭlick the one below that best matches your website, clicking one of these will bookmark you down this page… or you can manually scroll down forever if that’s your thing. The first thing you need to understand is that there are MANY ways to show and hide content on mobile devices and desktops. You don’t always order the exact same pizza, so why display the exact same content on mobile devices AND on desktops? Here’s how to show and hide different content on mobile devices and desktops.
0 kommentar(er)
