Arcadia Library

Simplify theme development

Welcome to the library developed for the Arcadia theme. Every layout provided has been developed to be drop in and production ready. Each file contains all the code needed to make that layout function and integrate seamlessly.

Adaptive design
Every element will adapt to your colour and font choices.
Simple Install
Extract the contents of the download and add a few prewritten lines of code.
Batteries Included
All interactions including JavaScript have been completed for you.
Responsive
Every element will work across all screen sizes from desktop to mobile.
Blocks so far
85
Hours saved
255
Minute install
1

Usage

  1. Find the element you want from the categories provided.
  2. Copy the command.
  3. Run in terminal from the root of your theme.

Lists

With icon

arc install icon-list
Download:

Instructions

  1. Add @import "base/lists"; to the bottom of the other base folder imports in src/scss/style.scss
  2. Add @import "base/lists"; to the bottom of the other base folder imports in src/scss/editor.scss

Tables

Striped

arc install striped-table
Download:

Instructions

  1. Add @import "base/tables"; to the bottom of the other base folder imports in src/scss/style.scss
  2. Add @import "base/tables"; to the bottom of the other base folder imports in src/scss/editor.scss
Source: Pure Golf
Source: Pure Golf

Banners

Full width lines

Default
arc install banner-lines-default
Download:
Source: ModBox

Full width lines

Home
arc install banner-lines
Download:
Source: ModBox

Slim subtitled

Default
arc install banner-slim-subtitle
Download:
Source: Centric Mining Systems

With Accent

Default
arc install banner-accent
Download:
Source: Back Office Management

Boxed with CTA

Home
arc install banner-boxed
Download:
Source: Back Office Management

Blogs

Blocky

arc install blocky
Download:
Source: Eagle Lake First Nation

Grid

arc install blog-grid
Download:

Instructions

  1. Add to the bottom of functions.php:
add_action('pre_get_posts', function ($query) {
    // Exclude Sticky Posts from Blog
    if (is_home() && $query->is_main_query()) {
        $query->set('ignore_sticky_posts', true);
        $query->set('post__not_in', get_option('sticky_posts'));
    }
});
Source: Centric Mining Systems
Source: Centric Mining Systems

Grid 2

arc install blog-grid2
Download:

Instructions

  1. Add to the bottom of functions.php:
add_action('pre_get_posts', function ($query) {
    // Exclude Sticky Posts from Blog
    if (is_home() && $query->is_main_query()) {
        $query->set('ignore_sticky_posts', true);
        $query->set('post__not_in', get_option('sticky_posts'));
    }
});

add_filter('excerpt_length', function () {
    return 25;
}, 999);
Source: Tikinagan
Source: Tikinagan

Grid 3

arc install blog-grid3
Download:

Instructions

  1. Add to the bottom of functions.php:
add_action('pre_get_posts', function ($query) {
    // Exclude Sticky Posts from Blog
    if (is_home() && $query->is_main_query()) {
        $query->set('ignore_sticky_posts', true);
        $query->set('post__not_in', get_option('sticky_posts'));
    }
});

Footers

Three column (Navigation, Contact, Social)

Theme Settings
arc install footer-contact
Download:

Instructions

  1. Add the following code after register_nav_menu('secondary', __('Footer Menu', DOMAIN)); in functions.php:
register_nav_menu('secondary2', __('Footer Menu 2', DOMAIN));
Source: Back Office Management

Three column (Logo, Navigation, Contact)

arc install footer1
Download:

Extensive Navigation with a logo and contact information

arc install footer2
Download:

Instructions

  1. Replace register_nav_menu('secondary', __('Footer Menu', DOMAIN)); in functions.php with:
register_nav_menu('footer1', __('Footer Column 1', DOMAIN));
register_nav_menu('footer2', __('Footer Column 2', DOMAIN));
register_nav_menu('footer3', __('Footer Column 3', DOMAIN));
register_nav_menu('footer4', __('Footer Column 4', DOMAIN));

Extensive Navigation with contact information

arc install footer3
Download:

Instructions

  1. Replace register_nav_menu('secondary', __('Footer Menu', DOMAIN)); in functions.php with:
