For this demo, I created a tongue-in-cheek team member page, with a photo and bio for the profile of each “staff member”. For desktop, we want to alternate each layout, photo left / bio right, photo right / bio left for each member. We also want each profile to fill the entire viewable area of the browser, with no scrolling necessary.*
This is what our final goal looks like, which you can view as a complete demo here:
Before we begin, I’d like to mention that the demo I created is filled with puns. I hope you get a chuckle or two out of the team members’ bios when you read them. How many puns and hidden references did you find in the team profiles?
As you can see, each profile completely fills the screen, and clicking a profile’s arrow icon, smoothly scrolls to the next profile.
For mobile, we’ll let the profiles go responsive, with photo above the bio, and we’ll sometimes have to give up the ability to have each entire profile fill the viewport. We’ll explain why later.
First, let’s focus on the desktop.
We’ve created a fictional company called Punny Money, Inc., and our management team consists of nine team members. Each team member’s profile consists of a 2-column section. The profile column is 28.5% and the photo column is 71.5%. (You’ll choose the best column sizes based on your own needs, which may differ depending upon the size of your images, length of text, etc.).
We created the first section with the bio on the left and photo on the right. Then we duplicated that section and reversed the columns for the next staff member. We repeated the duplication process until all 9 staff members were shown.
For best results, we chose our photos carefully, making sure they were all similar in tone, aspect ratios, etc. Since we chose random photos from stock photo sites, this was a little difficult. If you are taking photos of your staff members, you have more control. I recommend taking photos of each person in the same location, from the same distance, with the same camera settings.
Set Fit To Screen
Once all the text and images were added to each section, it was time to enable each section to fill the entire desktop screen’s viewport.
Right-click to edit each section, and set the Layout > Height to Fit to Screen. Note that your actual content in the columns may not fill the screen, but the section itself will. You can verify this works by giving your sections a background color as we did, so you can see that the section color fills the screen.
Adjust For Mobile
Fit to Screen is the same as using CSS “height: 100vh”. This works great for desktop, but on mobile, the content often overflows the section’s height with this setting. So on mobile, we’ll switch the section’s Fit to Screen height to use min-height of 100vh instead. This allows the section to grow with the content, but then of course, the section is no longer exactly the same height as the viewport, so scrolling becomes necessary. While this may not be ideal, it is the best way to handle responsive mode and mobile screens at this time.
Tip: vh stands for “viewport height”, which is the viewable screen’s height. 100vh would represent 100% of the viewport’s height, or the full height of the screen.
I also adjusted the font size for each of the sections’ Headings and Text. Both needed to be a bit smaller to fit into the limited mobile space. Don’t go too small, though! You don’t want to hurt usability or accessibility.
Set Smooth Scrolling Named Anchors
Next, we’ll go to each section’s Advanced tab, and assign a unique CSS ID to each section. This will enable us to target our arrow icons to click through to the top of the next section. To do so, we simply link the arrow icon to the next section by using the #cssid format in the icon’s link field.
For example, to link Mortimer Monkey’s arrow to Penelope Peacock’s profile, just enter #peacock in the arrow’s link field. Since Penelope Peacock’s section has a unique CSS ID of “peacock”, clicking Mortimer’s arrow icon will automatically bring the user to Penelope’s profile.
Continue adding profile links to each successive arrow icon, and then on the last arrow icon, enter Mortimer’s link. This will bring users back up to the top of the page to Mortimer’s profile.
Some Mobile Columns May Need Adjusting
Now let’s see what happens when we switch to Mobile. In some cases, the alternating bio/photo columns may be backwards, so in that case, while in Mobile, just reverse the columns on the sections that are opposite of the way you’d like them to be. To do that, simply edit the sections that need adjustments, go to their Advanced > Responsive tabs, and switch the Reverse Columns (Mobile) to Yes.
That’s all there is to it! We hope you enjoyed the tutorial. This demo is just one of the creative ways to use Fit to Screen. I hope it inspires you to create your own fun designs! View the live demo page here
* Filling the viewport doesn’t work well when a sticky header or footer is used, as the sticky element lays on top of the content, obscuring some of what you likely want to be viewable.
On the live demo, I’ve included an Elementor popup overlay screen, that is triggered on page open. This popup is designed to overlay the page and gives a short intro of what the page is all about. Here’s what it looks like:
Here are the instructions for creating that popup.
First, you need to have Elementor Pro to create popups. If you aren’t yet using Elementor Pro, you are really missing out on incredible features. Popups are just one small part of what you get by going with Pro.
(Full Disclosure: I work for Elementor).
Okay, on with the bonus tutorial. Creating this overlay popup is a three-step process.
STEP ONE – Popup Settings
Go to Templates > Popups > Add New. Give your popup a name and click the Create Template button. Adjust the popup settings as you please. These are the settings I used:
Popup Settings > Layout:
The options I set were:
Width: 100vw (not px)
Height: Custom > 100vh (not px)
Content Position: Top
Horizontal Position: Centered
Vertical Position: Centered
Close Button: Show
Entrance Animation: Zoom In
Popup Settings > Style:
Go to the Popup Settings Style tab, open the Overlay tab, and adjust the color of the Overlay. I wanted some transparency but not much, so I brought the transparency slider down just a little.
Now we move on to step 2.
STEP TWO – Popup Content
You have a lot of leeway here. This is your chance to be as creative as you want to be. What you put as your content, and how you design it, is completely up to you and your goals. I simply wanted an overlay that gave an idea of what this demo was all about. I added one headline and one paragraph of text, adjusted font size and color, and considered it done.
STEP THREE – Popup’s Publish Settings
- Set Display Conditions to Include > Singular Pages > Page > choose the page to use this popup on
- Set Triggers to On Page Load within 0 seconds > Yes
To see the overlay in action, check out the demo.