Box demo - Span Arts
19028
page-template,page-template-full_width,page-template-full_width-php,page,page-id-19028,bridge-core-2.3.8,ajax_fade,page_not_loaded,,qode_grid_1200,footer_responsive_adv,qode-child-theme-ver-1.0.0,qode-theme-ver-22.3.1,qode-theme-bridge,disabled_footer_bottom,qode_advanced_footer_responsive_1000,wpb-js-composer js-comp-ver-6.6.0,vc_responsive

Demo page

Header row class is: bigheads darkstripe

The important things about this page are not just how it looks to the visitor, but how you edit it. So take a look at it in editing mode, so you can see the different ways of setting up boxes.

Page width

I  have set this to be a Full Width page. In the options on the right, under Page Attributes / Template, choose Full Width instead of Default.

Individual rows can be set to be In-grid or Full Width. In-Grid (like this block) makes text easier to read as a single column; Full Width is better for multiple columns and tables of boxes.

Top header

The header at the top of the page is a Row containing a Text block. The text itself is Header1 and Header3.

The settings of the Row (click the pencil icon of the row – not the text box or the column) should be:

  • Extra class name: bigheads darkstripe
    (Do without the darkstripe if the background picture is dark)
  • Row type: Row
  • Type: Full Width
  • Background image: a nice wide one

If you want the background to move interestingly as you scroll the page, set Row type to Parallax and choose a background image that is both high and wide. See example on the About page.

Boxes

There are three ways of making a set of boxes.

  1. Inline Columns: If there is more or less always going to be a particular set of boxes, arrange them in several rows and columns. Use our boxcolumns class to achieve a uniform effect.
  2. Inline Boxes: If the boxes are to show the full text of each item, put them into a table using a “Qode Element Holder.” When you add another item at the front, the rest automatically wrap around.
  3. Post Boxes: If you want (a) a short text of each item here and the rest on its own page; and/or (b) the same items to appear on more than one page – e.g. on the Covid page and the News page. Write each item as a separate post, and assign it to the appropriate categories – e.g. news and covid. In this page, insert an Activities shortcode.

The exact shapes and sizes are set by the stylesheet. They can be adjusted (with suitable skills!) Although it is possible to tweak format settings on each separate item, doing so isn’t recommended, as the different elements then get out of step.

Here’s some Inline rows and columns. In the settings (pencil icon) for each Row, set Type to Full Width, and Extra Class to boxcolumns.

The most convenient way to start a new row is to duplicate an existing one.

Row 2, Column 1

I met a traveller from an antique land,

Who said—“Two vast and trunkless legs of stone

Stand in the desert. . . . Near them, on the sand,

Half sunk a shattered visage lies, whose frown,

And wrinkled lip, and sneer of cold command,

Tell that its sculptor well those passions read

Which yet survive, stamped on these lifeless things,

The hand that mocked them, and the heart that fed;

And on the pedestal, these words appear:

My name is Ozymandias, King of Kings;

Look on my Works, ye Mighty, and despair!

Nothing beside remains. Round the decay

Of that colossal Wreck, boundless and bare

The lone and level sands stretch far away.”

Row 2, Column 2

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Column 3

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

If some of your texts are particularly long, set Extra Class to boxcolumns showSomeBelow.

‘showSomeBelow’ fixes the height of the boxes.

Column 1

This is a longer text, but we’ve limited the height of the row. To do this, open the settings of the Row and in the Extra Class Name field, enter:
boxcolumns showSomeBelow

The rest appears when the reader clicks the box.

 

Is there for honest Poverty

That hings his head, an’ a’ that;

The coward slave – we pass him by,

We dare be poor for a’ that!

For a’ that, an’ a’ that.

Our toils obscure an’ a’ that,

The rank is but the guinea’s stamp,

The Man’s the gowd for a’ that.

 

What though on hamely fare we dine,

Wear hodden grey, an’ a that;

Gie fools their silks, and knaves their wine;

A Man’s a Man for a’ that:

For a’ that, and a’ that,

Their tinsel show, an’ a’ that;

The honest man, tho’ e’er sae poor,

Is king o’ men for a’ that.

 

Ye see yon birkie, ca’d a lord,

Wha struts, an’ stares, an’ a’ that;

Tho’ hundreds worship at his word,

He’s but a coof for a’ that:

For a’ that, an’ a’ that,

His ribband, star, an’ a’ that:

The man o’ independent mind

He looks an’ laughs at a’ that.

 

A prince can mak a belted knight,

A marquis, duke, an’ a’ that;

But an honest man’s abon his might,

Gude faith, he maunna fa’ that!

For a’ that, an’ a’ that,

Their dignities an’ a’ that;

The pith o’ sense, an’ pride o’ worth,

Are higher rank than a’ that.

 

Then let us pray that come it may,

(As come it will for a’ that,)

That Sense and Worth, o’er a’ the earth,

Shall bear the gree, an’ a’ that.

For a’ that, an’ a’ that,

It’s coming yet for a’ that,

That Man to Man, the world o’er,

Shall brothers be for a’ that.

Column 2

I met a traveller from an antique land,
Who said—“Two vast and trunkless legs of stone
Stand in the desert. . . . Near them, on the sand,
Half sunk a shattered visage lies, whose frown,
And wrinkled lip, and sneer of cold command,
Tell that its sculptor well those passions read
Which yet survive, stamped on these lifeless things,
The hand that mocked them, and the heart that fed;
And on the pedestal, these words appear:
My name is Ozymandias, King of Kings;
Look on my Works, ye Mighty, and despair!

Nothing beside remains. Round the decay
Of that colossal Wreck, boundless and bare
The lone and level sands stretch far away.”

Column 3

The common cormorant, or shag, lays its eggs in a paper bag. The reason you will see, no doubt: it is to keep the lightning out. But what these unobservant birds have not noticed is that herds of wandering bears may come with buns, and steal the bags to hold the crumbs.

(Just as an aside: This row is an example of a parallax background – i.e. a background picture that moves as you scroll up and down. The Parallax option and the background picture are set in the settings of the row. Choose a nice wide picture.)

Here’s an example of Inline Boxes. The whole thing is in a Qode Element Holder, and each item is a Qode Element Item. Each item contains couple of text boxes and a Single Image box. To make a new item, begin by duplicating a Qode Element Item.

Most recent COVID statement

Statement July 2020:

As a consequence of the Covid-19 Virus pandemic, the Span Arts building in Narberth remains closed to the public for the foreseeable future. For the protection of our artists, audiences and volunteers, we have taken the difficult decision to postpone all of our large-scale live events and we do not expect to resume normal services until at least 2021. New social distancing measures simply make it financially unviable for us to do so.

For our full statement read our blog here LINK?  [Alan] For this type of thing, the Post Boxes are better. The full statement is in the post, and what appears here is either an abbreviation of that text, or the excerpt you set.

Welcome back

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Keeping you safe and comfortable

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

What to expect

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Track and trace

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Header

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Header

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Header

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Header

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Header

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Here’s an example of the Post Boxes approach. Add more posts in the Covid category to see them appear on the published page.

In the editor, the row below just contains an invocation of the activities shortcode. See the Span Edit Guide for an explanation of the parameters.

[activities category=Covid style=”showSomeBelow colour” parts=”{title subtitle} img text” order=date count=12]

Covid