help center

Search
Close this search box.
On this page

Blockquote widget

Last Update: March 20, 2024

Add the widget

Blockquote widget
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Blockquote widget?

The Blockquote widget lets you add quotes or text excerpts within your webpage. It helps to visually separate the quoted text from the rest of your content, making it stand out to your readers.

You can customize these quotes to look just the way you want. Additionally, you can make them Click To Tweet quotes, which means users can easily share them on Twitter by clicking on them.

Common use case

Mark is building a website for a personal blog. They want to include inspirational quotes from famous authors and thinkers throughout the posts. With the Blockquote widget, Mark inserted these quotes in a visually appealing way. 

By customizing the style of the quotes, they make them fit seamlessly with the website’s design. Additionally, Mark decides to enable the Click To Tweet feature for some of the quotes, allowing readers to share the wisdom with their Twitter followers with just a click.

Blockquote widget 18 Blockquote widget 2

Additional use cases

  • Display customer reviews or testimonials in a visually appealing manner.
  • Feature memorable quotes or phrases to inspire and engage website visitors.
  • Showcase excerpts from articles or blog posts to entice readers to explore more content.
  • Present important information or instructions in a visually distinct way on landing pages or sales pages.

Add a Blockquote widget: Step-by-step

  1. Add the Blockquote widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, under the Blockquote section, from the Skin field, choose the blockquote skin – options include Border, Quotation, Boxed, and Clean.
    Blockquote widget 7
    1. If you select Quotation, Boxed, or Clean skins, the Alignment field appears. You can align the quote to the left, center, or right. 
      Blockquote widget 17
  3. In the Content field, type or paste the blockquote content. You can also use Dynamic Tags to pull data automatically from WordPress or plugins like Advanced Custom Fields or WooCommerce.
    Blockquote widget 3
  4. In the Author field, input the name of the author.
    Blockquote widget 2
  5. Toggle On/Off the Tweet Button. The button is enabled by default and displays a Twitter button underneath the quote.
    Blockquote widget 8
  6. In the View field, choose between Icon & Text, Icon, or Text only.
    Blockquote widget 1
  7. In the Skin field, select between Classic, Bubble, and Link for the Tweet button.
    Blockquote widget 15
  8. In the Label field, type a label for the Tweet button. It’s the text users will see on the button.
    Blockquote widget 14
  9. In the Username field, add your Twitter account username (e.g., @your_account). This adds a via @your_account mention to the tweet when users share the quote.
    Blockquote widget 4
  10. In the Target URL field, choose between the Current Page, None, or add a Custom Link.
    Blockquote widget 11
    1. Current Page: The URL of the current webpage will be included in the quote shared on Twitter
    2. None: No URL will be mentioned in the shared quote on Twitter
    3. Custom Link: Add a specific URL of your choice. When users click on the shared quote on Twitter, they’ll be directed to this custom URL

Settings for the Blockquote widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Blockquote widget 16

Choose the Blockquote skin, selecting either Border, Quotation, Boxed, or Clean.

If you select Quotation, Boxed, or Clean skins, this field appears. You can align the quote to the left, center, or right.

Type or paste your Blockquote content. You can also use Dynamic Tags to pull data automatically from WordPress or plugins like Advanced Custom Fields or WooCommerce.

Enter the Author’s name.

Toggle the Tweet Button On or Off. This button is enabled by default.

Choose between Icon & Text, Icon, or Text only.

Choose between Classic, Bubble, and Link.

Type your Label.

Type your Twitter Account username.

Choose between the Current Page, None, or a Custom Link.

Style tab

Blockquote widget 10

Choose the color of the quotation text.

Set the typography options for the quotation text For more details, see Typography.

Set the amount of spacing between the quotation text and the author.

  • Text Color: Choose the color of the author’s name.
  • Typography: Set the font style for the author’s name. For more details, see Typography.
Blockquote widget 12 Blockquote widget 16

Use a slider to adjust the button size.

Use a slider to set the border radius to control corner roundness. For more details, see Border radius tools.

Select the Official Twitter colors or set your own Custom color.

Note: Custom color will also let you choose a Hover mode for the button. Hover lets you set a transition duration. This is the length of time it takes for the button to change its appearance.

Determine how the button appears by default.

  • Text Color: Set the color of the button’s text.
  • Background Color: Add a background color to the button. For more details, see Create a Background.

Determine how the button appears when moused over.

  • Text Color: Set the color of the button’s text.
  • Background Color: Add a background color to the button. For more details, see Create a Background.
  • Transition Duration: Determine the duration of the hover animation.

Set the typography options for the button text. For more details, see Typography.

Blockquote widget 5

Choose the color of the border for normal and hover states.

Set the border’s width for normal and hover states.

Set the space between the left border and the quote text for normal and hover states.

Set a transition duration for the hover state. This is the length of time it takes for the border to change its appearance.

Set the top and bottom padding around the content.

Blockquote widget 9 Blockquote widget 19

Select the color of the quotation mark.

Adjust the size of the quotation mark.

Set the spacing between the quotation mark and the quote text.

Blockquote widget 13 Blockquote widget 21

Adjust the padding around the quote text.

Choose colors for the box for its normal and hover states.

Select border type for its normal and hover states. For more details, see Border type.

If border type is selected, adjust the thickness of the border around the box for its normal and hover states.

Set how round the corners of the border should be for normal and hover states. For more details, see Border radius tools.

Click the 🖋️ icon to add a shadow to the box for its normal and hover states. Learn more about shadows.

Determine the duration of the hover animation.

Advanced tab

The Advanced tab provides options to control widget position, adjust spacing, add custom code, and more.

Blockquote widget 6 Blockquote widget 23

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article