register_nav_menu('footer1', __('Footer Column 1', DOMAIN));
register_nav_menu('footer2', __('Footer Column 2', DOMAIN));
register_nav_menu('footer3', __('Footer Column 3', DOMAIN));
register_nav_menu('footer4', __('Footer Column 4', DOMAIN));

Simple copyright with social links

arc install footer4
Download:

Headers

Split Nav

arc install split-nav
Download:

Instructions

  1. Add the following code after register_nav_menu('primary', __('Navigation Menu', DOMAIN)); in functions.php:
register_nav_menu('primary_alt', __('Navigation Right', DOMAIN));
Source: WINMAR

Stacked Nav

arc install stacked-nav
Download:

Instructions

  1. Add a new menu in functions.php with:
register_nav_menu('top', __('Top Menu', DOMAIN));
Source: The Behavioural Sciences Centre

With social icons

arc install header1
Download:

Inline social icons

arc install header2
Download:

Mobile Menus

Slideout

arc install mobile-slideout
Download:
Source: Back Office Management

Top Bars

Search + Extra navigation

arc install topbar-search
Download:

Instructions

  1. Add <?php get_template_part('sections/topbar'); ?> above the header section within header.php
  2. Add @import "sections/topbar"; to the group of sections within src/scss/style.scss
  3. Add the following code after register_nav_menu('secondary', __('Footer Menu', DOMAIN)); in functions.php:
register_nav_menu('topbar', __('Top Menu', DOMAIN));
Source: WINMAR

Contact with social icons

arc install topbar1
Download:

Instructions

  1. Add <?php get_template_part('sections/topbar'); ?> above the header section within header.php
  2. Add @import "sections/topbar"; to the group of sections within src/scss/style.scss

Accent Images

Breakout

arc install breakout
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Breakout.
  2. Add @import "blocks/breakout"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be breakout

Source: The Behavioural Sciences Centre
Source: The Behavioural Sciences Centre

Accent Lines

arc install accent-lines
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Accent Lines.
  2. Add @import "blocks/accent_lines"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be accent_lines

Source: Back Office Management

Accent Image Stretched

arc install accent-image-stretched
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Accent Image Stretched.
  2. Add @import "blocks/accent_image_stretched"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be accent_image_stretched

Source: Conservation Sudbury

Accent Slide Out

Animated
arc install accent-slide-out
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Accent Slide Out.
  2. Add @import "blocks/accent_slide_out"; to the bottom of src/scss/style.scss
  3. Add import './accentslideout'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be accent_slide_out

Source: SKYGRiD

Dual Accent Image

arc install dual-accent-image
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Dual Accent Image.
  2. Add @import "blocks/dual_accent_image"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be dual_accent_image

Source: Conservation Sudbury

Info Box

arc install info-box
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Info Box.
  2. Add @import "blocks/info_box"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be info_box

Source: Pure Golf
Source: Pure Golf

Call to Actions

Basic CTA

arc install call-to-action
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Call to Action.
  2. Add @import "blocks/call_to_action"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be call_to_action

Source: WINMAR
Source: Back Office Management

Contact with phone / email

arc install cta1
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Call to Action.
  2. Add @import "blocks/call_to_action"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be call_to_action

Columns

Columns Box

arc install columns-box
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Columns Box.
  2. Add @import "blocks/columns_box"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be columns_box

Source: Conservation Sudbury
Source: Conservation Sudbury

Simple Columns

arc install simple-columns
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Simple Columns.
  2. Add @import "blocks/simple_columns"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be simple_columns

Source: SKYGRiD

Locations

arc install locations
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Locations.
  2. Add @import "blocks/locations"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be locations

Source: SKYGRiD

Dividers

Wave

arc install divider-wave
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Wave Divider.
  2. Add @import "blocks/wave_divider"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be wave_divider

Source: Waddington & Pottinger Law LLP

Abstract

arc install divider-abstract
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Divider.
  2. Add @import "blocks/divider"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be divider

Source: Northern College

Curved

arc install divider-curved
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Divider.
  2. Add @import "blocks/divider"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be divider

Source: WINMAR

Noise

arc install divider-noise
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Divider.
  2. Add @import "blocks/divider"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be divider

Source: Conservation Sudbury

FAQ

With Breakout

