With the News Control you can display a list of any types of contents, in various layouts and ways. This practical control can be used to display news from a particular category or recent updates, and more.
Add News to the page
Firstly, find the News control in the controls add panel,. Then, drag and drop it into a section or container on your page.
Select data source
Select the data list to choose the content that's included, and Decide which content to include or exclude based on filters conditions.
Open the Content > Data Source block, and in the Application section, select the application which is the current application by default.
Afterward, move on to the List section. Select the data list under the selected application.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Set the Primary Order and
Secondary Order to sort your data properly.
Set layout to Control Your News’s Displays
Columns: Set how many columns will be displayed, from 1 to 6. You can set different number of columns for devices (PC, tablet, mobile). For example set 3 columns for PC and 1 column for mobile:
Image Field: Choose which field to use as the image of this News control. Leave this option as empty if there are no image field in the selected content list, or if you do not want to include images in the News control.
For those records, which do not have images in the image field, there will no image display in these records' cell.
Position: Set the image position, relative to the content. Options include: Top / left / right. *See Note below for instructions to set image position on mobile.
Masonry: Slide on or off
Image Size: Set the size of the image, from thumbnail to full
Image Ratio: Set the exact ratio of the images
Image Width: Set the exact width of the images
Title Field: Choose to show or hide the title
Excerpt Field: Choose to show or hide the excerpt
Excerpt Length: Choose the length of the excerpt, setting the exact amount of words displayed
Additional Field: Select the other fields to be displayed in the News control. You can select multiple fields here.
Split with: Choose the separator you want to use between the additional fields
Display "More" Button: Show or hide the Read More button
Customize Button Text: Customize the Read More text.
Link: select the detail page of each item (row) in this data table. Detail pages are the forms created in the data list. Select Default Layout will show the default view page you set in the data list. If you've created other custom list forms, those forms will show after the default layout (Like, the new form, view form, and edit form are customize list forms in the following example). Select Custom URL will allow you to create a dynamic URL. Select
None if you just want to show the data in this data table, and data rows are set as unclickable.
Select how would you like to open the detail page with Open in settings. Pop-up window means the detail page will show as a pop-up window, Full Screen means once you click each row, the page will be redirect to the detail page. And New window will open another windows and show the detail page.
Hide if value is empty: If there are no records in this News control, this control will not show on the page.
Fallback: Use the Fallback field to set default content to be used in case the control has no content or does not exist.
Pagination Settings
Start at: Start displaying from which data record.
Limit Records: Turn this ON if you just want to display certain items in this control. By default, this option is OFF, which means all records of the selected data source will be displayed in this News control. Then you will need to enter the number of items for each page in the following Records per Page, and set the alignment of the pagination by choosing between Right, Center, and Left from the Align section.
If the Limit Records option is set to ON, then enter the number of items you wish to display in the following Limit section. Turn View more records ON will display a hyperlink at the bottom of this News control. You can change the text in the text box of Customize text. Set the Alignment that this view more link with the settings of Align.
Styling the News control
Layout
Columns Gap: Control the amount of space between each column.
Rows Gap: Control the amount of space between each row.
Align: Set alignment of the content for each item.
Content Box
Border Width: Set the thickness of the border around the box
Radius: Set the roundness of the border corners of the box
Padding: Set the padding of the entire box
Content Padding: Set the padding of just the box’s content
Box Shadow: Set the box shadow to the box
Background Color: Select a box color, for Normal and Hover states
Border Color: Choose the border color of the box for Normal and Hover states
Image
Border Radius: Set the roundness of the corners for the featured image
Spacing: Set the exact spacing between the featured image and the content
CSS Filters: Adjust the featured image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings
Content
Title
Color: Set the color of the titles
Typography: Set the typography of the titles
Spacing: Set the spacing between the title and the Additional Fields
Additional Fields
Color: Set the color of the Additional Fields
Separator Color: Set the color of the Additional Fields separator
Typography: Set the typography for the Additional Fields
Spacing: Set the spacing between the Additional Fields and the Excerpt
Excerpt
Color: Set the color of the Excerpt
Typography: Set the typography for the Excerpt
Spacing: Set the spacing between the Excerpt and the button of this content box
Fallback
Color: Set the color of the Fallback
Typography: Set the typography for the Fallback
Spacing: Set the spacing between the Fallback and the button of this control
Pagination
Color: Set the text color of the pagination.
Typography: Change the default typography options for the text of pagination.
Spacing: Set the space between the contents and the pagination.
Advanced Settings
Set the Advanced options that are applicable to this control.