At a glance

Sometimes you might want to wrap a block of text or other content in a box to highlight it or as a pull out element. If so, simply wrap your block of text within the [at_a_glance][/at_a_glance] shortcode. There are quite a lot of useful parameters for this shortcode so you can create some really interesting blocks of content.

[at_a_glance bg-colour="white" bg-image="" colour="inherit" border="transparent" padding="10px" height="0" class="" id="" url=""]

...text block or image etc

[/at_a_glance]

Parameter options:

bg-colour = the background colour of the box. Use either a hex code or friendly name e.g. #444 or blue bg-image = the URL of an image to fill the width and height of the box. Make sure it's just the URL of the image and not an img src tag as well. colour = the text colour of the box. If not specified, it will inherit from further up the stylesheet border = add a border around the box e.g. solid 1px black padding = the internal padding of the box to control how close the text is from the edges height = sets a minimum height for the box (think how this box gets displayed on mobile screens) class = type a CSS class name if you wish to control this box further via a CSS stylesheet id = type a CSS id if you wish to control this box further via a CSS stylesheet url = type a URL if you wish this box to be clickable to another page or external address

Depending on the site, some further tweaks to the CSS might be required to ensure that all of this styling works. Ask for help if required.

If you don’t specify one of the parameters then it’ll use the default ones as above.

Example 1

[at_a_glance bg-colour="#657d65" colour="white" v-align="bottom" height="400"]

...text block or image etc

[/at_a_glance]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci quam, venenatis vel ante a, luctus semper elit. Morbi cursus iaculis quam et faucibus. Duis interdum lacus eget erat elementum eleifend. Ut porta, arcu vel fringilla pharetra, eros libero pharetra quam, sit amet porttitor erat turpis bibendum lectus. Phasellus molestie est nec sagittis suscipit. Suspendisse maximus, justo sed finibus faucibus, risus ligula luctus massa, non dictum enim tortor in lorem. Aliquam erat volutpat. Integer convallis tortor id porttitor rhoncus. Vestibulum fringilla mi ac orci blandit ullamcorper. Curabitur porttitor, justo vel imperdiet efficitur, dui sapien aliquam mauris, a suscipit eros est non massa. Etiam commodo lobortis dolor, in ullamcorper velit ultricies sed. Etiam tincidunt dui velit, id egestas dui sollicitudin sit amet. Maecenas tellus nisl, luctus ac neque vitae, sollicitudin tempor nisi.

Example 2

[at_a_glance bg-image="https://duncanarrow.com/wp-content/uploads/2021/02/stormy-background.jpg" colour="#271616" border="2px solid #627e8b"]

`At a glance`

[/at_a_glance]

Example 3

[at_a_glance bg-image="https://duncanarrow.com/wp-content/uploads/2021/02/stormy-background.jpg" colour="#fff"]

`Testimonials`

 [line align="centre" colour="white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci quam, venenatis vel ante a, luctus semper elit. Morbi cursus iaculis quam et faucibus. Duis interdum lacus eget erat elementum eleifend
[/at_a_glance]