Archived topic
Theme design
5 replies · Started by Richard on June 22, 2022
I am new to Generate press, I took the risk of the ultimate pro version as I have many websites I will eventually convert if I can improve things.
My current site is on Elementor pro and after a lot of help, I cannot improve the speed due to how CSS and JS hungry it is.
My current design on http://www.notpcclothing.com is what I would like to emulate onto generate press, how can I go about doing this? I have Gutenberg but cannot for the life of me work out how to customise full sites with it.
All help is appreciated as once I can get my head around this website I can also sort out other websites that were designed on elementor.
Hi Richard,
A good place to start to learn how to utilize our products is through our YouTube Channels: https://www.youtube.com/c/GeneratePress/videos
https://www.youtube.com/c/GenerateBlocks/videos
To begin with, I specifically find this video useful with regards to using GenerateBlocks with the default Gutenberg Block Editor: https://www.youtube.com/watch?v=R7fwJECtgSg
Once you’ve accustomed to to GenerateBlocks and the WP Gutenberg editor, you can probably start with your front page.
The first section of your front page can be easily done with Container Blocks, Headline Blocks and a Buttons Block.
The Shop by Category, Shop by design, and Shop by best sellers sections can be done with a GB Query Loop Block.
For the Shop all Products section, you can use a Grid Block to create the 2 columns.
The Header can also easily be done through GP, and if needed, we can guide you through it.
Hope this clarifies!
Thank you for that.
I have been having a play with it today but this feels like totally foreign ideas to me :(
It took me about an hour to make a banner with text overlay that was able to be read
http://www.appallingapparel.com as you can see it looks okay now.
Secondly, how can I make the text Shop by Category have 2 colours (shop by black, Category Red with a black shadow)
However, if you scroll down, I have images in place, how can I do rounded corners to the images, padding the images from its container (should have a grey edge around the pictures)
Richard
how can I make the text Shop by Category have 2 colours (shop by black, Category Red with a black shadow)
You can try using 2 headline blocks, one with text shop by, and the other with text category.
Toggle the inline width option for both headline blocks.
Then you will be able to style the 2 headlines separately. Please be noted that the box-shadow/text-shadow effect is a feature of the GenerateBlocks Pro plugin, if you don't have the pro version installed, you will not see this option.
If you want the inline headlines to be centered, select their parent container block, and set it to align center.
how can I do rounded corners to the images, padding the images from its container (should have a grey edge around the pictures)
You are using the WP image block which the theme has no control over it.
As you are already using GenerateBlocks, I would recommend using GB's image block.
https://docs.generateblocks.com/article/image-overview/
You can add paddings and set border-radius to the GB image block.
Thank you that seemed to do the job.
I will have to forfeit the shadow as I thought it would have been all in this premium, not a separate charge :(
In regards to the pictures, that was a great bit of advice/noticing, sorted to corners and background etc out now.
However,
the images show as spaced nicely but live its overlapping the previous heading.
also, why is it that when I select the column width and say 25% x 4 (for 4 columns) it won't fit and doesn't take into account the padding? is this a Gutenberg issue or your container issue? also the padding is not responsive :(
Sorry, I should've mentioned that GB also has its own column block called Grid, it will give you much more control on styles/spacing.
Try to use Grid block instead of the WP columns block.
