Navigation
This is your flexible content page guide
You can use this page as a guide to see all the options for building new pages on your website.
Throughout the page, we will guide you on how certain elements can be used. You will also notice some dummy text - just ignore this- it's just to fill up pages.
You have three options for page headers - light, dark and simple. We have used a light header for this page, with the opacity set to 60%. This can be adjusted depending on the image used behind it. Here is an example of the dark header. A simple header means that it doesn't have any text at all, like on the projects page.
This section can be edited in the Page Header block.
This section is using a column block
You can adjust the column block width depending on your needs. The options are endless in this section because you can split your columns into three options:
- 1/3 + 2/3
- 1/2 + 1/2
- 2/3 + 1/3
This is an example of the 1/2 + 1/2 column. You can also set your column content to line up at the top, be centred or sit at the bottom.
There are three options for image display on your website. Pattern 1 (which we are using), Pattern 2, which can be seen further below, or regular (which can be adjusted to be Cinemascope, Widescreen, Landscape, Classic or Portrait).
This image is set to sit centred with the text. You can adjust this to be top, centre or bottom.
You have three background options
Using the BPE colour palette, we've created three different background colour options for your website - white, light blue or navy blue.
You can also add elements to the content sections. Can you see the yellow/green triangle in the bottom right-hand corner and the light blue element coming from the right - these are all controlled by you!
There are six options for alternate text on your website. Below (and throughout this page), we will show you an example of the options. The text you're reading right now is normal text.
This is an example of your H2 text.
This is an example of your H3 text.
This is an example of your H4 text.
This is an example of your H5 text.
This is an example of your H6 text.
This is an example of your Lead Paragraph text.
You can add cards to your pages
This example has pulled cards directly from your blog section. This means that each time a new blog is added, it will automatically be added to any page where this section is used. We used a slider option, but you can also set it to paginate (example further below).
The New Bridgewater Bridge
Warrawee Suspension Bridge
Latrobe Flood Mitigation Project
You can add quotes to your pages. These can be testimonials from happy clients or important quotes from articles to showcase. You can also add images of person if you'd like. Volluptas qui opta volendis sam laccuptatis nobitat uriostoribus nis maximagniam, con pora earumquist lacidunt quatem utam eribus si atur? Em as ad quam ab ium inis molupta sincium si dere doluptam facia cus.
You can easily build your own forms
Here we have used the form in a column, but you can use it however you'd like.
Columns are a great way to display lots of information without having to scroll
This is a lead paragraph for when you want the first line to stand out.
Morbi hendrerit sapien facilisis, elementum sem vitae, aliquet est. Duis lobortis leo non tincidunt fermentum. Mauris dolor velit, pharetra id elit quis, blandit volutpat purus. Nam pretium sit amet nibh in suscipit. Praesent sit amet nisl tortor.
Below is an example of a list:
- I went to buy some camo pants but couldn’t find any
- I failed math so many times at school, I can’t even count
- When life gives you melons, you might be dyslexic
You can highlight words by setting to bold in the heading section
This is your lead paragraph text. Great to use at the start of paragraphs to grab attention.
An sicivasdam ium sum obunum essi intia issi patilius Cas clescips,Cer abis. Efatifectus hores mantrec vendet; nost vis effreores, Catum murs ad serbis Ahalici oe.
Dot point list here
- Devil’s Gate Refurbishment
- Warawee Suspension Bridge
- Hoggs Bridge
- Union Bridge
- Northbank to Seaport Pedestrian Bridge
Stack your content in columns
This is an example of how to stack content neatly in columns.
You can also break up content with a sub heading, smaller text and then some lead text. As displayed in this section.
Ovit lic tem aut volorer untenet laut audi blame porum quia culparum acero tem venimus re, sandunt alitibus nobit, tem ilitaest apienda net quiantes dolorem sit doluptae ex eicitiunt ut repudae pliatusanimo erum consedi illitibust, sinulla ccuptum antio.
Ovit lic tem aut volorer untenet laut audi blame porum quia culparum acero tem venimus re, sandunt alitibus nobit, tem ilitaest apienda net quiantes dolorem sit doluptae ex eicitiunt ut repudae pliatusanimo erum consedi illitibust, sinulla ccuptum antio. Nequo et eos antiusam, suntis ent iliquam nonsece stinven ihicient, sumqui ipita quatibearia atur sam, vitatem harcipic to testrum re nonse rehenti onsequis id molores es non prae rendisntiusam, suntis ent iliquam nonsece stinven ihicient, sumqui ipita quatibearia atur sam, vitatem harcipic to testrum re nonse rehenti onsequis id molores es non prae rendis et eaqui odipis volessum dicatque soloreh endame mo occuptati offici quidest exeris antiur, untinum.
Dot point heading here
- Con nimpore ctotate sincia quae re occus niam, vendand entias nienis
- Et esed qui audit vel mo qui occullant eossit ventiam.
- Ecepro conecaborem doluptae es del magnat.
- Menis dernatem volorepudio corro quidessusdam haruntintur accus.
- Escia aut et hariae minturibust, sum autatio nsectotatis moluptissum, tetur secupta nihilibus nonseque pa dolupta vene nost derunde rnatus.
- Entions equiasin eaquuntiis andemque aut iducipici nessi ut id maionsenis dit sim ni ut poria volorumquae consedit omnihitatis ut exceptat.
You can display content in tables
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Table item listing | Table item information | Table item information |
| Table item listing | Table item information | Table item information |
| Table item listing | Table item listing.imaior sundem volut que sum id et, seque eossecea im et eiume erum... | Table item listing.imaior sundem volut que sum id et, seque eossecea im et eiume erum... |
| Table item listing | Table item information | Table item information |
Accordion section (great for FAQ's)
She sells seashells by the seashore
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
I scream, you scream, we all scream for ice cream
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
If a dog chews shoes, whose shoes does he choose
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Share media through a gallery
There are three options for your gallery - slider, 3-slider or gallery. This option is the 3-slider. The gallery option displays six smaller images at a time, whereas the slide option shows one image at a time. You can edit and adjust this on your own.
Use alerts to stand out
Rommo int. Nordi, atorum occhil hoc omneum possenatum comandam contemeios vid.
An sicivasdam ium sum obunum essi intia issi patilius Cas clescips,Cer abis. Efatifectus hores mantrec vendet; nost vis effreores, Catum murs ad serbis Ahalici ocupiceps, publium sunc vicae in publii in tesendi, nonve, omnit, verorum. De aurorum paris. Simius atiquem forussit Catquid consum diem iam deo iam ublina, nos occhum ia ducit veribus potilintiam deluder isquam rompritanum.
Bus nes molendi dit, seque aut evenihi ciatemo llenimaios alit quam ersped magni re remodit dolut rati sum cumqui opta quaesto blabore porrum ipsapel ilignim quaeri to voloriorae. Piciam, sequodis debist fuga. Et ut harciis reius est acidebis eatem. Ut volecatus volupta spiendaeria sanim nissequam qui corro tet utemporibus dolorecto excessunt peritio. Ignimilia sint et ero volor rehenihit, net ma quatquates vit alibus.
Ro viderro dicil is sed quunti utemporum id molorei ctotam apedipiendis elest magnatis aut experor epudignis moluptas am nusaepe rumquam, accus magnatur aut miliqui nem. Nam harum dolupta sperem quat am, occum sequatem quiae nescipsum is et voluptia voluptaque si tem eatiunt volore parum as vitate sunt, to es dolorepro cuptati onserovit facernatios duciis reces etur? Feriasp erfercitio. Et et quas dictem nobit autem aut quamuscil es doloris duciet est laborep udanderumet aut ipsant est et ventorp oruptat.
You can use cards to navigate users throughout the site
Our Services
Work with us
Our Projects
You can also create your own cards when needed
Bridgewater Bridge
Jarrod Thomas
Warrawee Bridge
Embed videos from your Youtube channel
Rommo int. Nordi, atorum occhil hoc omneum possenatum comandam contemeios vid.
An sicivasdam ium sum obunum essi intia issi patilius Cas clescips,Cer abis. Efatifectus hores mantrec vendet; nost vis effreores, Catum murs ad serbis Ahalici ocupiceps, publium sunc vicae in publii in tesendi, nonve, omnit, verorum. De aurorum paris. Simius atiquem forussit Catquid consum diem iam deo iam ublina, nos occhum ia ducit veribus potilintiam deluder isquam rompritanum.
Show off your services through this tabbed section
Subject One heading
Bridges are where we cut our teeth and remain a core part of our business.
Their successful delivery utilises our full suite of skills from design, prefabrication, temporary works, foundation piling, insitu concrete, heavy lifting, and roadworks.
We construct our bridges in prestressed concrete, steel and aluminium to suit the requirements of the project. De aurorum paris. Simius atiquem forussit Catquid consum diem iam deo iam ublina, nos occhum ia ducit
Subject two heading
Bridges are where we cut our teeth and remain a core part of our business.
Their successful delivery utilises our full suite of skills from design, prefabrication, temporary works, foundation piling, insitu concrete, heavy lifting, and roadworks.
We construct our bridges in prestressed concrete, steel and aluminium to suit the requirements of the project. De aurorum paris. Simius atiquem forussit Catquid consum diem iam deo iam ublina, nos occhum ia ducit
Subject three heading
Bridges are where we cut our teeth and remain a core part of our business.
Their successful delivery utilises our full suite of skills from design, prefabrication, temporary works, foundation piling, insitu concrete, heavy lifting, and roadworks.
We construct our bridges in prestressed concrete, steel and aluminium to suit the requirements of the project. De aurorum paris. Simius atiquem forussit Catquid consum diem iam deo iam ublina, nos occhum ia ducit
Subject four heading
Bridges are where we cut our teeth and remain a core part of our business.
Their successful delivery utilises our full suite of skills from design, prefabrication, temporary works, foundation piling, insitu concrete, heavy lifting, and roadworks.
We construct our bridges in prestressed concrete, steel and aluminium to suit the requirements of the project. De aurorum paris. Simius atiquem forussit Catquid consum diem iam deo iam ublina, nos occhum ia ducit
You're connected
You can easily link your Facebook account as a content block on any page.
June 04, 2024
June 04, 2024
May 14, 2024
May 13, 2024
May 08, 2024
May 08, 2024
April 30, 2024
April 24, 2024
