Skip to content
Drempd Logo
  • home
  • portfolio
  • web design journal
  • blog
    • adventure
    • san diego
    • projects
    • website design
    • code notes

Ergo Blocks

Index

  • Hero
  • Author Signature
  • Blog List
  • Breadcrumbs
  • Caption
  • Carousel
  • Comparison Table
  • Custom Block
  • FAQ
  • File Download Listing
  • Footer CTA
  • Full Bleed Image and Text
  • Highlight Text+Image
  • Image
  • Image Carousel
  • Image Columns
  • Floating Image
  • Image Gallery
  • Image Mosaic – Two Images
  • Image Mosaic – Three Images
  • Image Scroller
  • Transition Image
  • In Page Navigation
  • List
  • Logo Train
  • Metrics
  • People
  • Popup
  • Pull Quote
  • QA
  • Recent Posts
  • Scroll to Content
  • Table
  • Tabs
  • Testimonial
  • Text – Accordion
  • Text + Image
  • Text Only
  • Text – Two Columns
  • Tile Mosaic
  • Tiles
  • Tiles – Horizontal
  • Timeline
  • Two Columns
  • Video

Hero

The Hero block is the standard page-top section: a title, strapline, and rich text, optionally paired with an image, background image, background video, a button, a color "screen" overlay, and a second content column. It renders full-width and is typically the first block on a page.

Fields

General

TitleMain hero heading, rendered as an h1.
StraplineSmall text above/near the title.
TextMain body copy under the title.

Image

ImageNon-background hero image, placed per "Image Placement" below.
Image @2xRetina version of the image.
Image Alt TextAlt text for the hero image.
Image Caption - TitleTitle shown alongside the image caption.
Image Caption - TextBody text shown alongside the image caption.
Image URLOverrides Image; relative to the child theme directory. Marked "not implemented" in the code.
Image PlacementOne of: absolute-top-left-contain, absolute-top-right-contain, center-above-title, absolute-bottom-left-contain, absolute-bottom-right-contain.
Image MobileUsed below the collapse width.
Image Mobile (Url)Relative to the child theme; overrides "Image Mobile" if set.

Video

VideoMP4 background video; autoplays, muted, looped.

Button

Button LabelThe button's visible text.
Button HrefThe button's link destination.
Open in new window"Open Link in New Window".

Background Image

Background ImageThe hero's background image.
Background Image URLOverrides Background Image; relative to the child theme directory.
Background Image URL - MobileVisible below the "hide less than" dimension.
Background Image Sizeauto 100% (height 100% of hero, default), 100% auto (width 100% of hero), or cover (image covers the entire hero).
Background Image Positione.g. "center top". Defaults to "center top".
Background Image Position - ResponsiveSemicolon-separated breakpoint list, e.g. 1600: top right -400px; 1400 top right -500px.
Hide Background Image Less ThanPixel width below which the background image (and video) is hidden.

Screen

When Should a Screen be Added?Never, Always, or a pixel breakpoint (500–1500) below which the screen color overlay is shown.
Screen Background Color PresetsNo Preset Screen, 10% / 20% / 30% Black.
Screen Background ColorAny CSS color; overrides the preset if one is selected.

Column Two

Column two only appears if there is a value for either its title or text field.

Column 2 TitleHeading for the second column.
Column 2 TextBody copy for the second column.
Column 2 WidthPercentage width (0%–100%); default 6 (50%). Column 1 fills the remaining width.
Column 2 Vertical AlignmentTop or Center; default Top.
Column 2 Heading Typeh1, h2, or h3; default h2.

Advanced Block Settings

Section ClassExtra class(es) added to the outer <section>.
Content ClassExtra class(es) added to the column 1 content wrapper.
Content Contain Width600–1600px; default 1200.
Max Content WidthMaximum width applied to the content.
CSSRaw CSS injected into the block's inline <style> tag.
HTMLRaw HTML, appears below the hero text content.
HeightSmall, Small-Medium, Medium, Large, Extra Large, Extra Extra Large — each with a "no maximum height" variant. Default Large.
Content Vertical AlignmentTop, Middle, or Bottom; default Top.
Collapsed Image PlacementTop or Bottom; default Top.
Left Column Width25%–75%; default 50%.

