How is this constructed ?

HOW TO SET this up

This column (not the text box) is set to a style of ‘color1’, which can be changed in the CSS. There are also color0 (white with padding, for plain text boxes), color2, and color 3 (again, changeable in the CSS). The ‘subhead’ over the head is the CSS class ‘superhead’, and colors can be changed in the CSS.

The column on the right uses a background-image to have the image bleed right to the page border, and stretch to fit the text in this column. It is a specific image named in the CSS, in this case the class is bkgd1.If you want another or different image, write the code. The row is then set to ‘stretch row’, 0px column gap, full height row, equal height columns.

How is this constructed ?

HOW TO SET this up

  • Each row has a bottom margin of -68px.
  • Row stretch: Stretch row
  • Columns gap: 0px
  • Full height row? YES
  • Columns position: Top
  • Equal height: YES
  • Content position: Middle

The column on the left uses a background-image to have the image bleed right to the page border, and stretch to fit the amount of text in this column. It is a specific image named in the CSS, in this case the class is bkgd2. If you want another or different image, write the code. The row is then set to ‘stretch row’, 0px column gap, full height row, equal height columns. As required, adjust column padding/margin to match image box.

what do we offer ?

more how-tos

Page title is set to {display:none;}, so whatever you put in the page title area does not show. This allows us to use the surtitle, and place that and the apparent page title (actually H2) inside the coloured box. Page name (for tab title) can also Quick Edit.

The column on the right is set to CSS of ‘color3’.

The surtitle on this box has a span setting of ‘surtitle-color3″.

DO NOT set the row CSS to color0 to make it white. ONLY use the columns, or the row will pad itself out.

[icon name=”tags” class=”” unprefixed_class=””]

branding design
Nullam in commodo urna, a scelerisque justo. Integer tellus libero, vestibulum non mauris.

[icon name=”connectdevelop” class=”” unprefixed_class=””]

web design
Nullam in commodo urna, a scelerisque justo. Integer tellus libero, vestibulum non mauris.

[icon name=”codepen” class=”” unprefixed_class=””]

web development
Nullam in commodo urna, a scelerisque justo. Integer tellus libero, vestibulum non mauris.

[icon name=”lightbulb-o” class=”” unprefixed_class=””]

marketing
Nullam in commodo urna, a scelerisque justo. Integer tellus libero, vestibulum non mauris.