2 colors vertically:
Select the “Black Minimal” color section theme by selecting the pencil icon in the top right of the section
Go to the Custom CSS panel and look for these variables:
@vert-gradient-top: transparent; // this is the color appearing at the top of the section
@vert-gradient-bottom: @color2; // this is the color at the bottom of the section
@vert-stop: 50%; // this is the percentage down the section that the color changes
-> and change to the colors of your liking and the position that the colors change.
If needed you may have to change your font colors globally for this section to ensure your text is readable on every part of the section
2 colors horizontally
Select the “Black Bold” color section theme by selecting the pencil icon in the top right of the section
Go to the Custom CSS panel and look for these variables:
@hor-gradient-left: @color1; // this is the color appearing at the left of the section
@hor-gradient-right: transparent; // this is the color at the right of the section
@hor-gradient-stop: 33%; // this is the percentage from the left of the page that the section changes color
-> and change to the colors of your liking and the position that the colors change.
If needed you may have to change your font colors globally for this section to ensure your text is readable on every part of the section
Add a “color block” to the section
this is a square or rectangular color for visual interest
There are 2 different settings for this which work the same way - just allow you two different option.
Perhaps you would like one closer to the left of a section and one closer to the right of the section.
or maybe you would like to use 1 color for one option and another color for the other option
Color block option 1: from left side of screen
Add a code block:
Insert a code block in the section where you want to add a color block (I recommend putting it at the bottom of the section, but it does not matter where you put it - as long as it is somewhere in the section
Click the + to insert a block
search for “code”
select the text that appears in the code block and delete it
add this text into the code block:
<div data-code-slug="colorblockleft"></div>select “apply”
Style the color block:
Go to the Custom CSS panel and look for this variable:
color of block
@colorblockleft-width:25%; // width of the block in the section
@colorblockleft-top: 15%; // amount block appears from top of section
@colorblockleft-height: 55%; // height of the block
@colorblockleft-offset: 10%; // position of block from left side of section
-> and change to your liking
Color block option 2: From right side of screen
Add a code block:
Insert a code block in the section where you want to add a color block (I recommend putting it at the bottom of the section, but it does not matter where you put it - as long as it is somewhere in the section
Click the + to insert a block
search for “code”
select the text that appears in the code block and delete it
add this text into the code block:
<div data-code-slug="colorblockright"></div>select “apply”
Style the color block:
Go to the Custom CSS panel and look for this variable:
// color block right color
@colorblockright-color: @color1; // color of colorblock right element
@colorblockright-width:75%; // width of color block right element
@colorblockright-top: 15%; // amount from the top of the section till the block appears
@colorblockright-height: 70%; // height of the element in the section
@colorblockright-offset: 5%; // percentage it appears from the right of the section edge
-> and change to your liking
Color block option 3
Add a code block:
Insert a code block in the section where you want to add a color block (I recommend putting it at the bottom of the section, but it does not matter where you put it - as long as it is somewhere in the section
Click the + to insert a block
search for “code”
select the text that appears in the code block and delete it
add this text into the code block:
<div data-code-slug="colorblocksection"></div>select “apply”
Half banner image
Add a background image to the section by clicking on the pencil tool and going to the background tab. Upload an image of your choice. Optionally set the overlay and the color of the overlay by choosing the color theme.
Add a code block:
Insert a code block in the section where you want to add a color block (I recommend putting it at the bottom of the section, but it does not matter where you put it - as long as it is somewhere in the section
Click the + to insert a block
search for “code”
select the text that appears in the code block and delete it
add this text into the code block:
For an image on the left enter this:
<div data-code-slug="image-left"></div>For an image on the right enter this:
<div data-code-slug="image-right"></div>select “apply”
You can control the width and orientation of the content by clicking on the pencil tool in the section and selecting the width of the section and the orientation of it. Also use spacer blocks to reduce the width if needed.
Don’t forget mobile!!
To have the banner image appear above the text on mobile devices add:
“,mobilesplit” to the slug name:
<div data-code-slug="image-left,mobilesplit"></div> or
<div data-code-slug="image-right,mobilesplit"></div> 