Layout - Revision history

PeterRobert at 09:28, 16 November 2024

2024-11-16T09:28:36Z

PeterRobert at 09:11, 16 November 2024

2024-11-16T09:11:33Z

PeterRobert at 09:02, 16 November 2024

2024-11-16T09:02:27Z

PeterRobert at 09:01, 16 November 2024

2024-11-16T09:01:00Z

PeterRobert at 08:54, 16 November 2024

2024-11-16T08:54:26Z

PeterRobert at 08:52, 16 November 2024

2024-11-16T08:52:36Z

PeterRobert at 08:23, 16 November 2024

2024-11-16T08:23:48Z

PeterRobert at 11:04, 1 April 2024

2024-04-01T11:04:10Z

PeterRobert at 16:25, 13 November 2022

2022-11-13T16:25:36Z

PeterRobert at 16:24, 13 November 2022

2022-11-13T16:24:28Z

@@ Line 18: / Line 18: @@
 ----
+==='''Module Groups'''===
 *Most groups are self explanatory.
@@ Line 29: / Line 29: @@
 ----
+==='''Enable/Disable modules'''===
 *Click the item in the '''Modules''' column list to select it.
@@ Line 39: / Line 39: @@
 ----
+==='''Module Content Container'''===
 *The Container of most content modules can be changed.
@@ Line 53: / Line 53: @@
 ----
+==='''Install Modules'''===
 *To install additional content modules:
@@ Line 68: / Line 68: @@
 ----
