Writing Templates for Experios

In Experios its possible to directly code your projects and templates. Our projects utilise Tailwind CSS and Bootstrap.

Tailwind is being used to reduce the amount of CSS written for each project or template. In a lot of cases only some specific formatting will need to be written in css with Tailwind classes providing much of the layout.

Bootstrap is currently being utilised for its grid functionality. We may deprecate its use in the future in favour of modern CSS Grids.

Goals

When creating Templates in experios there are some key Goals that we should always keep in mind.

1. Edits
   Think of simplicity of editing. Will the user want to reposition some elements or add more text inside a block?
2. Flow
   The flow of the document as it conforms to Desktop, Tablet and Mobile displays. How elements will reposition and do they make sense.
3. Performance
   Keeping the document light with minimal DOM complexity. Properly formatting images and video to reduce network load.

Getting started

To get started writing a template. Login to the Experios dashboard and create a project. As template’s are effectively fixed Projects. We will create a full project then save it as a Template.

In your new project, click the settings Cog next to the preview button and go to the advanced tab and click Enable Developer Tools. This will enable the code editor for your project. Click OK.

Once the editor is enabled it can be launched for each page of the project from the Source Icon in the Editor.

Coding – Gotchas

Bootstrap grid

Use only “row”, “col-NN” and “col-md-NN” classes to make the grid.
“md” breakpoint is equal to 1024. Two modes are used: mobile < 1025px, desktop > 1024px.
The grid structure should be as the following:

<div class="row">
<div class="col-12 col-md-6">
...content...
</div>
</div>

Image element

To avoid wrapping IMG into SVG in the viewer add the attribute: avoid-svg-wrapping=’true’

Remove defaults for IMG:
.constrained – remove default width/height
.tdi-no-width – remove default width
.tdi-no-zero-margins – remove default zero margins

Image example:

<img avoid-svg-wrapping="true" loading="lazy" layout="cover"
class="tdi-image constrained tdi-no-width tdi-no-zero-margins tdi-m-0 h-2em w-2em"
src="https://dz5h4rhovatlt.cloudfront.net/templates/prospectus2-25.jpg"/>

See below what are the classes: tdi-m-0, h-2em, w-2em
Some other custom classes related to images:

.tdi-image-contain {
object-fit: contain !important;
}

Text blocks

Font size and line height should be set using “em” units and classes text-em-* leading-em-*.
Ex.: tdi-text text-em-1-3 leading-em-5
The attributes placeholder=”Write some text here…”, placeholder-target=”textarea” are mandatory.
Text block example:

<div placeholder="Write some text here..." placeholder-target="textarea"
class="tdi-text text-em-5 leading-em-5 font-opensans font-bold text-center pl-0 pr-0 mt-2">
<span>A Bugs Life; Luxury Lineage</span>
</div>

Intermediate container with background:

To make an intermediate container that allows to change background image use the class .tdi-interm-cont
Example:

<div class="col-12 col-md-5 px-12 md:px-0">
<div
class="tdi-interm-cont h-full tdi-prospectus2-img-24 min-h-1/2-screen md:min-h-screen bg-no-repeat bg-center bg-scroll bg-cover">
</div>
</div>

Available Tailwind custom font size and line height, font families, padding and margins:

A full list of custom classes is here: https://www.3dissue.com/help/experios-dev-notes-available-tailwind-classes/

Coding

With Experios we can use different classes for Desktop and Mobile so that they have layouts which suit each device. To do this we use md: to enable classes to only apply to the desktop layout.

Example

<div class="row p-0 md:p-4"></div>

in this example the p class controls the padding so p-0 shows that all padding for this div is zero except for devices which have device resolution that is greater than 1024px where the padding is set at md:p-4  or 1rem all round

When using Experios Code Editor there are various Experios classes which can be used to help with building the page along with Tailwind classes they help the user build pages easier and quicker. Explanations of Experios class follow below a reference to tailwind classes can be found at this here; https://tailwindcomponents.com/cheatsheet/

