- This topic has 7 replies, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hi, I’m using Broadcast template.
I’m creating custom home page and i want this type of layout for that: https://i.postimg.cc/ZR2Wf27k/Screenshot-20221124-051529.png
I tried using Generateblocks but i’m getting this type of design: https://i.postimg.cc/ZRtkVL87/Screenshot-20221124-051607.png
How can i achieve the design i want. please help!
ThanksCustomer Support
Hi there,
use the GenerateBlocks Query Loop block, it provides full styling controls.
To save you some time i created one, just copy the code below and paste it into the block editor:<!-- wp:generateblocks/query-loop {"uniqueId":"f3d4f9f3","query":{"post_type":"post","per_page":"5"}} --> <!-- wp:generateblocks/grid {"uniqueId":"a65f5070","columns":1,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true}} --> <!-- wp:generateblocks/container {"uniqueId":"dface3c7","isGrid":true,"isQueryLoopItem":true,"gridId":"a65f5070","width":100,"isDynamic":true,"blockVersion":2,"lock":{"remove":true,"move":true}} --> <!-- wp:generateblocks/grid {"uniqueId":"9431d226","columns":2,"verticalGap":20,"isDynamic":true,"blockVersion":2} --> <!-- wp:generateblocks/container {"uniqueId":"72b116f4","isGrid":true,"gridId":"9431d226","width":50,"widthMobile":100,"flexBasis":"100","flexBasisMobile":"100","isDynamic":true,"blockVersion":2} --> <!-- wp:generateblocks/image {"uniqueId":"511c2cea","sizeSlug":"thumbnail","width":"100px","height":"100px","useDynamicData":true,"dynamicContentType":"featured-image"} /--> <!-- /wp:generateblocks/container --> <!-- wp:generateblocks/container {"uniqueId":"bceee85e","isGrid":true,"gridId":"9431d226","width":50,"flexGrow":1,"flexBasisMobile":"auto","paddingLeft":"20","isDynamic":true,"blockVersion":2} --> <!-- wp:generateblocks/headline {"uniqueId":"6892c913","backgroundColor":"","fontSize":20,"useDynamicData":true,"dynamicContentType":"post-title"} --> <h2 class="gb-headline gb-headline-6892c913 gb-headline-text"></h2> <!-- /wp:generateblocks/headline --> <!-- /wp:generateblocks/container --> <!-- /wp:generateblocks/grid --> <!-- /wp:generateblocks/container --> <!-- /wp:generateblocks/grid --> <!-- /wp:generateblocks/query-loop -->Your code is commented, should i still copy paste?
Yes… those Comments are what WordPress uses in the editor for the Blocks HTML.
Just paste it into an empty Text blockThanks David for your help. but this is not the layout i want.
It’s showing completely wrong in mobile devices: https://i.postimg.cc/yNX2NkpQ/Screenshot-20221124-064308.png
I want like this in mobile devices: https://i.postimg.cc/ZR2Wf27k/Screenshot-20221124-051529.png
I edited the code above so it keeps the layout on mobile.
Each block in the query loop has its own style controls, select a block and check the sidebar settings where you can make Typography, Color, Spacing adjustments.
Thank you, David!
You’re welcome
- You must be logged in to reply to this topic.
