Section Variants & Layouts

Skill level: Beginner for options, light code to swap components

Consultiz gives you two ways to change how a section looks:

An option in the content file, such as options.layout. The content stays the same; only the look changes.
A different component of the same kind, such as one of the three testimonial sliders. Each has its own content file, and you swap it in the route file.

Options In Content Files

Set these in the section file (every page) or in a page block (one page). Set them in both language folders.

Section or page	Where it is set	Values
Pricing plans	`options.layout` in `pricing-section.md` or the `pricingSection` block	`default` · `advisory` (the pricing page uses `advisory`)
Client logos, look	`layout` in `partner-marquee.md`, `customers.md`, or the `customersSection` block	`default` · `corporate`
Client logos, motion	`display`	`marquee` (scrolling) · `grid` (static)
Client logos, spacing	`options.sectionVerticalSpace`, `options.bottomSpacing`, `options.background`	`true` · `false`
Client logos, review badge	`googleReview.enable`	`true` · `false`
Testimonial sliders	`options.layout` in `testimonial-slider-vertical.md` and `testimonial-slider-video.md`	`carousel-full` · `carousel` · `card`
Portfolio list page	`options.layout` in `portfolio/<lang>/-index.md`	`grid` · `masonry` · `horizontal` (with category filters)
Industries list page	`options.layout` in `industries/<lang>/-index.md`	`list` · `grid`
Numbered blog pages (`/blog/page/2/`)	`options.layout` and `options.columns` in `blog/<lang>/-index.md`	`card` · `grid` · `creative` · `horizontal`; columns `1`, `2`, or `3`

The shipped content files show the value each page uses today.

layout: "corporate"   # default | corporate
display: "grid"       # marquee | grid

Swap A Section For Another Variant

Several kinds of section come in more than one design. Each design is its own component with its own content file in src/content/sections/<language>/:

Kind of section	Components (in `src/layouts/components/sections/`)	Content files
Banner	`banner/BannerSlider`, `banner/BannerTabbedSlider`	`banner-slider.md`, `banner-tabbed-slider.md`
About	`about/AboutCentered`, `about/AboutImageStats`, `about/AboutProcess`, `about/AboutVideoStats`	`about-centered.md`, `about-image-stats.md`, `about-process.md`, `about-video-stats.md`
Services	`services/ServicesCentered`, `services/ServicesParallax`, `services/ServicesSlider`	`services-centered.md`, `services-parallax.md`, `services-slider.md`
Industries	`industries/IndustriesStepper`, `industries/IndustriesCover`	`industries-stepper.md`, `industries-cover.md`
Growth banner	`growth-banner/GrowthBannerFullWidth`, `growth-banner/GrowthBannerCard`	`growth-banner-full-width.md`, `growth-banner-card.md`
Testimonials	`testimonial/TestimonialVideoShowcase`, `testimonial/TestimonialSliderVertical`, `testimonial/TestimonialSliderVideo`	`testimonial-video-showcase.md`, `testimonial-slider-vertical.md`, `testimonial-slider-video.md`
Articles	`blog/BlogTwoColumn`, `blog/BlogGridCentered`, `blog/BlogGrid`	`blog-grid-centered.md` (the first two), `blog-grid.md`
FAQ	`faq/FaqCentered`, `faq/FaqImageSplit`	`faq-centered.md`, `faq-image-split.md`
Contact	`contact/ContactImageForm`, `contact/ContactSplit`	`contact-image-form.md`, `contact-split.md`
Call to action	`cta/CtaImageBanner`, `cta/CtaCircle`	`cta-image-banner.md`, `cta-circle.md`
Portfolio preview	`portfolio/PortfolioSlider`, `portfolio/PortfolioSliderPanel`	`portfolio-slider.md`, `portfolio-slider-panel.md`
Process steps	`solution-steps/SolutionStepsSlider`, `solution-steps/SolutionStepsCounter`	`solution-steps-slider.md`, `solution-steps-counter.md`

To swap one for another on a page:

In the route file (src/pages/[...lang]/<page>.astro), change the import line to the other component.
Change the component tag in the page body.
Remove the content={...} prop, or point it at a block whose fields match the new component. Each component expects the fields of its own content file.
Run npm run astro-check and look at the page.

Sections Not Placed On Any Page

These sections ship with content but are not used by any demo page. Add them to a route when you need them (Sections):

Component	Content file
`about/AboutVideoStats`	`about-video-stats.md`
`blog/BlogGrid`	`blog-grid.md`
`contact/ContactSplit`	`contact-split.md`
`cta/CtaCircle`	`cta-circle.md`
`portfolio/PortfolioSlider`	`portfolio-slider.md`
`portfolio/PortfolioSliderPanel`	`portfolio-slider-panel.md`
`services/ServicesSlider`	`services-slider.md`
`solution-steps/SolutionStepsSlider`	`solution-steps-slider.md`
`testimonial/TestimonialSliderVideo`	`testimonial-slider-video.md`
`solution-steps/SolutionStepsCounter`	`solution-steps-counter.md`
`ProcessSection`	`process-section.md`
`RoadmapSection`	`roadmap-section.md`
`JoinTeamSection`	`join-team-section.md`
`TeamworkSection`	`teamwork-section.md`
`WorkWithUsSection`	`work-with-us-section.md`

Page Layouts

Some pages also come in several designs. These are separate routes, each with its own content folder:

Kind	URLs	Content folders
About	`/about/`, `/about/style-02/`	`about/`, `faq/` (style 2 is an FAQ-led page)
Solutions	`/solutions/style-01/`, `/solutions/style-02/` (beside the list page `/solutions/`)	`solution-style-01/`, `solution-style-02/`
Industries	`/industries/style-01/`, `/industries/style-02/` (beside the list page `/industries/`)	`industry-style-01/`, `industry-style-02/`
Blog list	`/blog/` (also `/blog/standard/`), `/blog/style-01/`, `/blog/style-02/`	`blog/` (all read `-index.md`)

Keep the designs you like, delete the routes you don’t need, and update the menus. See Pages.