This post is a must read for anyone wishing to edit the styling of this site. Or if you’re just interested in how it was built. Liberte has been built using only three plugins. Elementor, WP Show Posts and GP Social Share. All of which are the free versions. The site uses GeneratePress theme settings for the Container Width, Site Header, Navigation, Typography , Site Info (footer), Blog and Single Post. We have disabled the Default fonts and colors in Elementor > Settiings to pass control to the Theme.
Page Builder Layout.
Our landing pages are constructed using Elementor. For this we need a full width container with no padding. We however want to keep our Site Header and Site Info as well as our GP Hooks. But we’re not using the Elementor Canvas or Full Width Templates. Instead we use the GeneratePress layout element for greater control.
Go to Appearance > Elements to see the Page builder layout element. Within here we have deactivated the Title, Featured Image and set our Page Builder container to Full Width. This applied to All Pages and My Templates. The latter being any Elementor templates you create.
This means all new pages will be created using this layout, if you wish to create a page using the standard theme layout then simply edit the layout element and exclude that page in the display rules.
Landing pages
The landing page is constructed using Elementor. There is a little CSS, of course. Firstly is what i like to call the sketchy borders. Most noticeable in the hero image. We will cover that in more detail. Then we have a reduced float up animation being used on our buttons. Finally a simple CSS grid to re-arrange the WP Show Posts ( and the blog ). Let’s begin by taking a closer look at the hero image.
Hero Image
At the top of the Front Page and Contact Page is the hero image. It is constructed using a nested section with a background image. This is how it breaks down:
- The parent column contains our background image. The image is 450px x 800px ( 9:16 ratio ).
- The parent column has a border added with a transparent color. It also has a Custom Class of: sketchy-border-swap
- The nested Section with that column has a minimum height setting. Its what defines the height of the image.
- Within the nested section there is a single column. This contains a spacer widget. Without it the column border will not display. It too has a border with semi opaque color and has a Custom Class of: sketchy-border
- We have applied a little negative margin to the nested section column to create the offset effect.
Sketchy Border CSS
Here is the CSS being used to create out two versions of the sketchy border:
.sketchy-border,
.sketchy-border > .elementor-widget-container,
.sketchy-border > .elementor-column-wrap,
.sketchy-border > .elementor-widget-container .elementor-button {
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
}
.sketchy-border-swap,
.sketchy-border-swap > .elementor-widget-container,
.sketchy-border-swap > .elementor-column-wrap,
.sketchy-border-swap > .elementor-widget-container .elementor-button {
border-radius: 15px 225px 15px 255px/255px 15px 225px 15px !important;
}
You can apply either of the classes to a Column or a Widget. Within Elementor you can control the border thickness, color and which sides you want it displayed on. Like the hero image the buttons also have two borders. This is done by giving the button one of the classes. Then set your first border in the Buttons > Styles tab and the second border in the Buttons > Advanced tab.
Removing sketchy borders simply requires you to remove the above CSS from the customizer. Good house keeping should also involve removing the classes from the widgets. Or replacing them altogether.
Float animation reduction CSS
I find the Elementor animations are not subtle enough. The float animation would normally shift by 8px. Thats way too much for my liking so i have made it 3px.
.elementor-animation-float:active,
.elementor-animation-float:focus,
.elementor-animation-float:hover {
transform: translateY(-3px);
}
WP Show Posts and the Blog
WP Show Posts is one of my fav plugins. Super lightweight and powerful to display any post type it has been added to our landing page using a shortcode. You can configure the WP Show Post list from the Dashboard > WP Show Posts and edit the Latest posts list. You can find out more about WP Show Posts here.
The list has been set up to display the 3 latest posts and with the same meta and excerpt set up to match the main blog.
The post grid
We use this very simple CSS Grid to apply the post layout you see – the grid columns are set to match those set in the Elementor columns used on our landing pages:
@media (min-width: 600px) {
body:not(.single):not(.page) .inside-article,
.wp-show-posts-inner {
display: grid;
grid-template-columns: 30% auto;
}
.post-image,
.entry-summary,
.wp-show-posts-image {
margin-top: 0;
margin-bottom: 0;
}
.post-image,
.wp-show-posts-image {
grid-column: 1;
grid-row: 1 / 4;
margin-right: 2em
}
.entry-meta {
grid-column: 2;
}
.post-image img,
.wp-show-posts-image img {
-o-object-fit: cover !important;
object-fit: cover !important;
height: 100% !important;
vertical-align: middle;
}
}
Theme General
The Theme is responsible for the Site Header, Navigation, Typography , Site Info (footer), Blog and Single Post. All of this is controlled by the Theme Customizer.
Site Header
The site uses the Site Title which is set in the Customizer > Site Identity. From here you can also choose a logo if you want. The Mobile Header option is also selected which has its own option for setting whether to display Branding or Logo.
Colors
For the desktop our Site Header colors are set in Customizer > Colors > Header. For our Mobile header it uses the colors set in Customizer > Colors > Primary Navigation.
Navigation
The navigation is set to float right of the Site Header. It defaults to the standard GP Mobile menu for smaller screens. Although the colors are set in the Customizer there is a little CSS that ‘dims’ the out of focus nav elements when hovering over a menu item. This is the CSS:
.main-navigation ul:hover li:not(:hover) a {
opacity: 0.5;
transition: opacity 0.3s;
}
Site Info
You can update the Site Info from the Customizer > Layout > Footer. It is within here that we have also removed the footer widgets.
Blog
The blog meta data and excerpt length is set in the Customizer > Layout > Blog. The particular layout you see on desktop is controlled by the CSS provided above ( see WP Show Posts and the Blog ). The spacing between the content elements ie. Title, Post Image, Summary and Meta is set in the Customizer > Layout > Container –> Content Separator.
Container Width
Our container width for our Blog is being controlled by a little CSS. The Customizer is set to 1100px with 40px of padding. But we wanted to align our image with our site title. So this CSS is required:
.container.grid-container {
max-width: 1180px;
}
If you wish to change the container width or padding in the customizer then you will need to edit this CSS. Simply add the container width (1100px), left padding (40px) and right padding (40px) and change the max-width in the CSS above.
Please note, in GeneratePress 2.3 this CSS will not be required as a new customizer option will allow you to do this.
Single Post
Container Width
For improved readability we are using the Layout Element to reduce the width of the container on the Single Post. You can change this by editing the Content Width in Appearance > Elements –> Post Layout –> Content tab.
All our Posts are built using the Gutenberg Editor. If you wish you can install the Classic Editor instead. You can also use Elementor although i advise against using a Page Builder to write posts. Each of our posts displays a Featured Image which is set from within the post editor in the settings sidebar.
H2 top margin
For clearer separation between our main headings we have used a little CSS:
.single-post .entry-content *+h2 {
margin-top: 60px;
}
Floating Social Share icons
The social sharing icons are provided by the GP Social Share plugin. You can edit and style them from Appearance > GP Social Settings. The plugins shortcode has been added to a Hook Element within a separate container. This CSS is what allows them to float to the left of the post:
@media (min-width: 840px) {
.floating-container {
display: block;
position: sticky !important;
position: -webkit-sticky !important;
top: 80px;
height: 0;
}
#gp-social-share {
top: 1em;
flex-direction: column;
left: -50px !important;
}
}
Author Box
Making more use of the Hook Element we have constructed a simple author box. It requires a little CSS and is where you would need to go to change the background color:
.author-box {
padding: 4%;
margin-top: 60px;
font-size: 0.8em;
background-color: #fff8f7;
display: flex;
flex-wrap: wrap;
}
.author-links a {
font-size: 3em;
line-height: 0.5em;
float: right;
margin-top: -10px;
}
.author-box .avatar {
width: 30px;
border-radius: 100%;
margin-right: 20px;
}
Footnote:
We’ll i hope you enjoy Liberte and that this post has answered most of your support topics.
