What's the best way to style a block that contains both text and imagery? Follow
Most Splash pages include blocks that contain both imagery and text content. When it comes to styling these types of blocks where the imagery and text content sit side-by-side, usually built using a "2-column" layout, Height Matching and mobile styling both come into play.
There are two things you should consider:
1. Should the content be consistent in height?
2. Should the content heights differ?
The choice is totally up to you based on which aesthetic you feel matches your design best. Since images are worth 1,000 words, here's a visual to add some color to help with your decision.
Note: Margin and Padding can be adjusted for both options on the top-level block as well as around the text content.
Before we dive into the options, let's take a look at the general block structure, shown below.
Notice that the Square element (imagery) is sitting just outside of the "Text Container". This allows the Square element to take on different settings than what's applied to the "Text Container" in this example.
Pro Tip: Utilize predesigned blocks with the perfect layout to simply swap out imagery and text.
Now let's look at the two options...
Option 1: Content heights are matching
With this option, Height Matching must be Enabled so that the height of the content always matches no matter how tall the content becomes. For example, if you realize you need to add more text, which ultimately causes the content height to increase, the imagery will simultaneously increase to maintain the height consistency.
Let's take a look at the steps you should take to ensure you achieve the look you prefer.
1. Ensure the Height Matching setting is Enabled on the Block Content container, shown below:
2. Make sure the Widths of the text container and imagery are both set to be 50% so they can sit in the same row instead of stacking. See our FAQ: 5/10/17 - The 100% Rule: Changing the Layout of Your Speaker Block to learn more about the 100% width rule.
3. Open the Square element, aka the frame containing your image, to set the bottom Padding to 0%. This value is what dictates the height of Square elements. Within the Background tab, the image Size should also be set to Fill so it expands from top to bottom.
Note: If you're using an image that has text embedded in it, you'll most likely need the image Size to be set to Contain. However, this will prevent any cropping from happening meaning the image won't always be able to expand from top to bottom depending on the screen size.
4. While still in the Square element, head to the Positioning tab to set the Position to Absolute with 0px on the top, bottom and side you want the image to align to.
For example, if the image should align to the right, the side value of 0px will be set on the right side with Float set to Right, shown below:
1. Since the imagery and text content Widths are set to 50% on Desktop, be sure the Widths are both set to 100% so that everything is easier to view on a smaller screen.
2. Decide if you want the Square element height to continue to match the height of the text. If you want to continue matching, leave Height Matching Enabled on the Block Content container. If you want them to differ, set Height Matching to Disabled and be sure to add 50-100% of bottom Padding back to the Square element to give the image it's height.
3. Set the Position to Relative with all values set back to None and Float Left.
You can either keep the side-by-side design of Desktop or choose to go with the Mobile design where the content stacks.
Option 2: Content heights are unmatched
With this option, Height Matching is Disabled so the heights of the content can differ.
1. The Height Matching setting is Disabled on the Block Content container.
2. Make sure the Widths of the text container and imagery are both set to be 50% so they can sit in the same row instead of stacking.
3. Open the Square element, aka the frame containing your image, to set the bottom Padding to 50-100%. This value is what dictates the height of Square elements.
4. While still in the Square element, head to the Positioning tab to set the Position to Relative with all values set to None on the top, bottom and sides. Float the image to the Left or Right based on the design.
1. The content Widths should both be set to 100% so that everything is easier to view on a smaller screen.
2. Dictate the height of the Square element by adjusting the bottom Padding. This value can differ from the settings on both Desktop and Tablet.
3. Ensure the Position is set to Relative with all values set back to None and Float Left.
Same as before, just choose which device design you want to go with and follow the appropriate steps to set it up.
Please sign in to leave a comment.