Some of the basic Experios layout classes allow the user to edit the elements in the visual editor as well as the code editor making it easier to add background images and colours etc.

The main horizontal container uses the row class  <div class=”row”></div> and will extend to 100% of it’s parent div. When can subdivide the row with columns and these are written as <div class=”col-12 col-md-12″></div> where the column width is determined by the value of col-md-12 the values here go from 1 to 12 with col-md-1 being 1/12 the width of the parent div, col-md-6 being 6/12 (50%) the width of the parent div and col-md-12 being 12/12 being the full width of the parent. There is an automatic left and right padding on columns so to set the left and right padding to 0 we use the tailwind class px-0.

Another container that can be used is  tdi-interm-cont  this allows a holding container to be selected and  edited in the visual editor as well i.e.

<div class="tdi-interm-cont  w-20 h-20  bg-cornflower mx-auto rounded-full flex place-items-center">
<div placeholder="Write some text here..." placeholder-target="textarea" class="tdi-text m-auto">1</div>
</div>

This creates a circle container with centred text and can be selected from the visual editor.

Elements

AS well as the container classes we also have certain element classes. These elements are editable in the visual editor as well as the code editor.

Text Element

<div placeholder="Write some text here..." placeholder-target="textarea" class="tdi-text">Add text here </div>

Use this code to add a basic text element, you can then edit the font from the visual editor, to change text sizes and Typography you can add tailwind classes these are explained latter on and you can see them at the typography section on https://tailwindcomponents.com/cheatsheet/

Image Element

<img layout="cover" target="_blank" resizable="true"  class="tdi-image "/>

This adds the basic image component to the page you can add the image to this element through the visual editor by double clicking on the placeholder image that is there.

The basic image’s width and height is set to 100%, if we wish to constrain the images width and height we add the constrained class to the image along with a fixed height and width (w-20 h-20 – tailwind classes)

<div class="row" >
<div class="col-12 col-md-12 px-0">
<img layout="cover" target="_blank" resizable="true"  class="tdi-image constrained w-20 h-20 ml-0"/>
</div>
</div>

if the tailwind classes do not offer the width and height required then you can make a custom class yourself and add that class to the css panel in the editor and to the image :-

.my-image-dimensions
{
    width:100px;
    height:100px;
}

<img layout="cover" target="_blank" resizable="true"  class="tdi-image constrained my-image-dimensions ml-0"/>

If the image has a fixed width the image will be centred in the parent with auto margins. To change this set the margin you want on the image for example to

If you wish to add text over the image we do this by adding the ‘relative’ class to the image parent, adding “avoid-svg-wrapping=’true'” to the image and then adding the class ‘absolute’ to the item that you want to go on top of the image. to position the item use the css classes top, bottom, left, right or the tailwind utilities for controlling the placement of positioned elements (https://tailwindcss.com/docs/top-right-bottom-left ) as we have in this example.

<div class='col-12 col-md-3 px-0 relative'>
<img class='tdi-image' avoid-svg-wrapping='true' src=''onmousedown='return false' loading='lazy' layout='cover' />
<div placeholder="Write some text here..." placeholder-target="textarea" class="tdi-text absolute top-0">Add text here </div>
</div>

They default layout for images is cover layout=”cover” but you can change this to what you need cover, scale-down, contain and fill.

Line element

<div class="tdi-line" layout="horizontal" linewidth="2" linecolor="#ff0000">
<hr class="line-background-color" >
</div>

A basic line that can be edited in the visual editor uses the ‘tdi-line’ the line colour are set as a hex colour value and the line width is set by changing the value in linewidth. The layout of the line can be either layout=”horizontal” or layout=”vertical” for vertical lines.

<div class="tdi-line h-40" layout="vertical" linewidth="2" linecolor="#ff0000">
<hr class="line-background-color" >
</div>

For vertical lines add a height to the line, here using tailwind class “h-40” but you could also make a custom class