Interactive
arc install faq-breakout
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) FAQ Breakout.
  2. Add @import "blocks/faq_breakout"; to the bottom of src/scss/style.scss
  3. Add import './faqbreakout'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be faq_breakout

Source: Join NAPS

Grouped

Interactive
arc install faq1
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) FAQ.
  2. Add @import "blocks/faq"; to the bottom of src/scss/style.scss
  3. Add import './faq'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be faq

Features

Services

arc install services
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Services.
  2. Add @import "blocks/services"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be services

Source: Back Office Management

Grids

Feature Boxes

arc install feature-boxes
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Feature Boxes.
  2. Add @import "blocks/feature_boxes"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be feature_boxes

Source: WINMAR

Video Grid

arc install video-grid
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Video Grid.
  2. Add @import "blocks/video_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be video_grid

Source: McKellar Confectionery

Flex Grid

arc install flex-grid
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Flex Grid.
  2. Add @import "blocks/flex_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be flex_grid

Source: McKellar Confectionery

Grid Reveal

arc install grid-reveal
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Grid Reveal.
  2. Add @import "blocks/grid_reveal"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be grid_reveal

Source: SKYGRiD

Icon Grid

arc install icon-grid
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Icon Grid.
  2. Add @import "blocks/icon_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be icon_grid

Source: Conservation Sudbury

Image Grid

arc install image-grid
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Image Grid.
  2. Add @import "blocks/image_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be image_grid

Source: Conservation Sudbury
Source: Conservation Sudbury

Layered Content Grid

arc install layered-content-grid
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Layered Content Grid.
  2. Add @import "blocks/layered_content_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be layered_content_grid

Source: KNK Lawn Care

Resources

arc install resources
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Resource Grid.
  2. Add @import "blocks/resource_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be resource_grid

Source: Conservation Sudbury

Service Grid

arc install service-grid
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Service Grid.
  2. Add @import "blocks/service_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be service_grid

Source: Pure Golf

Photo Grid

arc install photogrid
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Photo Grid.
  2. Add @import "blocks/photo_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be photo_grid

Source: Tikinagan

Service Grid

arc install servicegrid
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Service Grid.
  2. Add @import "blocks/service_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be service_grid

Source: Breenys

Icon Grid

arc install icongrid
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Icon Grid.
  2. Add @import "blocks/icon_grid"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be icon_grid

Our Process - Detailed

arc install steps2
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Steps.
  2. Add @import "blocks/steps"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be steps

Source: Centric Mining Systems

Our Process - Simple

arc install steps1
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Steps.
  2. Add @import "blocks/steps"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be steps

Staff 1

arc install staff1
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Staff.
  2. Add @import "blocks/staff"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be staff

Staff 2

arc install staff2
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Staff.
  2. Add @import "blocks/staff"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be staff

Source: SKYGRiD

Lists

Icon Table

arc install icon-table
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Icon Table.
  2. Add @import "blocks/icon_table"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be icon_table

Source: Back Office Management

Logos

Simple

arc install logos
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Logos.
  2. Add @import "blocks/logos"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be logos

Source: Conservation Sudbury

Maps

Map with Content

arc install content-map
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Content Map.
  2. Add @import "blocks/content_map"; to the bottom of src/scss/style.scss
  3. Add import './contentmap'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be content_map

Source: BSC North

Menus

Menu

arc install menu
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Menu.
  2. Add @import "blocks/menu"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be menu

Source: McKellar Confectionery

Navigation

Nav Bar

arc install nav-bar
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Nav Bar.
  2. Add @import "blocks/nav_bar"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be nav_bar

Source: Tikinagan

Icon Nav

arc install icon-nav
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Icon Nav.
  2. Add @import "blocks/icon_nav"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be icon_nav

Source: KNK Lawn Care

News

News / Updates

arc install news
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) News.
  2. Add @import "blocks/news"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be news

Source: Conservation Sudbury

Basic News

arc install basic-news
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Basic News.
  2. Add @import "blocks/basic_news"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be basic_news

Source: WINMAR

News with Facebook feed

Plugin Required Interactive
arc install newssocial
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) News & Social.
  2. Make the code modifications listed below.
  3. Install the Smash Balloon Custom Facebook Feed plugin.
  4. Configure a feed
  5. Adjust the feed settings listed below.

Warning: The layout name needs to be news_social

src/scss/style.scss

