How to create a one-page portfolio with Semplice

by Terri Lee
Published Dec 4, 2018

A tutorial for designers or studios that want to create an elegant and interactive one-page portfolio or landing page using Semplice.

Today we’d like to walk through the steps of creating a one-page site using WordPress-based Semplice as the tool. This will be the final result.

Whether you want to showcase your work, create a landing page for a client or build a simple product site, Semplice makes it easy – and fast – to create a beautiful one-pager. Let's begin.

Part 1: Setting up the basics

First, you need to configure your site in Semplice and set up your grid. Decide what grid width and padding you’d like for your site. You can always change this later and your layouts will automatically adjust.

Find your grid settings under the Customize section in Semplice.

Next, add any custom fonts you want to use for your site design. Upload your fonts through WordPress and then navigate to Customize > Webfonts in Semplice to retrieve font paths, install your fonts and add them to your stylesheet. Find a full guide for webfont set-up here.

Semplice allows you to use your own webfonts or self-hosted fonts and set site-wide stylesheets.

Part 2: Creating the page layout

Now you can start creating your page layout. Our goal in this case was to lead with a clean yet immersive header. For a full-screen header image, click Cover in the menu, choose “Visible,” and upload an image or video. For the sake of this portfolio, we used an image and added text introducing the photographer.

Add a full-screen cover with a background image or video.

Now create your desired layout by adding images, galleries and text to the page. Your layout can be mocked up in Photoshop of Sketch, for example, or designed straight within Semplice. All elements can be easily laid out within a live view using drag and drop. We went for a minimalistic design in this example, making use of whitespace and a random grid design. All images were added directly from Unsplash.

Select from thousands of free Unsplash images directly from Semplice.

To increase padding, margins, font size or other elements, just click the element and drag your mouse up or down over the related style or setting. All adjustments will appear in the live content editor as you make them.

All adjustments can be made in the Semplice content editor with a simple click or drag & drop.

Here you can resize elements according to the grid you set in Part 1. Multiple alignment options and drag & drop spacer columns make it easy to adjust every element to your liking.

Adjust your image on your grid by clicking into the section.

All elements can be easily justified and aligned to match your design exactly.

Finally, the create a custom footer with your main calls-to-action. Here we added an e-newsletter sign-up integrating directly with MailChimp.

With Semplice, you have complete control over the style and content in your footer.

Now that the page layout is done, add some interactive motions and effects that bring it to life. Using the Motion feature, we added a subtle opacity and zoom effect to the Cover.

You can preview your animation live straight from the Semplice content editor.

You can then make each element appear smoothly as the page moves. To accomplish this effect, select the element, click into the Motions tab and choose “On Scroll” for the Event. From there, adjust the movement, speed and duration of your effect.

Set your animations to trigger on scroll, click, load or hover.

Next, make each image feel interactive with hover effects. Select the column, click into the Motions tab and choose “on Mouseover” this time for the Event. Here we set the easing to Linear and the duration to 400 milliseconds. Every image also opens in a lightbox for a closer view.

For the About Me section, we added a simple color animation, making the section background color deepen slightly on scroll. All animations and effects are added directly within Semplice without coding.

Subtle animations like this make your site feel alive and interactive.

Part 4: Optimizing for mobile

Now that the layout and custom animations are in place, optimize your page for each responsive breakpoint. By clicking the mobile icon in the top right menu, you can select each standard breakpoint and test all standard screen sizes from your desktop. Refine each view individually, adjusting text size, rearranging elements and even hiding entire sections as needed.

Click the mobile icon at the top of your dashboard to refine headlines and content for every breakpoint.

And we're done! Check out the live one-pager right here to see how it all fits together. I hope this tutorial was useful and you now have a solid understanding of how to put together a quick landing page in Semplice.

For more portfolio inspiration, visit the Semplice Showcase, or read our other portfolio tips on the blog.