News

Yeeflow team
Yeeflow team
  • Updated

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.

 

News_overview.jpg

 

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.

news_Add.jpg

 

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.

DataTable_source.jpg

 

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:

news_columns.jpg

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.

news_emptyimages.jpg

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

news_top_and_left.jpg

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.

news_fields.jpg

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. 

DataTable_link.jpg

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

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.

news_page.jpg

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 txt 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

  1. Columns Gap: Control the amount of space between each column.
  2. Rows Gap: Control the amount of space between each row.
  3. Align: Set alignment of the content for each item.

news_layout.jpg

Content Box

  1. Border Width: Set the thickness of the border around the box
  2. Radius: Set the roundness of the border corners of the box
  3. Padding: Set the padding of the entire box
  4. Content Padding: Set the padding of just the box’s content
  5. Box Shadow: Set the box shadow to the box
  6. Background Color: Select a box color, for Normal and Hover states
  7. Border Color: Choose the border color of the box for Normal and Hover states

news_contentbox__1_.jpg

Image

  1. Border Radius: Set the roundness of the corners for the featured image
  2. Spacing: Set the exact spacing between the featured image and the content
  3. CSS Filters: Adjust the featured image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings

Content

Title

  1. Color: Set the color of the titles
  2. Typography: Set the typography of the titles
  3. Spacing: Set the spacing between the title and the Additional Fields

Additional Fields

  1. Color: Set the color of the Additional Fields
  2. Separator Color: Set the color of the Additional Fields separator
  3. Typography: Set the typography for the Additional Fields
  4. Spacing: Set the spacing between the Additional Fields and the Excerpt

Excerpt

  1. Color: Set the color of the Excerpt
  2. Typography: Set the typography for the Excerpt
  3. Spacing: Set the spacing between the Excerpt and the button of this content box

Fallback

  1. Color: Set the color of the Fallback
  2. Typography: Set the typography for the Fallback
  3. Spacing: Set the spacing between the Fallback and the button of this control

Pagination

  1. Color: Set the text color of the pagination.
  2. Typography: Change the default typography options for the text of pagination.
  3. Spacing: Set the space between the contents and the pagination.

 

Advanced Settings

Set the Advanced options that are applicable to this control.

 

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.