How to add a quote module


The Quote module is a quote box that you can drag and drop onto your web page, and fill with a quote that inspires you.

Before we begin: Have you checked out the Focus feature? Focus provides you with a set of 20 beautiful and functional web page sections that you can add with a single click, including a Quote focus!

The Quote Focus attractively showcases your inspirational quote by adding a background photo in the style of your template. It’s customizable, so you can replace it with any photo of your own, and adjust the position of the quote on the image.

To check out Focus, click the Focus tab in the left sidebar, and then click Add Focus and scroll through the options.

If you just want to add a simple Quote module, without the added features of the Quote Focus, follow these steps:


Step 1: Open the target page

In the website builder, open the page of your site that you want to add the quote to.


Step 2: Open the Modules tab

In the left sidebar menu, click on Modules:


Step 3: Locate the quote module icon

In the Modules sidebar, you will see the Quote module icon.


Step 4: Click and drag the quote module icon onto your page

Point your mouse at the quote module, click and drag it onto your page to where you want the quote to be located. Then drop it.

As you drag it around the page, you will see black lines appear, indicating the edges of the existing elements on the page. Use these lines as guides help you drop your quote module in the right place. You can add spacers or other elements later to adjust its position if desired.

For this example, we will add a quote to the Bio page in the Nathan Clark template, between the paragraphs of the template’s sample content.

Below you can see the quote module before it was dropped, hovering over the page. The black line indicates the top edge of the title module and bottom edge of the breaker module that separates text box from the title box. When the quote module is dropped now, it will insert below the spacer and above the title.



Step 5: Write your quote

Your new quote module is added to your page. Click inside the box to start typing, or paste text from another source from your clipboard.


Tip: To move the quote box, including removing it to the trash can, click the thick black grab bar in the center-top and drag it.



For this example, we typed in a new quote, “A simple hello could lead to a million things”



Step 6: Quote formatting options

Once you’ve typed or pasted your quote, you might want to add formatting to it. Click inside the Quote text box to open the format options bar:


Here’s a closer look at the format options bar.


Here’s a brief description of each of these options:


Align left - aligns the quote text to the left of the block


Align center - aligns the quote text to the center of the block


Align right - aligns the quote text to the right of the block


Quotation marks

Choose single or double quotation marks, in small, medium or large sizes.



Padding is the amount of white space around your module. Your padding options are: None, Small, Medium or Large.



Choose border size (None, Small, Medium, Large) and  style (None, Solid, Dashed, Dotted)


Step 7: Saving the changes

Once you have finished with your quote, remember to click the Save button at the bottom center of the modules sidebar to save and protect your changes.

This concludes our guide How to add a quote module.





Other guides you might be interested in:

How do I undo a change I’ve made to a module on my page?

What’s the difference between Modules and Focus?


Bookmark Supports your Success

Have questions or comments about this guide?  Check out our Expert Community.

↵   Back To Topics