Drag and Drop Editor Styling Tip: Sidebars
A customer recently approached us with a styling question for an email template created in the drag and drop editor and was having trouble with achieving the visual style she wanted. The email was using the Body + Right Sidebar layout style and looked something like this: The issue the customer encountered was how to modify the area below the sidebar so it would have the same background color as the sidebar blocks above it without having to add in extra content or empty blocks. The solution is pretty simple to implement, but it may not be very obvious how to do so. The white area below the sidebar in the above screenshot is actually part of the “body” section of the template rather than the “sidebar”. As such, setting the background color for the sidebar does not affect this part of the template. The background color can instead be set to match the sidebar blocks by updating the background color of the whole “body” section. This can be accomplished by going to “styles” in the top right corner of the editor, selecting “body”, then setting the background color to the same color used for the sidebar. The color below the sidebar now matches the sidebar blocks, but the results aren’t quite right because the background for everything else in the body is now also grey! To get around this, we can also set the background color on specific blocks by clicking “style” in the editing pane for the particular…
Read More: Drag and Drop Editor Styling Tip: Sidebars
