Build layout with Elementor

We gonna replicate the similar page as we did with WP Bakery Pagebuilder, creating a page with Hero Banner, Latests post and a sticky sidebar, here’s the wireframe again:

Go create a new page using template pagebuilder from box Page Attributes, then remove padding for both Desktop & mobile under Newsbeat – Page Settings like this:

then you will be redirected to Elementor editor.

Important Note: you should specify page template from wordpress editing page before switching to elementor editor because somehow, elementor seemed buggy when changing page template from its page settings panel.

Alright, let’s search for post block Hybrid 1x2x2, drag and drop it into page content

When you add an element directly without creating section, you element will be wrapped inside a full width section automatically. If you wish to add a section with multiple columns, click Add section button, you will able to choose number of columns.

The following figure is how it looks after dropping element into page content, setting panel for current post block is opened:

Options are separate into 4 groups similarly like WP Bakery Pagebuilder:

  • General – General settings like block title, show/hide/add block elements.
  • Query Settings – Where you config block query criteria.
  • Filter – Where you config filter menu for block, by category or by tag. Block filter menu can be displayed as dropdown menu or inline list, or even singular cat/tag.
  • Styling – Generate custom style for block.

Now, open section settings panel to change background and add padding for Hero Banner section. We change Columns Gap under section Layout to No Gap, and add padding top and padding bottom under tab Advanced -> Padding:

Scroll down and look for section (Theme) More to change section background, these background options are predefined by the theme based on your settings from customizer.

check out how your page looks:

Continue, we add new section with two columns, one for latest posts and one for an advertisement, open sidebar column settings and resize its width:

Now go add a post block Block – Theme Loop for content column and an advertisement for sidebar column, also added padding top/bottom for the row.

The last thing is making sidebar sticky and follow when users scroll down:

  • Open Row Settings -> Advanced -> (Theme) More, turn on Has Sticky column?.
  • Open Sidebar Column Settings -> Advanced -> (Theme) More, turn on Is Sticky column?.

and we’re done!