.custom-height
{
    height:50px;
}

Button element

<a class="tdi-btn  default-button-background-color default-button-foreground-color default-button-font-family center mx-auto"

placeholder="Write caption here..." layout="button" alignment="center" placeholder-target="textarea" href="" go-to-page="2" >

<span >CLICK</span>

</a>

The tdi-btn class uses default colours and fonts default-button-background-color default-button-foreground-color default-button-font-family which apply to all buttons in your publication and these can be set by clicking the settings button on the top bar and selecting the style tab then navigating and changing the button styles. You can also change it in the visual editor by selecting the button and then open up the background tab – you can actually also add a background image to the button as well from the visual editor.

You can add the destination either in the code editor or in the visual editor in the settings tab either choosing a web address or a go to page number. In the editor you can either add your link directly to the href=”https://www.3dissue.com/experios.html” or to go to a page number leave the href blank and add go-to-page=”2″ where 2 is the page number you wish the button to go to.

Video Element

<div class="tdi-video" target="_blank" layout="cover" resizable="true" hide-on-mobile="true">
<div class="tdi-player-target"></div>
</div>

Use this code to add the video editor then go to the visual editor to add the video by double clicking on the placeholder image and either choose an existing video or upload a new one. You can then change the video settings from the visual editor settings tab in the code editor you can use tailwind or your own custom classes to further size and place the video on the page.

Hide elements on mobile

To hide an element on mobile devices we use the following ‘hide-on-mobile=”true”‘ and would use it like this:-

<div class="tdi-video" target="_blank" layout="cover" resizable="true" hide-on-mobile="true">
<div class="tdi-player-target"></div>
</div>

Tailwind Classes

The main advantages of using Tailwind classes is that you don’t have to wright as much of the CSS yourself, it will save you time. You just need to apply the CSS classes to the elements in the code editor. By using Tailwind, you get access to lots of CSS classes. The following link is a good reference guide to the tailwind classes – https://tailwindcomponents.com/cheatsheet/

Here we will go through several of the more common classes that you are more likely to need to produce your pages.

Layout

Display classes for controlling the display box type of an element. Check the tailwind documents for details of the classes to use for different layouts, vertical horizontal etc; https://tailwindcss.com/docs/display

Position is used for controlling how an element is positioned in the DOM. The most commonly used for positioning are relative, fixed and absolute

<div class="absolute bottom-0 left-0 ...">
<p>Absolute child</p>
</div>

This would position the child at the bottom left hand corner of the parent div.; https://tailwindcss.com/docs/position

When using ‘absolute’ positioning we can then Use the (top, right, bottom, left, inset)-0 classes to anchor elements against any of the edges of the nearest positioned parent.

https://tailwindcss.com/docs/top-right-bottom-left

For elements that are overlapping we can give each element a z-index with z-0,z-10, z-20 the highest number will be the element that is on top.

https://tailwindcss.com/docs/z-index

We can use overflow tailwind classes to control how an element handles content that is too large for the container. Check the tailwind documents for details of the classes to use.

https://tailwindcss.com/docs/overflow

Spacing

Spacing is some of the most used classes for elements; we mainly use padding and margins for this. Padding is the space between the content and the border, whereas margin is the space outside the border.

In Tailwind classes the letter p is used for padding and m used for margins the documents for both can be found at:-

https://tailwindcss.com/docs/padding

https://tailwindcss.com/docs/margin

Using the single letter means that the value is applied to top, bottom, left and right hand sides (p-1, m-1). if you wish to add to just the top and bottom then we use y (py-1, my-1) and for adding to the left and right hand side we use the letter x (px-1, mx-1) for applying to just one side we use l for left, r for right, t for top and b for bottom (pl-1,ml-1)(pr-1,mr-1),(pt-1,mt-1) and (pb-1,mb-1).

Then numbers used represent an rem value and the size will depend on the screen size i.e. p-4   is equal to a padding of 1rem;

