Cleaner

Import the Cleaner design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from Cleaner and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Content types this design adds

Cleaners

canvas_cleaner_pro

One item is called a Cleaner. You will find them in their own admin menu once the design is installed.

  • Editor features: editor, excerpt, page-attributes, thumbnail, title

Each item carries these extra settings on its edit screen:

  • Service Area

  • Jobs Completed

  • Customer Rating

  • Pro Role

  • With Us Since

Services

canvas_cleaner_svc

One item is called a Service. You will find them in their own admin menu once the design is installed.

  • Editor features: editor, excerpt, page-attributes, thumbnail, title

Each item carries these extra settings on its edit screen:

  • Typical Visit

  • Recommended

  • Svc Includes

  • Svc Price

Blocks this design adds

Cleaner Team

canvas-core/cleaner-pros

Display cleaners from the Cleaners post type as a carousel or a grid of photo cards, or render a single cleaner page (role, area, rating, booking CTA, related cleaners). In the block inserter it is named Canvas Cleaner Team.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Cleaner Team settings in the block editor sidebar

Layout

  • LayoutDefaultCarousel

    Which part of the design this block draws: a sliding row of cards, a fixed grid of them, or one of the three pieces that build a single cleaner page. The single pieces render nothing anywhere else.

    ChoicesCarouselCards GridSingle Cleaner - DetailsSingle Cleaner - Booking CTASingle Cleaner - Back + Related

Query

  • ItemsDefault0

    0 shows all cleaners.

  • Order ByDefaultMenu Order

    What decides the sequence people appear in: the order you arranged them in, when each was published, or the name.

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Whether that sequence runs forwards or backwards. With Order By set to Title, Ascending lists from A to Z.

    ChoicesAscendingDescending

Display

  • Card ClassesDefaultcard border-0 shadow-sm

    Style classes on each card. The default drops the border and lifts the card with a soft shadow instead.

  • Card Body ClassesDefaultcard-body second-bg-color rounded-bottom p-4

    Style classes on the panel of text under the photo, which is what gives it the tinted background and its rounded foot.

  • Link Card TitlesDefaultOff

    Turn each card title into a link to that cleaner's page.

  • Show Role on CardsDefaultOff

    Shows the job title recorded against each person under their name.

  • Row ClassesDefaultrow col-mb-30

    Style classes on the row that holds the cards, which is what spaces them apart once they stack.

    Shown when Layout is "Cards Grid"

  • Column ClassesDefaultcol-md-6 col-lg-3

    Style classes on the column each card sits in. This is what decides how many cards fit across the row at each screen width.

    Shown when Layout is "Cards Grid"

  • Cleaners Page SlugDefaultour-cleaners

    Slug of the team landing page. The single layouts resolve it to a portable permalink for the "Back to Cleaners" button. Empty = no link.

  • Booking Page SlugDefaultbook-a-clean

    Slug of the page the single-cta button links to. Resolved to a portable permalink so the link is correct on any install / import. Empty = no button.

  • CTA Button TextDefaultBook This Cleaner

    Wording on the booking button at the foot of a cleaner page. Leave it empty and no button appears.

  • Back Button TextDefaultBack to Cleaners

    Wording on the button that returns a visitor from a cleaner page to the team listing. Leave it empty and no button appears.

  • Related HeadingDefaultMore Cleaners

    Heading above the row of other people at the foot of a cleaner page. Leave it empty to show them with no heading.

  • Card Image SizeDefaultLarge

    Which stored size of the photo the cards load. A smaller size makes a long list quicker to arrive, at the cost of sharpness on large screens.

    ChoicesMediumMedium LargeLargeFull

  • Card Image LoadingDefaultEager

    Carousels measure their slides at init, so a lazily loaded photo can collapse the track. Eager matches the design.

    ChoicesEagerLazy

