Featured Story for mobile devices (Elementor)

For the Featured Stories we always use a large image. Once the Featured Story is created and added to the homepage, we need to take one additional step and that is to create a seperate block for mobile devices like tablets and mobile phones. Sometimes the large image does not look correct on mobiles devices.

This is a very simple action, takes a minute and goes as follows. Do this after you have create the featured story and added it to the homepage.

  1. Open the Homepage
  2. Below the Featured Story blok there’s a greyed out section with a title and a button. This section is greyed out because its only visible on tablets and mobile phones. This section is marked in red in the image below.

homepage

3. Right click this red section and click Edit Section.

4. On the left, the Section Sidebar appears with three tabs, Layout, Style and Advanced. Click the Advanced tab.

5. Click > Responsive and view the Visibility box. See the image below.

6. Click the Hide On Desktop button to make the section also visible on Desktop (Show). Now you see on the right that the section is no longer greyed out.

7. Now you can update the Title and change the link on the button to point it to the new Featured Story page.

8. When updated, right click the section again, click Edit Section go to the Advanced tab, go to > Responsive and switch the Hide On Desktop button back. The Section will be greyed out. If you don’t do this, the section will also appear on Desktops.

9. Save the page by clicking Update at the bottom of the left sidebar. Now check Check the homepage on Desktop and a mobile phone or tablet. Make sure to refresh your screen.

Was this article helpful?

Related Articles