Partner Card 1
Tousled food truck polaroid, salvia bespoke small batch Pinterest Marfa. Fingerstache authentic craft beer, food truck Banksy Carles kale chips hoodie.
Learn moreComponent Library
Introduction:
This page contains information on the custom modules that were built as part of the 2021-2022 redesign project. The guide is designed for both current/future WordPress CMS Administrators as well current/future web developers for Thoughtforms. While no sensitive information is contained here, it is recommended to keep this page private within WordPress so that search engines do not index this page.
The guide will display a working example of the block/component or a screenshot example, followed by some notes regarding the desired usage and functionality. For any additional questions, not explained in this documentation please contact: dev@expandcreativegroup.com
Quick Reference:
Jump to a description of a certain block or section.
Thoughtforms Custom Blocks
Thoughtforms Listing Blocks
Global / Semi Global Options
How To Reference:
Jump to a description of a process or workflow.
Further Learnings:
For additional information on WordPress, read/watch the workshops provided at:
https://learn.wordpress.org/
Developer Notes:
Animations
Modifications to block animations can be done by adding utility classes provided by animate.style or by using styling overwrites in the /app/resources/assets/styles/ directory.
Return to Top
Thoughtforms Custom Blocks
As part of the 2021-2022 redesign, custom Gutenberg blocks were made for the project. The custom blocks section represents full width/responsive components used to construct a given site page. These blocks will typically present the CMS user with repeatable elements that will be independent of other instances on other pages.
Return to Top
Hero Panel Block:
This block supports two usages. It is always intended to be atop a page and thus will not have any lazy loading features built into it. The first usage is that of a standard Hero Panel, where a single background image will span a large portion of the screen. In this usage, the heading field should be filled out and will display in the panel. An example of this usage can be seen atop this component library page.
The second usage is that of an image gallery. In this usage the CMS user can enter up to 5 slides, and in each case the optional fields for links and captions can be filled out. An example of the gallery usage is shown above this description text.
Usage 1 – Standard Hero Panel:
- Add a Hero Block to the content area.
- Select a Hero image from the media library.
- Enter a heading.
- Leave Link and Caption fields blank.
Usage 2 – Hero Carousel:
- Add a Hero Block to the content area.
- Select a Hero image from the media library.
- Leave the heading field blank.
- Enter Link if necessary.
- Enter Caption field.
- Add up to four more slides as desired.
Return to Top
Intro (Mid Pager) Block:
This block is used for introduction content for a given page. It will animate once a user scrolls down until ~25% of the block is in the viewport. The 3 images on the panel are coded into the panel and are not intended to be changed without code changes. Note that this block is intended to be above and below colored panels, otherwise if placed adjacent to white blocks, utilize the options to hide the top/bottom background images to avoid oddly cropped scenarios.
The panel has required heading and description fields, and an optional toggle to display a stylized quotation. If that toggle is enabled, then two additional fields for the quote and by line will appear. By using the options panel, the CMS user can also hide the corner background images. Note that in tablet and mobile use cases the images are already hidden by default.
We are more than builders, we are part of the community
People who join the Thoughtforms team tend to stay because being part of the Thoughtforms team means you are making a difference, both in the workplace and in the community we serve.
“There is an entire section in the bookstore called self help. What we really need is a section called help others.”
– Simon Sinek
Return to Top
Domino (50/50 or Zig Zag) Block:
The three example panels below illustrate the Domino Block. The block has many customizations and optional fields that can be filled out. The layout is a simple image and content section that occupies about 50% of the screen on desktop use cases. In mobile and tablet use cases the image section will always stack atop the content section.
When placed in succession on the page, use the Options panel to enable the Swap Layout Toggle while also alternating the background color with its neighboring panels. The third example (shown below) illustrates an alternate layout style. In this case, the Smaller Image Layout Toggle and Align Content to Top Toggle are selected in the Options panel, which will reduce the image size in desktop while also vertically aligning it to the top of the panel.
Of note, is a stylized callout group, where the CMS user can enter an icon, heading, and as many list item elements as necessary. Panel three in the below examples shows this feature in action. It is typically used in conjunction with the Smaller Image Layout toggle on the site.
Things You Eat
Babies crawl on floors and get their hands dirty. Babies put their hands in their mouths. That’s how lead paint dust or chips get eaten in old homes. You want to minimize the number of bad things that can get eaten in and around our homes.
Tohn Environmental Strategies of Wayland did an interesting study. They took samples of the “stuff” on the floors of a one-year old home. They found lead, DDT, and other contaminants that are no longer sold in the US. So how did the contaminants get into the house? On shoes. Our homes are part of the broader environment we inhabit and many, if not most, contaminants in our homes come from outside.
Things You Eat
Babies crawl on floors and get their hands dirty. Babies put their hands in their mouths. That’s how lead paint dust or chips get eaten in old homes. You want to minimize the number of bad things that can get eaten in and around our homes.
Tohn Environmental Strategies of Wayland did an interesting study. They took samples of the “stuff” on the floors of a one-year old home. They found lead, DDT, and other contaminants that are no longer sold in the US. So how did the contaminants get into the house? On shoes. Our homes are part of the broader environment we inhabit and many, if not most, contaminants in our homes come from outside.
Things You Eat
Babies crawl on floors and get their hands dirty. Babies put their hands in their mouths. That’s how lead paint dust or chips get eaten in old homes. You want to minimize the number of bad things that can get eaten in and around our homes.
Tohn Environmental Strategies of Wayland did an interesting study. They took samples of the “stuff” on the floors of a one-year old home. They found lead, DDT, and other contaminants that are no longer sold in the US. So how did the contaminants get into the house? On shoes. Our homes are part of the broader environment we inhabit and many, if not most, contaminants in our homes come from outside.
Some strategies include:
- Include a place to remove and store shoes in your design or include a walk-off mat that cleans your shoes when you enter your home to address the situation highlighted above
- Include a place to remove and store shoes in your design or include a walk-off mat that cleans your shoes when you enter your home to address the situation highlighted above
- Include a place to remove and store shoes in your design or include a walk-off mat that cleans your shoes when you enter your home to address the situation highlighted above
Return to Top
Poster Block:
The Poster Block makes use of a large full width background image, with a required heading. Description text and call to action button are optional. Content is offset to the left in desktop/tablet use cases and full width in mobile conditions. Additionally there is a stylized shade applied to the area, so images will appear darker than the original image brightness. This is done to alleviate the potential issues with light background images and the white text from the panel.
Build to endure
Everything we build has an impact on people and the world we live in. Learn more about the intersection of sustainability and construction.
Return to Top
Accordion Block:
The Accordion Block allows for 2 to 20 rows of heading and description pairings. Upon clicking the heading the UI will expand the description text. The first pairing is active by default and only one pairing can be open at a time.
In terms of customizable options, the CMS administrator can alter the block background color and remove top padding from the block when the accordion is meant to be paired with another content block.
Keytar McSweeney's William 1
Fixie tote bag ethnic keytar. Neutra vinyl American Apparel kale chips tofu art party, cardigan raw denim quinoa. Cray paleo tattooed, Truffaut skateboard street art PBR jean shorts Shoreditch farm-to-table Austin lo-fi Odd Future occupy. Chia semiotics skateboard, Schlitz messenger bag master cleanse High Life occupy vegan polaroid tote bag leggings. Single-origin coffee mumblecore deep v salvia mlkshk. Organic photo booth cray tofu, vegan fixie bitters sriracha. Blog Austin Wes Anderson, deep v pour-over trust fund vinyl mlkshk +1.Hella narwhal Cosby sweater McSweeney’s, salvia kitsch before they sold out High Life. Umami tattooed sriracha meggings pickled Marfa Blue Bottle High Life next lev.
Keytar McSweeney's William 2
Fixie tote bag ethnic keytar. Neutra vinyl American Apparel kale chips tofu art party, cardigan raw denim quinoa. Cray paleo tattooed, Truffaut skateboard street art PBR jean shorts Shoreditch farm-to-table Austin lo-fi Odd Future occupy. Chia semiotics skateboard, Schlitz messenger bag master cleanse High Life occupy vegan polaroid tote bag leggings. Single-origin coffee mumblecore deep v salvia mlkshk. Organic photo booth cray tofu, vegan fixie bitters sriracha. Blog Austin Wes Anderson, deep v pour-over trust fund vinyl mlkshk +1.Hella narwhal Cosby sweater McSweeney’s, salvia kitsch before they sold out High Life. Umami tattooed sriracha meggings pickled Marfa Blue Bottle High Life next lev.
Keytar McSweeney's William 3
Fixie tote bag ethnic keytar. Neutra vinyl American Apparel kale chips tofu art party, cardigan raw denim quinoa. Cray paleo tattooed, Truffaut skateboard street art PBR jean shorts Shoreditch farm-to-table Austin lo-fi Odd Future occupy. Chia semiotics skateboard, Schlitz messenger bag master cleanse High Life occupy vegan polaroid tote bag leggings. Single-origin coffee mumblecore deep v salvia mlkshk. Organic photo booth cray tofu, vegan fixie bitters sriracha. Blog Austin Wes Anderson, deep v pour-over trust fund vinyl mlkshk +1.Hella narwhal Cosby sweater McSweeney’s, salvia kitsch before they sold out High Life. Umami tattooed sriracha meggings pickled Marfa Blue Bottle High Life next lev.
Keytar McSweeney's William 4
Fixie tote bag ethnic keytar. Neutra vinyl American Apparel kale chips tofu art party, cardigan raw denim quinoa. Cray paleo tattooed, Truffaut skateboard street art PBR jean shorts Shoreditch farm-to-table Austin lo-fi Odd Future occupy. Chia semiotics skateboard, Schlitz messenger bag master cleanse High Life occupy vegan polaroid tote bag leggings. Single-origin coffee mumblecore deep v salvia mlkshk. Organic photo booth cray tofu, vegan fixie bitters sriracha. Blog Austin Wes Anderson, deep v pour-over trust fund vinyl mlkshk +1.Hella narwhal Cosby sweater McSweeney’s, salvia kitsch before they sold out High Life. Umami tattooed sriracha meggings pickled Marfa Blue Bottle High Life next lev.
Return to Top
Partner Cards Block:
Partner Cards support 2 to 6 cards. Thier layouts vary depending on the quantity and breakpoint. In larger screens the cards will present an image to the right of the content text while in smaller screens the image will be stacked atop the content text. Additionally in larger screens arrow navigation will appear to initiate a carousel of cards. While in mobile use cases the cards will simply stack on top of each other.
Partner Cards have required fields for: an image, heading, and link. The description text is optional.
Partner Card 2
Tousled food truck polaroid, salvia bespoke small batch Pinterest Marfa. Fingerstache authentic craft beer, food truck Banksy Carles kale chips hoodie.
Learn more
Partner Card 3
View More
Partner Card 4
View more
Return to Top
Thoughtforms Custom Listing Blocks
Similar to the custom blocks, these are customized Gutenberg blocks. These however differ in that the content that populates these blocks are powered elsewhere in the CMS. To enter new items to these listing components, the CMS user will likely need to enter new custom post type entries (CPTs). These components are typically used on a specific page and do not have much reuse elsewhere on other site pages.
Return to Top
Global / Semi Global Options
The following section defines areas on the site that are global or semi-global in nature. That is to say that editing the contents within these sections will modify a module in one to many pages. These options can be access by going to Options from the left navigation of the WordPress Admin panel.