The Split content block arranges media and content side by side to provide a dynamic content presentation.
Once you choose the Split Content Block, you will see a block editing panel on the right. It has three options: General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore them one by one below.
General #
Minimum height #
It allows you to set the height of the block.
Add Image #
It allows you to add an image to the media section and set its URL.
Media Side #
It allows you to switch the side of the media with the content.
Media Size #
It allows you to change the size of the media item. Depending on your requirements, you can change it from auto to Contain or Cover.
Style #
It provides the following styling options for the Split Content Block. These are listed below:
Background #
It has two options:
- Media Area Background- To change the background of the Media Area.
- Content Area Background – To change the background of the Content Area.
Content #
It allows you to set the alignment of content.
Border #
It allows you to set the border of the Split Content block. You can set the border for both normal and hover effect.
Advanced #
The Advanced section consists of four customization options for the Split Content Block.
Spacing #
Under the spacing section, you can find the following options available:
- Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).
- Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).
Z-Index #
It allows you to set the priority of the heading block according to the site requirement.
Responsive Condition #
Using the option, you can enable/disable displaying the block on various screen sizes:
- Hide on Desktop – It hides the Heading block on the Desktop.
- Hide on Tablet – It hides the Heading block on the Tablet.
- Hide on Mobile – It hides the Heading block on Mobile.
Advanced #
Under the option, you can set the CSS ID and Classes for this particular Split Content block. The available options are listed below:
- CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
- Additional CSS Class(es) – It allows you to add a CSS class to your block and write custom CSS to style this particular block.
For e.g., There might be two Split Content blocks on a page, and you want to make some changes to one but leave another untouched. In this case, you can define the CSS classes for the one Split Content block you want to make changes to.
Moreover, you can add more than one class separately by commas.
For example, if you want to change the content color of the Split Content block, you can add the class content-color under the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:
.content-color{
color:#000000;
}Adding the code will change only this particular Split Content block.