Add to the bottom of the group of components

@import "components/slick";

Add to the bottom of the file

@import "blocks/news_social";

src/js/main.js

Add to the bottom of the imports.

import './social';

functions.php

Add to the top of the scripts_styles function.

wp_enqueue_script(DOMAIN . '-slickjs', get_template_directory_uri() . '/js/slick.min.js', ['jquery'], null);

Feed Settings

  • Disable Header
  • Disable Like Box
  • Feed Layout - Change Numbe of posts to 3 (Optional)
  • Within Customize > Posts > Edit Individual elements > Post Text set the Max Length to 200 characters
Source: Tikinagan

News Feed

arc install newsfeed
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) News Feed.
  2. Add @import "blocks/news_feed"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be news_feed

Pricing

Pricing

Interactive
arc install pricing
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Pricing.
  2. Add @import "blocks/pricing"; to the bottom of src/scss/style.scss
  3. Make the code modifications listed below.

Warning: The layout name needs to be pricing

src/js/main.js

Add to the bottom of the imports.

import './fancybox';

functions.php

Add to the top of the scripts_styles function.

wp_enqueue_style(DOMAIN . '-fancybox', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css');
wp_enqueue_script(DOMAIN . '-fancybox', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js');
Source: Back Office Management

Sliders

Content Slider

Interactive
arc install content-slider
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Content Slider.
  2. Make the code modifications listed below.

Warning: The layout name needs to be content_slider

src/scss/style.scss

Add to the bottom of the group of components

@import "components/slick";

Add to the bottom of the file

@import "blocks/content_slider";

src/js/main.js

Add to the bottom of the imports.

import './content_slider';

functions.php

Add to the top of the scripts_styles function.

wp_enqueue_script(DOMAIN . '-slickjs', get_template_directory_uri() . '/js/slick.min.js', ['jquery'], null);
Source: SKYGRiD

Image Slider

Interactive
arc install image-slider
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Image Slider.
  2. Make the code modifications listed below.

Warning: The layout name needs to be image_slider

src/scss/style.scss

Add to the bottom of the group of components

@import "components/slick";

Add to the bottom of the file

@import "blocks/image_slider";

src/js/main.js

Add to the bottom of the imports.

import './image_slider';

functions.php

Add to the top of the scripts_styles function.

wp_enqueue_script(DOMAIN . '-slickjs', get_template_directory_uri() . '/js/slick.min.js', ['jquery'], null);
Source: SKYGRiD

Column Slider

Interactive
arc install slider
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Slider.
  2. Make the code modifications listed below.

Warning: The layout name needs to be slider

src/scss/style.scss

Add to the bottom of the group of components

@import "components/slick";

Add to the bottom of the file

@import "blocks/slider";

src/js/main.js

Add to the bottom of the imports.

import './slider';

functions.php

Add to the top of the scripts_styles function.

wp_enqueue_script(DOMAIN . '-slickjs', get_template_directory_uri() . '/js/slick.min.js', ['jquery'], null);
Source: Tikinagan

Tabs

Bottom Tabs

Interactive
arc install bottom-tabs
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Bottom Tabs.
  2. Add @import "blocks/bottom_tabs"; to the bottom of src/scss/style.scss
  3. Add import './bottomtabs'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be bottom_tabs

Source: Join NAPS

Vertical Tabs

Interactive
arc install vertical-tabs
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Vertical Tabs.
  2. Add @import "blocks/vertical_tabs"; to the bottom of src/scss/style.scss
  3. Add import './verticaltabs'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be vertical_tabs

Source: Waddington & Pottinger Law LLP

Icon Tabs

Interactive
arc install icon-tabs
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Icon Tabs.
  2. Add @import "blocks/icon_tabs"; to the bottom of src/scss/style.scss
  3. Add import './icontabs'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be icon_tabs

Source: SKYGRiD

Testimonials

Simple Testimonials

Interactive
arc install simple-testimonials
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Simple Testimonials.
  2. Make the code modifications listed below.

Warning: The layout name needs to be simple_testimonials

src/scss/style.scss

Add to the bottom of the group of components

@import "components/slick";

Add to the bottom of the file

@import "blocks/simple_testimonials";

src/js/main.js

Add to the bottom of the imports.

import './testimonials';

functions.php

Add to the top of the scripts_styles function.

wp_enqueue_script(DOMAIN . '-slickjs', get_template_directory_uri() . '/js/slick.min.js', ['jquery'], null);
Source: Back Office Management

Testimonials

Interactive
arc install testimonials
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Testimonials.
  2. Make the code modifications listed below.

Warning: The layout name needs to be testimonials

src/scss/style.scss

Add to the bottom of the group of components

@import "components/slick";

Add to the bottom of the file

@import "blocks/testimonials";

src/js/main.js

Add to the bottom of the imports.

import './testimonials';

functions.php

Add to the top of the scripts_styles function.

wp_enqueue_script(DOMAIN . '-slickjs', get_template_directory_uri() . '/js/slick.min.js', ['jquery'], null);
Source: Pure Golf

Timelines

Timeline

Interactive
arc install timeline
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) News & Social.
  2. Make the code modifications listed below.

Warning: The layout name needs to be timeline

src/scss/style.scss

Add to the bottom of the group of components

@import "components/slick";

Add to the bottom of the file

@import "blocks/timeline";

src/js/main.js

Add to the bottom of the imports.

import './timeline';

functions.php

Add to the top of the scripts_styles function.

wp_enqueue_script(DOMAIN . '-slickjs', get_template_directory_uri() . '/js/slick.min.js', ['jquery'], null);
Source: WINMAR

Journey

arc install journey
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Block) Journey.
  2. Add @import "blocks/journey"; to the bottom of src/scss/style.scss

