PageFly - Edit template Lista

115 views Anh 0

Lista is a listing template, widely loved for its convenience and efficiency. All PageFly templates are responsive by nature. To check its mobile design, switch the Device type to Mobile.

About template Lista

Lista includes 1 hero image on top, 2 complex sections and then 1 hero section. Let’s look into one by one.

Top hero section

To change the image background, choose the section > Styling tab > Background > change the source in Image.

Remember to set the option for Position, Repeat, and Size.

To edit the height of the section, stay in Styling tab > scroll to Background > edit top and bottom padding.

Select the text on the section. Go to General tab to edit the content and choose suitable heading tag (good for SEO).

Then, go to Styling tab to stylize the text.

2nd section

If you want to make the section full-width, visit General tab > Container > turn off the Enable option.

This section has a row of 4 equal columns, each has an image background.

To configure the column width, go to General tab > Column width.

If you want a row with unequal columns instead, first, try adding more columns.

Then, choose a newly created column > General tab > Column width > slide the Any Device option to a number x < 12.

Next, choose the other column in the row, repeat till slide the Any Device option to a number = (12 -x). In the example below, we created 2 columns 6-6 side by side, and 2 columns 4-8 side by side.

Learn more about how to specify row and column.

To insert image background to each column, select it first > Styling tab > BackgroundYou can edit its height under Box Styles > Padding.

3rd section with List element

Select the List element > General tab.

List settings let you change list type (list icon) and list style.

List item allows you to duplicate, delete and change the order of items. You can also edit the content of list item here.

This section originally has a row with 4 equal columns.

To change it to a row with 3 equal columns, we must first delete 1 column, then edit the width of the other columns in the row. Select each > General tab > Column width > slide Any Device option to 4 instead of 3.

Learn more about how to specify row and column.

To make the list hyperlinked, highlight a list item > choose the chain icon on the element toolbar to hyperlink it > choose action type > hit Update

Bottom hero section

To edit the last hero section, go to Styling tab > Background > Image to edit the image background.

Remember to set options for Position, Repeat and Size.

With Heading element, you can edit the content and heading tag in General tab.

To edit its style, choose Styling tab.

Was this helpful?