Astra Pro’s Custom Layout addon offers an option to insert any content inside Gutenberg Page/Post. You can design a custom layout and display it at a specific location on selected Gutenberg pages/posts.
With this feature, you can design a layout in one place and display it on multiple pages/posts. This is useful when you wish to display some information on posts/pages to attract users. Like CTAs, attractive offers during sales, special discounts, important information, and so on.
You can completely customize the layout and easily put it on any page/post at selected location.
Let’s see how this option works –
Before starting make sure to have Astra Pro plugin is activated.
Step 1 – In dashboard, visit Appearance > Astra Options and activate Custom Layouts. Then head to Custom Layout settings.
Step 2 – Design a layout that you wish to display on Gutenberg pages/posts. You can use block editor, Elementor, or Beaver Builder to design a section.
Step 3 – From Custom Layout Settings, select Layout as Inside Post/Page Content.
Step 4 – You will observe two options under Location on post/page
After certain number of blocks – This option will allow you to display your custom layout after the selected number of blocks on the Gutenberg page/post. Further, you also get an option to enter – Block Number. Here you can set the number of blocks after which your custom layout can display.
Example – If you set Block Number as 3, you custom layout will be displayed after 3rd block on selected pages/post.
Before certain number of Heading blocks – This option will allow you to display your custom layout before the selected number of Heading blocks on the page/post. Note that only native Gutenberg heading blocks and heading added with the UAG plugin will be considered. Further, you also get an option to enter – Heading Block Number. Here you can set the number of Heading blocks before which your custom layout can display.
Example – If you set Heading Block Number as 3, your custom layout will be displayed just before the 3rd Heading block on selected pages/posts.
Step 5 – In the above step, you can set the exact position of the custom layout on the Gutenberg Page/Post. But to pick exact pages/posts from all available pages/posts you need to set Display and Exclusion Rules.
Under Display On option you can select exact pages/posts. Click on the dropdown and select required display locations.
If you wish to restrict this custom layout visibility to some user roles only, you can do so with User Roles option.
Step 6 – Set Responsive Visibility. This option lets you choose a device where you wish to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.
Step 7 – Set Time Duration – You can set a start time and end time for layout visibility. Set a date and time duration for the layout.
Layout will be visible for selected duration.