Color Swatches

Inserting a Color Swatch

Use color swatches to showcase colors used for a particular project. Color swatches can be display along with a title and hex values.

Step 1: Switch To Backend Editor

To insert a color swatch, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Feature Columns

Click "Color Swatch" in the Visual Composer Modal to insert a color swatch, for example:

Color Swatch
Step 3: Set Color Swatch Alignment

Once the color swatche element has been inserted click the Edit Link(pen icon) of the color swatch wrapper, for example:

Color Swatch Settings

Here is an overview of available color swatch options:

  • Swatch List Alignment

    Whether color swatches should be left, center or right aligned.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

Step 4: Add Content

Once you have edited the color swatch alignment settings, click the Edit Link(pen icon) of the first color swatch, for example:

Color Swatch Add Content

Here is an overview of individual color swatch options:

  • Show Title

    Whether color swatch title should be shown or not.

  • Title

    Color swatch title.

  • Show Hex

    Whether color swatch hex should be shown.

  • Hex Reference

    Color swatch hex value.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Swatch Style

    Whether the swatch should be boxed or circled.

  • Color Options

    Title Color
    Swatch Background Color
    Swatch Border Color
    Swatch Icon Color
    Swatch Style
    Hex Reference Color

Can't find what you're looking for? Submit a request in our forum.