Skip to main content
🔥 SALE ENDS IN
00days
16hrs
23min
21sec
+321 123 4567
[email protected]
More
Track My OrderGift CardsLive ChatWishlist
UpSolution white logo for dark theme

Content Building Capabilities — Live Demo

Each section below is a separate Row demonstrating one capability. The numbered blue note at the top of every section (01, 02, 03 …) explains exactly what was built or changed. Numbering is continuous so new examples can be appended without renumbering.

01. Here I used a Text Block with rich formatting: an H2 heading, a paragraph with bold, italic and a link, plus a colored lead sentence set through the element’s color setting.

Rich Text Formatting

This lead line is bold and dark to stand out on the light background.

A regular paragraph with bold, italic, and an inline link. Below is a simple list:

  • First formatted point
  • Second formatted point
  • Third formatted point

02. Here I created a horizontal Wrapper and a vertical Wrapper, each with a semi-transparent colored background, custom padding and rounded corners, with Text elements placed inside for clarity.

Horizontal
items
side by side
Vertical
items
stacked

03. Here I built a three-column inner grid of Icon Boxes — each with an icon, a heading and body text, top-aligned icon layout — to show multi-column layouts using vc_row_inner / vc_column_inner.

bolt

Fast

Icon box with a top icon and centered text.

tune

Flexible

Three columns collapse to one on tablets and phones.

verified

Reliable

Each box mixes icon, heading and paragraph in one element.

04. Here I placed four animated Counters in a row, each with a value (with suffix baked into the number), a caption, and the Primary theme color — they count up when scrolled into view.

Customers
Uptime
Years
Downloads

05. Here I added three Message Boxes in their semantic colors — green for success, yellow for a warning, red for an error — each with a matching icon, to show inline notifications.

Success — your changes have been saved.

Warning — this action cannot be undone.

Error — something went wrong, please try again.

06. Here I created a Call To Action block with a heading, descriptive text and a button, using a colored semi-transparent background and centered second-style button layout.

Ready to start your project?

A CTA pairs a message with an action in one element.

Get in touch

07. Here I placed several Buttons side by side in a wrapper, each using a different saved Button Style (the theme’s default styles plus the custom animated-outline style created earlier), with anchor links.

Style 1
Style 2
Custom Outline

08. Here I created two new Portfolio posts (Atlas Mobile App, Vertex Branding) via the server, then displayed a hand-picked selection of Portfolio posts as a 3-column Post List using the “selected IDs” source. I switched the Grid Layout to one that shows post titles under each card, so items without an image still read clearly instead of looking broken.

No results found.

09. Here I built a Post List querying a different post type — the blog Posts — newest first, as a 3-column grid with a Load-More button, to show that the same element drives any content type.

10. Here I added a Post Carousel of Portfolio posts — the same query power as a Post List but rendered as a horizontal, swipeable slider instead of a static grid.

11. Here I added three team-member cards in a row — built from an Image element (square 1:1 ratio + circle style for true round photos) plus name and role text, with dark readable color on the light background.

Jane Doe

Lead Designer

Mark Yu

Front-end Engineer

Elena Rossi

Project Manager

12. Here I added three more team-member cards built from the dedicated Person element — each combines a portrait, name and role in a single element. The first two use the 300×300 cropped size (woocommerce_thumbnail); the last one’s source image is too small for 300×300, so I dropped it to 150×150 cropped (thumbnail) to keep the circle crop perfectly round.

Sara Lin

Brand Strategist

Tom Becker

Backend Engineer

Priya Nair

QA Lead

13. Here I added two Flip Boxes side by side — each shows an icon and title on the front and flips on hover to reveal extra detail on the back, one with a button CTA — both given the same Aspect ratio (1:1) so the cards match in height, with explicit front (Primary) and back (Secondary) colors so the text stays readable.

speed

Performance

Hover to see details

lock

Security

Hover to see details

14. Here I added three Interactive Banners in a row — clickable image tiles with a title and description revealed by a hover animation, all using one consistent 4:3 ratio, each given a semi-transparent dark background color so the overlay text reads clearly.

Web Design

Custom, responsive interfaces

Development

Clean, maintainable code

Support

Ongoing care and updates

15. Here I added an Interactive Text headline — a single line where the last phrase cycles through several alternatives with a typing animation, the changing word shown in the Primary color and bold — to show animated headlines.

We build websitesweb appsbrands