Wix Website Creation : Dynamic Page using Collections from database by Subrat Sir of TTRC.iN

In this post we will learn how to use collections from Wix database in a dynamic page. Have a look at the above image. In our first row only one post is displaying. In our 2nd and third row 2 posts are displaying but with different widths and equal heights. For posts we can set background image or color separately. For different posts we can set different font formatting and font color. See third row first column, the text has a glow effect. We can set this glow effect and glow color for any post. The background image used in posts can be any image from Wix, may be your uploaded image or link from an external image.

Before proceeding further, I should clarify that, this post is not for complete beginners.  This will be definitely helpful for them who have a basic knowledge of Wix website creation. If you want to learn Wix website creation from beginning and want to cover advance concepts also then please choose any one of the course mentioned at the bottom of page.

• Login to Wix. From all sites, hover over the desired site and click on “Select and Edit site“.
• From site actions choose “edit site“.
• From Dev Mode menu click on Turn on Dev Mode.
• From left hand side vertical button bar click on Databases.
• Hover over Content Collections a plus sign will appear click on that. A popup will be displayed. Click on New Collection.
• Create a content collection dialogue box will appear
  • Give a collection name
  • you can set a collection ID or use the default suggestion by Wix.
  • The default value for What’s this collection for is Site Content. If not, choose from drop down.
  • Click on create collection. It will take some time and redirect you to content manager dashboard.

Now we have to set the required fields and it’s content type for our collection.

• By default Title filed is created. To wards its right you can see a plus sign. clicking on that will allow us to create a new field.
• While creating a new field you have to specify the field name and field type and then click on save button. As per the below list create all the fields.

at any time you can change the name or type by clicking on the desired field name and then Properties.

• Now enter the desired data in fields and click on Sync Sandbox to Live. Now your collection is synchronized with live website. Close this window, You are now in Wix website editor.
  
• Click on Menus and Pages -> Dynamic Pages -> Add to Site.
  
• From the Add Dynamic Pages window, select Your Collections tab, hover over desired collection and click on Add to Site.
  
• From the dynamic page -> Click on list repeater -> Click on Manage Items. A manage item dialog box will be displayed as below. Item 1 to Item 6 are showing. When you hover over any item three dots will be displayed to it’s right. Click on these three dots and select delete. In this way delete all the items except item1.
  
• Right click on title item and from the menu select delete to delete it. In the same way delete more and the image.
• Now Click on Add -> Text -> Paragraphs
  
• Drag this item to top left corner and fill it the whole width.
• Click on bottom right corner properties and events.
  
• Select all the text and delete it.
  
• Now copy the below text and paste there.

Or copy the above code from GitHub.

• Now click on preview to preview your dynamic page.

If you want to know more about wix website design, can enroll one of the below courses.