Warning: The layout name needs to be journey

Source: Conservation Sudbury

Accordions

FAQ

Interactive
arc install accordion
Download:

Instructions

  1. Add a new layout into the Components field group with a single clone row using the fields (Component) Accordion.
  2. Add @import "components/accordion"; above /* components */ in src/scss/style.scss
  3. Add import './accordion'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be accordion

Features

Expandable Summary

Interactive
arc install content-expand
Download:

Instructions

  1. Add a new layout into the Components field group with a single clone row using the fields (Component) Content Expand.
  2. Add @import "components/content_expand"; above /* components */ in src/scss/style.scss
  3. Add import './contentexpand'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be content_expand

Source: The Behavioural Sciences Centre

Grid Entry

arc install grid-entry
Download:

Instructions

  1. Add a new layout into the Components field group with a single clone row using the fields (Component) Grid Entry.
  2. Add @import "components/grid_entry"; above /* components */ in src/scss/style.scss

Warning: The layout name needs to be grid_entry

Source: Pure Golf

Grids

Image Grid

arc install comp-image-grid
Download:

Instructions

  1. Add a new layout into the Components field group with a single clone row using the fields (Component) Image Grid.
  2. Add @import "components/image_grid"; above /* components */ in src/scss/style.scss

Warning: The layout name needs to be image_grid

Source: WINMAR

Staff Grid

arc install staff-grid
Download:

Instructions

  1. Add a new layout into the Components field group with a single clone row using the fields (Component) Staff Grid.
  2. Add @import "components/staff_grid"; above /* components */ in src/scss/style.scss

Warning: The layout name needs to be staff_grid

Lists

Interactive Checkboxes

Interactive
arc install interactive-checkboxes
Download:

Instructions

  1. Add a new layout into the Components field group with a single clone row using the fields (Component) Interactive Checkboxes.
  2. Add @import "components/interactive_checkboxes"; above /* components */ in src/scss/style.scss
  3. Add import './checkboxes'; to the bottom of the imports in src/js/main.js

Warning: The layout name needs to be interactive_checkboxes

Source: Join NAPS

Navigation

Side Nav

arc install side-nav
Download:

Instructions

  1. Add a new layout into the Content field group with a single clone row using the fields (Component) Side Nav.
  2. Add @import "components/side_nav"; above /* components */ in src/scss/style.scss

Warning: The layout name needs to be side_nav

Source: Back Office Management

Formidable

Square Inputs

Plugin Required
Download:

Instructions

  1. Within the WordPress Dashboard go to Formidable > Import/Export
  2. Import the xml file.

Rounded Inputs

Plugin Required
Download:

Instructions

  1. Within the WordPress Dashboard go to Formidable > Import/Export
  2. Import the xml file.