+==='''Child - Parent'''===
 A Layout Module is a '''child''' module of it's '''parent''' Modular Content module.
@@ Line 81: / Line 81: @@
 The Modular Content Module is a container for it's child Layout Modules.
-These child Layout modules can then be positioned anywhere within the parent Modular Content module.
+The Display Slots are displayed in relation to each other on the page as illustrated in the graphic like this:
 <div class="mainpage_box">
 [[File:layoutmodules.png]]
 </div>
 This allows the shop owner to display the modules on the page in countless variations.
@@ Line 109: / Line 110: @@
 Look at '''Layout Modules &rarr; Product Info''' to see how the page displays the modules contained in the Product Info Modular Content Module.
-*'''Gallery''', assigned to Module Display Group '''B''' (which has a set page width of '''7''' - 58.33% of page width) with a sort order of '''200''' shows first in '''B''' with a content width of '''12''' - 100% of Module Display Group  '''B''' width.
+*'''Gallery''', assigned to Display Slot '''B''' (which has a set page width of '''7''' - 58.33% of page width) with a sort order of '''200''' shows first in '''B''' with a content width of '''12''' - 100% of Display Slot  '''B''' width.
-*'''Image Disclaimer''', assigned to Module Display Group '''B''' with a sort order of '''230''' shows next in '''B''' on a new row (because the total width of the previous module is '''12''' - Module Display Group  '''B''' width) with a content width of '''12''' - 100% of Module Display Group  '''B''' width.
+*'''Image Disclaimer''', assigned to Display Slot '''B''' with a sort order of '''230''' shows next in '''B''' on a new row (because the total width of the previous module is '''12''' - Display Slot  '''B''' width) with a content width of '''12''' - 100% of Display Slot  '''B''' width.
-*'''Options & Attributes''', assigned to Module Display Group '''C''' (which has a set page width of '''5''' - 41.66% of page width) with a sort order of '''310''' shows first in '''C''' with a content width of '''12''' - 100% of Module Display Group  '''C''' width.
+*'''Options & Attributes''', assigned to Display Slot '''C''' (which has a set page width of '''5''' - 41.66% of page width) with a sort order of '''310''' shows first in '''C''' with a content width of '''12''' - 100% of Display Slot  '''C''' width.
-*'''Buy Button''', assigned to Module Display Group '''C''' (which has a set page width of '''5''' - 41.66% of page width) with a sort order of '''320''' shows next in '''C''' on a new row (because the total width of the previous module is '''12''' - Module Display Group  '''C''' width) with a content width of '''12''' - 100% of Module Display Group  '''C''' width.
+*'''Buy Button''', assigned to Display Slot '''C''' (which has a set page width of '''5''' - 41.66% of page width) with a sort order of '''320''' shows next in '''C''' on a new row (because the total width of the previous module is '''12''' - Display Slot  '''C''' width) with a content width of '''12''' - 100% of Display Slot  '''C''' width.
-Any Module Display Group that has no modules assigned to it does not display.
+Any Display Slot that has no modules assigned to it does not display.

@@ Line 70: / Line 70: @@
-A Layout Module can be positioned anywhere on the page using the sort order and content width.
+A Layout Module is a '''child''' module of it's '''parent''' Modular Content module.
-The Product Info Layout Module (π Modular product_info) is with other content modules - from admin, go to [[File:adminnavbarmod.png|link=]] '''Modules &rarr; Content''' and scroll down to see this:
+The parent Modular Content module can also be positioned anywhere on the page using the Sort Order and Content Container settings.
 <div class="mainpage_box">
 [[File:layoutproductinfo.png]]
 </div>
-The Layout Module contains other modules.
+The Modular Content Module is a container for it's child Layout Modules.
-These modules can then be positioned anywhere within the Layout Module.
+These child Layout modules can then be positioned anywhere within the parent Modular Content module.
-This is achieved by assigning each module to a group and then, using the sort order and content width, the module can be positioned within that group.
+This is achieved by assigning each module to a group and then, using the sort order and content container, the module can be positioned within that group.
 The groups are displayed in relation to each other on the page as illustrated in the graphic like this:
@@ Line 106: / Line 108: @@
 *'''What our customers say...''', with a sort order of '''120''' shows next on a new row (because the total width of the previous module is '''12''' - 100% of page width) with a content width of '''6''' - 50% of page width.
-Look at '''Layout Modules &rarr; Product Info''' to see how the page displays the modules contained in the Product Info Layout Module.
+Look at '''Layout Modules &rarr; Product Info''' to see how the page displays the modules contained in the Product Info Modular Content Module.
 *'''Gallery''', assigned to Module Display Group '''B''' (which has a set page width of '''7''' - 58.33% of page width) with a sort order of '''200''' shows first in '''B''' with a content width of '''12''' - 100% of Module Display Group  '''B''' width.
 *'''Image Disclaimer''', assigned to Module Display Group '''B''' with a sort order of '''230''' shows next in '''B''' on a new row (because the total width of the previous module is '''12''' - Module Display Group  '''B''' width) with a content width of '''12''' - 100% of Module Display Group  '''B''' width.

← Older revision		Revision as of 09:02, 16 November 2024
Line 48:		Line 48:

	For more information about using Bootstrap column width classes like, for example, '''col-sm-6''', see - '''[[Bootstrap_Grid\|Bootstrap Grid]]'''		For more information about using Bootstrap column width classes like, for example, '''col-sm-6''', see - '''[[Bootstrap_Grid\|Bootstrap Grid]]'''
		+
		+	For more information about using Bootstrap Spacing like, for example, '''mb-4''', see - https://getbootstrap.com/docs/5.0/utilities/spacing/

@@ Line 7: / Line 7: @@
 [[File:moduleslayout.jpg|link=|1500px]]
 </div>
-*This list shows all the layout modules installed in the shop by default.
-*They are sorted into '''Groups''' according to on which page they display.
+This list shows all the layout modules installed in the shop by default.
-*They are also sorted by the '''Sort Order''' in which they are displayed on the page in relation to each other.
-*The '''Active''' column shows if they are enabled (currently displayed) on the page - green if they are enabled - red if they are disabled.
+They are sorted into '''Groups''' according to the page on which they display.
@@ Line 17: / Line 21: @@
 *Most groups are self explanatory.
-**'''product_info''' refers to a page that shows a single product.
+**'''contact_us''' refers to the Contact Us page.
@@ Line 34: / Line 41: @@
-*The display width of most content modules can be changed.
+*The Container of most content modules can be changed.
 **Click the item in the '''Modules''' column list to select it.
 **Click <span class="btn-yellow">Edit</span> to open the edit panel.
-**Change the '''Content Width''' setting according to the instructions shown.
+**Change the '''Content Container''' setting according to the instructions shown.
 **Click <span class="btn-green">Save</span>
@@ Line 51: / Line 58: @@
 **Click <span class="btn-yellow">Install Module</span>
 **Click <span class="btn-yellow">Edit</span>
-**Choose a '''Content Width''' setting according to the instructions shown.
+**Choose a '''Content Container''' setting according to the instructions shown.
 **Enter a '''Sort Order''' value to order the display of the module in relation to the other modules in the same group.
 ***Do not leave '''0''' as the '''Sort Order''' on modules as it can cause problems.

@@ Line 3: / Line 3: @@
 __TOC__
 __FORCETOC__
-From admin go to [[File:adminnavbarmod.png|link=]] '''Modules &rarr; Layout''' - you will see this:
+From admin go to [[File:adminnavbarmod.png|link=]] '''Modules &rarr; Layout''' - to see like this:
 <div class="mainpage_box">
 [[File:moduleslayout.jpg|link=|1500px]]

@@ Line 1: / Line 1: @@
 <div class="btn btn-grey btn-back">{{#fas:arrow-left}} Back</div> <div class="btn btn-grey btn-admin">{{#fas:cog}} Administration</div>
 <hr>
 From admin go to [[File:adminnavbarmod.png|link=]] '''Modules &rarr; Layout''' - you will see this:
 <div class="mainpage_box">
@@ Line 117: / Line 119: @@
 <hr>
-{{Page_In_Progress}}
+{{Pro}}
 {{Contribute}}

← Older revision		Revision as of 11:04, 1 April 2024
Line 37:		Line 37:
	**Change the '''Content Width''' setting according to the instructions shown.		**Change the '''Content Width''' setting according to the instructions shown.
	**Click <span class="btn-green">Save</span>		**Click <span class="btn-green">Save</span>
		+
		+	For more information about using Bootstrap column width classes like, for example, '''col-sm-6''', see - '''[[Bootstrap_Grid\|Bootstrap Grid]]'''

← Older revision		Revision as of 16:25, 13 November 2022
Line 66:		Line 66:
	The Layout Module contains other modules.		The Layout Module contains other modules.

−	~~The modules contained in the Product Info Layout Module are found from admin, go to [[File:adminnavbarlayout.png\|link=]] '''Layout Modules → Product Info''' to see this:~~
−	~~<div class="mainpage_box">~~
−	~~[[File:productinfo.png]]~~
−	~~</div>~~

	These modules can then be positioned anywhere within the Layout Module.		These modules can then be positioned anywhere within the Layout Module.

← Older revision		Revision as of 16:24, 13 November 2022
Line 56:		Line 56:
	----		----

		+
		+	A Layout Module can be positioned anywhere on the page using the sort order and content width.
		+
		+	The Product Info Layout Module (π Modular product_info) is with other content modules - from admin, go to [[File:adminnavbarmod.png\|link=]] '''Modules → Content''' and scroll down to see this:
		+	<div class="mainpage_box">
		+	[[File:layoutproductinfo.png]]
		+	</div>
		+
		+	The Layout Module contains other modules.
		+
		+	The modules contained in the Product Info Layout Module are found from admin, go to [[File:adminnavbarlayout.png\|link=]] '''Layout Modules → Product Info''' to see this:
		+	<div class="mainpage_box">
		+	[[File:productinfo.png]]
		+	</div>
		+
		+	These modules can then be positioned anywhere within the Layout Module.
		+	This is achieved by assigning each module to a group and then, using the sort order and content width, the module can be positioned within that group.
		+
		+	The groups are displayed in relation to each other on the page as illustrated in the graphic like this:
		+
		+	<div class="mainpage_box">
		+	[[File:layoutmodules.png]]
		+	</div>
		+
		+	This allows the shop owner to display the modules on the page in countless variations.
		+
		+	For example, in the default installation, the product page for Grapefruit shows this:
		+
		+	<div class="mainpage_box">
		+	[[File:layoutpi.png]]
		+	</div>
		+
		+	Look at '''Modules → Content''' to see how the page displays the modules.
		+	*'''Name''', with the lowest sort order of '''40''' shows first with a content width of '''9''' - 75% of page width (note that page width here refers to the product information area that is between the side boxes on the left and right).
		+	*'''Price''', with a sort order of '''50''' shows next with a content width of '''3''' - 25% of page width (note that the total width of all modules displayed in one row must not exceed '''12''' - 100% of page width).
		+	*'''Review Stars/Link''', with a sort order of '''55''' shows next on a new row (because the total width of the previous two modules adds to '''12''' - 100% of page width) with a content width of '''12''' - 100% of page width.
		+	*'''π Modular product_info''', with a sort order of '''59''' shows next on a new row (because the total width of the previous module is '''12''' - 100% of page width) with a content width of '''12''' - 100% of page width. This module contains other modules shown highlighted in grey in the screenshot.
		+	*'''Description''', with a sort order of '''60''' shows next on a new row (because the total width of the previous module is '''12''' - 100% of page width) with a content width of '''12''' - 100% of page width.
		+	*'''Date Available''', with a sort order of '''70''' shows next on a new row (because the total width of the previous module is '''12''' - 100% of page width) with a content width of '''12''' - 100% of page width.
		+	*'''What our customers say...''', with a sort order of '''120''' shows next on a new row (because the total width of the previous module is '''12''' - 100% of page width) with a content width of '''6''' - 50% of page width.
		+
		+	Look at '''Layout Modules → Product Info''' to see how the page displays the modules contained in the Product Info Layout Module.
		+	*'''Gallery''', assigned to Module Display Group '''B''' (which has a set page width of '''7''' - 58.33% of page width) with a sort order of '''200''' shows first in '''B''' with a content width of '''12''' - 100% of Module Display Group '''B''' width.
		+	*'''Image Disclaimer''', assigned to Module Display Group '''B''' with a sort order of '''230''' shows next in '''B''' on a new row (because the total width of the previous module is '''12''' - Module Display Group '''B''' width) with a content width of '''12''' - 100% of Module Display Group '''B''' width.
		+	*'''Options & Attributes''', assigned to Module Display Group '''C''' (which has a set page width of '''5''' - 41.66% of page width) with a sort order of '''310''' shows first in '''C''' with a content width of '''12''' - 100% of Module Display Group '''C''' width.
		+	*'''Buy Button''', assigned to Module Display Group '''C''' (which has a set page width of '''5''' - 41.66% of page width) with a sort order of '''320''' shows next in '''C''' on a new row (because the total width of the previous module is '''12''' - Module Display Group '''C''' width) with a content width of '''12''' - 100% of Module Display Group '''C''' width.
		+
		+	Any Module Display Group that has no modules assigned to it does not display.
		+
		+
		+	----

	'''Tip:'''		'''Tip:'''