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.
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.
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.
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.
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.
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.
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.
Part 3: Refinements and animations
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 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.
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.
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.
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.