Customizing the layout of your content can greatly enhance the visual appeal and readability of your website.
The Blurb Module is a versatile tool for presenting information with accompanying images or icons. Aligning the Blurb Module's title to the right of the image or icon can create a unique and visually appealing design.
This article will guide you through the steps to achieve this alignment, allowing you to customize your Blurb Modules for a more professional and polished look.
Open the Blurb's module settings by clicking on the Gear icon
In the Content Tab → Image, upload the image you want to use or Enable the Use Icon option if you want to use an icon instead
In the Design Tab → Image/Icon Placement, choose Left
Use the Image/Icon Width option to increase your Image/Icon width
In the Design Tab → Sizing → Content Width set 100%
In the Advanced Tab → Custom CSS → Free Form CSS, add this CSS code:
selector .et_pb_blurb_description {
margin-top: 85px;
}
selector .et_pb_main_blurb_image {
left: 0;
top: 0;
position: absolute;
margin-bottom: 0;
width: auto;
}
selector .et_pb_module_header {
position: absolute;
left: 85px;
top: 31px;
padding-bottom: 0;
}
Notes:
Change the margin-top value depending on the size of your image used in the Blurb module
Change the left: 85px value depending on the size of your image used in the Blurb module
The result can be seen in the screenshot below:
