Insert Media File Collection

media-category = use the slug of the media category you create
mime-type = pdf or img
format = list or grid
column-width = 2,3 or 4
show-caption = true or false
show-description = true or false
show-thumbnail = true or false (coming soon)

Style to emulate old Advanced Navigation Module

select the entire block. choose the “Advanced” tab to the right and insert the class “anm-columns“, if you have an empty column and don’t want to display the border and hover… chose that specific column, go to the advanced tab and add the class “empty-column“

Small Hero

If you’d like to reduce the height of a cover block, select the block, click the advanced tab to the right and add the class “hero-small“

Gray Block behind Content

select the block and under the Advanced tab, add the class “grayblock“

if you’d like to add padding within the gray block add the class “pt-5” for top padding, add the class “pb-5” for the bottom padding. If you’d like to set the same padding for top and bottom with one class use “py-5“

Button widths

to get 2 buttons to sit side by side, apply the class “btn-half-width” in the advanced tab.

to have a button fill the full width of any container it resides in add the class “btn-full-width” in the advanced tab

Buttons Side By Side

select the button block and apply the class “float-left” to each.

Buttons Opening in New Tab

button blocks by default don’t give you the choice to open the link in a new browser tab… to open the link in a new tab, add the class “blank” under the Advanced Tab to the right.

---

Drop Down List of Options

if you’d like to include a drop down list of items, we’ve created a new class called “droplist“. To use this feature, simply add a Gutenberg “List Block”. and ind the advanced tab, add the class “droplist“. Then add your bullets to your list… the first item will serve as the default collapsed button… when you hover over it, it will reveal the indented bullets below it.. your drop list should look like this in the editor

• List of Options
  • Option 1
  • Option 2
  • Option 3

Then simply select and apply links to your options and the end result will look like the below example.

• List of Options
  • Option 1
  • Option 2
  • Option 3

---

File Block

instead of using buttons or regular links, gutenberg offers a File Block which allows you to link directly to a file like a pdf. the advantage of using this is it takes you to the media library to find and manage the asset. There are 3 presentation options, on the left you have the small download button and the title of the file, to the right you just have a button with the CTA text. the button on the right you must add the class “btn-file“. the third option is to turn of the button and just display the link text. if you want these to open the files in a new browser tab, add the class “blank” otherwise WP only opens new tab if you click the text link and not the button link.

Tabbed Content

to load the tab or accordion widget to your page the click + icon to select a new block, expand the “Widgets” tab and choose “SiteOrigin Widget” when that block appears on your page, you can choose Tabs, Accordion, Post Slider.

Accordion Content

Reusable Block

if you have any pervasive elements through out your site like a “Contact Us” block… after creating it, save it as a reusable block and then you can insert it on any or all of your pages… then if you ever need to update it, you only need to update 1 instance and it will update throughout the site… you can also use this to create page templates for products… once added to the page you can click the 3 vertical dots icon and choose “Convert to Regular Block” and edit the content (Note: after converting, it’s now specific to that page and doesn’t update the reusable block.)

Full Width Background Image Behind any Block

this requires some knowledge of creating custom CSS and requires multiple steps.

1. under Appearance > Customize > Custom Header Scripts, add the example code below
2. add as many classes with whatever class name you’d like(within the <style> tags)… but be sure to include “_1” at the end of each class you create… ie. “myclass_1“….this is required for the logic to render the class properly.
3. save your customization
4. on the page that contains your block, choose the block you want to include this background image to and apply the class “bgblock” and your “myclass” (make sure this class name does NOT have the _1) under the Advanced Tab (Note: your custom class MUST be the last one in the list of class names )

example code for Custom Header Scripts.

<style>
.bgimgtest_1{
	background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://www.conairindustries.com/wp-content/uploads/2019/04/clouds-eco-environment-9198.jpg);
	background-size:cover;
	background-repeat: no-repeat;
	background-position:center center;
}
</style>

Varied Column Widths

if you are familiar with Bootstrap, you’ll find this process quite simple: select the column block and add the class “row” under the advanced tab. then select each column of the and apply standard boostrap column classes. in the example below the first column is “col-md-2” the second is “col-md-7” the third is “col-md-3“. because these columns use gutenbergs default margins… you’ll need to add the bootstrap utility class “m-0” so the columns stay on the same line.

Marketo Form

to include a marketo form on any page of your site, you now just need to use a shortcode… copy the following code and replace XXXX with your marketo form ID… the form ID is the 4 numbers that follow mktoForm_1234

[[marketo-form formid="XXXX"]]

[marketo-form formid=”1713″]

IFRAME

[[iframe src="https://www.youtube.com/embed/VGKq7caA2AI" width="100%" height="240"]]