FOR VERSION 3.0.9 OR EARLIER ONLY
Installing WordPress and uploading Semplice is not a part of this guide.
1. Where to Find What
Please make sure to follow these links:
→ WordPress Installation
→ Upload & Install Semplice
First we are going to head into the WordPress dashboard, if you have installed & activated the theme in Appearance → Themes will you automatically get all the Semplice options within your WordPress backend.
In the left corner you will see Semplice, this is where you can find all the general settings.
General Settings → General styling settings
Basic Styling → Basic styling settings
Typography → Typography for your overall page
Thumb Hover → Default thumbnail mouseover for the Portfolio Grid
Social Networks → Implementing your Social Networks
Most of the settings are pretty much self-explanatory.
Everything else which is a part of Semplice, you will also find in the navigation on the left.
Custom Fontset → Here you can add custom fonts (Video)
Navbar & Menu → Create custom navigations bars which you can assign to each particular project. (Video)
Pages → Every page you add will also be created with the Content Editor and all it’s functions.
Portfolio → Add new works, they will be created with the Semplice Content Editor
(You will find more about, how to create your first project at step 4.)
Besides that, all the other WordPress functions are still working as they used to be.
2. The Grid System, and Creating the Homepage
Semplice is based on a 12 column grid system, which means you can arrange anything within 12 columns. The 12 column grid is exact 1170px wide, but you can also use a fluid grid which will always be edge to edge with the browser.
Before we add our first content we will need to create a homepage.
The homepage is the first page you will see if someone enters your website.
To do that please navigate to Pages → Add New to add a new page. After you gave your new page a title (examples: 'Homepage', 'Work', 'Showcase') just hit save.
Once you saved your new page, navigate to Settings → Readings. Now Select A static page at the Front Page Displays setting and then choose the page you just created as your new Front page from the dropdown. Your Homepage is now ready and set up! Let’s enter the Content Editor of your new homepage, just click on your page, navigate to the Content tab and hit the big + to enter the content editor.
3. The Content Editor
You now launched the Content Editor and as you can see you have a toolbar of all the tools available on top, they are all pretty much self-explanatory.
The great thing about the Content Editor is, that it’s not a template.
If you already have an idea, that’s already designed in Photoshop or sketched down, and now you just want to execute it.
This is where Semplice come in.
I’ve created a quick layout that I want to create, I already used the PSD grid template for that, but of course you don’t have to do that, it will just help you in the process.
→ Layout Image without grid
→ Layout Image with grid
So I have a headline, an image with some text next to it, and a 3 column image layout below. Let’s execute that in the Semplice Content Editor.
So the first thing I’ll add, is a paragraph. (My ‘Headline’)
You will have several basic paragraph styling options, like alignment, font-size, font-weight etc. I also added some padding, so my paragraph will not stick to the top.
Now I want to add an image and next to it some text, to do that we will need the multi-column module.
I have several options now, but I will add a new column first. Within this first column, I’ll add an image. Then I add a new column and add my text to a text-module. I can now change the width of the columns and the content inside will automatically change with it.
If I take a look at my layout with the grid I can actually see how wide my image and text need to be. The image is 4 Col wide, and the text is 7 Col wide with an offset of 1 Col.
The same for the 3 column image layout below, I will just need three 4 Col wide columns, each with an image inside.
4. The Portfolio Grid & how to add your first project
We successfully created our first page and added some content, but now we want to create a new page for our projects. Let’s take look at a quick layout I have in mind for my portfolio grid, always having the 12 Col grid in mind.
Each portfolio thumbnail will be automatically linked to it’s own project page.
So first of all we will need to create our first project.
Please navigate to Portfolio and hit Add New Work.
Let’s give it a name and a category first, then hit the Thumbnails tab.
Now we can select the ‘Thumbnail Width’, a range from 1 to 12 columns wide wide, the height get will automatically calculated depending on the original size and ratio of the image.
So you can upload your image and change the width as you like.
If you scroll down to Thumb Hover you can enable the custom hover settings for this particular thumbnail. If this is disabled it will use the basic thumb hover settings defined at Semplice → Thumb Hover.
You can also add a full width thumbnail image for this project if you want to create a full width thumbnail. You will find more Informations about the Branding and Fullscreen Cover tab in Step 5.
So our thumbnail is set up, if you now navigate to the Content tab you can enter the Content Editor and add content as usual (this is the page where the thumbnail link will bring you, your project page).
If you take another quick look at my layout you will notice the gutter between the thumbnails, this 30px gutter is the standard gutter between every column, you can remove it later if you add the Portfolio Grid module.
To add the Portfolio Grid to your page, just navigate to the Content Editor and hit the Portfolio Grid icon, you will not have several options, like removing the gutter or use full-width thumbnails.
5. Page Settings
If you create a new page or work you will have several tabs, here is a quick overview:
Semplice → You can select if you want to create a page with Semplice (Content Editor), the standard Wordpress WYSIWYG editor or if you want to create a ‘Cover Slider’.
Branding → Define custom footers & navbars and other branding related option, at the bottom you will also find a ‘Custom CSS’ field just for this specific page.
You will find a separate tutorial for Custom Navbars here.
Fullscreen Cover → If you want your page to start with a Fullscreen Cover, you can add and customize it here. The ‘Cover Slider’ will also grab it’s images from this settings.
Share → By default you have a ‘Share Box’ at the bottom of the page, here you can add the title and image that will be displayed on the social media platform.