Design Guidelines and Values

As a seller in the Elegant Themes Marketplace, we hold you to the same design standards as we do ourselves. Divi users expect high-polished experiences, so the quality of your products directly impacts your users retention, ratings, and reviews. The criteria below ensure that your extensions, child-themes, and layout packs function and integrate seamlessly alongside Divi.

Beautiful

Visual elegance is a core value here at Elegant Themes. When creating custom interfaces within your products, everything should have a purpose. Divi alone is a complex tool— when introducing additional functionality, use a minimalistic approach when designing custom elements to reduce added complexity.

• The product does not use extraneous elements or styling that may change the visual brand of Divi, such as patterns, textures, borders, shadows, animations, etc.
• Interface elements and typography have appropriate breathing room so that when users are interacting with or reading your elements, they are not distracted by surrounding noise.
• Graphics, text, images, and other interface elements are pixel perfect and non-distorted.
• All text is live text and not image-based
• All UI elements are created with CSS or scalable vector graphics
• Text sizes, letters spacings, fonts, font-weights, and line spacings are consistent with existing text styles in Divi.
• The color of elements, actions, and messaging are consistent with those within Divi

Seamless

• The interface adds to or enhances Divi, but does not take away or distract from it.
• User interface and interaction is consistent with that of Divi
• Repeated interface items from native Divi perform their native task. For example, don’t use an existing interface icon from within Divi to perform or represent a different function in your product.
• Use dropdown menus to allow users to select a single item from a list
• Use a multi-select checkbox list to allow users to select multiple items from a single list
• Use on/off and yes/no toggles to allow users to choose between two options.
• Use a range slider when allowing users to select a single value from a range of suggested minimum and maximum values.
• The product doesn’t introduce new components to replace existing Divi components unless dramatically extending its functionality or needing it to interact in a custom way with other parts of your product. Extended components look and feel as close to the native component as possible.
• Divi UI is not modified or replaced unless your product’s core functionality is directly related to disabling or changing native functionality— Changing, disabling, or replacing native functionality should not be unexpected based on the user’s understanding of what your product does.

Non-Intrusive

• In “Insert Module” app modal, custom modules are represented by the same visual style as other Divi modules.
• The product doesn’t include advertisements or up-sells of any kind
• The product doesn’t push its brand from within the builder interface. Your product is an extension of the Divi brand.
• The product doesn’t lead users away from the Divi Builder. When directing people to external pages from within a Divi or Elegant Themes interface, the links open in a new tab.

Intuitive

• The product is fully responsive on all screen sizes, devices, and device resolutions
• Products that introduce new interface elements are elegantly displayed no matter how wide or narrow the user makes their browser or Divi settings modals.
• Custom modules are tested and compatible in a variety of column widths within different browser window widths on a variety of desktop and mobile devices.
• Even when the product is well designed and documented, every single settings option is accompanied by clear help text.
• The product is wholistic; it does not leave the user longing for more. For example, a Divi Child Theme that defines custom styling for modules should defines styles for every single module.

Branding And Marketing

Your company and product images are the first thing that people see when experiencing your product. This image should represent your product in the best way possible, but should not be so complex and cluttered that images and text are not readable.

Product Featured Image

Your featured image will be displayed as small as 260px wide and as large as 713px wide— you will want to ensure that text is legible at the smallest size. For the highest chances of legibility and visual consistency within the marketplace, you can use the templates below to get started. Any text content in your featured image should not have a visual footprint of greater than 50%. This image must be exported as a 1426x796px JPEG to ensure that it is high res in all instances across the marketplace. White or transparent backgrounds are not allowed. A colored background should be used so that it stands out against the marketplace’s white background.

• Featured Image Template – Photoshop
• Featured Image Template – Illustrator
• Featured Image Template – Sketch
• Featured Image Template – PNG

Product Square Image

Your square product image should focus on your product’s brand rather than it’s functionality. This image must be exported as a 500x500px JPEG to ensure that it is high res in all instances across the marketplace. White or transparent backgrounds are not allowed. A colored background should be used so that it stands out against the marketplace’s white background. We suggest including a logo or image that visually represents your product along with a small title. The content needs to perform well at small sizes.

• Product Logo Image Template – Photoshop
• Product Logo Image Template – Illustrator
• Product Logo Image Template – Sketch
• Product Logo Image Template – PNG

Product Screenshots

In addition to your Product Featured Image, it is important that you also provide sufficient screenshots of your product’s interface(s), what you can create with your product, and/or any other images that will help a potential buyer understand what your product provides and how it functions within Divi.

• Whenever possible, screenshots should be actual size (not scaled up or down) so the contents of the image appear exactly as they would on the user’s screen. This may not be possible for screenshots of page layouts.
• Screenshots are not to be bigger than 2560px in either dimension
• Screenshots are not to be used for documentation purposes

Company Logo Image

Your Company Logo represents the umbrella brand that your products exist under. In the case that you offer more than one product as a seller, this logo should be different than your product logo(s). This image must be exported as a 500x500px JPEG to ensure that it is high res in all instances across the marketplace. White or transparent backgrounds are not allowed. A colored background should be used so that it stands out against the marketplace’s white background.

• Company Logo Image Template – Photoshop
• Company Logo Image Template – Illustrator
• Company Logo Image Template – Sketch
• Company Logo Image Template – PNG

Product Module SVG Icon

If your extension is a Module or Module Collection, it will appear amongst the default Divi modules in the “Add Module” modal if your product matches a user’s module search query. For consistency, this icon must be exported as a 16x16px SVG with no bitmap image data to ensure it appears at high resolution and without distortion. Divi module icons are line-style icons with 2px stroke-weights and a color of #2b87da. Your Icon can be either line-style, solid, or a combination, but it must be made up of only a single color #2b87da

• Product Module Icon Template – Illustrator
• Product Module Icon Template – Sketch
• Product Module Icon Template – Figma