Custom Layouts Inside Pages/Posts

No results found. Try again with different words?

Search must be at least 3 characters.

    Custom Layouts Inside Pages/Posts

    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.

    Astra Pro - Activate Custom Layouts Addon

    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.

    Design CTA with Astra Custom Layout

    Step 3 – From Custom Layout Settings, select Layout as Inside Post/Page Content.

    Custom Layout Inside Gutenberg Page/Post

    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.

    Display Content After Certain Number of Blocks

    Example – If you set Block Number as 3, you custom layout will be displayed after 3rd block on selected pages/post.

    CTA inside blog 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.

    Option to display custom layout before certain heading blocks

    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.

    Custom Layout - Display 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.

    Custom Layouts - Time Duration Option

    Done!

    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    Scroll to Top

    Download is Just A Click Away!

    Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

    Download is Just A Click Away!

    Enter your email address and be the first to learn about updates and new features.