Quote WidgetLast updated 09.21.23
The Quote Widget is a plug and play component designed to add a styled quote to the page. This document goes over recommended images sizes and configuration settings.
- Built to include quote text & quote author text
- Certain transformations include an optional photo
- Certain transformations include elements that can be in brand or custom colors
- Certain transformations include background color that can be in brand or custom colors
- Has a variety of margin and padding settings
Add Quote Widget to the page
1. Select where on the page you would like the widget to appear.
2. Click on the blue plus add widget icon
3. Select the Quote widget from the widget pop up
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon.
Quote Widget Properties
5. In the Quote properties pop up, adjust various settings including text content, quote style transformations and margins and padding.
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.
How to reposition the Quote Widget
Hover over the Quote widget until it displays the grab icon on the left. Simply drag and drop in a new location.
Quote Widget Properties
|Visible||Checking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.|
|Quote Content||Text entry field with text editor allowing a maximum of 500 characters. This property allows they styling of the quote text to be of different sizes, colors and styles.|
|Quote Author||Optional text entry field for quote author's name allowing a maximum of 50 characters|
|Author Title||Optional text entry field for quote author's title allowing a maximum of 50 characters|
|Invert Text Color||Typically the widget can guess if the text should be dark or white depending on what color background is behind it. But if the visual can be improved by a change from one to the other, click the Invert Text Color checkbox.|
|Transformation||Select the layout transformation (visual presentation) for the quote:|
|Line & Icon Color||Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Line colors that can be selected:|
|Image||Optional photo or graphic image to display above quote. Recommended size is 250 pixels high with varied width depending on design choice. Recommended maximum image size is 100K.|
|Image Title||The title attribute on an image adds a tooltip with title text to the image. Hovering the mouse over the image will display the tooltip. Optional but recommended.|
|Image Alt Text||This attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error, or if the user uses a screen reader). Optional but recommended.|
|Margin||Use margin to increase spacing between the quote widget and other widgets on the page. This is helpful to provide visual room between elements and increase readability.|
User can select from 1-5 rems to increase spacing above the quote widget
User can select from 1-5 rems to increase spacing below the quote widget
User can select from 1-5 rems to increase to the right of the quote widget
User can select from 1-5 rems to increase spacing to the left of the quote widget
|Padding||Use padding to increase spacing outside of the quote widget|
User can select from 1-5 rems to increase room above the top of quote widget
User can select from 1-5 rems to increase room below the bottom of the quote widget
User can select from 1-5 rems to increase room outside to the right of the quote widget
User can select from 1-5 rems to increase room outside of the left of the quote widget
|Custom CSS||Code provided by the Atlas development team to achieve custom effects|
Every man is said to have his peculiar ambition. Whether it be true or not, I can say, for one, that I have no other so great as that of being truly esteemed of my fellow-men, by rendering myself worthy of their esteem. How far I shall succeed in gratifying this ambition is yet to be developed.
If you find it in your heart to care for somebody else, you will have succeeded.
We keep moving forward, opening new doors, and doing new things, because we're curious and curiosity keeps leading us down new paths.
Character is just another word for having a perfectly disciplined and educated will.
A person can make his own character by blending these elements with an intense desire to achieve excellence. Everyone is different in what I will call magnitude, but the capacity to achieve character is still the same.