DataTorrent - How home page is customised

DataTorrent website is developed with Zurb Foundation. So we are not supposed to make any changes in the main files. If any style has to be updated make changes in style.css file which is in the theme files.

We were given the HTML files for main pages which are in the StaticTheme folder. We used the same HTML files and converted that into WordPress theme.

For the home page we had the following layout:

In order to customize this page the following steps are taken:

Wordpress URL - https://www.datatorrent.com/wp-login.php

Login using credentials

Custom fields > Custom Fields
Select Home Page Fields custom field group which is created to customize home page.
Created a Home Page Block which is a repeater field.
This field has the following repeater fields which will be visible based on the requirement
1. Block Measure field is a dropdown for different layouts as below:
  - For Static Content Dynamic Event 40 x 60 following is the field that needs to be filled:
  - For Static Three Icon Format following are the fields that needs to be filled:
  - For Full Width Section (dark band) following are the fields that needs to be filled:
  - For Dynamic Blog Posts 50 x 50 following is the field that needs to be filled:
  - For Static Content 50 x 50 following are the fields that needs to be filled:
  - For Static Content Full Width following is the fiels that needs to be filled:
  - For Static Content 40 x 60 following are the fields that needs to be filled:
  - For Featured Module following are the fields that needs to be filled:
2. Band Color Type is a dropdown with two options of background color i.e. Grey and White
  - Choices are the options for dropdown. light-band and secondary-band are the class names in css with respective colors i.e. white and grey
  - Conditional Logic adds the condition for which block measure options this field will be displayed.
3. Full Width Static Content is Wysiwyg editor in which HTML code can also be added
  - Conditional Logic adds the condition for which block measure options this field will be displayed.
4. Left Static Content is Wysiwyg editor in which HTML code can also be added
  - Conditional Logic adds the condition for which block measure options this field will be displayed.
5. Right Static Content is Wysiwyg editor in which HTML code can also be added
  - Conditional Logic adds the condition for which block measure options this field will be displayed.
6. Three icon Block is Repeater which has 5 repeater fields
  - Minimum Rows and Maximum Rows specifies that there can be only 3 blocks in a row
  - Conditional Logic adds the condition for which block measure options this field will be displayed.
  - Icon Alignment is dropdown with three choices to align icons. align-left, align-center and align-right are the class names in css with respective alignment i.e. left, center, right
7. Layout is a dropdown list with 2 choices i.e. Image Left Text Right and Image Right Text Left based on which image and text will be displayed.
  - Conditional Logic adds the condition for which block measure option this field will be displayed.
8. Title is a text field.
  - Conditional Logic adds the condition for which block measure option this field will be displayed.
9. Description is Wysiwyg editor field in which HTML code can also be added.
  - Conditional Logic adds the condition for which block measure option this field will be displayed.
10. Background Class is a dropdown with two options of background i.e. Callout Visit and Callout Demo. These are the css classes for the background.
  - Conditional Logic adds the condition for which block measure option this field will be displayed.
11. CTA is a Repeater which has 3 repeater fields
  - Conditional Logic adds the condition for which block measure option this field will be displayed.
  - CTA Class is a dropdown with two options for background color for CTA i.e. Primary which will have blue background and Secondary which will have grey background.
12. Top Description, Image, Image Alt Text and Bottom Description are the fields which are dispalyed only when Featured module block measure is selected.
13. CTA Text and CTA Link are the fields which are dispalyed only when Static Three Icon Format block measure is selected.
Home Page Fields will be shown only on the selected locations. As per client request the Content editor is hidden on those pages where these fields be visible.

DataTorrent website is developed with Zurb Foundation. So we are not supposed to make any changes in the main files. If any style has to be updated make changes in style.css file which is in the theme files.

We were given the HTML files for main pages which are in the StaticTheme folder. We used the same HTML files and converted that into WordPress theme.

For the home page we had the following layout:

In order to customize this page the following steps are taken:

Custom fields > Custom Fields

Select Home Page Fields custom field group which is created to customize home page.

Created a Home Page Block which is a repeater field.

This field has the following repeater fields which will be visible based on the requirement

Block Measure field is a dropdown for different layouts as below:

For Static Content Dynamic Event 40 x 60 following is the field that needs to be filled:

For Static Three Icon Format following are the fields that needs to be filled:

For Full Width Section (dark band) following are the fields that needs to be filled:

For Dynamic Blog Posts 50 x 50 following is the field that needs to be filled:

For Static Content 50 x 50 following are the fields that needs to be filled:

For Static Content Full Width following is the fiels that needs to be filled:

For Static Content 40 x 60 following are the fields that needs to be filled:

For Featured Module following are the fields that needs to be filled:

Band Color Type is a dropdown with two options of background color i.e. Grey and White

Choices are the options for dropdown. light-band and secondary-band are the class names in css with respective colors i.e. white and grey

Conditional Logic adds the condition for which block measure options this field will be displayed.

Full Width Static Content is Wysiwyg editor in which HTML code can also be added

Left Static Content is Wysiwyg editor in which HTML code can also be added

Conditional Logic adds the condition for which block measure options this field will be displayed.

Right Static Content is Wysiwyg editor in which HTML code can also be added

Conditional Logic adds the condition for which block measure options this field will be displayed.

Three icon Block is Repeater which has 5 repeater fields

Minimum Rows and Maximum Rows specifies that there can be only 3 blocks in a row

Conditional Logic adds the condition for which block measure options this field will be displayed.

Icon Alignment is dropdown with three choices to align icons. align-left, align-center and align-right are the class names in css with respective alignment i.e. left, center, right

Layout is a dropdown list with 2 choices i.e. Image Left Text Right and Image Right Text Left based on which image and text will be displayed.

Conditional Logic adds the condition for which block measure option this field will be displayed.

Title is a text field.

Conditional Logic adds the condition for which block measure option this field will be displayed.

Description is Wysiwyg editor field in which HTML code can also be added.

Conditional Logic adds the condition for which block measure option this field will be displayed.

Background Class is a dropdown with two options of background i.e. Callout Visit and Callout Demo. These are the css classes for the background.

Conditional Logic adds the condition for which block measure option this field will be displayed.

CTA is a Repeater which has 3 repeater fields

Conditional Logic adds the condition for which block measure option this field will be displayed.

CTA Class is a dropdown with two options for background color for CTA i.e. Primary which will have blue background and Secondary which will have grey background.

Top Description, Image, Image Alt Text and Bottom Description are the fields which are dispalyed only when Featured module block measure is selected.

CTA Text and CTA Link are the fields which are dispalyed only when Static Three Icon Format block measure is selected.

Home Page Fields will be shown only on the selected locations. As per client request the Content editor is hidden on those pages where these fields be visible.