Allsports Therapy WordPress User Guide

A guide to WordPress (WP) and WP Bakery (WPB)

Extra class name

When you edit a block within VB, you will see a field labelled ‘Extra class name‘ – of which we have developed a list of classes that can be added here to perform different functions and styles.

Multiple class names can be added simply leaving a space between each one.

A list of these classes and their functions are listed below for you:

whitetext – Makes text white for when used reversed on a darker  background colour

desktoponly – Will only show on desktop screen displays

mobileonly – Will only show on mobile screen displays

contained – This is a commonly used class and sets a max text content width to 900px/centred.

centered_h2 – This class adjusts the top and bottom margins for specific use. (margin-bottom: 0!important;margin-top: 20px!important;)

.centered_h2 { margin-bottom: 0!important;margin-top: 20px!important;}

colreset –  This is an important one for mobile formatting and is quite often used in this site. It resets left and right manual/custom column padding added in VB that may not be required on mobile. For example if you want to add 35px right hand padding on desktop to give copy more space from the right hand section – you would not want this on a single column mobile display so this class resets the padding to the default padding so allows consistent padding on mobile but flexibility to add custom padding on larger/desktop screen sizes.

floatright – When content is set to full browser width, this class ensures the text content does not extend further than than the 1200px grid. This works for content used on the left or right side of the page.

 

mobileposter – When a large image is used to scale full or half width the screen for example, when viewed on a mobile VB does not scale the proportions particularly well and so this class turns the image into appropriate size mobile image proportions.

reverse – This class is used to perform a reverse column stack. So for example, natively when content reflows responsively for mobile view, right content typically ‘wraps’ under the left – this class allows the reverse of this to happen and right content to ‘stack’ above the left in mobile view.

speech-bubble – This formats the Speech Bubble correctly with the tail.

 

reset – This is used to resent the styles used for the speech bubble like margins and padding and is typically used in this site for mobile screen displays.

boxed blue – This class creates the blue key-line boxed style.

 

pp_background –  This style allows you to format icons in the bottom right hand corner of a content box.

 

Arrows between sections:
To add an arrow between sections the following classes can be used to dictate what colour it’s coming from or what colour it’s going too. Depending on if is ‘masking’ an image will depend on what version you use.

For example:

towhite – This masks the image it’s coming from with the colour it’s going to.

 

towhite – Arrow masked to White
toorange – Arrow masked to Orange
toteal – Arrow masked to Teal
fromgrey – Grey down arrow
fromorange – Orange down arrow
fromteal – Teal down arrow

banner – #062641 Solid Deep Blue banner

blue banner – #062641 Deep Blue translucent banner (to allow images to be uploaded with this colour overlay)

Customer Reviews shortcode colours:
Grey: #f2f2f2
Mid Blue: #00749c

Button styles:
<a class=”outline-button” href=”#”>Standard Button</a>
Standard Button

<a class=”outline-button inverse” href=”#”>Inverse Standard Button</a>
Inverse Standard Button

<a class=”outline-button blue” href=”#”>Blue Button</a>
Blue Button

<a class=”outline-button white” href=”#”>White Button</a>
White Button

Info Section:
infosection – To be added to the Inner Row for 3 column info box section to correctly format the infobox 3 column set.
infobox – To be added to the Text block of each column.

 

max-column-width – This class limits the width of a column to 565px.

 

Forms

The forms use the Formidable form builder to allow management of the fields for these which can be seen in the left hand WP menu bar. Forms are inserted using short codes.

There are dark and light versions of the form which can be identified by clicking on one of the forms, then in the top menu selecting Settings then in the left menu Customise HTML.

When creating a new form – we would suggest that a form is cloned (so it keeps the custom styling we have applied additional to the standard form styling) and then update the form/fields using this duplicated version.

The destination page of the form can be set by selecting a form, then in the top menu selecting Settings then in the left menu selecting General and you will see the ‘Redirect to URL’ option under ‘On Submit’. This allows you to direct the user to a ‘thank you’ page and add the Gtag Snippet tracking in Tracking Code Manager which can be selected on-page.

For data security, we have also selected the option ‘Do not store entries submitted from this form‘.