Author Signature

An author signature: shows the current post's author with a bio and social links. Only renders if the author has both a first name and a bio filled in.

Not backed by block-level ACF fields — there's nothing to configure per block instance. All content is pulled from the post author's WordPress user profile fields (Profile Image, LinkedIn, X, Bio), so it's edited on the user's profile, not on the page.

Blog List

Blog Listing.

Fields

Read More Link LabelOverrides the text of the "read more" link on each post tile.
Read More Arrow IconNone, Angle, Double Angle, or Chevron; adds an arrow icon after the read-more link.

Breadcrumbs

Adds a breadcrumbs block. No configurable fields — it automatically builds a trail from the page's hierarchy.

Caption

A standard caption section.

Fields

TitleCaption heading.
TextCaption body copy.

Advanced Block Settings

Content Contain Width900–1600px; default 1200.
Caption Max Width200–600px; default 350.
DirectionBottom Left (left aligned, line going up) or Bottom Right (right aligned, line going up); default Bottom Left.

Carousel

A standard carousel section.

Fields

Carousel TilesRepeater — each tile: Strapline, Title, Text, Link Url, Link Label, Link Class.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Tile ClassExtra class(es) added to each tile.

Comparison Table

A Comparison Table.

Fields

TitleTable heading.
Column HeadersRepeater — each entry: Column Title.
RowRepeater — each row: Row/Group Label (only appears on mobile), and Columns (a nested repeater; each cell: Title, Icon — None or a circled checkmark).

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Content Contain Width800–1500px; default 1200.
Mobile ViewUse Tiles on Mobile — stacks each row into a tile below the collapse width.
Collapse Width (Increments of 100px)Breakpoint below which the mobile view kicks in.
Max Width (Increments of 100px)Overall content max width.
Cell Padding - Height (px)Vertical cell padding; default "none".

Custom Block

Inserts a Pre-Built Custom Block: a way to drop in a reusable, hand-built block by path, optionally overriding some of its content.

Fields

Custom BlockPath to the custom block to include.
StraplineNot always used — depends on the custom block.
TitleNot always used — depends on the custom block.
TextNot always used — depends on the custom block.
Section ClassExtra class(es) added to the outer section.
Button HrefNot always used — depends on the custom block.
Button LabelNot always used — depends on the custom block.
Button ClassNot always used — depends on the custom block.

Archive

Title OverrideNot always used — depends on the custom block.
Text OverrideNot always used — depends on the custom block.
CSS ClassNot always used — depends on the custom block.

Advanced Block Settings

OptionsFree-form textarea, meaning depends on the custom block being included.

FAQ

A FAQ block section.

Fields

TitleSection heading.
TextIntro text above the FAQ list.
FAQRepeater — each entry: Question, Answer.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Content ClassExtra class(es) added to the content wrapper.
Max Width (Main Content Area)700–1500px; default 1200.

File Download Listing

File Download Listing.

Fields