With margins we have further values of m-auto for margin auto and can use minus values to move elements over other elements (-ml-4 margin-left: -1rem

Conflict between Bootstrap and Tailwind on Mobile devices

When working with margins and padding and you require a different value for mobile devices, you may need to add a custom class with a media query in the CSS editor and then add that class name to the tag that it is required on e.g.

.margin-custom {
margin-left: 1em;
margin-right: 1em;
}
@media (min-width: 1025px) {
.margin-custom {
margin-left: 5em;
margin-right: 5em;
}
}

<div class="margin-custom my-2"> <div>
<p >Consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam corper suscipit lobortis nisl ut aliquip commodo consequat.</p>
</div>

For images in mobile all padding and margins are automatically set to 0 so if you need margins and / or padding to be used with images add the tdi-no-zero-margins class to the image, this will allow margins and padding to be added to the image on smaller devices

Sizing

width

For width we use w and the values are in rem i.e. w-20 sets a width of 5rem. we can also set the width as percentages with w-1/2 for a width of 50% and w-4/5 for a width of 80% see documentation for other percentage options. We also have ‘w-screen’ for a width of 100vw, ‘w-min’ for a width equal to min-content, ‘w-max’ for a width equal to max-content;

https://tailwindcss.com/docs/width

height

For height we use h and the values are in rem i.e. h-20 sets a height of 5rem

‘h-auto’ gives a height equal to auto, ‘h-full’ gives a height equal to 100%            and ‘h-screen’ gives a height equal to 100vh.

https://tailwindcss.com/docs/height

min-width

use min-w-0 gives a min-width = 0 and min-w-full gives a min-width = 100% you can also use custom classes to set other min-width values and add to the css panel e.g.

.custom-min-width{
min-width:100px;
}

https://tailwindcss.com/docs/min-width

max-width

max-w-none gives no max width and max-w-full gives a max width of 100% for other values see the documentation for tailwind values or create your own custom ones.

https://tailwindcss.com/docs/max-width

min-height

Use min-h-0 gives a min-height = 0 and min-h-full gives a min-height = 100% and min-h-screen gives a min-height = 100vh, you can also use custom classes to set other min-height values and add to the css panel e.g.

.custom-min-height{
min-height:100px;
}

https://tailwindcss.com/docs/min-height

max-height

Use max-h-0 gives a max-height = 0 and max-h-full gives a max-height = 100% and max-h-screen gives a max-height = 100vh, you can also use custom classes to set other max-height values and add to the css panel e.g.

.custom-max-height{
max-height:100px;
}

https://tailwindcss.com/docs/max-height

Backgrounds

Background Colour

There are several pre-set background colours check them out at https://tailwindcss.com/docs/background-color or create your own custom colour eg

.custom-bg-colour{
background-color: rgba(209,213,219,1);
}

Background opacity

Tailwind pre-set classes are

.bg-opacity-0    –bg-opacity: 0;

.bg-opacity-25   –bg-opacity: 0.25;

.bg-opacity-50   –bg-opacity: 0.5;

.bg-opacity-75   –bg-opacity: 0.75;

.bg-opacity-100 –bg-opacity: 1;

https://tailwindcss.com/docs/background-opacity

background-position

Control the position of an element’s background image, tailwind values at https://tailwindcss.com/docs/background-position

background-repeat

Control the repetition of an element’s background image, tailwind values at https://tailwindcss.com/docs/background-repeat

background-size

.bg-auto           background-size: auto;

.bg-cover          background-size: cover;

.bg-contain       background-size: contain;

https://tailwindcss.com/docs/background-size

Typography

font-family

For font family the best way to select the font family is to use the visual editor and select the text and select the required font from the drop down list.

text Colour

there are several pre-set text  colours check them out at https://tailwindcss.com/docs/text-color or create your own custom colour e.g.

.custom-text-colour{
color: rgba(209,213,219,1);
}

Font Size

There are several pre-set font sizes check them out at https://tailwindcss.com/docs/font-size or use the visual editor select the text and from the toolbar select the text size required.

font-weight

There are several pre-set font sizes check them out at https://tailwindcss.com/docs/font-weight

For other less used typography settings check out https://tailwindcomponents.com/cheatsheet/

Place Items

Control  how items are justified and aligned at the same time.

https://tailwindcss.com/docs/place-items

place-items-auto equals  place-items: auto;

place-items-start equals  place-items: start;

place-items-end equals  place-items: end;

place-items-center equals  place-items: center;

place-items-stretch equals  place-items: stretch;

Examples

Centre text block with Background Image

<div class="tdi-placeholder-city bg-no-repeat bg-center bg-scroll bg-cover">
<div class="relative">
<!-- add Main Container here -->
</div>
</div>

We begin with setting the main container height and with a background image. The “tdi-placeholder-city” class is the one that sets the image. to replace this with your own click ok to exit editor, the in the visual editor select the main row and then select background from the properties tab on the right hand side of your screen . Click on add image and select an image you wish to have as a background. An alternative is to use a background colour instead of an image to do that instead of adding the image click on the background colour and select the colour you wish.

 

<div class="row py-4">
<div class="col-12 col-md-4 px-0 py-2 my-16 md:ml-4/12 bg-white">
<!-- add top row here -->
<!-- add bottom row here -->
</div>
</div>

The next part is the main container and its size and position. The main row has a top and bottom padding of py-4.  The width of the col is set to ‘col-md-4’ which equates to 1/3 of the screen width. This can be changed to whatever size you like from col-md-1 through to col-md-12 . Padding for the column is set to px-0 (padding-left and padding-right set to 0) so that the red block goes to the edge of the column the top and bottom margins are set by using my-16. On desktop the column is centred by setting the left margin md:ml-4/12 on mobile the column goes to 100% width so there is no left margin for mobile. Lastly ‘bg-white’ class sets the background colour of the column to white.

 

Top Row

<div class="row mt-2 mt-md-5">
<div class="col-1 bg-red-600"></div>
<div class="col-10">
<div placeholder="Write some text here..." placeholder-target="textarea"
class="p-0 tdi-text text-5xl font-bold">
<div>
<span>Title</span>
</div>
</div>
</div>
</div>

The top row has margins set at mt-2 for smaller screens and mt-md-5 for larger screens. The first column is a filled red column, to make this clear change the background colour from bg-red-600 to bg-white. The text is size is set by ‘text-5xl’ and is set to bold with ‘font-bold’

Bottom Row

<div class="row">
<div class="col-1"></div>
<div class="col-10">
<div placeholder="Write some text here..." placeholder-target="textarea"
class="p-0 tdi-text text-base text-red font-bold">
<div>
<span>BY A. PERSON</span>
</div>
</div>
<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 tdi-text text-sm text-red font-bold mt-3 mt-md-4">
<div>
<span>Duis autem vel eum iriure dolor in nostrud hendrerit in vulputate velit essem

lestie</span>
</div>
</div>
<div placeholder="Write some text here..." placeholder-target="textarea"

class=" p-0 tdi-text text-sm mt-3 mt-md-4 mb-md-5">

<div>

<span>Ut wisi enim aled minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip

ex ea commodo facilisi consequat. Duis autem vel eum iriure dolor in nostrud hendrerit in vulputate velit essem

lestie consequat vel illum iusto odio lobortis.</span>

</div>
</div>
</div>
</div>

in the second row we have any empty col <div class=”col-1″></div> this will keep the text of the second row level with the title text in the row above for two of the text blocks we can change the text colour by adding the class ‘text-red’

Complete Html

<div class="tdi-placeholder-city bg-no-repeat bg-center bg-scroll bg-cover">

<div class="relative ">

<div class="row py-4">

<div class="col-12 col-md-4 px-0 py-2 my-16 md:ml-4/12 bg-white">

<div class="row mt-2 mt-md-5">

<div class="col-1 bg-red-600"></div>

<div class="col-10">

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 tdi-text text-5xl font-bold">

<div>

<span>Title</span>

</div>

</div>

</div>

<div class="col-1"></div>

</div>

<div class="row">

<div class="col-1"></div>

<div class="col-10">

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 tdi-text text-base text-red font-bold">

<div>

<span>BY A. PERSON</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 tdi-text text-sm text-red font-bold mt-3 mt-md-4">

<div>

<span>Duis autem vel eum iriure dolor in nostrud hendrerit in vulputate velit essem

lestie</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class=" p-0 tdi-text text-sm mt-3 mt-md-4 mb-md-5">

<div>

<span>Ut wisi enim aled minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip

ex ea commodo facilisi consequat. Duis autem vel eum iriure dolor in nostrud hendrerit in vulputate velit essem

lestie consequat vel illum iusto odio lobortis.</span>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Products with images

<div class="row my-3">
<!-- add Product container here -->
<!-- add Product container here -->
<!-- add Product container here -->
<!-- add Product container here -->
</div>

The main container for this component consists of only one row with a top and bottom margin (my-3)

Product container

<div class="col-12 col-md-3">

<img layout="cover" target="_blank" resizable="true" src="" avoid-svg-wrapping="true" loading="lazy"

class="tdi-image constrained new-image-h-50 mb-2" />

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>Name of Product</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>(350ml)</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-base ">

<div>

<span>Ut wisi enim aled minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo facilisi consequat. Duis autem vel eum iriure dolor in nostrud hendrerit in vulputate velit essem lestie

consequat vel illum iusto odio lobortis.</span>

</div>

</div>

</div>

Each product container is the same and in this example there are four but you can have 2,3,4,6 inner containers, to do this change the ‘col-md-3’ class to col-md-2 for 6 items, col-md-4 for three items or col-md-6 for 2 items.

The product container has one image set at 50vh (1/2 the height of the vertical screen area) and three areas of text. To make the image 50vh we make a custom class and add it to the CSS area the custom class is.

.new-image-h-50{
height:50vh;
}

The text fields are basic with the first two having a colour class of ‘text-green-600’ and font size of ‘text-xl’ where as the body text uses a font size of ‘text-base’.

Complete Html

<div class="row my-3">

<div class="col-12 col-md-3">

<img layout="cover" target="_blank" resizable="true" src="" avoid-svg-wrapping="true" loading="lazy"

class="tdi-image constrained new-image-h-50 mb-2" />

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>Name of Product</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>(350ml)</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-base ">

<div>

<span>Ut wisi enim aled minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo facilisi consequat. Duis autem vel eum iriure dolor in nostrud hendrerit in vulputate velit essem lestie

consequat vel illum iusto odio lobortis.</span>

</div>

</div>

</div>

<div class="col-12 col-md-3">

<img layout="cover" target="_blank" resizable="true" src="" avoid-svg-wrapping="true" loading="lazy"

class="tdi-image constrained new-image-h-50 mb-2" />

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>Name of Product</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>(350ml)</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-base ">

<div>

<span>Ut wisi enim aled minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo facilisi consequat. Duis autem vel eum iriure dolor in nostrud hendrerit in vulputate velit essem lestie

consequat vel illum iusto odio lobortis.</span>

</div>

</div>

</div>

<div class="col-12 col-md-3">

<img layout="cover" target="_blank" resizable="true" src="" avoid-svg-wrapping="true" loading="lazy"

class="tdi-image constrained new-image-h-50 mb-2" />

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>Name of Product</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>(350ml)</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-base ">

<div>

<span>Ut wisi enim aled minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo facilisi consequat. Duis autem vel eum iriure dolor in nostrud hendrerit in vulputate velit essem lestie

consequat vel illum iusto odio lobortis.</span>

</div>

</div>

</div>

<div class="col-12 col-md-3">

<img layout="cover" target="_blank" resizable="true" src="" avoid-svg-wrapping="true" loading="lazy"

class="tdi-image constrained new-image-h-50 mb-2" />

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>Name of Product</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-xl text-green-600">

<div>

<span>(350ml)</span>

</div>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea"

class="p-0 mb-2 tdi-text text-base ">

<div>

<span>Ut wisi enim aled minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo facilisi consequat. Duis autem vel eum iriure dolor in nostrud hendrerit in vulputate velit essem lestie

consequat vel illum iusto odio lobortis.</span>

</div>

</div>

</div>

</div>

Complete Custom CSS

.new-image-h-50{
height:50vh;
}

Title and three column text

 

CSS

.bg-new-colour{
background-color:#969696;
}

<div class="row bg-new-colour text-white">

<div class="col-md-12 pt-20 pb-4">

<div class="mx-auto w-11/12">

<!-- add Title here -->

<!-- add Main Container here -->

</div>

</div>

</div>

In setting up the main container we add the background colour to the row with the bg-black class. If you want to add your own defined colour then create a new class and insert it into the css panel on the right e.g.

.bg-new-colour{
background-color:#969696;
}

where you use the hex or rgb colour of your own choosing you then just replace any existing background with the new one ie replace ‘bg-black’ with ‘bg-new-colour’. Setting the text colour here will set the text colour for all children to that colour unless it is specified on the individual text element. Here we have set the colour to white – ‘text-white’

The column is set with a top (pt-20) and bottom (pb-4) padding. For the child div the width is set to 11/12 of the width of the parent div and the x margins are set to auto (mx-auto w-11/12) so that the columns are centred.

Title

<div placeholder="Write some text here..." placeholder-target="textarea"

class="tdi-text text-5xl font-serif text-center text-yellow-400 mb-20">

<span>ADD THE TITLE HERE</span>

</div>

The title is a tdi-text class with a text size of (text-5xl) using i different font (font-serif), the text is centred (text-center), coloured yellow (text-yellow-400) with a margin at the bottom of (mb-20).

Main Container

<div class="row">

<!-- add Content here -->

</div>

The main container consists of a row containing three identical columns

<div class="col-md mb-16">

<div placeholder="Write some text here..." placeholder-target="textarea"

class="tdi-text text-4xl font-serif mb-10">

<span>1. SUB TITLE</span>

</div>

<div placeholder="Write some text here..." placeholder-target="textarea" class="tdi-text text-lg max-w-sm">

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in</span>

</div>

</div>

The columns consist of a title and body text the title text using ‘font-serif’ and the body text using the default text

Complete Html

<div class="row bg-black text-white">
<div class="col-md-12 pt-20 pb-4">
<div class="mx-auto w-11/12">
<div placeholder="Write some text here..." placeholder-target="textarea"

class="tdi-text text-5xl font-serif text-center text-yellow-400 mb-20">
<span>ADD THE TITLE HERE</span>
</div>
<div class="row">
<div class="col-md mb-16">
<div placeholder="Write some text here..." placeholder-target="textarea"

class="tdi-text text-4xl font-serif mb-10">
<span>1. SUB TITLE</span>
</div>
<div placeholder="Write some text here..." placeholder-target="textarea" class="tdi-text text-lg max-w-sm">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in</span>

</div>
</div>
<div class="col-md mb-16">
<div placeholder="Write some text here..." placeholder-target="textarea"

class="tdi-text text-4xl font-serif mb-10">

<span>2. SUB TITLE</span>
</div>
<div placeholder="Write some text here..." placeholder-target="textarea" class="tdi-text text-lg max-w-sm">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in</span>

</div>
</div>
<div class="col-md mb-16">
<div placeholder="Write some text here..." placeholder-target="textarea"

class="tdi-text text-4xl font-serif mb-10">

<span>3. SUB TITLE</span>
</div>
<div placeholder="Write some text here..." placeholder-target="textarea" class="tdi-text text-lg max-w-sm">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in</span>

</div>
</div>
</div>
</div>
</div>
</div>