Skip to main content

Structuring Layouts for Flex Blocks in Elementor

Choose which parts of each post a flex block shows, and in what order: the image, the category, the title, the meta line, the excerpt and more.

A Foxiz flex block on the BuzzStream demo, its elements ordered thumbnail, category, meta, title, excerpt


To get started, follow the steps below:​

  1. Navigate to Pages > All Pages.

  2. Select a page you would like to edit or add a new page, and click on the "Edit with Elementor" link.

  3. The website will redirect to another URL and the panel will appear on the page. Then you can search "flex" blocks in the Elementor.

    The Elementor Elements panel with "flex" typed into the search box, returning Flexbox and the Foxiz flex blocks

  4. After you search "flex", you can drag and drop blocks inside.

  5. Click on the "Style" tab, and you will find the "Block Structure Order" option within the "Block Structure" section.

  6. Here, you can input keywords, separated by commas.

    Seven keys work in the flex blocks:

    category, title, meta, excerpt, review, readmore, divider

    The last three are not obvious from their names:

    • review: the post's review score, on posts that have a review.
    • readmore: a Read More link to the post.
    • divider: a thin line between two parts.

    Grid blocks accept two more, because they are the only ones that draw the image inside the structure: thumbnail and images.

    • thumbnail: the featured image.
    • images: a small row of the pictures inside the post's content, three across by default.

    In Foxiz - Flex Grid 1 and Foxiz - Personalized Grid 1, thumbnail draws the image with the category label on it, and category on its own draws nothing. Foxiz - Flex Grid 2 and Foxiz - Personalized Grid 2 draw the two separately.

    note

    Older instructions list thumbnail as though it worked everywhere and leave category out altogether. In a list or overlay flex block the thumbnail sits outside the structure and the key does nothing, while category works in all of them but the two Grid 1 blocks above.

    The Block Structure section on a flex block's Style tab, its Block Structure Order field holding category, title, meta, excerpt

  7. Click "Publish"

Leaving the field empty does not give you the order shown in the greyed out placeholder. Each block falls back to a short structure of its own: a list flex block draws title, excerpt, meta, and an overlay flex block draws category, title, meta.

Anything you leave out of the list is not drawn at all, so the field controls what appears as much as it controls the order.