Design a Mobile Website and Adapt for Desktop

A colleague (I won’t name him but he knows who he is) has decided to bite the bullet and begin redeveloping a site using Elementor and GP (he can’t keep paying me even if it is only in red wine).

We picked up on a comment designing for mobile first. I think “Design a Mobile Website and adapt for Desktop” is the watch word from now on. 

An idea occurred to me that others may have had but said nothing. When designing a site it can be troublesome to get the header to look good on both a mobile and desktop. With Elementor Pro (or just Elementor and Anywhere Elementor) and GP pro Hooks (or Actions Hooks) there is any easy solution. Create a header_page with two sections; section 1 designed to be the mobile header and only visible on a mobile, section 2 designed to be a desktop header and hidden on a mobile. Saved as a template and inserted as a shortcode into “hooks” and Tada! a header that looks good in any environment.