header-logo
Getting started with WixBuild your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.
Creating a websiteRead how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.
Account & billingReview your account settings, manage your subscriptions and plans and understand your invoices.
Using the Wix mobile appsUse our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch.
Connecting a domainFollow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.
Managing your businessGet tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.
Promoting your siteLearn to make your site more visible promoting it on search engines, sending emails and running paid ads. Improve your online presence with practical tips.
Studio, Partners & EnterpriseGet the most out of your Studio or Enterprise account with advanced features that'll help you work more efficiently.
Need more help?Find solutions for site performance and technical issues, learn about issues we’re working to fix or contact us for help.
placeholder-preview-image
Wix LearnImprove your skills with our courses and tutorials.
Wix BlogGet tips for web design, marketing and more.
SEO Learning HubLearn to increase organic site traffic from search engines.
Website developmentBuild a custom site using our full-stack platform.
Hire a ProfessionalGet matched with a specialist to help you reach your goals.
placeholder-preview-image
In this article
  • Adding an element
  • Selecting colors
  • Customizing text
  • Customizing vector art

Wixel: Adding and Customizing Elements

In this article
  • Adding an element
  • Selecting colors
  • Customizing text
  • Customizing vector art
Elements help enhance your project and add personality. You can add elements to highlight information, showcase visuals, or guide your audience through your design.

Add elements from the side panel on the left of your project, and customize them using the action bar. You can insert images, text, graphics, shapes, and more, giving you the creative freedom to shape each design exactly how you want.

A screenshot highlighting the elements options in the side panel in Wixel.

Adding an element

Add new content to your project from the side panel. Each icon opens its own panel — text, media, shapes, and graphics — and every panel has its own search field and category tabs so you can find exactly what you need.

Note:

Some design types offer unique elements. You may not be able to add decorative elements to every type of design, so the options you see can vary depending on what you’re working on.

To add an element:

  1. Go to your project in Wixel.

  2. Click the relevant design.

  3. On the side panel, click the type of element you want to add:

    • Add text : Add a text box directly to your design. Select preset styles to save time or customize your own.

    • Draw : Draw freehand on your design with a pen or highlighter. Pick a color, then adjust the Weight and Transparency of your strokes. To remove something you've drawn, switch to the eraser.

    • Media : Add photos, videos, illustrations, patterns, and cutouts.

    • Shapes : Use geometric shapes, arrows, and frames for a creative touch.

    • Graphics : Add vector art and stickers.
      Tip: Customize the vector art colors to match your design's look.

    • Elements : Add additional elements such as preset text, page numbers and charts.

  4. Click an element to add it to the design.

  5. (Optional) Use the resizing handles and customization tools on the action bar to adjust the element’s size, color, position, and more.

A secreenshot of the Add elements panel in Wixel.
Tip:

Upload your own media by clicking the Upload icon on the side panel. You'll find the uploaded images in your Project Files.


Selecting colors

Whenever you click or tap a color circle on the action bar, you get to the Color Picker. This is where you can see your project's theme colors, in addition to any custom color you're using. 

To select a color:

  1. Go to your project in Wixel.

  2. Click the Fill Color icon on the action bar.

  3. Move the dot on the color scheme or enter the color's hex code (e.g. #000000 for black).

  4. (Optional) Drag the slider to adjust the color's opacity.

A screenshot of the color picker in Wixel.

Customizing text

Customize your text elements by adjusting fonts, colors, formatting, and effects like shadows and highlights. Fine-tune your text's look and position so it works cohesively with your design.

To customize text:

  1. Go to your project in Wixel.

  2. Select the text element in your design.

  3. Use the available options on the action bar to customize your text:

    • Font: Choose the font style.

    • Font size: Choose the font size.

    • Bold, Italic, Underline: Make your text stand out with formatting options. Click the Bold icon , Italics icon , and/or Underline icon .

    • Uppercase: Convert your text to all capital letters.

    • More settings: Choose a list style (e.g. Numbered list, Bulleted list) and increase or decrease the indent.

    • Alignment: Choose how your text lines up.

    • Line spacing: Adjust the spacing between lines and letters to make your text easier to read and give it a more open, spacious feel.

    • Fill color: Pick any color for your text using the color picker or select a theme color.

    • Highlight Color: Make your text pop by highlighting it with a background color.

    • Border: Add a border to make it stand out.

    • Shadow: Add a subtle or dramatic shadow effect to give your text depth.

A screenshot of editing text in Wixel.

Customizing vector art

Add a personal touch to your vector art by customizing the colors and details to match your design. Vector art is a digital illustration (SVG file) that stays sharp at any size.
Tip:

You can find vector art options under the Graphics tab on the side panel.

To customize vector art:

  1. Go to your project in Wixel.

  2. Click the relevant vector art in your design.

  3. Choose how to customize the vector art:

A screenshot of the vector art fill colors.

Helpmate

Hello

Need a bit more guidance?
Unlock personalized helpLog in to get the most out of Helpmate.