Viewing 2 posts - 1 through 2 (of 2 total)
-
Posts
-
Hello! I’m trying to figure out how to arrange the blocks/rows/columns on my page to make it look a certain way. This layout seems simple on paper, but I can’t figure it out.
Here’s a picture of what I’m looking for:
Currently, I have this:
Or see it on my website:
https://www.markamadeusflowerdew.com/albums/See, I just want the buttons next to each other. Can I put 2 little columns within that right-hand column, under a paragraph that spans the whole columns?
Any suggestions?Hi Mark,
Thank for reaching out and thanks for using BoldGrid Post and Page Builder for WordPress!
First, I noticed you’re running the “Astra Theme“. You might consider switching to our Crio Pro WordPress theme if you’re looking for a theme that fully integrates with your page builder. You use DreamHost which is one of our premium service partners so the Crio theme is included in your hosting package.
To solve your formatting issue I used one of our base blocks and came up with a template that might help you out. Just switch to the “Text editor” and copy/paste it wherever you want it to go on the page, then switch back to the Visual editor to edit the elements live:
<div class="color5-background-color color-5-text-contrast bg-background-color tmpl-team-11 boldgrid-section dynamic-gridblock" style="margin-top: -1px; margin-bottom: -75px;"> <div class="container"> <div class="row" style="padding-top: 50px; padding-bottom: 0px;"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="boldgrid-wrap-row boldgrid-slider" data-config="{"arrows":false,"autoplay":true,"autoplaySpeed":"8","dots":true,"infinite":true,"bgOptions":{"arrowsPos":"standard","arrowsOverlay":true,"arrowsBgColor":"1","arrowsIcon":"angle","arrowsSize":"30","dotsPos":"bottom","dotsOverlay":false,"dotsColor":"1","dotsSize":"50"},"colors":{"arrowsBG":{"type":"class","value":"1","text":""},"dotsColor":{"type":"class","value":"1","text":""}}}"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div> <p class="" style="text-align: center;"><img class="bg-img bg-img-3 wp-image-64" src="https://demo2.cloudwp.dev/trial-48y8zzxt/wp-content/uploads/2021/10/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw360h360fitcrops438b4876d15b1944d32fbf5786960a4f.jpg" width="360" height="360"></p> <h4 style="text-align: center; margin: 1.5em 0 0.5em;">Sasha Fleming</h4> <p class="" style="text-align: center;">Engineer</p> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <p class="" style="text-align: center;"><img class="bg-img bg-img-3 wp-image-63" src="https://demo2.cloudwp.dev/trial-48y8zzxt/wp-content/uploads/2021/10/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw360h360fitcropscef2025751e2352dd5ea6987f509329b.jpg" width="360" height="360"></p> <h4 style="text-align: center; margin: 1.5em 0 0.5em;">Tommy Jacobs</h4> <p class="" style="text-align: center;">Support Staff</p> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <p class="" style="text-align: center;"><img class="bg-img bg-img-3 wp-image-65" src="https://demo2.cloudwp.dev/trial-48y8zzxt/wp-content/uploads/2021/10/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw360h360fitcropsf2fb874197ad6568826249cd80ef7974.jpg" width="360" height="360"></p> <h4 style="text-align: center; margin: 1.5em 0 0.5em;">Elsie Newman</h4> <p class="" style="text-align: center;">Product Management</p> </div> </div> </div> </div> <div class="col-md-1 col-sm-12 col-xs-12"></div> <div class="col-md-5 col-sm-12 col-xs-12"> <div class=""> <h2 class="" style="margin-bottom: 1em;">Who We Are</h2> <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu dignissim tortor, sit amet bibendum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu dignissim tortor, sit amet bibendum lacus.</p> <p class="" style="margin-bottom: 2em;">Generate vertical integration while remembering to increase viewability. Grow social with the aim to increase viewability. Lead vertical integration in turn innovate.</p> </div> </div> </div> </div> </div> <div class="boldgrid-section bg-background-color color5-background-color color-5-text-contrast"> <div class="container"> <div class="row" style="padding-top: 0px; background-color: #000000;"> <div class="col-md-2 col-sm-2 col-xs-5"></div> <div class="col-md-3 col-sm-3 col-xs-7"></div> <div class="col-md-7 col-sm-7 col-xs-12 text-right"> <div> <p class="" style="padding-right: 3em;"><a class="btn btn-3d btn-pill btn-color-1" style="margin: 5px;" href="#">Register</a> <a class="btn btn-3d btn-pill btn-color-1" style="margin: 5px;" href="#">Details</a></p> </div> </div> </div> <div class="row" style="padding-top: 30px;"> <div class="col-md-12 col-xs-12 col-sm-12"></div> </div> </div> </div> <div class="color5-background-color bg-background-color tmpl-call_to_action-18 boldgrid-section dynamic-gridblock background-scroll" style="color: #ffffff; background-position: 50% 50%; background-size: cover; background-image: linear-gradient(rgba(6, 6, 6, 0.8), rgba(6, 6, 6, 0.8)), url('https://demo2.cloudwp.dev/trial-48y8zzxt/wp-content/uploads/2021/10/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw1600h900fitcrops149ef8935412fedc7e100ebeab83b0e4.jpg');" data-bg-overlaycolor="rgba(6, 6, 6, 0.8)" data-image-url="https://demo2.cloudwp.dev/trial-48y8zzxt/wp-content/uploads/2021/10/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw1600h900fitcrops149ef8935412fedc7e100ebeab83b0e4.jpg"> <div class="container"> <div class="row" style="padding-top: 125px;"> <div class="col-md-2 col-sm-1 col-xs-12"></div> <div class="col-md-2 col-sm-1 col-xs-12"></div> </div> <div class="row headShake" style="padding-top: 30px; padding-bottom: 125px;"> <div class="col-md-4 col-sm-2 col-xs-12"></div> <div class="col-md-4 col-sm-2 col-xs-12"></div> </div> </div> </div>I hope this helps! Please reach back out if you have any questions.
Viewing 2 posts - 1 through 2 (of 2 total)
- The topic ‘How to achieve this layout (side-by-side buttons)’ is closed to new replies.
