Skew Example



Skewing the Speechbox can be accomplished across the X-Y coordinates (left – right) on the base line.



For those of you who have seen our product display pages. You will have seen a skewed left side caption bar with a title, next to the product description. Exactly like you see here.

Accomplished very easily by adding a HRticulate module with a transparent line, and a stylized speechbox. A few settings is all it takes to get an effect like this.

Background color, font choice, skew up/down -9º — Presto!

No graphics are required – Neat!

Toggle title

Toggle content goes here, click edit button to change this text.




Stack two rows on top of each other. One row containing all the verbiage, description or paragraph text. This row has padding, and a border to enhance the look – this is optional.

The other row contains the HRticulate module with the line settings applied to move the speechbox to a lower position over the row it has been placed. With this spacing accomplished the end result is a bordered, box with an angled title, completely responsive.



Create two rows

The first row contains the HRticulate module – all the settings to make a skewed title box are shown in the right details pane.

In the second row add your text or your descriptive titling. Use the design options of the text box row to add padding inside the row, and add a border to the row. This is the base styling of the text area, it is on this, we will add the HRticulate module, and the settings for the skewing feature.




As with everything, some finessing may be required.

There may be a need to create larger or smaller areas between the elements to come to the desired result. Sometimes adjusting the settings for a row, or container will help achieve what is required.

Viewing the backend editor in visual mode will be of immense help to visualize the results.




Speechbox Settings
Line fill : Transparent
Font : Arial Black

Font Color : #000000
Font Size : 28
Aligned : Left
Background : #b6d6a9
Extra Bottom Spacing : 50
Right Border : 8
Right Border Color : #000000
Corner Radius : 4



Skewed Settings
Line : Transparent
Font : Lucidia Sans

Font Color : #000000
Font Weight : Bold
Font Size : 12

Aligned : Centerd
Letter-Spacing : 3
Background : #fee28a
Top/Bottom Font Padding : 12
Left/Right Font Padding :16
Extra Bottom Spacing : 12
Extra Top Spacing : -20
Right-Left-Top Border : 2
Border Color : #000000
Bottom Border 4
Bottom Border Color : #d32c0a
Corner Radius : 3
Speechbox Position : 290
Skew Up/Down : -9

Scroll Up