--- url: 'https://dxpr.com/markdownify/taxonomy/term/1013' title: 'Design guides | DXPR' author: name: Anonymous updated: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: website summary: "You style every element from its own settings: colours, backgrounds, motion and widths, without writing CSS. The pages in this section each cover one design goal. Find yours in the table, then follow that page. I want to ... Use Needs use my brand colours for text, borders and backgrounds Colour and branding The Style panel make the main call to action stand out Button styles A Button element group content in boxed cards Card styles A Card element fill a section with a photo, a gradient or a video Backgrounds A section; a photo in the media library fade or slide content in as visitors scroll Animation tab The Animation panel; Preview to check change an element while the pointer rests on it Hover effects The Hover style panel plan column widths that add up Bootstrap grid A row let a section run from edge to edge Full-width layouts A section show or hide content on phones, tablets or desktops Responsive design The HTML classes field Which should I use Style or Background effects: any element can get a colour or a photo in its Style panel. Gradients, parallax and video need a section. Only sections have the Background effects panel. Hover style or Animation: a hover style changes a colour or a shadow while the pointer rests on an element. It changes back when the pointer leaves. An animation plays a motion, such as a fade or a slide. It starts when the element comes into view or is clicked. Bootstrap grid or Full-width layouts: the grid decides how wide the columns in a row are. Full width decides whether the whole section's content stays in a centred box or spans the window. Where the design settings live Hover an element and open More > Settings. Its settings sit in panels: General: the element's own options, plus HTML ID and HTML classes. Style: spacing, colours, background image, borders, font size, opacity and drop shadow. Hover style: most of the same visual settings, applied while the pointer rests on the element. Animation: entrance and exit effects. Columns do not have this panel. Background effects: gradients, fixed and parallax photos and YouTube video. Sections only. What's next? Backgrounds: start with the biggest visual change, a section background. Element settings: every panel and field in the settings, one page each." tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' --- ## [Design guides ](/hc/documentation/learn-dxpr-builder/design/overview) You style every element from its own settings: colours, backgrounds, motion and widths, without writing CSS. The pages in this section each cover one design goal. Find yours in the table, then follow that page. | I want to ... | Use | Needs | |---|---|---| | use my brand colours for text, borders and backgrounds | [Colour and branding](/hc/documentation/learn-dxpr-builder/design/colour-and-branding) | The **Style** panel | | make the main call to action stand out | [Button styles](/hc/documentation/learn-dxpr-builder/design/button-styles) | A Button element | | group content in boxed cards | [Card styles](/hc/documentation/learn-dxpr-builder/design/card-styles) | A Card element | | fill a section with a photo, a gradient or a video | [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds) | A section; a photo in the media library | | fade or slide content in as visitors scroll | [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab) | The **Animation** panel; Preview to check | | change an element while the pointer rests on it | [Hover effects](/hc/documentation/learn-dxpr-builder/design/hover-effects) | The **Hover style** panel | | plan column widths that add up | [Bootstrap grid](/hc/documentation/learn-dxpr-builder/design/bootstrap-grid) | A row | | let a section run from edge to edge | [Full-width layouts](/hc/documentation/learn-dxpr-builder/design/full-width-layouts) | A section | | show or hide content on phones, tablets or desktops | [Responsive design](/hc/documentation/learn-dxpr-builder/design/responsive-design) | The **HTML classes** field | ## Which should I use **Style** or **Background effects**: any element can get a colour or a photo in its **Style** panel. Gradients, parallax and video need a section. Only sections have the **Background effects** panel. **Hover style** or **Animation**: a hover style changes a colour or a shadow while the pointer rests on an element. It changes back when the pointer leaves. An animation plays a motion, such as a fade or a slide. It starts when the element comes into view or is clicked. **Bootstrap grid** or **Full-width layouts**: the grid decides how wide the columns in a row are. **Full width** decides whether the whole section's content stays in a centred box or spans the window. ## Where the design settings live Hover an element and open **More > Settings**. Its settings sit in panels: - **General**: the element's own options, plus **HTML ID** and **HTML classes**. - **Style**: spacing, colours, background image, borders, font size, opacity and drop shadow. - **Hover style**: most of the same visual settings, applied while the pointer rests on the element. - **Animation**: entrance and exit effects. Columns do not have this panel. - **Background effects**: gradients, fixed and parallax photos and YouTube video. Sections only. ## What's next? - [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds): start with the biggest visual change, a section background. - [Element settings](/hc/documentation/learn-dxpr-builder/element-settings): every panel and field in the settings, one page each.