DevAny.ai
Sign in
ExploreCoding IdeasCreative LabModelsCommunity
LearnAcademyDocumentationHelp & FAQ
Showcase
Pricing
Sign in
Language

Layout glossary

You and the AI name sections the same way. WHAT a section is (FAQ, Team, Pricing…) and HOW it is shown (Accordion, Cards, Sticky side heading…) — two separate lists. Select a section in the Builder and tap “Change layout”, or type these names in the chat.

Content sections — WHAT a section is

Layouts — HOW a section is shown

  • Hero banner

    A large headline, a short line and the main button at the top, over a wide image.

    Typical uses:
    Home page opening, campaign
    Also called:
    Hero banner, hero, banner, giriş bandı, kapak, manşet
    Options:
    Alignment (Left / Center)
    Example sentence:
    “Make the home page opening a big hero banner.”

  • Sticky hero

    The hero image or video stays put while the content scrolls over it.

    Typical uses:
    Dramatic opening, brand story
    Also called:
    Yapışkan hero, sticky hero, yapışkan hero, sabit hero, parallax hero, sabit arka plan
    Example sentence:
    “Keep the hero image fixed and let the content scroll over it.”

  • Text block

    A heading and paragraphs at a readable width; no image.

    Typical uses:
    About, legal text, announcement
    Also called:
    Metin bloğu, text block, metin bloğu, düz metin, paragraf, yazı alanı
    Example sentence:
    “Turn this section into a plain text block.”

  • Image + text

    An image on one side, heading and text on the other; stacked on a phone.

    Typical uses:
    About, a service introduction
    Also called:
    Görsel + metin, image text, görsel metin, resim yazı, split, bölünmüş
    Options:
    Image side (Left / Right / On top)
    Example sentence:
    “Put the image on the left and the text on the right.”

  • Zigzag

    Image + text rows; the image alternates left and right on each row.

    Typical uses:
    Services, features, case studies
    Also called:
    Zigzag, zigzag, zig zag, alternating, sırayla görsel metin, dönüşümlü
    Options:
    First image (Left / Right)
    Example sentence:
    “Show the services in a zigzag layout.”

  • Columns

    Content side by side in 2, 3 or 4 equal columns; one column on a phone.

    Typical uses:
    Short explanations, a feature list
    Also called:
    Kolonlar, columns, kolonlar, sütunlar, kolon, sütun
    Options:
    Columns (3 / 2 / 4)
    Example sentence:
    “Split this section into 3 columns.”

  • Cards

    Each item is its own card with an image, a title and a short text.

    Typical uses:
    Services, blog, products
    Also called:
    Kartlar, cards, kartlar, kart, card, kutucuklar
    Options:
    Columns (3 / 2 / 4)
    Example sentence:
    “Show the services as cards.”

  • Grid

    A regular grid of equal items; for many items.

    Typical uses:
    Team, products, logos
    Also called:
    Grid / Izgara, grid, ızgara, izgara, tablo düzeni, mozaik
    Options:
    Columns (4 / 2 / 3)
    Example sentence:
    “Show the team in a 4-column grid.”

  • Accordion

    A list of headings; tapping one opens its content.

    Typical uses:
    FAQ, long lists, legal text
    Also called:
    Akordeon, accordion, akordeon, açılır kapanır, aç kapa, katlanır
    Options:
    Open (One at a time / Several)
    Example sentence:
    “Make this section an accordion.”

  • Tabs

    Tab labels on top; each tab shows its own content.

    Typical uses:
    Grouped FAQ, product details
    Also called:
    Sekmeler, tabs, sekmeler, sekme, tab, sekmeli
    Example sentence:
    “Split the questions into tabs by category.”

  • Lightbox

    Tapping a thumbnail opens it large, full screen.

    Typical uses:
    Gallery, product photos
    Also called:
    Lightbox, lightbox, büyüt, tam ekran görsel, zoom, görsele tıklayınca büyüsün
    Example sentence:
    “Open each gallery image large when tapped.”

  • Video block

    A heading and a wide video player.

    Typical uses:
    Promo, how-to
    Also called:
    Video bloğu, video, video bloğu, film, tanıtım videosu
    Example sentence:
    “Put a video block here for the promo video.”

  • Icon + text

    Each item has a small icon, a short title and one sentence.

    Typical uses:
    Benefits, a service summary
    Also called:
    İkon + metin, icon text, ikon metin, ikonlu liste, simgeli, features with icons
    Options:
    Columns (3 / 2 / 4)
    Example sentence:
    “Show the benefits as icon + text.”

  • Stats band

    Big numbers along a band, each with a short label.

    Typical uses:
    Facts in numbers, achievements
    Also called:
    Sayılar / İstatistik bandı, stats, istatistik, sayılar, rakamlar, numbers
    Example sentence:
    “Show the numbers in a stats band.”

  • Comparison table

    Options in columns, features in rows, with ticks and crosses.

    Typical uses:
    Plan comparison, product differences
    Also called:
    Karşılaştırma tablosu, comparison table, karşılaştırma tablosu, karşılaştırma, tablo, compare
    Example sentence:
    “Show the plans in a comparison table.”

  • Pricing cards

    Each plan is a card: name, price, what is included and a button.

    Typical uses:
    Prices, membership plans
    Also called:
    Fiyat / Paket kartları, pricing cards, fiyat kartları, paket kartları, fiyat, paketler
    Options:
    Columns (3 / 2 / 4)
    Example sentence:
    “Show the prices as plan cards.”

  • Timeline

    Events in date order along a line.

    Typical uses:
    History, process, event schedule
    Also called:
    Timeline / Zaman çizelgesi, timeline, zaman çizelgesi, zaman tüneli, tarihçe, kronoloji
    Options:
    Direction (Vertical / Horizontal)
    Example sentence:
    “Make the company history a timeline.”

  • Steps

    Numbered steps: 1, 2, 3… each with a short title and line.

    Typical uses:
    Process, how we work, application
    Also called:
    Adımlar, steps, adımlar, adım adım, numaralı adımlar, nasıl çalışır
    Example sentence:
    “Explain the process as numbered steps.”

  • Pull quote

    One sentence set large with an accent rule and its source.

    Typical uses:
    A client's words, the founder's line
    Also called:
    Alıntı / Öne çıkan cümle, pull quote, alıntı, öne çıkan cümle, quote, blockquote
    Example sentence:
    “Feature this sentence as a big pull quote.”

  • Logo band

    Client or partner logos in one quiet row.

    Typical uses:
    References, partners
    Also called:
    Logo bandı, logo band, logo bandı, logolar, referans logoları, logo strip
    Example sentence:
    “Show the references in a logo band.”

  • Call-to-action band

    A coloured band: one sentence and one clear button.

    Typical uses:
    End of page, call to contact
    Also called:
    CTA bandı, cta, cta bandı, çağrı bandı, harekete geçirici, call to action
    Example sentence:
    “Add a call-to-action band at the end of the page.”

  • Form

    A form with its fields and a send button, optionally beside a short text.

    Typical uses:
    Contact, quote, application
    Also called:
    Form, form, iletişim formu, başvuru formu, contact form, talep formu
    Example sentence:
    “Put a contact form here.”

  • Search + filters

    A search box and filter chips on top, the results below.

    Typical uses:
    Products, listings, blog
    Also called:
    Arama + filtreler, search filter, arama filtre, filtreler, filtre, arama
    Example sentence:
    “Add search and filters above the products.”

  • Map

    Address, opening hours and a link to the location on a map.

    Typical uses:
    Contact, store location
    Also called:
    Harita, map, harita, konum, location, yol tarifi
    Example sentence:
    “Add the address and a map to the contact section.”

  • Modal / Pop-up

    A window that opens over the page when a button is pressed.

    Typical uses:
    Details, a form, information
    Also called:
    Modal / Pop-up, modal, popup, pop-up, açılır pencere, dialog
    Example sentence:
    “Open the details in a pop-up window.”

  • In-page menu

    Short links that jump to the sections of the page.

    Typical uses:
    Long page, legal text, one-page site
    Also called:
    Anchor menü, anchor menu, anchor menü, sayfa içi menü, içindekiler, table of contents
    Example sentence:
    “Put a menu that jumps to the sections at the top of the page.”

  • Sticky side heading

    The heading stays fixed on one side while the content and bullet cards scroll on the other.

    Typical uses:
    What we do, services, process
    Also called:
    Yapışkan yan başlık, sticky side heading, yapışkan yan başlık, sabit yan başlık, sticky heading, yan başlık sabit
    Options:
    Heading side (Left / Right)
    Example sentence:
    “Use a sticky side heading, with the heading on the right.”

  • Sticky bar

    A menu or button that stays on screen while scrolling.

    Typical uses:
    Booking button, top menu
    Also called:
    Sticky alan, sticky, yapışkan, sabit, sticky bar, sabit buton
    Options:
    Position (Bottom / Top)
    Example sentence:
    “Keep the booking button fixed at the bottom of the screen.”