Split Banner Wrappers
These are very versatile in terms of layout options.
Choose a full width banner that stretches across the page or is inline. Have a plain background colour or an image background. Have half the banner as your image if you want to.
You can also go for a 50/50 banner, with two seperate elements e.g. image and text, or image and image.
There are lots of different options for text as well. The pink one has every text option available.
The ones towards the bottom of this section are example of split banners on content pages that are already out in the wild.
This is an L2 - Sales Banner
--------------------------------------------------------------------------------------------------------------
This is an L3 - Text Block Generator content type (H1)
You have the option to bold and italicise body text.
And there are all expected different heading sizes.
Like an H2
And an H3
And of course an H4
Links can also be added within the text block (but careful because relative links don't work properly and have to be adjusted in the markdown - just add an additional / at the front of your URL.
Text block generators can contain as much - or as a little text as you want.
Bullets and numbered lists don't work properly. Hopefully they will be sorted asap.
- Numbers don't appear - but you do get an indent.
- Bullets are fine on single lines
- But then go very weird when the text stretches over two lines. They shrink and become an oval not a bullet, getting thinner the longer the text is, which isn't great, is it?
--------------------------------------------------------------------------------------------------------------
This is an L3 - Video block. And this is an optional title.
--------------------------------------------------------------------------------------------------------------
This is an L2 - HTML snippet
You can put code in this page. We primarily use this for bunging in iframes, such as the podcast player below
--------------------------------------------------------------------------------------------------------------
This is a numbered product block
You manually add in a description of the product here. Inputting a product ID will automatically generate the product name, image, price, and star rating. Don't use the product name in the title above.
What customers say: "Here's where you input some product review text from a customer. No need to add the quote marks."
--------------------------------------------------------------------------------------------------------------
Below is an L3 - Image, with different images for desktop and mobile
Images are only available full width at the moment.
The words here are using another Text Block Generator. There is no caption or title facility within the L3 - image type itself.
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
This is an L3 - Tip Block with an optional title - can't make it inline on this content page type
The text section goes here. The image sits on the left on desktop and is stacked above the text on mobile.
You need to be careful regarding the amount of text because, depending on the image size, it can either be too little text on desktop and a big white space is present on the right.
Or if you put in too much text then there will be a big white space underneath the image on the left.
Counter the second problem by adding a text block generator to hold the additional text.
--------------------------------------------------------------------------------------------------------------
This is an L3 - Links Block content type, and this is its title.
--------------------------------------------------------------------------------------------------------------
Lingerie
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
This is a L2 - four column layout
--------------------------------------------------------------------------------------------------------------
This is an L2 - 2 Column Layout
--------------------------------------------------------------------------------------------------------------
Below is an L2 - 3 x 2 column layout
Again, the four different types of card are available to populate this layout.
You CAN make it inline but this example sits elsewhere and we didn't need to make it inline.
--------------------------------------------------------------------------------------------------------------
This is a Global Carousel
--------------------------------------------------------------------------------------------------------------