Testing TinyMCE mods
Pad delivered the radical transformation we were prommised with the new Foster Harrington website. We took Pad’s advice and the phone rings everyday with new enquiries. Even better, the investment in the site was recouped quicker than we anticipated – couldn’t be happier.
20x
increase in
enquiries
110
new clients
per month
44
page one keywords
on Google
We decided to start working with PAD after they came recommended by a trusted industry colleague. We needed to partner with an agency who could quickly grasp the complexity of our products, and PAD delivered just that. Working with PAD is a genuine pleasure, we see them as an extension of our team.
40%
increase in
qualified leads
22%
number of leads
Testing new title section
report
design
200+ reports designed over 20 years, you’re in safe hands with Pad.
(Text and slide module)
Different Gallery
TItle test
This panel should be carefully planned to keep the content to similar length across each instance. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate praesentium sint sapiente mollitia fugiat aperiam!
20x
more enquiries
110
new clients per month
44
keywords on page one of Google
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.
20x
more enquiries
test
keywords on page one of Google
Minus vero et necessitatibus libero magnam voluptatum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate praesentium sint sapiente mollitia fugiat aperiam! Alias fugiat.
324
too long
500%
quis obcaecati recusandae!
24 hours
ewf wef wef wef wef
4
stats is too many
This is the final row in this test. It has a lot less text. Does that impact scroll height or the animation
3
animated rows
1,000,000
lengthy terms entered here to show what happens with too much text!
no stat
Testing Gallery
take your report to the next level
This is a title for the FAQ section
how do you format an annual report?
Again, our process and the information we cover varies enormously on a client-to-client basis, and we have extensive expertise when it comes to meeting the needs of any sector. Whether you’re a nature reserve in Sub Saharan Africa or a Financial Regulator in North London, we’ll make sure every page effectively communicates the necessary information and ideas in a way that’s both engaging and interesting.
What is it?
It’s this
Where is it?
It’s here
the benefits of a good annual report design
Column title
allows key information to stand out
Someone might just skim your annual report, so you need certain information or key findings to stick out on the page.
effectively communicates intricate company business
Convey complicated and long-winded data and industry jargon in a clear, concise and interesting way to non-experts or customers.
Column title
adds some real personality to your brand
Customers and clients will find your annual reports immediately more engaging if they include a little personality and pizzazz.
good creative direction projects innovation
Having an appealing annual report design that tells the right story and conveys data well gives an air of innovation to your company.
Mobile only
This panel should only show when the screen size is less than 768 pixels wide…..
Desktop only
This panel should only show when the screen size is greater than 768 pixels wide…..
Section title (should be omitted for page headers)
Column title
report
design
200+ reports designed over 20 years, you’re in safe hands with Pad.
(General columns module)
Use the Formats
toolbar menu
to apply
Pad styles
check out
our showreel
Meet the team....
pete
director
pete
director
Pete Ipsum dolor sit amet, consectetur adipiscing elit. Pete sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis Pete nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Pete aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
jon
director of business development
jon
director of business development
Jon Ipsum dolor sit amet, consectetur adipiscing elit. Jon quis libero malesuada feugiat. Sed Jon tempor magna, ut feugiat arcu aliquet sit amet. Nulla Jon facilisi. Ut enim ad minim veniam, quis Jon nostrud exercitation laboris. Jon et felis commodo, tristique quam in, facilisis est. Quisque Jon venenatis sem, nec vulputate ex condimentum non.
bex
designer
bex
designer
Bex Ipsum dolor sit amet, consectetur adipiscing elit. Bex sed viverra massa, non commodo enim. Ut Bex vehicula ante, quis cursus nisi fermentum ut. Nulla Bex facilisi, in hac habitasse platea dictumst. Bex quis enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
joe
designer
joe
designer
Joe Ipsum dolor sit amet, consectetur adipiscing elit. Andy quis lorem tincidunt, placerat justo sit BHA, volutpat lacus. Nulla Joe facilisi. Ut enim ad minim Photoshop, Joe ullamco laboris nisi ut aliquip ex ea commodo consequat. Suspendisse Joe blandit nulla, vel suscipit velit volutpat in. Joe aute irure dolor in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
mark
developer
mark
developer
Mark Ipsum dolor sit amet, consectetur WorodPress elit. Mark sed sapien tincidunt, interdum justo at, vestibulum GSAP. Nulla Mark facilisi. Ut CSS ad javascript veniam, Mark ullamco laboris nisi ut aliquip ex ea commodo consequat. Quisque Mark accumsan velit, vel tristique est gravida id.
richard
developer
richard
developer
Richard Ipsum dolor sit CSS, consectetur adipiscing elit. Richard sed diam WordPress, dapibus justo at, vehicula orci. Nulla Richard JavaScript. Ut enim ad minim veniam, Richard ullamco laboris nisi ut aliquip ex ea commodo consequat.
link test (text section)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pad Creative est design agency cum expertise in web et WordPress development. Nulla facilisi in print media etiam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pad Creative etiam in WordPress et print solutiis excellit. Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vitae nunc id felis web projects facilisis.
contact form title (built-in title)
WYSiWYG title (h3)
Want to speak to someone? Please call 020 8662 6030.
Or fill in this brief form and you’ll have your quote in no time.
contact form title (built-in title)
WYSiWYG title (h3)
Want to speak to someone? Please call 020 8662 6030.
Or fill in this brief form and you’ll have your quote in no time.
Text and Slide Module
Title added in main editor. If multiple images, then carousel. Images should have similar proportions (cropped) when in carousel.
Full width image section...
(probably wouldn't have a title or any padding, and be set to full-width)
related case studies (random animation)
We probably don’t need this, but still better style it up – just in case… The number of cards per row can be adjusted in the editor (under options).
Testimonials title (unlikely to be used)
Pad made us feel at ease straight away and had great ideas from the beginning.
Claire BurdenINDECS Consulting Limited
This testimonial should have pink accents
Bob PersonPorksmith
Adding another testimonial will impact the GSAP scroll position further? I think there is (or should be) a constraint on the length of a testimonial in order to avoid a lot of empty space below shorter testimonials. This might look odd where shorter testimonials come before a long one like this.
EEtt
Local Video
(will not auto-play as video contains sound - though, on some devices, playback triggered by scroll position)
Text panel title
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Custom HTML section for testing
Grid title - Gap is editable in admin
(layout will change based on number of elements)
Block 1
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.
Block 2
text
Block 3
text
5 purple
text
6 grey
text
7 default
text
block 8
text
block 9
text
block 10
text
Text Governs Height (optional title)
In this section, the length of the text governs the height of the whole panel with the image expanding to fill…
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Image too short
The panel height is set to IMAGE for this section. In some cases, the image could be too short (not have enough height). In which case, some padding will appear above and below the image.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
General Columns
Column title
You can set individual column widths, add an animation and turn dividers on or off.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
String – Describes a place on the trigger and a place on the scroller that must meet in order to start the ScrollTrigger. So, for example, “top center” means “when the top of the trigger hits the center of the scroller” (and the scroller is the viewport by default). “bottom 80%” means “when the bottom of the trigger hits 80% down from the top of the viewport” (assuming vertical scroll). You can use keywords like “top”, “bottom”, “center” (or “left” and “right” if horizontal: true) or percentages like “80%” or pixel values like “100px”. Percentages and pixels are always relative to the top/left of the element/scroller. You can even use a complex relative value like “top bottom-=100px” which means “when the top of the trigger hits 100px above the bottom of the viewport/scroller”