![]() Float the image to the Left or Right based on the design.ġ. ![]() 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. This value is what dictates the height of Square elements.Ĥ. Open the Square element, aka the frame containing your image, to set the bottom Padding to 50-100%. 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.ģ. The Height Matching setting is Disabled on the Block Content container.Ģ. With this option, Height Matching is Disabled so the heights of the content can differ.ġ. You can either keep the side-by-side design of Desktop or choose to go with the Mobile design where the content stacks. Set the Position to Relative with all values set back to None and Float Left. 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.ģ. If you want to continue matching, leave Height Matching Enabled on the Block Content container. ![]() Decide if you want the Square element height to continue to match the height of the text. 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.Ģ. 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.įor 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:ġ. 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.Ĥ. 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. Within the Background tab, the image Size should also be set to Fill so it expands from top to bottom. This value is what dictates the height of Square elements. Open the Square element, aka the frame containing your image, to set the bottom Padding to 0%. See our FAQ: 5/10/17 - The 100% Rule: Changing the Layout of Your Speaker Block to learn more about the 100% width rule.ģ. ![]() 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. Ensure the Height Matching setting is Enabled on the Block Content container, shown below:Ģ. Let's take a look at the steps you should take to ensure you achieve the look you prefer.ġ. 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. ![]() With this option, Height Matching must be Enabled so that the height of the content always matches no matter how tall the content becomes. #MOVE TEXT BLOCKS OVER IMAGE PRO#Pro Tip: Utilize predesigned blocks with the perfect layout to simply swap out imagery and text. This allows the Square element to take on different settings than what's applied to the "Text Container" in this example. Notice that the Square element (imagery) is sitting just outside of the "Text Container". Note: Margin and Padding can be adjusted for both options on the top-level block as well as around the text content.īefore we dive into the options, let's take a look at the general block structure, shown below. Since images are worth 1,000 words, here's a visual to add some color to help with your decision. The choice is totally up to you based on which aesthetic you feel matches your design best. Should the content be consistent in height? There are two things you should consider:ġ. 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |