Step 1: Set Up the Container
First, create a new page and name it “Testimonial.” Start by adding a container block. Then, add an inner container because we want everything to be contained within the full page width.
Next, let’s style the container by adding a 1-pixel border with a 15-pixel border radius. Add 40 pixels of padding around the container to give it some breathing room.
Step 2: Create the Columns
We’ll need three columns for this layout. First, add another container inside the main container. Then, add two more containers inside this one to create a three-column layout. Set each container to 33% width and adjust the column gap to 20 pixels for some spacing between the columns.
Step 3: Add Content to the First Column
In the first column, add a headline block for the testimonial text. Then, add another headline block for the author’s name and position (e.g., “Jane Doe, Creative Director”). Adjust the typography settings, making the name bold and the body text 16 pixels.
Step 4: Add the Image in the Middle Column
For the middle column, add a container with a background image. This will be the person’s photo. Set the image size to cover and position it in the center. You might need to adjust the padding on this container to ensure the image isn’t squished.
Step 5: Style the Third Column
In the third column, add the actual testimonial text using a paragraph block. Set the font size to 14 pixels with a line height of 1.4. Remove any unnecessary bottom margins to keep everything tight.
To center the content vertically in the container, set the display to “Flex,” switch to the column layout, and justify the content to the center.
Step 6: Add the Quote Icon
Now, let’s add a quote icon that overlaps the edge of the container. Instead of using a background image (which limits positioning), add an image block and position it manually. Set the size to around 120 pixels and apply a negative margin of -20 pixels on the top and left to push it outside the container.
To lighten the quote icon, use GenerateBlocks Pro’s filter effects to adjust the opacity, or simply prepare a lighter version of the icon in advance.
Step 7: Make the Layout Responsive
For mobile, change the container layout from columns to rows by setting it to display as a column. Ensure each container is set to 100% width on mobile. Adjust the image container’s minimum height to 200 pixels to maintain the layout, and tweak the padding to ensure everything looks balanced.
Final Touches
Once everything is aligned, preview the layout on both desktop and mobile to ensure it looks good. Adjust any remaining margins or padding as needed.
