TT3 make 2 column row with 100vw background image?

  • I am new to using wordpress block editor. I’m using the TT3 theme. Can someone tell me how to insert a row onto a page such that the row spans 100vw with a background image. Inside the row are two columns of texts. What block element do I need to use to achieve this effect?

    To be clear, if I were to use just html css, I would do it like this:

    <!DOCTYPE html>
<html>
        <head>
                <style>
* {
  padding: 0;
  margin: 0;
  color: white;
}
.row {
  padding: 20px;
  background: url(https://i.imgur.com/SDnemCW.jpeg) center center;
  background-size: 100%;
}
.grid {
  width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template: auto / 1fr 1fr;
}
                </style>
        </head>
        <body>
                <div class="row">
                        <div class="grid">
                                <div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                                <div>
                                        <p>Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                        <p>Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                        </div>
                </div>
        </body>
</html>

    And it would look like this:

    View post on imgur.com
Viewing 3 replies - 1 through 3 (of 3 total)

  • Here’s one way, using only native blocks (ie no 3rd-party blocks plugin or custom CSS):

    -1- Insert the COVER block. This will allow you to add a background image. Set the alignment to full width.

    -2- Insert a COLUMNS block over the COVER block. Make it 2 columns, and set the appropriate alignment.

    -3- In each of the two columns, insert a PARAGRAPH block and add your text

    Of course, there are other ways to do this.

    Thread Starter learningtechthings

    (@evermight)

    Amazing that worked!

    For education purposes, I am curious about what other ways we can do this using native blocks only. Can you suggest a few more alternatives? This will improve my familiarity with the most useful wordpress blocks that i might need.

    Moderator bcworkz

    (@bcworkz)

    You could place the HTML you already have in a custom HTML block and add your CSS to the Additional CSS section of the style book.

    Or insert an image and a couple paragraph blocks and alter their layout with custom CSS. Or use some other combination of group, column, paragraph, image, or cover blocks. You may need some additional custom CSS depending on which combination of blocks you use.

    In general, use whatever combination makes sense to you. If whatever layout you’re after is not feasible from the available block settings, you can always apply some custom CSS to fill in the gaps.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘TT3 make 2 column row with 100vw background image?’ is closed to new replies.