Carousel

  • Carousel ClassesDefaultowl-carousel carousel-widget

    Style classes on the carousel itself. Keep both defaults: they are what the theme looks for when it starts the carousel up.

    Shown when Layout is "Carousel"

  • Item GapDefault30

    The gap between one card and the next, in pixels.

    Shown when Layout is "Carousel"

  • Show ArrowsDefaultOn

    Shows the back and forward arrows at the sides of the carousel.

    Shown when Layout is "Carousel"

  • Show DotsDefaultOn

    Shows the row of dots under the carousel, which tells a visitor how many cards there are and lets them jump straight to one.

    Shown when Layout is "Carousel"

  • Items - MobileDefault1

    How many cards are on screen at once on a phone.

    Shown when Layout is "Carousel"

  • Items - SmallDefault2

    How many cards are on screen at once from a small screen up, around the size of a large phone held sideways.

    Shown when Layout is "Carousel"

  • Items - MediumDefault3

    How many cards are on screen at once from a tablet width up.

    Shown when Layout is "Carousel"

  • Items - LargeDefault4

    How many cards are on screen at once from a laptop width up.

    Shown when Layout is "Carousel"

  • Items - Extra LargeDefault4

    How many cards are on screen at once on the widest screens.

    Shown when Layout is "Carousel"

Cleaning Services

canvas-core/cleaner-services

Display cleaning services from the Services post type as cards or feature boxes, or render a single service page (price, inclusions, booking CTA, related services). In the block inserter it is named Canvas Cleaning Services.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Cleaning Services settings in the block editor sidebar

Layout

  • LayoutDefaultCards Grid

    Which part of the design this block draws: a grid of service cards, a lighter row of feature boxes, or one of the three pieces that build a single service page. The single pieces render nothing anywhere else.

    ChoicesCards GridFeature BoxesSingle Service - Price & InclusionsSingle Service - Booking CTASingle Service - Back + Related

Query

  • ItemsDefault0

    0 shows all services.

  • Order ByDefaultMenu Order

    What decides the sequence services appear in: the order you arranged them in, when each was published, or the service name.

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Whether that sequence runs forwards or backwards. With Order By set to Title, Ascending lists from A to Z.

    ChoicesAscendingDescending

Display

  • Row ClassesDefaultrow col-mb-50

    Style classes on the row that holds the services, which is what spaces them apart once they stack.

  • Column ClassesDefaultcol-md-6 col-lg-4

    Style classes on the column each service sits in. This is what decides how many fit across the row at each screen width.

  • Icon WidthDefault70

    Rendered width of the service icon, in pixels. 0 leaves the image unsized.

  • Show Price on CardsDefaultOn

    Shows the starting price recorded against each service on its card. Turn it off where prices are quoted rather than listed.

  • Card Button TextDefaultLearn More

    Wording on the button that opens the full service page from a card.

  • Card Button ClassesDefaultbtn second-bg-color px-3 fw-semibold

    Style classes on that button, which is what gives it the tinted background and its bolder wording.

  • Card Button Icon ClassDefaultbi-arrow-right

    Icon-font class appended inside the card button. Empty renders the label alone.

  • Services Page SlugDefaultservices

    Slug of the services landing page. The single layouts resolve it to a portable permalink for the "Back to Services" button. Empty = no link.

  • Booking Page SlugDefaultbook-a-clean

    Slug of the page the single-cta button links to. Resolved to a portable permalink so the link is correct on any install / import. Empty = no button.

  • CTA Button TextDefaultBook This Service

    Wording on the booking button at the foot of a service page. Leave it empty and no button appears.

  • Back Button TextDefaultBack to Services

    Wording on the button that returns a visitor from a service page to the services listing. Leave it empty and no button appears.

  • Related HeadingDefaultOther Services

    Heading above the row of other services at the foot of a service page. Leave it empty to show them with no heading.

  • Inclusions HeadingDefaultWhat's Included

    Heading above the list of what a service covers, on the single service page.

Was this page helpful?