- This topic has 4 replies, 2 voices, and was last updated 3 years, 5 months ago by
.
-
Posts
-
Greetings! I’m using GP and GP Blocks and want to create images that look like this:
How can I go about doing that? Thank you very much!!
Customer Support
Hi there,
if you:
1. Add a GB Container Block.
1.1 Set its text alignment ( in block toolbar ) to center. This will center all content.
1.2 In spacing give it some Padding and a Border Top value for your ribbon.
Also give it a high top margin value, start with 120px, this will vary depending on the size of your image.
1.3 in Colors set a background and border color.2. Add inside the container a GB Image Block.
2.1 Set the Attachment size, eg. Thumbnail and set itswidthandheightif needed. Optional: set theOBJECT-FITtoCoverif you’re forcing a non-square image to be square.
2.2 In Spacing add a Border value and set the Border Radius to 100%. This will make it round. Now set the Top Margin to a Negative value eg. -120px. this will drag the image up to create the overlap.To help out, i made one, and here is the code:
<!-- wp:generateblocks/container {"uniqueId":"95c44320","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"marginTop":"130","borderSizeTop":"20","borderColor":"#000000","backgroundColor":"#e2e2e2","alignment":"center","isDynamic":true,"blockVersion":2} --> <!-- wp:generateblocks/image {"uniqueId":"21309f72","sizeSlug":"full","width":"200px","height":"200px","marginTop":"-130","marginBottom":"40","borderSizeTop":"4","borderSizeRight":"4","borderSizeBottom":"4","borderSizeLeft":"4","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%"} --> <figure class="gb-block-image gb-block-image-21309f72"><img class="gb-image gb-image-21309f72" src="https://picsum.photos/id/237/200/200" alt=""/></figure> <!-- /wp:generateblocks/image --> <!-- wp:generateblocks/headline {"uniqueId":"aaafd08f"} --> <h2 class="gb-headline gb-headline-aaafd08f gb-headline-text">More content below</h2> <!-- /wp:generateblocks/headline --> <!-- /wp:generateblocks/container -->Just copy and paste it in to the editor.
This is why I love you guys so much!!! Thank you. 🙂
This is working great. One more question… how can I make three of these sit side-by-side and all be the same height?
You can build it inside a Grid, as each Grid column is a Container Block:
<!-- wp:generateblocks/container {"uniqueId":"5533c64c","paddingTop":"120","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","backgroundColor":"#cc1515","isDynamic":true,"blockVersion":2} --> <!-- wp:generateblocks/grid {"uniqueId":"a50e56a7","columns":1,"horizontalGap":20,"isDynamic":true,"blockVersion":2} --> <!-- wp:generateblocks/container {"uniqueId":"c44b1b9b","isGrid":true,"gridId":"a50e56a7","width":33.33,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","borderSizeTop":"20","borderColor":"#000000","backgroundColor":"#e2e2e2","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"innerZindex":1,"alignment":"center","shapeDividers":[],"isDynamic":true,"blockVersion":2,"opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[],"useAdvBackgrounds":true,"advBackgrounds":[]} --> <!-- wp:generateblocks/image {"uniqueId":"740c1927","sizeSlug":"full","width":"200px","height":"200px","marginTop":"-130","marginBottom":"40","borderSizeTop":"4","borderSizeRight":"4","borderSizeBottom":"4","borderSizeLeft":"4","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%"} --> <figure class="gb-block-image gb-block-image-740c1927"><img class="gb-image gb-image-740c1927" src="https://picsum.photos/id/237/200/200" alt=""/></figure> <!-- /wp:generateblocks/image --> <!-- wp:generateblocks/headline {"uniqueId":"d5dffc14"} --> <h2 class="gb-headline gb-headline-d5dffc14 gb-headline-text">More content below</h2> <!-- /wp:generateblocks/headline --> <!-- /wp:generateblocks/container --> <!-- /wp:generateblocks/grid --> <!-- /wp:generateblocks/container -->If you select the Container inside the Grid Block, in its Toolbar you will see a + Duplicate Grid Item button. So you can duplicate them after you get the first one how you need it.
- You must be logged in to reply to this topic.
