The Blockquote widget allows you to highlight quotes or excerpts on your webpage, making them stand out.
Adding Blockquote widget
- Find the Blockquote widget under the Elementos section of your 10Web Builder page.
- Drop the widget onto your preferred location on the canvas.
Content tab
- Skin: Select a design for the blockquote. Options include Border, Quotation, Boxed, or Clean.
- Alignment: You can align the quote left, center, or right.
- Content: Enter the text for your blockquote.
- Author: Input the name of the author of the quote.
- Tweet Button: Toggle this button to enable or disable. It is enabled by default, allowing users to share the quote on Twitter.
- View: Choose how the Tweet button should appear: Icon & Text, Icon, or Text only.
- Skin for Tweet Button: Select a style for the Tweet button from Classic, Bubble, or Link options.
- Label: Enter text that will appear on the Tweet button.
- Username: Input your Twitter account username to be mentioned when the quote is shared.
- Target URL: Set the URL that will be included in the Tweet. Options are the Current Page, None, or a Custom Link.
Style tab
Content
- Text Color: Select the color for the quotation text from a color picker to ensure it stands out or aligns with your site's design.
- Typography: Configure typography settings for the quotation text, such as font family, size, weight, style, line height, and letter spacing.
- Gap: Adjust the gap between the quotation text and the author’s name.
-
Author:
Text Color: Choose a color for the author's name to differentiate it from the quotation text.
Typography: Set the typography for the author's name, including font family, size, and weight.
Button
- Size: Adjust the size of the Tweet button using a slider to make it larger or smaller.
- Border Radius: Use a slider to set the border radius, which controls the roundness of the button corners.
- Color: Choose from the official Twitter colors or select a custom color.
- Typography: Configure the typography options for the button text, including font family, size, weight, style, transform, line height, and letter spacing.
Box (for boxed skin)
- Padding: Modify the padding around the quote text to control the space between the text and the edges of the block.
- Background color: Choose a background color for the blockquote box for both the normal and hover states
- Border type: Select a border type for both the normal and hover states of the blockquote.
- Border radius: Determine how rounded the corners of the border should be for both normal and hover states.
- Box shadow: Click the pen icon to add a shadow to the box for both normal and hover states.
Border (for border skin type)
- Color: Select the border color for both normal and hover states.
- Width: Adjust the border width for both normal and hover states.
- Gap: Define the spacing between the left border and the quote text for both normal and hover states.
- Transition Duration: Specify the duration of the transition for the hover state, determining how long it takes for the border to change appearance.
- Vertical Padding: Set the top and bottom padding around the content.
Quote (for quotation skin type)
- Color: Choose the color for the quotation mark.
- Size: Customize the size of the quotation mark.
- Gap: Define the spacing between the quotation mark and the quote text.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.