Blog Highlights

Blog Highlights displays multiple blog posts. Different levels of blog recommendations allow featured blog posts to be displayed in an enlarged manner, meeting the needs of different levels of display, enhancing content visibility, and increasing engagement.

(I) Blog Highlights

  • Blog: Select the blog series to display, which can be deleted and modified.

  • Color scheme: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.

(II) Padding

  • Top: Manually drag the slider to adjust the top margin, with a minimum of 0px and a maximum of 100px.

  • Bottom: Manually drag the slider to adjust the bottom margin, with a minimum of 0px and a maximum of 100px.

(III) View More Button

  • Button text: Enter the content of the button.

  • Style: You can choose the corresponding button style. There are four styles available: Primary Button, Secondary Button, Arrow Button, and Link. For Primary Button, Secondary Button, and Arrow Button, there are three button sizes: Large, Medium, and Small. You can adjust the display style and size of the button according to different scenarios.

  • Link: Select the link address to jump to when the button is clicked.

  • Open in new tab: Enable this option, and clicking the button will open a new page.

(IV) Title

  • Text content: Enter the section title.

  • Title size: Set the size of the title (Small, Medium, Large, Extra Large, Maximum).

  • Color: Can be set to any of the body text, title, or block title colors. Flexible color settings to present diverse display effects.

  • Whether to use artistic fonts: When enabled, the title will use artistic fonts.

  • Alignment: Select the text alignment: Left-aligned, Center-aligned, Right-aligned.

  • Padding: Manually drag the slider to adjust the margins of the top, bottom, left, and right, with a minimum of 0px and a maximum of 100px.

1. Image

(1) Size

  • Image ratio: Customize the display ratio of the image, with 4 display ratios available: Automatic, Portrait, Square, and Landscape. Choose the corresponding display ratio according to different visual effects.

  • Desktop width: There are three options: Adapt, Fill, and Custom. When Custom is selected, the custom height content will appear below.

  • Custom height: Manually drag the slider to adjust the display height of the image, with a display ratio of 0%-100%.

  • Mobile width: There are three options: Adapt, Fill, and Custom. When Custom is selected, the custom height content will appear below.

  • Custom height: Manually drag the slider to adjust the display height of the image, with a display ratio of 0%-100%.

  • Height: There are two options: Adapt and Fill.

  • Border radius: Drag the slider to select the size of the border radius, with a border radius ranging from 0px to 100px.

(2) Padding

  • Padding: Manually drag the slider to adjust the margins of the top, bottom, left, and right, with a minimum of 0px and a maximum of 100px.

2. Text

  • Text content: Displayed by default. No need to change.

  • Size: Adjust the display size of the text, with a size ranging from 0.8 to 3.

  • Color: Can be set to any of the body text, title, or block title colors. Flexible color settings to present diverse display effects.

  • Alignment: Select the text alignment: Left-aligned, Center-aligned, Right-aligned.

  • Padding: Manually drag the slider to adjust the margins of the top, bottom, left, and right, with a minimum of 0px and a maximum of 100px.

3. Title

  • Text content: Displayed by default. No need to change.

  • Title size: Set the size of the title (Small, Medium, Large, Extra Large, Maximum).

  • Color: Can be set to any of the body text, title, or block title colors. Flexible color settings to present diverse display effects.

  • Whether to use artistic fonts: When enabled, the title will use artistic fonts.

  • Alignment: Select the text alignment: Left-aligned, Center-aligned, Right-aligned.

  • Padding: Manually drag the slider to adjust the margins of the top, bottom, left, and right, with a minimum of 0px and a maximum of 100px.

4. Button

  • Button text: Enter the content of the button.

  • Link: Select the link address to jump to when the button is clicked.

  • Open in new tab: Enable this option, and clicking the button will open a new page.

  • Style: You can choose the corresponding button style. There are four styles available: Primary Button, Secondary Button, Arrow Button, and Link. For Primary Button, Secondary Button, and Arrow Button, there are three button sizes: Large, Medium, and Small. You can adjust the display style and size of the button according to different scenarios.

Last updated