{"id":1637,"date":"2026-07-28T22:33:58","date_gmt":"2026-07-28T22:33:58","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/dividers\/"},"modified":"2026-08-20T18:41:50","modified_gmt":"2026-08-20T18:41:50","slug":"dividers","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/dividers\/","title":{"rendered":"Dividers"},"content":{"rendered":"\n
\n\n
\n\n
\n

Standard<\/h3>\n\n\n

Dividers give your content room to breathe by separating long sections into clear, scannable blocks. Drop a centered icon between paragraphs to mark a topic shift, or use a subtle line to close out a section. Each style below is fully responsive and ready to match your brand color and spacing.<\/p>\n\n\n

<\/i><\/div>\n\n
Right Aligned<\/h5>\n\n\n

Right-aligned dividers push the icon and line toward the end of the column, creating an off-center accent that feels dynamic. They work well when your text already leans left and you want the break to echo that flow naturally and cleanly.<\/p>\n\n\n

<\/i><\/div>\n\n
Center Aligned<\/h5>\n\n\n

Center-aligned dividers place the icon squarely in the middle of the column for a balanced, symmetrical break. This classic treatment suits headings, quotes, and any section where you want the transition to feel calm, deliberate, and evenly weighted.<\/p>\n\n\n

<\/i><\/div>\n\n

Short Length<\/h4>\n\n\n

Short-length dividers keep the visual break tight and contained, sitting neatly under a heading without stretching the full column width. They are ideal for compact cards, sidebars, and tighter layouts where a full-width rule would feel heavy. Adjust the icon and alignment to suit each block you place them in.<\/p>\n\n\n

<\/i><\/div>\n\n
Right Aligned<\/h5>\n\n\n

This right-aligned short divider keeps the rule compact while anchoring it to the end of the column. The result is a light, understated accent that quietly signals a new section without pulling focus away from the surrounding copy or nearby headings.<\/p>\n\n\n

<\/i><\/div>\n\n
Center Aligned<\/h5>\n\n\n

This center-aligned short divider sits neatly in the middle of a narrow block, marking a gentle pause between grouped items. Its tidy footprint makes it a natural fit for cards, list intros, and any place where a full-width line would feel too bold.<\/p>\n\n\n

<\/i><\/div>\n\n

Rounded<\/h3>\n\n\n

Rounded dividers soften the transition between sections with gently curved end caps on either side of the centered icon. The look pairs well with friendly, approachable brands and modern landing pages. Swap the icon for anything in the library and recolor the line to sit comfortably within your own palette and spacing.<\/p>\n\n\n

<\/i><\/div>\n\n
Right Aligned<\/h5>\n\n\n

A right-aligned rounded divider tucks its softly curved line toward the column edge for a relaxed, modern accent. The smooth end caps keep the break feeling friendly, making it a great match for lifestyle, wellness, and creative brand pages alike.<\/p>\n\n\n

<\/i><\/div>\n\n
Center Aligned<\/h5>\n\n\n

A center-aligned rounded divider balances those gentle curves in the middle of the column for a polished, welcoming pause. It pairs nicely with rounded buttons and cards, tying your section breaks into a consistent, soft-edged visual language throughout.<\/p>\n\n\n

<\/i><\/div>\n\n

Short Length<\/h4>\n\n\n

A short rounded divider blends the compact width with smooth, curved edges for a refined accent between tightly grouped elements. Use it inside feature cards, pricing tables, or testimonials where a delicate touch works best. The icon, color, and alignment stay fully adjustable on every break.<\/p>\n\n\n

<\/i><\/div>\n\n
Right Aligned<\/h5>\n\n\n

This right-aligned short rounded divider combines a compact width with smooth curved edges, nudged toward the column end. It adds a subtle, contemporary touch to tight layouts where you want refinement without taking up much vertical or horizontal room.<\/p>\n\n\n

<\/i><\/div>\n\n
Center Aligned<\/h5>\n\n\n

This center-aligned short rounded divider keeps its curved accent neatly centered within a narrow block. The delicate shape suits compact cards and grouped content, offering a tidy, modern break that feels intentional yet never heavy on the eye.<\/p>\n\n\n

<\/i><\/div>\n\n

Bordered<\/h3>\n\n\n

Bordered dividers frame the centered icon within a thin outlined shape, drawing a little more attention to the break between sections. They suit editorial layouts and content-heavy pages that benefit from clearer structure. Set your own border color, icon, and alignment to keep them consistent.<\/p>\n\n\n

<\/i><\/div>\n\n
Right Aligned<\/h5>\n\n\n

A right-aligned bordered divider sets its outlined icon toward the column edge, adding clear structure with a touch of asymmetry. The framed shape draws a little extra attention to the break, helping readers track where one section ends and the next begins.<\/p>\n\n\n

<\/i><\/div>\n\n
Center Aligned<\/h5>\n\n\n

A center-aligned bordered divider centers that framed icon for a balanced, structured pause between sections. The outlined treatment lends an editorial feel, making it a strong choice for long-form articles, guides, and documentation that benefit from clear cues.<\/p>\n\n\n

<\/i><\/div>\n\n

Short Length<\/h4>\n\n\n

A short bordered divider keeps that outlined icon treatment in a narrower footprint, perfect for compact columns and smaller cards. It marks a deliberate pause without dominating the space around it. The icon, border color, and alignment all remain fully customizable to match your layout.<\/p>\n\n\n

<\/i><\/div>\n\n
Right Aligned<\/h5>\n\n\n

This right-aligned short bordered divider keeps the outlined icon compact and shifted toward the column end. It marks a deliberate break in tight spaces without overwhelming them, staying fully adjustable in color and alignment to match your design.<\/p>\n\n\n

<\/i><\/div>\n\n
Center Aligned<\/h5>\n\n\n

This center-aligned short bordered divider centers its framed icon within a narrow block for a neat, structured accent. It suits compact cards and grouped sections, giving each pause a clear, considered look while keeping the overall layout light and clean.<\/p>\n\n\n

<\/i><\/div>\n\n

Linked – Go to Top<\/h3>\n\n\n

Linked dividers turn the centered icon into a handy shortcut, smoothly scrolling readers back to the top of the page with a single click. They work beautifully at the end of long articles and documentation. Choose any icon, set the scroll target, and align it left, right, or center to fit the flow of your content.<\/p>\n\n\n

<\/i><\/a><\/div>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n
\n
\n

Explore more Elements<\/h4>\n<\/div>\n\n
<\/i>
Shop<\/h5><\/a><\/div>
<\/i>
Blog<\/h5><\/a><\/div>
<\/i>
Events<\/h5><\/a><\/div>
<\/i>
Contact Forms<\/h5><\/a><\/div>
<\/i>
Modal onLoad<\/h5><\/a><\/div>
<\/i>
Side Panel<\/h5><\/a><\/div>
<\/i>
Animations<\/h5><\/a><\/div>
<\/i>
Buttons<\/h5><\/a><\/div>
<\/i>
Carousel<\/h5><\/a><\/div>
<\/i>
Clients<\/h5><\/a><\/div>
<\/i>
Columns<\/h5><\/a><\/div>
<\/i>
Counters<\/h5><\/a><\/div>
<\/i>
Read MoreElement<\/span><\/h5><\/a><\/div>
<\/i>
Dividers<\/h5><\/a><\/div>
<\/i>
Icon Boxes<\/h5><\/a><\/div>
<\/i>
Gallery<\/h5><\/a><\/div>
<\/i>
Headings<\/h5><\/a><\/div>
<\/i>
Icon Lists<\/h5><\/a><\/div>
<\/i>
Gradients<\/h5><\/a><\/div>
<\/i>
Lightbox<\/h5><\/a><\/div>
<\/i>
Overlays<\/h5><\/a><\/div>
<\/i>
File Uploads<\/h5><\/a><\/div>
<\/i>
Lists & Cards<\/h5><\/a><\/div>
<\/i>
Maps<\/h5><\/a><\/div>
<\/i>
Media Embeds<\/h5><\/a><\/div>
<\/i>
Modal Boxes<\/h5><\/a><\/div>
<\/i>
Notifications<\/h5><\/a><\/div>
<\/i>
Navigations<\/h5><\/a><\/div>
<\/i>
Pagination<\/h5><\/a><\/div>
<\/i>
Progress Bars<\/h5><\/a><\/div>
<\/i>
Shape Dividers<\/h5><\/a><\/div>
<\/i>
Pricing<\/h5><\/a><\/div>
<\/i>
Process Steps<\/h5><\/a><\/div>
<\/i>
Promo Boxes<\/h5><\/a><\/div>
<\/i>
Blockquotes<\/h5><\/a><\/div>
<\/i>
Responsive<\/h5><\/a><\/div>
<\/i>
Sections<\/h5><\/a><\/div>
<\/i>
Social Icons<\/h5><\/a><\/div>
<\/i>
Hover Animations<\/h5><\/a><\/div>
<\/i>
Alerts<\/h5><\/a><\/div>
<\/i>
Styled Icons<\/h5><\/a><\/div>
<\/i>
Tables<\/h5><\/a><\/div>
<\/i>
Tabs<\/h5><\/a><\/div>
<\/i>
Testimonials<\/h5><\/a><\/div>
<\/i>
Thumbnails<\/h5><\/a><\/div>
<\/i>
Toggles<\/h5><\/a><\/div>
<\/i>
Lazy Loading<\/h5><\/a><\/div>
<\/i>
Flip Cards<\/h5><\/a><\/div>
<\/i>
Cascading Images<\/h5><\/a><\/div>
<\/i>
Before\/After<\/h5><\/a><\/div>
<\/i>
Video Facade<\/h5><\/a><\/div>
<\/i>
GDPR<\/h5><\/a><\/div>
<\/i>
Cart Quantity<\/h5><\/a><\/div>
<\/i>
Circle Stack<\/h5><\/a><\/div>
<\/i>
Image Sliders<\/h5><\/a><\/div>
<\/i>
Ticker<\/h5><\/a><\/div>
<\/i>
AJAX Button<\/h5><\/a><\/div>
<\/i>
Conditional<\/h5><\/a><\/div>
<\/i>
Code Highlighter<\/h5><\/a><\/div>
<\/i>
Custom Cursor<\/h5><\/a><\/div>
<\/i>
Hover Parallax<\/h5><\/a><\/div>
<\/i>
Mode Switcher<\/h5><\/a><\/div>
<\/i>
Image Hotspots<\/h5><\/a><\/div>
<\/i>
Filters<\/h5><\/a><\/div>