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:

1. The parent column contains our background image. The image is 450px x 800px ( 9:16 ratio ).
2. The parent column has a border added with a transparent color. It also has a Custom Class of: sketchy-border-swap
3. The nested Section with that column has a minimum height setting. Its what defines the height of the image.
4. 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
5. 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.

Donec ac odio tempor orci dapibus ultrices in. Ipsum consequat nisl vel pretium lectus quam id. Ut aliquam purus sit amet. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Et egestas quis ipsum suspendisse ultrices. Sit amet luctus venenatis lectus. Interdum varius sit amet mattis vulputate enim. Faucibus et molestie ac feugiat sed lectus. Tincidunt augue interdum velit euismod. Tincidunt arcu non sodales neque sodales ut etiam sit. Porttitor lacus luctus accumsan tortor posuere. Etiam tempor orci eu lobortis. Netus et malesuada fames ac turpis. Posuere sollicitudin aliquam ultrices sagittis orci a. Feugiat vivamus at augue eget arcu dictum varius.

Varius quam quisque id diam vel quam. Magna ac placerat vestibulum lectus. Sed id semper risus in hendrerit. Turpis in eu mi bibendum neque egestas. Sagittis vitae et leo duis ut diam quam nulla. Ac orci phasellus egestas tellus rutrum. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Auctor augue mauris augue neque gravida in. Gravida in fermentum et sollicitudin ac orci phasellus. Purus viverra accumsan in nisl. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Arcu dui vivamus arcu felis. Et molestie ac feugiat sed lectus. Tempus urna et pharetra pharetra massa.

Tristique senectus et netus et malesuada fames. Elit pellentesque habitant morbi tristique senectus. Quam id leo in vitae turpis massa sed elementum. Malesuada pellentesque elit eget gravida cum sociis. Id aliquet risus feugiat in. Blandit massa enim nec dui nunc mattis. Vestibulum lectus mauris ultrices eros. Nunc non blandit massa enim nec dui nunc mattis. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Laoreet id donec ultrices tincidunt arcu. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Scelerisque viverra mauris in aliquam.

Semper risus in hendrerit gravida rutrum quisque non. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Urna porttitor rhoncus dolor purus. Tellus cras adipiscing enim eu turpis. Id ornare arcu odio ut sem nulla pharetra. Amet est placerat in egestas. Tellus at urna condimentum mattis. Vitae congue mauris rhoncus aenean vel elit. Tellus cras adipiscing enim eu turpis egestas pretium. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Quis enim lobortis scelerisque fermentum dui. Magna etiam tempor orci eu lobortis. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Sit amet venenatis urna cursus eget nunc scelerisque viverra.

Donec ac odio tempor orci dapibus ultrices in. Ipsum consequat nisl vel pretium lectus quam id. Ut aliquam purus sit amet. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Et egestas quis ipsum suspendisse ultrices. Sit amet luctus venenatis lectus. Interdum varius sit amet mattis vulputate enim. Faucibus et molestie ac feugiat sed lectus. Tincidunt augue interdum velit euismod. Tincidunt arcu non sodales neque sodales ut etiam sit. Porttitor lacus luctus accumsan tortor posuere. Etiam tempor orci eu lobortis. Netus et malesuada fames ac turpis. Posuere sollicitudin aliquam ultrices sagittis orci a. Feugiat vivamus at augue eget arcu dictum varius.

Varius quam quisque id diam vel quam. Magna ac placerat vestibulum lectus. Sed id semper risus in hendrerit. Turpis in eu mi bibendum neque egestas. Sagittis vitae et leo duis ut diam quam nulla. Ac orci phasellus egestas tellus rutrum. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Auctor augue mauris augue neque gravida in. Gravida in fermentum et sollicitudin ac orci phasellus. Purus viverra accumsan in nisl. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Arcu dui vivamus arcu felis. Et molestie ac feugiat sed lectus. Tempus urna et pharetra pharetra massa.

Tristique senectus et netus et malesuada fames. Elit pellentesque habitant morbi tristique senectus. Quam id leo in vitae turpis massa sed elementum. Malesuada pellentesque elit eget gravida cum sociis. Id aliquet risus feugiat in. Blandit massa enim nec dui nunc mattis. Vestibulum lectus mauris ultrices eros. Nunc non blandit massa enim nec dui nunc mattis. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Laoreet id donec ultrices tincidunt arcu. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Scelerisque viverra mauris in aliquam.

Semper risus in hendrerit gravida rutrum quisque non. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Urna porttitor rhoncus dolor purus. Tellus cras adipiscing enim eu turpis. Id ornare arcu odio ut sem nulla pharetra. Amet est placerat in egestas. Tellus at urna condimentum mattis. Vitae congue mauris rhoncus aenean vel elit. Tellus cras adipiscing enim eu turpis egestas pretium. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Quis enim lobortis scelerisque fermentum dui. Magna etiam tempor orci eu lobortis. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Sit amet venenatis urna cursus eget nunc scelerisque viverra.