Articles Element is one of the most important parts of the blog page. Therefore, you need to make them eye-catching and careful. Let's continue to find out how Beae can help you.
The position of Articles: They are often located under Title, Tags, Categories.
From the left-side bar, you will see the Articles element in the list. Drag and drop it to any position in the selected structure.

Content



1. General



Layout: There are two choices here. The first one is grid. This layout allows you to arrange articles by blocks, all articles can be seen. The second one is slider, only a few articles can be seen, then you are able to drag them to find more.
Maximum articles to show You can drag horizontally a bar to choose how many Articles that you want to show.

* Select Attributes to show



Thumbnail:
Title: Your heading title will automatically be shown if you want. There are many heading tags for you, then you can change the size of heading title.
Post media: You can customize yourself about Author, Comments, Date, Layout.
Meta layout: There are four layouts for you to change the position of Author, Comments, Date.
Comment text count:
Many comments text count: Allows you to show the number of Article comments.
Date format: You can change various types of date here.
Post excerpt: You can choose whether to show apart of your blog content or not. You can also adjust the quantity of words here.
Maximum words to show:
Number items on row: Choose the quantity of articles shown on a row here.
Spacing: Adjust the gaps between Articles here.

2. Slider settings or Grid settings



When you change the slider layout to the grid layout then slider settings will switch to grid settings.
This section allows you to choose attributes for your Articles such as Navigation, Navigator, Pagination*.
Slide To Show: You can select the number of slides to show at one time, available for desktop, tablet, and mobile devices.
Slides to Scroll: Set how many slides are scrolled per time.
Spacing: Set the spacing between slide.
Infinite Loop: Allow to show slider in a continuous loop. It only works on the live page.
Autoplay: Allows rotate slides automatically.
Centered Slides: It helps that slide set as the centered slide in swiper carousel.

Navigation

Layout: Allow you can change layout of the navigation like Classic, Neo, Neo navigator, etc.

Navigator

Pre icon/ Next icon: Allows you can change icon of the Navigator.

Pagination

Style: You can set the style of the pagination like Classic, Image.
Direction: You can set the direction of the pagination like Vertical or Horizontal and customize it on many devices.
Transition effect: Allows you to change property values smoothly, over a given duration.
Transition Duration: Set the duration time in milliseconds for the slides to rotate.

Grid settings



Design



You can customize the alignment, background, box shadow, etc for the Articles

Image



Alignment: Align the image to the left, center, or right. Its allowed set different position for each device.

There are NORMAL and HOVER. NORMAL Image is the image that you see first when browsing the blog page. HOVER Image that you can see when you hover on. You can customize both with different designs.



Opacity: Lets you drag to change the opacity of the feature image.
CSS filters: This option allows you to change Blur, Brightness, Contrast, Saturation, Hue of the image.
Box Shadow: This option allows you to add a shadow to the image feature by changing the Blur, Horizontal, Vertical, etc.
Border: Allows you to select the style of the dot's border.
Border style: There are various styles for you, such as Solid, None, Dash, Doted, Default (Beae will automatically set the image border style for you), etc.
Border Radius: Set the border radius to control corner roundness, available for desktop, tablet, and mobile devices.
Spacing: Adjust the spacing by increasing the margin/padding between the above and below elements (available for desktop, tablet, and mobile devices).

Title



The Title component will help you to customize the style of the Title.
Alignment: Set the horizontal alignment of an button text. it can be left or right aligned or centered.
Typography : Change the style of the button text.
Text Shadow: Choose a color > Adjust the position of Shadow using Horizontal and Vertical attribute.
Box Shadow: Set the shadow for the button content.
Spacing: Set the spacing between the arrow and the slide, available for desktop, tablet, and mobile devices.

Description



The Description component will help you to customize the style of the Description. The functions here are similar to the Title component.

Date and time



The Date and time component will help you to customize the style of the date and time. The functions here are similar to the Description component.

Author



The Author component will help you to customize the style of the author. The functions here are similar to the Date and time component.

Comments Count



The Comments count component will help you to customize the style of the comment count, The functions here are similar to the Author component.

Pagination

General



Alignment:
Background:
Box shadow:
Border:
Border radius:
Spacing:

Item



Typography : Change the style of the button text.
Text shadow: Allow you add a shadow for the content by changing the Blur, Horizontal, Vertical, etc
Box shadow: Allow you add a shadow for the box by changing the Blur option, Horizontal/ Vertical options, etc... and position of the box shadow.

There are NORMAL, HOVER, and ACTIVE. NORMAL is the pagination that you see first when browsing the Slider element. HOVER is the tags you see when you hover on. ACTIVE is your current position of the Slider. You can customize both with different designs.

Color: Select the dots color.
Border: Allows you to select the style of the dot's border.
Border Radius: Set the border radius to control corner roundness, available for desktop, tablet, and mobile devices.
Padding: Set the spacing between the dot and the slide, available for desktop, tablet, and mobile devices

Icon

Size: Adjust the size of button.

Navigation
Was this article helpful?
Cancel
Thank you!