FilesRepeater — each entry: File Title, File (upload), Link (if set, overrides the uploaded file's URL), Image.

Advanced Settings

Section ClassExtra class(es) added to the outer section.
Columns1, 2, or 3.
Collapse Width800–1100px; default 900.

Footer CTA

Footer CTA.

Fields

TitleHeading text.
StraplineSmall text above/near the title.
TextBody copy.
Button HrefThe button's link destination.
Button LabelThe button's visible text.
Background Image URLBackground image path.
Content AlignmentCenter Content or Left-Align Content.
Column Left Width33%–66%; only shown/used when Content Alignment is left-aligned; default 50%.
Section ClassExtra class(es) added to the outer section.
Content ClassExtra class(es) added to the content wrapper.

Full Bleed Image and Text

Image bleeds off the page, text is contained.

Fields

TitleHeading text.
TextBody copy.
Image URLRelative to the child theme.
Button HrefThe button's link destination.
Button LabelThe button's visible text.

Highlight Text+Image

A highlight text or testimonial block plus an image.

Fields

TextMain highlighted text.
SubtextSmaller supporting text.
ImageAccompanying image.
Quotation IconNone or Style 1 - White.
Content ClassExtra class(es) added to the content wrapper.

Image

Image: a single standalone image section with a lot of placement/sizing controls.

Fields

ImageThe image.
Image Alt TextAlt text for the image.

Mobile

Image MobileAlternate image shown on mobile.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Image ClassExtra class(es) added to the image.
Section Max WidthFull Width, or 600–2000px; default 1800.
Image SizeAuto or 100% Width; default Auto.
Max Image Size (pixels)Caps the image's rendered size.
Image URL (Overrides Image. Relative to child theme directory)Overrides Image.
Image LinkWraps the image in a link to this URL.
Collapse Width (Increments of 100px)None, or 600–1600px.
MarginCSS margin value.
Margin (Mobile)Margin used below the Collapse Width.
Suppress Lazy LoadingCheckbox — disables lazy loading for this image.
Open Link in New WindowCheckbox — only relevant if Image Link is set.
Positioning PresetsNone, Absolute Right, or Absolute Left.

Image Carousel

A standard image carousel section.

Fields

Carousel TilesRepeater — each tile: Image.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Tile ClassExtra class(es) added to each tile.
Hide ArrowsCheckbox — hides the prev/next arrows.
Carousel HeightCSS height value.
Image SizingCover or Contain.

Image Columns

Columns of Images: up to 3 columns, each with its own title/text and a set of image tiles.

Not backed by an exported ACF field group JSON — the fields below are inferred directly from the render template's get_field()/get_sub_field() calls.

Fields

Section ClassExtra class(es) added to the outer section.
Column Title (×3)Heading for each of the 3 columns.
Column Text (×3)Body copy for each of the 3 columns.
Image (repeater, ×3 columns)Each column has its own repeater of image tiles: Image Title, Image Text, Image, HTML.

Floating Image

Adds a floating image: an image absolutely positioned relative to a containing element.

Fields

ImageThe image.

Advanced Settings

Section ClassExtra class(es) added to the outer section.
Image URLIf set, takes precedence over the uploaded image.
Contain Width800–1500px.
Image Containing ElementFull Width or Content Width.
Image PositionRight, Left, or Other (custom CSS, e.g. "top: 0; right: -150px;").
Image Position (Custom)Only shown when Image Position is "Other".

Image Gallery

An Image Gallery.

Fields

ImageRepeater — each entry: Image, Caption.
Columns1, 2, 3, or 4; default 3.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Content Max Width600–1500px; default 1200.
Image HeightFixed (50–400px) or viewport-relative (10–35vw); default 250px.
Image Min Height150–400px; default 150px.
Collapse Width600–1400px.
Gallery GroupGroups multiple galleries on a page so the enlarged-image viewer's next/back arrows continue across all galleries sharing the same group.

Image Mosaic – Two Images

Two Image Section.

Fields

Left ImageThe left image.
Left Image AltAlt text for the left image.
Left Image Position (ie. right top)CSS background-position style value.
Right ImageThe right image.
Right Image AltAlt text for the right image.
Right Image Position (ie. right top)CSS background-position style value.

Advanced Block Settings

HeightInclude units (400px, 10vw, etc.).
Left Column Width25%–75%; default 50%.
Collapse Width (No Units, 100 px increments)Breakpoint below which the two images stack.
Gutter Between Images (px)Spacing between the two images.
Suppress ContainCheckbox — suppresses the default max width and mobile padding.

Image Mosaic – Three Images

Three Image Section.

Fields

Left ImageThe left image.
Left Image AltAlt text for the left image.
Left Image Position (ie. right top)CSS background-position style value.
Middle ImageThe middle image.
Middle Image AltAlt text for the middle image.
Middle Image Position (ie. right top)CSS background-position style value.
Right ImageThe right image.
Right Image AltAlt text for the right image.
Right Image Position (ie. right top)CSS background-position style value.

Advanced Block Settings

HeightInclude units (400px, 10vw, etc.).
Left Column Width25%–75%; default 50%.
Collapse Width (No Units, 100 px increments)Breakpoint below which the images stack.
Gutter Between Images (px)Spacing between the images.

Image Scroller

An Image Scroller.

Fields

TitleSection heading.
ImagesRepeater — each entry: Image Title, Image.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Title Tagh2, h3, or h4.

Transition Image

Adds a transition image: a full-width image with an optional color "screen" overlay and top/bottom background colors, similar in spirit to the Hero's screen behavior.

Fields

ImageThe image.
TitleHeading text.
Contain Width800–1500px.
Section ClassExtra class(es) added to the outer section.
Background Top ColorCSS color for the area above the image.
Background Bottom ColorCSS color for the area below the image.
Height (px, vw, etc..)Section height.
Min Height (px, vw, etc...)Section minimum height.

Screen

When Should a Screen be Added?Never, Always, or a pixel breakpoint (500–1500) below which the screen color overlay is shown.
Screen Background Color PresetsNo Preset Screen, 10% / 20% / 30% Black.
Screen Background ColorAny CSS color; overrides the preset if one is selected.

In Page Navigation

Inserts a Pre-Built Custom Block: a row/column of jump links to other sections of the same page.

Fields

TitleSection heading.
Navigation ItemsRepeater — each entry: Link Label, Target (URL/anchor).

Advanced Block Settings

StyleVertical or Horizontal; default Horizontal.
Section ClassExtra class(es) added to the outer section.
Section Max Width (Increments of 100)Outer section max width.
Content Max Width (Increments of 100)Inner content max width.
Collapse Width (Increments of 100px)Breakpoint for mobile layout.

List

A standard list section.

Fields

List ItemsRepeater — each entry: List Item Title, List Item Text.

Advanced Block Settings

Columns1, 2, or 3; default 1.
Section ClassExtra class(es) added to the outer section.
List (UL) ClassExtra class(es) added to the <ul>.
Content Max Width (Increments of 100)Inner content max width.

Logo Train

A logo train.

Fields

TitleSection heading.
Logo Train ImagesRepeater — each entry: Logo Title, Logo Image.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Height (px)Row height.
Title Tagh2, h3, or h4.

Metrics

A place to display metrics.

Fields

TitleSection heading.
TextIntro text.
MetricsRepeater — each entry: Number (a "+" can be included; it's stripped for the count-up animation and re-added after), Label.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Collapse Width (Increments of 100px)Breakpoint for mobile layout.
Section Max Width (Increments of 100)Outer section max width.
Content Max Width (Increments of 100)800–1800px; default 1200.

People

A listing of people. Pulls from the People post type; no repeater here.

Fields

Section ClassExtra class(es) added to the outer section.
Columns1–6.
Content Max Width (Increments of 100)Inner content max width.

Popup

A standard popup.

Fields

BehaviorDisplay On Load — checked by default.
WidthCSS width value.
HeightCSS height value; use "auto" to size to content.
ImageOptional image shown in the popup.
Footer ContentRich text shown in the popup's footer.
Border Radius0–25.
Close Icon ColorCSS color for the close icon.
Behavior (Once Per Day)Only show once per day — unchecked by default.

Pull Quote

A standard pullquote.

Fields

TextThe quote text.
SubtextAttribution/source text.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Content ClassExtra class(es) added to the content wrapper.
Section Container Width (Increments of 100)Outer section max width.
Content Container Width (Increments of 100)Inner content max width.

QA

A QA section.

Fields

QAsRepeater — each tile: Question, Answer, Tile Class.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Content Contain Width800–1600px; default 1200.

Recent Posts

A recent posts section.

Fields

TitleSection heading.
TextIntro rich text.

Section Link

Section Link LabelLabel for an optional "view all" style link.
Section Link UrlIts destination.
Section Link ClassExtra class(es) added to the link.
Section Link PlacementBottom Left, Bottom Center, Bottom Right, or Top Right; default Bottom Left.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Header ClassExtra class(es) added to the header area.
Content Max WidthInner content max width.
SourceNews, Blog, or Posts.
Posts to Show1–6; default 3.
Tile Link ClassExtra class(es) added to each post tile's link.
Suppress Mobile PaddingYes/No; default No.
Hide Header ImageYes/No.
Columns1, 2, or 3; default 3.
Post Image StyleInsert Post Image as Background — checkbox.
Collapse Width600–1200px; default 1000.

Scroll to Content

Scroll to content block: a static down-arrow that scrolls the page to the next section. No configurable fields — the markup is a fixed SVG arrow icon.

Table

A standard table section.

Column Titles & Settings

Column SettingsRepeater — each column: Column Heading Text, Merge Rows With Same Values, Center Text, Column Width (px).

Data

Row DataRepeater (only shown once at least one column is defined above) — each row: Column 1 through Column 7 (plain text cells, matched up against the defined columns).

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Collapse Width (Increments of 100px)Breakpoint for mobile layout.
Max Width (Increments of 100px)Content max width.
Mobile ViewUse Tiles on Mobile — renders each row as a tile below the collapse width.

Tabs

Tabs.

Fields

Tab ContentRepeater — each tab: Tab Label, Tab Title, Tab Text, Image.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.

Testimonial

A standard testimonial block.

Fields

TestimonialRepeater — each entry: Testimonial Text, Testimonial Source (Name), Source Title, Testimonial Source Image.

Advanced Block Settings

IdCustom id attribute for the section.
Section ClassExtra class(es) added to the outer section.
Section Container Width (Increments of 100)Outer section max width.
Content Container Width (Increments of 100)Content wrapper max width.
Content Max Width (Increments of 100)Inner content max width.

Text – Accordion

An accordion block.

Fields

TitleHeading text.
StraplineSmall text above/near the title.
TextBody copy, collapsible.

Button

Button LabelThe button's visible text.
Button HrefThe button's link destination.
Button TargetLink target attribute.

Advanced Block Settings

IdCustom id attribute for the section.
Section ClassExtra class(es) added to the outer section.
Heading Tagh2, h3, h4, or h5; default h3.
CSSRaw CSS injected into the block's inline style tag.

Text + Image

A standard section with text and an image.

Fields

TitleHeading text.
StraplineSmall text above/near the title.
TextMain body copy.

Image

ImageThe image.
Image @2xRetina version of the image.
Image Url (Overwrites image field)Direct URL override.
Image Alt TextAlt text for the image.
Image PositionRight or Left; default Right.
Image Width (integer, max width in pixels)Caps the image's rendered width.
Image Caption - TitleTitle shown alongside the image caption.
Image Caption - TextBody text shown alongside the image caption.
Image ClassExtra class(es) added to the image.
Image MobileAlternate image shown on mobile.

Button

Button LabelThe button's visible text.
Button HrefThe button's link destination.
Button TargetLink target attribute.
Button ClassExtra class(es) added to the button.

Background Image

Background ImageFull-bleed background image behind the section.
Background Image Url (Overwrites background image field)Direct URL override.
Hide Background Image Less Than (pixel dimension)Breakpoint below which it's hidden.
Background Image Alignment - HorizontalRight, Left, or None; default Right.
Background Image Alignment - VerticalTop, Bottom, or None; default Top.
Background Image SizeCover, Contain, Height 100%, Image native dimensions, or None; default Height 100%.
Background Image ElementOuter Content Wrapper, Content, or Full Width.

Additional Content

Text - Introduction TextRich text shown before the main Text field.
HTML - TitleRaw HTML, appears near the title.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Content ClassExtra class(es) added to the content wrapper.
Title Tagh1, h2, h3, or h4; default h2.
Title Link UrlWraps the title in a link.
CSSRaw CSS injected into the block's inline style tag.
HTML (Image Column)Raw HTML, placed above the image.
Module Path (Image Column)Path to an additional module rendered in the image column.
Content Vertical AlignmentTop, Middle, or Bottom; default Top.
Image Vertical AlignmentTop, Middle, or Bottom.
Image Horizontal AlignmentLeft, Center, or Right.
Collapse Width (Increments of 100px)Breakpoint below which the columns stack.
Collapsed Image PlacementTop or Bottom; default Top.
Left Column Width25%–75% or a fixed 75–500px value; default 50%.
Section Max Width (Increments of 100)None, or 500–2000px.
Content Max WidthStandard, None, or 500–2000px.
Gutter (Between Image and Content Columns)0–100; default 50.
Suppress Contain (Suppresses the default behavior of setting a max width and mobile padding)Checkbox.

Text Only

A standard section which only shows title and text.

Fields

TitleHeading text.
StraplineSmall text above/near the title.
TextMain body copy.

Button

Button LabelThe button's visible text.
Button HrefThe button's link destination.
Button TargetLink target attribute.
Button ClassExtra class(es) added to the button.

Background Image

Background ImageFull-bleed background image behind the section.
Background Image Url (Used instead of Background Image)Relative to theme folder.
Hide Background Image Less Than (pixel dimension)Breakpoint below which it's hidden.
Background Image Aligment - HorizontalFree-text alignment value.
Background Image Alignment - VerticalFree-text alignment value.
Background Image SizeContain or Cover; default Contain.
Background Image ElementOuter Content Wrapper, Content, or Full Width.

Additional Content

Sub TitleSecondary heading text.
Text - Introduction TextRich text shown before the main Text field.
HTML - TitleRaw HTML, appears near the title.

Advanced Block Settings

IdCustom id attribute for the section.
Section ClassExtra class(es) added to the outer section.
Content ClassExtra class(es) added to the content wrapper.
Content Class (Title Block Section)Extra class(es) added to the title area.
Content Class (Text Section)Extra class(es) added to the text area.
Heading Tagh1, h2, h3, or h4; default h2.
CSSRaw CSS injected into the block's inline style tag.
Content Vertical AlignmentTop, Middle, or Bottom; default Top.
Section Container Width (Increments of 100)Outer section max width.
Content Container Width (Increments of 100)Content wrapper max width.
Content Max Width (Increments of 100)Inner content max width.
Suppress Contain (Suppresses the default behavior of setting a max width and mobile padding)Checkbox.

Text – Two Columns

Two columns of text, each with its own title, text, button, and optional embedded custom block.

Fields

TitleOverall section heading.
StraplineSmall text above/near the title.

Column 1 / Column 2

Each column repeats the same set of fields (suffixed _1 / _2):

TitleColumn heading.
StraplineSmall text above/near the column title.
TextColumn body copy.
Button LabelThe button's visible text.
Button HrefThe button's link destination.
Button TargetLink target attribute.
Button ClassExtra class(es) added to the button.
Button Data Attributese.g. data-target="somevalue" data-value="somevalue".
BlockIncludes a custom block; provide the URL relative to the child theme.

Advanced Block Settings

IdCustom id attribute for the section.
Section ClassExtra class(es) added to the outer section.
Content ClassExtra class(es) added to the content wrapper.
Heading Tagh1, h2, h3, or h4; default h2.
Section Container Width (Increments of 100)Outer section max width.
Content Container Width (Increments of 100)700–1800px; default 1200.
Left Column Width8%–91%; default 50%.
Collapse Width400–1300px.
Horizontal Alignment - Left ColumnLeft, Center, or Right.
Vertical Alignment - Left ColumnTop, Middle, or Bottom.
Horizontal Alignment - Right ColumnLeft, Center, or Right.
Vertical Alignment - Right ColumnTop, Center, or Bottom.

Tile Mosaic

A tile mosaic section: a fixed 3-tile arrangement (two horizontal tiles plus one vertical tile), each configured on its own tab in the editor.

Fields

Tile 1 & Tile 2 (Horizontal)

Each of these two tiles repeats the same fields (suffixed _1 / _2):

TitleTile heading.
TextTile body copy.
ImageTile image.
Image PlacementLeft or Right; default Left.
Link UrlThe tile's link destination.
Link LabelThe tile's link text.
CSS ClassExtra class(es) added to the tile.
Tile BehaviorMake Entire Tile Clickable — checkbox.

Tile 3 (Vertical)

Same fields as above (suffixed _3): Title, Text, Image, Link Url, Link Label, CSS Class, Tile Behavior.

Section Content

Section TitleOverall section heading.
Section StraplineSmall text above/near the section title.
Section TextOverall section body copy.
Section Bottom ImageImage shown below the tiles.
Bottom Image PlacementSection Wrapper or Content Container.

Advanced Block Settings

Vertical Column AlignmentLeft or Right; default Left.
Section ClassExtra class(es) added to the outer section.
Section Max Width (Increments of 100)Outer section max width.
Content Max Width (Increments of 100)Inner content max width.

Tiles

Tiles: a grid of repeatable tiles. The Tile Type setting changes which sub-fields are shown/used per tile (Simple, General, or Person).

Fields

Tile TypeSimple, General, or Person; default Simple — controls which of the tile sub-fields below are shown.
TilesRepeater — see sub-fields below.

Tiles — common sub-fields

Title (not used on "people" tile types)Tile heading.
ImageTile image.
TextTile rich text.
LinkThe tile's link destination.
Link LabelThe tile's link text.
Link ClassExtra class(es) added to the link.
Link TargetOpen in Same Window or Open in New Window; default same window.
Click BehaviorEntire Tile Clickable — checkbox.
Data AttributesRaw data-* attributes to add to the tile.
Advanced — CSS ClassExtra class(es) added to this tile.
Advanced — Width (Span)1–3; how many tile-widths this tile spans.

Tiles — Person type only

NamePerson's name.
Professional TitleJob title.
Company NameCompany name.
Modal – Use ModalOpen modal if user clicks on tile — checkbox.
Modal – Modal TextRich text shown in the modal.
Modal – Modal ImageImage shown in the modal.

Tiles — General type only

StraplineSmall text above/near the tile title.
Sub TitleSecondary heading text.
Header – Header PHP FileIf found, its contents are inserted at the top of the tile.
Footer – Footer TextRich text shown in the tile's footer.
Footer – Button HrefFooter button link destination.
Footer – Button LabelFooter button text.

Section Content

Section TitleOverall section heading.
Section StraplineSmall text above/near the section title.
Section TextOverall section body copy.
Section Bottom ImageImage/file shown below the tiles.
Bottom Image PlacementSection Wrapper or Content Container.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Content ClassExtra class(es) added to the content wrapper.
Tile ClassExtra class(es) added to every tile.
Tile Heading Tagh1, h2, h3, or h4; default h3.
Render Image as BackgroundCheckbox.
Render as Background - Image HeightInclude units; "none" for no height.
Render image as background sizeCover or Contain; default Cover. Only shown when the above is checked.
Image SizingKeep Image Within Container — checked by default.
CSSRaw CSS injected into the block's inline style tag.
Collapse Width (Increments of 100px)Breakpoint for mobile layout.
Section Max Width (Increments of 100)Outer section max width.
Content Contain Width (Increments of 100) (Content stays centered)Keeps content centered within this width.
Content Max Width600–1300px; default 1200.
Columns1–5; default 3.
Column GapGap between columns.
Row GapGap between rows.
Image / Icon PlacementAbove or Left; default Above.
Image Column Width50–300; only shown when Image/Icon Placement is Left.
HTML - Above TitleRaw HTML placed above each tile's title.
Tile ClickableMake entire tile clickable — checkbox.

Tiles – Horizontal

Tiles - Horizontal: a row of tiles laid out with a fixed-width left label column.

Fields

Section TitleOverall section heading.
TilesRepeater — each tile: Title, Strapline, Image, Text, CSS Class, Link, Link Label, Link Class, Data Attributes, ID.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Tile ClassExtra class(es) added to every tile.
Render Image as BackgroundCheckbox.
CSSRaw CSS injected into the block's inline style tag.
Collapse Width (Increments of 100px) (collapses tile columns)400–1600px.
Collapse Width - Tile (Collapses the image and content within a tile)400–900px.
Section Contain Width (Increments of 100)Outer section max width.
Content Contain Width (Increments of 100)Inner content max width.
Content Max Width (Increments of 100)Content wrapper max width.
Columns1–5.
Column Left Width0–500; default 75. Width of the label column.
Column Left - Padding Right5–25; default 25.
Column Gutter10–100; default 40.
Tile ClickableMake Entire Tiles Clickable — checkbox.

Timeline

A timeline section.

Timeline Elements

Timeline ElementsRepeater — each entry: Title, Text, Date, Element Position (Right or Left; default Right).

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Collapse Width (Increments of 100px)Breakpoint for mobile layout.
Section Max Width (Increments of 100)Outer section max width.
Content Max Width (Increments of 100)Inner content max width.
Column Left Width100–300; default 125. Width of the date/rail column.

Two Columns

Two Columns: a text-and-image layout, similar to Text + Image but with two independent text columns alongside the image.

Not backed by an exported ACF field group JSON — the fields below are inferred directly from the render template's get_field() calls.

Fields

Column 1 / Column 2

Each column repeats the same set of fields (suffixed _1 / _2):

TitleColumn heading.
StraplineSmall text above/near the column title.
Text IntroRich text shown before the main Text field.
TextColumn body copy.
Text AlignText alignment for this column.

Image

ImageThe image.
Image PositionRight or Left.
Image @2xRetina version of the image.
Image Alt TextAlt text for the image.
Image MobileAlternate image shown on mobile.
Image Max WidthCaps the image's rendered width, in pixels.
Image Caption TitleTitle shown alongside the image caption.
Image Caption TextBody text shown alongside the image caption.
Image ClassExtra class(es) added to the image.
Image Set MaxwidthCheckbox — controls whether the image gets a default max-width: 100% rule.

Background Image

Background ImageFull-bleed background image behind the section.
Background Image Hide Less ThanBreakpoint below which it's hidden.
Background Image Alignment - HorizontalDefault Right.
Background Image Alignment - VerticalDefault Bottom.

Advanced Block Settings

Section ClassExtra class(es) added to the outer section.
Content Vertical AlignmentVertical alignment of the two text columns.
Collapsed Image PlacementTop or Bottom.
Left Column Width25%–75%; default 50%.
HTML ImageRaw HTML, placed near the image.
Section Max WidthOuter bounds of the page; default 1800.
CSSRaw CSS injected into the block's inline style tag.
Collapse WidthBreakpoint below which the columns stack.
Max WidthContent max width, or "standard".

Video

A standard section which only a video.

Fields

Cover ImagePoster/cover image shown before the video plays.
Vimeo Video Id (ie: 877473729)The Vimeo video's numeric id.

I love to create and explore. Whether building a website or app, taking a long walk through the mountains, or playing with a random idea, I've found that there will never be enough time to experience it all. But that won't stop me from trying.

Web Design & Development

  • Portfolio
  • San Diego Website Design
  • Custom Web Design
  • Responsive Web Design
  • Website Maintenance
  • Freelance Web Designer
  • Web Design Posts

Website Resources

  • Website Checklist
  • Saphire CSS
  • Ergo Blocks

Blog

  • Adventure
  • San Diego
  • Projects
  • Website Design
  • Code Notes

About

  • Bluesky
  • Resume
  • Contact
drempd | san diego, ca
© 2026 Drempd All rights reserved.