To add a quote, click on Add Content at the top of the website editor and drag the Quote component onto a page of your site. Next, click on the component to open the options panel to the side of the editor.
Layout
We provide two different layout options for the component: simple, which displays only the quote itself, and detailed, which displays additional information. By default the component uses the simple layout; to use the detailed layout click on the icon for that layout option.
Quote
Enter the text of your quote into this field and the component will update to show the text.
Detailed Layout Options
If you select the detailed layout option, the following additional options will show:
- Show Author - Toggle this on or off to show or hide the author information.
- Author - Enter the quote author name in this field.
- Title - Enter a title for the author. You can optionally leave this blank to not include an author title.
- Show Avatar - Toggle this on or off to show or hide an avatar image.
- Avatar - Click on this field to upload an avatar image for the quote author.
Size & Position
This option group provides a couple options to control the overall sizing and positioning of the component:
- Width - By default the quote will use the full width of the component. Select a different proportion to use only part of the width of the component. Click on the desktop/mobile icon to set this separately for large and small screens.
- Align - With this option you can align the quote to the left, right, or center. Note that you will need to select a width option other than full in order for this option to have an effect.
Design
In this group are a few different styling options for the component. Note that the Author and Title color options only show if you’ve selected the detailed layout.
- Quote Color - With this option you can choose between the default or a custom color of your choosing for the quote text.
- Author Color - This option allows you to use the default or choose a custom color for the author name.
- Title Color - This option also allows you to use the default or set a custom color for the author title.
Spacing
Under this option group is a single option to update the margins, or space, around the component. To set this separately for large and small screens, click on the desktop/mobile icon.
Hover
Like many components, you can customize how certain aspects of the component look when you hover over it with a mouse.
- Quote Color
- Author Color
- Title Color