Panels – PJS
Sample PlainJoe Panels
Using Custom Gutenberg Blocks
Below are some custom PlainJoe Panels that can be used on your website. This text is added using the General Content panel which contains a title, subtitle and wysiwyg field.
There is also a button added to the wysiwyg field using custom shortcode.
Multiple Columns Panel (with 2 columns)
Column 1
Multiple Column panel using two columns, both with an image, title and content. The second column also has a button.
Second Column in two column layout
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Call to Action panel with background graphic or solid color. Title, content text, and button are all optional. Text color on this panel can also be changed to better show up against the background used. This text is not intended to be formatted and is a text area field.
Multiple Columns Panel (with 3 columns)
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Mauris luctus mattis ante. Morbi quis nulla sed metus ultrices sollicitudin. Nunc lacinia. Sed malesuada libero et mauris. Cras ipsum arcu, malesuada vel, nonummy a, lobortis sit amet, urna.
Aliquam in pede. Phasellus malesuada, velit eu mattis ornare, quam risus feugiat quam, quis bibendum lectus odio tincidunt turpis. Cras metus. Donec orci libero, consectetuer sed, eleifend et, tristique non, elit.
Multiple Columns Panel (with 4 columns)
Lorem Ipsum Dolor sit amet
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.
Suspendisse in augue
Mauris luctus mattis ante. Morbi quis nulla sed metus ultrices sollicitudin. Nunc lacinia. Sed malesuada libero et mauris. Cras ipsum arcu, malesuada vel, nonummy a, lobortis sit amet, urna. Maecenas nec purus eu nisl auctor dapibus. Aenean nonummy venenatis dui. Phasellus nec quam.
Aliquam in pede
Phasellus malesuada, velit eu mattis ornare, quam risus feugiat quam, quis bibendum lectus odio tincidunt turpis. Cras metus. Donec orci libero, consectetuer sed, eleifend et, tristique non, elit.
Nunc scelerisque tellus
Donec ac felis id libero pharetra feugiat. Cras vehicula lacinia lorem. Sed venenatis ipsum sed augue. Nulla metus diam, dignissim nec, dapibus vel, imperdiet pretium, tellus. Vestibulum porta. Nullam neque quam, condimentum nec, euismod sit amet, gravida eu, quam. Praesent consectetuer pulvinar eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut tincidunt venenatis lacus.
Two Column panel - text with media
The Two Column panel can show either a video embed or an image, and you can choose which side the media will show on. This panel has an embedded Vimeo video on the left side with the title, text, and a button on the right (all of which are optional).
Two Column panel - text with media switched
This Two Column panel is the same as the one above, but has an image on the right side with the title and text on the left. The button was not used on this panel but can be added if desired.
Accordion Panel
This Accordion panel is useful for adding FAQs or other content with multiple heading and description elements to keep the page from displaying too much content at once.
