You can design your Clerk elements without code by using our Design Editor. If you prefer to watch instruction videos rather than reading, here you are:

To get to the Design Editor, go to my.clerk.io and click on either Search or Recommendations and then Designs

Next choose one of the top Template options that do not include "html":

Click Create Design in the top right corner.

You have now entered the Design Editor:

On the right hand side, you find three menus: Components, Overview and Edit

Components

From this menu you can drag in elements to available slots in your design. 

Overview

The overview menu provides a full list of all elements and containers in your design. To edit an element, click on one of the elements of the list.

Edit

Clicking on an element in the Component menu or in the design itself sends you to the edit menu where you have full control of the elements size, colors, wrapping behavior and much more. 

In the bottom of the Edit menu of an element you'll find a field that says CSS Attributes where you can insert your own CSS styling (e.g. width: 20%; ):

So make your changes take effect, press save in top right corner:


If you're not happy with your design you can always gain full control of them by going to Edit Code and customizing the HTML and CSS code that defines the Clerk content. 

NOTE: If you enter the Design Editor and press "Edit code" and then press "Update design" you will not be able to get back to the Design Editor for that design. 


Did this answer your question?