[Support request] Design Layout

[Sam]

Hello, I am trying to design my site to look more like the sites I’ve linked below. I like the little icons in the chapters and how the top photo and footer look.

Is there a way I can get more of this with my current site?

Thank you!

[Ying]

Hi Sam,

I like the top photo and footer design

The top part can be achieved using ablock element - page hero, and the footer can be achieved using a block element - site footer:
https://docs.generatepress.com/article/block-element-page-hero/
https://docs.generatepress.com/article/block-element-site-footer/

If you are using GenerateBlocks, you can add SVG shapes to the contianer:
https://docs.generateblocks.com/article/container-overview/#shapes

To merge the header with the page hero, you can use aheader element, here’s a tutorial video:
https://youtu.be/TP8mgBQTgGg

I like the icons for budget, calendar

For the icons, you can use Headline block from GenerateBlocks, it allows you to upload your custom SVG icon code:
https://docs.generateblocks.com/article/headline-overview/#icon

I like their whole homepage

If you don’t have enough CSS knowledge, it would be quite difficult. It does require quire a lot custom CSS, it’s gonna be out of our support forum scope Unfortuanly. But the general layout can be achieved using GenerateBlocks.

I like how they do the chapters

The layout can be done with GB.

[Sam]

Thanks for your response, I will try some of your suggestions above and see how far I can get. Do the blocks support you to scroll through icons/images on the homepage with arrows on the left and right? The first website I linked had it on their homepage.

Thanks,
Sam

[Ying]

No, it will require JavaScript, so better using a slider plugin for that 🙂

[Author]

Posts