Docs

Widgets overview

All widgets in Urmi, grouped as you find them in the Insert panel.

On this page

Widgets are the pieces you build pages with: headings, text, images, buttons, forms, galleries, maps and more. Urmi has 80 widgets plus the Container, grouped in the Insert panel into seven categories: Layout, Basic, Media, Marketing, Content, Forms and Site & theme. Every widget page below explains what the widget is for, how to add it, and every setting on its Content, Design and Behaviour tabs.

The Insert panel with “image” typed in Search widgets and seven results: Image, Image Box, Image Carousel, Image Gallery, Featured Image, Hotspot and Before / After
Search widgets finds widgets by name and keyword.

Add a widget

  1. Open the Insert panel

    In the editor, click Insert in the left panel and make sure Elements is selected (Sections holds ready-made layouts).

  2. Find the widget

    Browse the categories, or type in Search widgets: it matches names and keywords, so map finds Google Maps and faq finds Accordion. Use ↑ and ↓ to pick a result.

  3. Add it

    Click the widget (or press Enter in the search). The line above the list shows where it goes: Adds inside the selected container, Adds after the selected element, or Adds a new section at the end of the page. To place it exactly, drag it onto the canvas instead.

Other ways to add widgets:

  • Command palette. Press Ctrl+K (⌘+K on a Mac), type the widget name and choose Insert followed by the name. See Command palette.
  • Keyboard. Shift+A opens Insert with the search ready.
  • Favourites and Recent. Click the ☆ on a widget row to pin it to Favourites at the top of the list. Widgets you used lately appear under Recent.
  • Description. The ⓘ button on a row shows what the widget does.

See Adding elements for sections, patterns and saved sections.

Edit a widget

Click a widget on the canvas (or in Layers) to select it. Its settings open in the inspector on the right, on three tabs:

TabWhat it holds
ContentWhat the widget shows: text, images, links, items and behaviour options specific to the widget.
DesignHow it looks: the widget's own style sections, then Spacing & position, Background & border and Mask, which every element has.
BehaviourThe same for every element: Anchor & classes, Animations, Motion & effects, Scroll & mouse effects, Visibility, Conditions, Interactions and Attributes.

Double-click text on the canvas to edit it in place. Many settings can have a different value on tablet and mobile: pick the device in the top bar, then change them (see Responsive editing). Read Editing elements & the inspector for the details.

Turn widgets off

Widgets you never use can be hidden from the Insert panel in Urmi → Settings → Elements, which also shows how often each widget is used. See Element manager.

All widgets

Layout

Containers and nested widgets that hold other elements.

ContainerThe layout element that holds everything else: rows, columns, grids and sections. AccordionCollapsible items that can hold any widgets, with optional FAQ structured data. CarouselA swipeable carousel whose slides can hold any widgets. Off-CanvasA button that opens a panel sliding in from the side, holding any widgets. TabsAccessible tabs whose panels can hold any widgets. TemplateShow a saved section on this page, with its component properties.

Basic

Everyday building blocks: text, buttons, images, icons and lists.

AlertA notice for info, success, warning or danger, with an optional dismiss button. BlockquoteA highlighted quotation with its author and source. ButtonA link styled as a button, using your Design System button style. CounterA number that counts up when it scrolls into view, with a label. DividerA horizontal line, optionally with a label or an icon in the middle. HeadingA title from h1 to h6 with text style presets and an optional link. HTMLAdd your own HTML, such as an embed code from another service. IconOne icon from the built-in icon libraries or your own SVG. Icon BoxAn icon with a title, text and an optional link, for features and services. Icon ListA list of short items with icons, stacked or inline. ImageA single image with alt text, caption, link and lightbox. Image BoxAn image with a title, text and an optional link, for cards and teasers. Menu AnchorAn invisible target that one-page menu links scroll to. Progress BarA labelled bar that fills to a percentage when it scrolls into view. ShortcodeShow a shortcode from another plugin. Social IconsIcon links to your social profiles, email or phone. SpacerBlank vertical space between elements. Star RatingA score shown as stars, with an optional label. TestimonialA customer quote with name, role, photo and rating. TextRich text for paragraphs, lists, links and emphasis. Text PathShort text written along a curve, circle or your own path.

Media

Images, galleries, video, audio, maps and animations.

Before / AfterCompare two images with a draggable divider. Facebook EmbedEmbed a Facebook page, post or video. Google MapsAn embedded map for an address or place. HotspotAn image with markers that open tooltips. Image CarouselA swipeable carousel of images with captions and lightbox. Image GalleryA grid, masonry or justified gallery with lightbox. Logo GridClient or partner logos as a grid or a scrolling marquee. LottieA lightweight vector animation from a Lottie file. SlidesA full-width hero slider with its own content on each slide. SoundCloudA SoundCloud track or playlist player. VideoA YouTube, Vimeo or self-hosted video that loads only when played. Video PlaylistA video player with a clickable playlist.

Marketing

Pricing, calls to action, testimonials, countdowns and more.

Animated HeadlineA heading with highlighted or rotating animated words. Call to ActionA promo box with an image, title, text and buttons. CountdownA countdown to a date or an evergreen deadline per visitor. Flip BoxA card that flips to reveal a back side on hover or tap. Link in BioA complete mobile-first link-in-bio page in one widget. MarqueeAn endless scrolling line of short texts. Price ListA menu-style list of items with prices, like a restaurant menu. Price TableA pricing plan card with features and a button. Share ButtonsShare links for social networks, email and copy link. Team MemberA person card with photo, name, role, bio and social links. Testimonial CarouselA swipeable carousel of testimonial cards.

Content

Posts, loops, tables, steps, timelines and navigation aids.

BreadcrumbsA breadcrumb trail for any page, with structured data. Code HighlightA code snippet with line numbers, highlighted lines and a copy button. Loop CarouselRepeat a loop item card for every post of a query, in a carousel. Loop GridRepeat a loop item card for every post of a query, in a grid. PostsA grid or list of posts with image, title, meta and excerpt. StepsA numbered “how it works” process with connecting lines. TableA data or comparison table with captions and a sticky header. Table of ContentsA table of contents built from the headings on the page. TimelineA vertical timeline of events with dates and icons.

Forms

Contact forms, lead forms and login.

FormContact and lead forms with any fields, email notifications and integrations. LoginA login form for site users with lost password and register links.

Site & theme

Logo, menus, post parts and archive parts for templates.

Archive DescriptionThe description of the current category, tag or archive. Archive TitleThe title of the current archive or search results page. Author BoxThe post author with avatar, name, bio and website. Color Scheme SwitchA light and dark mode switch for visitors. Featured ImageThe featured image of the current post. Language SwitcherLinks to this page in other languages (WPML or Polylang). Loop FilterFilter and sort a loop grid or posts widget without reloading. Nav MenuA WordPress menu with dropdowns and a mobile menu. Post CommentsThe comments of the current post and the reply form. Post ContentThe content of the current post or page, for single templates. Post ExcerptThe excerpt of the current post with an optional read more link. Post InfoPost details such as author, date, categories and reading time. Post NavigationLinks to the previous and next post. Post TitleThe title of the current post or page. Reading ProgressA bar that fills as the visitor reads the page. Search FormA search field, or an icon that opens a full-screen search. Site LogoThe site logo linked to the home page. Site TaglineThe site tagline from your WordPress settings. Site TitleThe site name linked to the home page. SitemapAn HTML sitemap of your pages, posts and categories.