This panel should only show when the screen size is less than 768 pixels wide…..
Mobile only
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
report
design
200+ reports designed over 20 years, you’re in safe hands with Pad.
(Text and slide module)
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.
Image governs height
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”
services three-section style (h2)
branding (h3)
This section forms cards based on the selected target pages. It will use the featured image of the target page or post for the card along side this page or post title (above image). This intro is optional. It is a WYSiWYG field so the title style can be adjusted
Hello HTML section World
Test 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.
