2. Front Page
Front page is consisted of front page editor content and 2 widgetized content blocks. In the front page editor all kinds of content can be added and is also well suited for usage with page builder plugins.
2 widgetized areas can be combined in different ways and not all have to be used. Widget areas that you leave empty will not be displayed on the front page.
To start creating a front page you first need to create a new page and asign it to be your front page.
Navigate to the Pages and create a new page and name it (in the demo we named it "Welcome to Lolipop"). From the Page Attributes choose "Front Template" and click "Publish".
By default WordPress on the Front Page displays your latest posts.
If you want to set the page you created as your front page just navigate to the Settings » Reading and instead of the default "Front Page Displays: - Your latest posts" choose "A static page" and from the drop-down choose the page you created. From the Posts Page drop-down select a page you want to use as your blog page.
2.1 Page Content
Navigate to Pages and open the page you created earlier ("Welcome to Lolipop"). If you want to add content above the widgetized areas please add your content inside the editor and it will display on the front page beneath the navigation bar.
Content we added inside the editor is:
If you want to add the button anywhere on your website just copy and paste this code and instead of the "#" sign add your own link:
You can add for example slider instead of the featured image or both. Find more information about installation and use of Soliloquy slider here: Setting up the slider. You are free to use any other slider plugin.
If you leave the editor empty, page content will not show on the front page.
2.2 Front Page First Block
A. Background Image with Text
Navigate to Appearance » Widgets and drag and drop "Lolipop: Background Image with Text" widget inside the Front Page First Block widget area.
You can choose number of posts, category, and a different number of columns (one,two,three and four columns).
B. Promo Block
After that we drag and drop "Lolipop: Promo Block" to create that promo block with "Order Now" button.
C. Recent Posts with Background Image
Navigate to Appearance » Widgets and drag and drop "Lolipop: Recent Posts with Background Image" widget inside the Front Page First Block widget area.
You can choose number of posts, category, and a different number of columns (up to four columns).
D. Recent Posts
Now drag and drop "Lolipop: Recent Posts" to Front Page First Block.
You can choose number of posts, category, and a different number of columns (up to four columns).
E. Box with Text and Button
Now drag and drop "Lolipop: Box with Text and Button".
Add your own text, link url etc.
F. Recent Posts
Next drag and drop "Lolipop: Recent Posts".
You can choose number of posts, category, and a different number of columns (up to four columns).
*Of course, you are free to use any other widget and combine widgets in a way it fits your site.
2.3 Front Page Second Block
Navigate to Appearance » Widgets and drag and drop widgets inside the Front Page Second Block widget area.
In this widget area we added Lolipop Recent Posts widget, you can choose number of posts, category, and a different number of columns (up to four columns).
* The left sidebar will be displayed only if you add widgets inside the Front Page Second Block widget area .
* Front page consists of the page content you add inside the page editor and 2 different widgetized blocks. This gives you freedom to create different layouts. Using the Jetpack plugin feature - Widget Visibility you can create numerous different pages using the same "Front Template". Widget Visibility module enables you to configure widgets to appear only on certain pages (or be hidden on certain pages) by using the Visibility panel. Using this feature we created different front page versions in the demo to present the various options.
