Difference between revisions of "Design Blocks"

From Contensive Wiki
Jump to: navigation, search
(→‎Tile)
 
(37 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
To set preferred theme and font, select DESIGN BLOCK SETTINGS. <br>
 
To set preferred theme and font, select DESIGN BLOCK SETTINGS. <br>
  
−
In the first field choose a theme, which is indicated by theme-.... <br>
+
In the first field choose a font, which is indicated by font- ..... <br>
  
−
In the second field choose a font, which is indicated by font- ..... <br>
+
In the second field choose a theme, which is indicated by theme-.... <br>
  
 
Click OK to save changes.
 
Click OK to save changes.
Line 17: Line 17:
 
; Contact US : Enables you to drop a Contact Us form on the page that collects data from a user and can redirect to a Thank You page after the user submits the form. <br />
 
; Contact US : Enables you to drop a Contact Us form on the page that collects data from a user and can redirect to a Thank You page after the user submits the form. <br />
  
−
; Four Tile Image Flip : This allows you to add 4 images across to a page, with the ability to add a title, explanation, and image to four different tiles, and also includes a mouse over feature with tiles underneath each of the four tiles that include a title, description, button, and URL to link to when someone clicks on the specific button. <br />
+
[[File:DB-CONTACT-US.png]]
  
−
; Headline : Provides a way to add text that you want to stand out, including a title, a brief description and a button with unique text and a link. <br />
+
; Four Column : This allows you to add 4 equal columns to a page, with the ability to add different types of add-ons in each column. <br />
  
−
; Hero Image : Provides a way to add a section title, a brief description, an image background and a button with unique text and a link. <br />
+
[[File:DB-4-Tile-Flip.png]]
  
−
<br>
+
; Three Column : Adds three equal columns on a page with the ability to add different add-ons within each column. <br />
−
<br>
+
  
−
; Four Block Images : This allows you to add 4 images across to a page, with the ability to add a title, explanation, image and URL to link to when someone clicks on the specific image. <br />
+
[[File:DB-Info-Panels.png]]
  
−
; Three Block Images : This allows you to drop a title, sub-title and 3 images across on a page, with image captions and links (if desired) for each image. <br />
+
; Two Column : Adds two equal columns on a page with the ability to add different add-ons within each column. <br />
  
−
; Home Page Carousel : Enables you to drop a slider on the page with a variety of banner images and links. <br />
+
[[File:DB-2Col.png]]
  
−
; Home Page Testimonials : Allows you to make a section with a title, quotes, an image and the name of the person who is providing the testimonial. <br />
+
; Two Column Left : Adds two columns on a page where the left one is wider than the right one. The user can add different add-ons within each column. <br />
  
−
; Home Page Text with Video : Allows you to drop on the page a section with a title, descriptive text and an embedded video. <br />
+
[[File:DB-2Col-Left.png]]
  
−
; Image Text : Enables you to drop a section on a page with a photo, title and descriptive text. <br />
+
; Two Column Right : Adds two columns on a page where the right one is wider than the left one. The user can add different add-ons within each column. <br />
  
−
; Sign Up Email : Allows you to collect email addresses from users who wish to sign up for a newsletter or some other information. <br />
+
[[File:DB-2Col-Right.png]]
  
−
; Simple : Provides a way to add a section title, a brief description and a button with unique text and a link. <br />
+
; Tile : Provides a way to add text that you want to stand out, including a headline, a brief description, an image and a button with unique text and a link. <br />
  
−
; Home Page 3 Blocks : Enables 3 text blocks across with a title, description, button with unique text and URL to link. <br />
+
[[File:DB-Headline.png]]
  
−
; Home Page 4 Blocks : Enables 4 images across with a title, description, and rollover to second descriptive screen containing a button with unique text and URL to link. <br />
+
; Hero Image : Provides a way to add a section title, a brief description, an image background and a button with unique text and a link. <br />
 +
 
 +
[[File:DB-HERO.png]]
 +
 
 +
; Sliders : Enables users to add a slider with up to 10 slides to a page with an image, text and a link. <br />
 +
 
 +
[[File:DB-Sliders.png]]
 +
 
 +
; Text : Enables you to drop a section on a page with a title and descriptive text. <br />
 +
 
 +
[[File:DB-Text.png]]
 +
 
 +
; Text and Image : Enables you to drop a section on a page with a picture, title and descriptive text. <br />
 +
 
 +
[[File:DB-Text-Image.png]]
  
 
== Roles ==
 
== Roles ==
Line 77: Line 90:
 
'''''NOTE: Go to ADMIN>DESIGN BLOCKS>DB CONTACT US DATA to see information submitted through the Contact Us form.'''''
 
'''''NOTE: Go to ADMIN>DESIGN BLOCKS>DB CONTACT US DATA to see information submitted through the Contact Us form.'''''
  
−
====Four Tile Image Flip====
+
====Four Column====
−
Click on DB FOUR TILE IMAGE FLIP under Design Blocks. <br />
+
Click on DB FOUR COLUMN under Design Blocks. <br />
 
Click ADD. <br>
 
Click ADD. <br>
−
*In the DETAILS tab, add information for Form Title.  
+
*In the DETAILS tab, select which Add-on you want for each of the four columns. You may choose the same one for all columns or a different one for each.  
−
*In the CSS tab choose a font in the firstCustomCssClass field and choose your color theme in the secondCutomCSSClass field.
+
*Click OK to save changes.
−
*In the TILES tab for each of the four tiles:
+
 
−
#Add a Title to display on the tile
+
====Three Column====
−
#Add a Description for the tile
+
Click on DB Three COLUMN under Design Blocks. <br />
−
#Upload an IMAGE to display on the tile; image should be  square and no more than 200 x 200.
+
Click ADD. <br>
−
#Add a Title to display when you mouse over the front tile
+
*In the DETAILS tab, select which Add-on you want for each of the three columns. You may choose the same one for all columns or a different one for each.
−
#Add a Description for the tile when you mouse over the front tile
+
*Click OK to save changes.
−
#Add text for a button on the tile when you mouse over the front tile
+
 
−
#Add the URL where the button will take you; the URL must contain http:// or https://
+
====Two Column====
 +
Click on DB Two COLUMN under Design Blocks. <br />
 +
Click ADD. <br>
 +
*In the DETAILS tab, select which Add-on you want for each of the two columns. You may choose the same one for all columns or a different one for each.
 +
*Click OK to save changes.
 +
 
 +
====Two Column Left====
 +
Click on DB Two COLUMN Left under Design Blocks. <br />
 +
Click ADD. <br>
 +
*In the DETAILS tab, select which Add-on you want for each of the two columns. You may choose the same one for all columns or a different one for each.
 +
*Click OK to save changes.
  
−
====Headline====
+
====Two Column Right====
−
Click on DB HEADLINE under Design Blocks. <br />
+
Click on DB Two COLUMN RIGHT under Design Blocks. <br />
 +
Click ADD. <br>
 +
*In the DETAILS tab, select which Add-on you want for each of the two columns. You may choose the same one for all columns or a different one for each.
 +
*Click OK to save changes.
 +
 
 +
====Tile====
 +
Click on DB TILES under Design Blocks. <br />
 
Click ADD. <br>
 
Click ADD. <br>
 
*In the DETAILS tab:
 
*In the DETAILS tab:
−
#Add a title for the new section. <br>
+
#Select an image by clicking CHOOSE FILE.
 +
#Add a headline for the new section.
 +
#Add EMBED CODE for things such as advertisements or videos.
 
#Enter descriptive text
 
#Enter descriptive text
 
#Add text for a button
 
#Add text for a button
 
#Provide the URL for the button to link to. <br>
 
#Provide the URL for the button to link to. <br>
  
−
*In the CSS tab choose a font in the firstCustomCssClass field and choose your color theme in the secondCutomCSSClass field.
+
*In the Styles tab choose a font and theme. Also click on Top Padding, Right Padding, Bottom Padding or Left Padding if you want to leave space in any of those areas.
 
Click OK to save. <br>
 
Click OK to save. <br>
  
 
====Hero Image====
 
====Hero Image====
 
Click on DB HERO IMAGE under Design Blocks. <br />
 
Click on DB HERO IMAGE under Design Blocks. <br />
−
*In the DETAILS tab add a Name for the new record
+
Click ADD. <br>
  
−
*In the CSS tab choose a font in the firstCustomCssClass field and choose your color theme in the secondCutomCSSClass field.
+
*In the DETAILS tab:
−
 
+
#Add a Name for the new record, which shows as the title.
−
In the HERO SETTINGS tab:
+
#Add a Sub Title for the new section.  
−
#Click ADD.
+
−
#Add a Title for the new section.  
+
−
#Add a Sub Title for the new section.
+
 
#Upload an Image Background. Recommended minimum width is 1920 px; recommened maximum height is 1085 px.
 
#Upload an Image Background. Recommended minimum width is 1920 px; recommened maximum height is 1085 px.
 +
#Select the Shade for the CSS Class.
 
#Enter text to display on the button.
 
#Enter text to display on the button.
 
#Enter the URL to link to when a user clicks on the button. Include http:// or https:// as part of the URL.
 
#Enter the URL to link to when a user clicks on the button. Include http:// or https:// as part of the URL.
−
Enter descriptive text and text for a button and a URL for the button to link to. <br>
 
 
Click OK to save. <br>
 
Click OK to save. <br>
  
 +
*In the STYLES tab select the Font and Theme. Also select Top Padding, Right Padding, Bottom Padding or Left Padding if you want to leave space in any of those areas.
  
−
 
+
====Slider====
−
<br>
+
Click on DB SLIDER under Design Blocks. <br />
−
<br>
+
−
<br>
+
−
<br>
+
−
====Four Block Images====
+
−
Click on LP FOUR BLOCK IMAGES under Landing Page Templates. <br />
+
 
Click ADD. <br>
 
Click ADD. <br>
−
Add information for each image to specify, the link to forward to, the title, descriptive text and image to display. <Br>
 
−
Click OK to save images. <br>
 
  
−
====Three Block Images====
+
*In the DETAILS tab add a Name for the new record.
−
Click on LP THREE BLOCK IMAGES under Landing Page Templates. <br />
+
−
Click ADD. <br>
+
−
Add a Header Title and description for this section. <br>
+
−
Add information for each image to specify, the link to forward to, the image caption, and image to display. <Br>
+
−
Click OK to save images. <br>
+
  
−
====Home Page Carousel====
+
*In the CSS tab choose a font in the firstCustomCssClass field and choose your color theme in the secondCutomCSSClass field.
−
Click on LP HOME PAGE CAROUSEL under Landing Page Templates. <br />
+
−
Click ADD. <br>
+
−
Add a title for the new carousel. <br>
+
−
Click OK to save changes. <br>
+
−
Next click on LP HOME PAGE CAROUSEL SLIDERS to specify which slides to include. <br>
+
−
Click ADD and select the correct Carousel from the drop down. <br>
+
−
Name your slide, upload an image and provide a description and link. <br>
+
−
Click OK to save slide, and repeat until all slides are entered. <br>
+
  
−
====Home Page Testimonials====
+
*In the SLIDERS tab:
−
Click on LP HOME PAGE TESTIMONIALS under Landing Page Templates. <br />
+
#Upload an image for the first slide.
−
Click ADD. <br>
+
#Add text for the first slide.
−
Add a title for the new section. <br>
+
#Add the URL to forward to when a user clicks the image. Include http:// or https:// as part of the URL.
−
Enter a quote, name and image for each testimonial. <br>
+
#Repeat for each slide that you want to display.
−
Enter button text and a URL for a READ MORE section with additional testimonials. <br>
+
#Click OK to save slides. <br>
−
Click OK to save. <br>
+
  
−
====Home Page Text with Video====
+
====Text====
−
Click on LP HOME PAGE TEXT WITH VIDEO under Landing Page Templates. <br />
+
Click on DB TEXT under Design Blocks. <br />
 
Click ADD. <br>
 
Click ADD. <br>
−
Add a title for the new section. <br>
 
−
Enter a descriptive text and the YouTube URL for the video. <br>
 
−
You can also specify the Video Width and Height. <br>
 
−
Click OK to save. <br>
 
  
−
====Image Text====
+
*In the DETAILS tab:
−
Click on LP IMAGE TEXT under Landing Page Templates. <br />
+
#Add a Name for the new record, which appears as the title.
−
Click ADD. <br>
+
#Enter descriptive text.<br>
−
Add a title for the new section. <br>
+
−
Enter descriptive text and the URL for the image. <br>
+
−
Click OK to save. <br>
+
  
−
====Sign Up Email====
+
*In the Styles tab choose a font and theme. You can also check the boxes next to Top Padding, Right Padding, Bottom Padding and Left Padding if you want to leave space in any of those areas.
−
Click on LP SIGN UP EMAIL under Landing Page Templates. <br />
+
−
Click ADD. <br>
+
−
Add a title for the new form. <br>
+
−
Enter user instructions, text for the button, a URL for a Thank You page, thank you title and text, how long until you are directed away from the Thank You page and the URL of the page to go to after the Thank You page. <br>
+
 
Click OK to save. <br>
 
Click OK to save. <br>
  
−
====Simple====
+
====Text and Image====
−
Click on LP SIMPLE under Landing Page Templates. <br />
+
Click on DB TEXT AND IMAGE under Design Blocks. <br />
 
Click ADD. <br>
 
Click ADD. <br>
−
Add a title for the new section. <br>
 
−
Enter descriptive text and text for a button and a URL for the button to link to. <br>
 
−
Click OK to save. <br>
 
  
−
====Home Page 3 Blocks====
+
*In the DETAILS tab:
−
Click on LP HOME PAGE 3 BLOCKS under Landing Page Templates. <br />
+
#Add a Name for the new record, which appears as the title.
−
Click ADD. <br>
+
#Enter descriptive text.
−
For each text section, enter the title, descriptive text, button text and URL link for button. <br>
+
#Upload the image. <br>
−
Click OK to save. <br>
+
  
−
====Home Page 4 Blocks====
+
*In the Styles tab choose a font and theme. You can also check the boxes next to Top Padding, Right Padding, Bottom Padding and Left Padding if you want to leave space in any of those areas.
−
Click on LP HOME PAGE 4 BLOCKS under Landing Page Templates. <br />
+
−
Click ADD. <br>
+
−
Add a title for this set of 4 blocks. <br>
+
−
For each text section, enter the title, descriptive text, upload an image, enter a title and second description for a rollover, as well as button text and URL link for button. <br>
+
 
Click OK to save. <br>
 
Click OK to save. <br>
−
 
−
===Editing which specific Landing Page records appear on the webpage.===
 
−
Go to the page with your Landing Page add-ons dropped on the page.
 
−
Login and click ADVANCED EDIT.
 
−
Click on the WRENCH in the add-on menu.
 
−
Select the record you created from the drop down list.
 
−
Click UPDATE to see your new data.
 

Latest revision as of 16:22, 4 February 2019

Design Blocks are used to add design elements to a page to make certain information stand out, such as Contact Us forms, etc.

Getting Started

Click here for information on Installing Add-Ons.

To use Design Blocks, login and click ADMIN, MANAGE ADD-ONS, DESIGN BLOCKS.

To set preferred theme and font, select DESIGN BLOCK SETTINGS.

In the first field choose a font, which is indicated by font- .....

In the second field choose a theme, which is indicated by theme-....

Click OK to save changes.

Terms

Contact US 
Enables you to drop a Contact Us form on the page that collects data from a user and can redirect to a Thank You page after the user submits the form.

DB-CONTACT-US.png

Four Column 
This allows you to add 4 equal columns to a page, with the ability to add different types of add-ons in each column.

DB-4-Tile-Flip.png

Three Column 
Adds three equal columns on a page with the ability to add different add-ons within each column.

DB-Info-Panels.png

Two Column 
Adds two equal columns on a page with the ability to add different add-ons within each column.

DB-2Col.png

Two Column Left 
Adds two columns on a page where the left one is wider than the right one. The user can add different add-ons within each column.

DB-2Col-Left.png

Two Column Right 
Adds two columns on a page where the right one is wider than the left one. The user can add different add-ons within each column.

DB-2Col-Right.png

Tile 
Provides a way to add text that you want to stand out, including a headline, a brief description, an image and a button with unique text and a link.

DB-Headline.png

Hero Image 
Provides a way to add a section title, a brief description, an image background and a button with unique text and a link.

DB-HERO.png

Sliders 
Enables users to add a slider with up to 10 slides to a page with an image, text and a link.

DB-Sliders.png

Text 
Enables you to drop a section on a page with a title and descriptive text.

DB-Text.png

Text and Image 
Enables you to drop a section on a page with a picture, title and descriptive text.

DB-Text-Image.png

Roles

Administrator 
The site user with administrator rights who configures and maintains the ecommerce system.
User 
Anyone with a record in the People table.
Customer 
The user who purchases online, creating an invoice, paying, etc.

How-To

Add a Design Block Section to a Web Page

When you are on the web page where you would like the banner to appear and are logged on as an Administrator, you will select the EDIT option from the menu. Next, click the paper/pencil icon. This will take you to the Edit record for your page.

On this screen put your cursor in the Copy box, click on the Add-on drop down menu and select LP-Name of specific item you want to drop on page. An image with the Contensive logo will appear in the Copy Box. Click OK at the top of the page to save the banner to your webpage.

After you click OK, you will go to ADMIN, MANAGE ADD-ONS, DESIGN BLOCKS, and then choose the table from the list below which matches the add-on you dropped on the page. Once you select that, you will click ADD to add a new record and follow the steps for each specific landing page section.

Contact US

Click on DB CONTACT US under Design Blocks.
Click ADD.

  • In the DETAILS tab, add information for Form Title.
  • In the CSS tab choose a font in the firstCustomCssClass field and choose your color theme in the secondCutomCSSClass field.
  • In the FORM SETTINGS tab:
  1. Add a Title to display
  2. Add a Description with more details for the visitor
  3. Add Button Text to show up on the button
  4. Add a URL for the Action Page (such as /Thank You) that the user is redirected to after clicking the button
  5. Add the title for the Thank You page
  6. Add the text for the Thank You page
  7. Specify the number of seconds before you are directed to the page specified in Thank You Redirect Page field. If you set the Thank You Reload Seconds to 0, then the user will stay on the Thank You page until they choose to go to another page.

Click OK to save changes.

NOTE: Go to ADMIN>DESIGN BLOCKS>DB CONTACT US DATA to see information submitted through the Contact Us form.

Four Column

Click on DB FOUR COLUMN under Design Blocks.
Click ADD.

  • In the DETAILS tab, select which Add-on you want for each of the four columns. You may choose the same one for all columns or a different one for each.
  • Click OK to save changes.

Three Column

Click on DB Three COLUMN under Design Blocks.
Click ADD.

  • In the DETAILS tab, select which Add-on you want for each of the three columns. You may choose the same one for all columns or a different one for each.
  • Click OK to save changes.

Two Column

Click on DB Two COLUMN under Design Blocks.
Click ADD.

  • In the DETAILS tab, select which Add-on you want for each of the two columns. You may choose the same one for all columns or a different one for each.
  • Click OK to save changes.

Two Column Left

Click on DB Two COLUMN Left under Design Blocks.
Click ADD.

  • In the DETAILS tab, select which Add-on you want for each of the two columns. You may choose the same one for all columns or a different one for each.
  • Click OK to save changes.

Two Column Right

Click on DB Two COLUMN RIGHT under Design Blocks.
Click ADD.

  • In the DETAILS tab, select which Add-on you want for each of the two columns. You may choose the same one for all columns or a different one for each.
  • Click OK to save changes.

Tile

Click on DB TILES under Design Blocks.
Click ADD.

  • In the DETAILS tab:
  1. Select an image by clicking CHOOSE FILE.
  2. Add a headline for the new section.
  3. Add EMBED CODE for things such as advertisements or videos.
  4. Enter descriptive text
  5. Add text for a button
  6. Provide the URL for the button to link to.
  • In the Styles tab choose a font and theme. Also click on Top Padding, Right Padding, Bottom Padding or Left Padding if you want to leave space in any of those areas.

Click OK to save.

Hero Image

Click on DB HERO IMAGE under Design Blocks.
Click ADD.

  • In the DETAILS tab:
  1. Add a Name for the new record, which shows as the title.
  2. Add a Sub Title for the new section.
  3. Upload an Image Background. Recommended minimum width is 1920 px; recommened maximum height is 1085 px.
  4. Select the Shade for the CSS Class.
  5. Enter text to display on the button.
  6. Enter the URL to link to when a user clicks on the button. Include http:// or https:// as part of the URL.

Click OK to save.

  • In the STYLES tab select the Font and Theme. Also select Top Padding, Right Padding, Bottom Padding or Left Padding if you want to leave space in any of those areas.

Slider

Click on DB SLIDER under Design Blocks.
Click ADD.

  • In the DETAILS tab add a Name for the new record.
  • In the CSS tab choose a font in the firstCustomCssClass field and choose your color theme in the secondCutomCSSClass field.
  • In the SLIDERS tab:
  1. Upload an image for the first slide.
  2. Add text for the first slide.
  3. Add the URL to forward to when a user clicks the image. Include http:// or https:// as part of the URL.
  4. Repeat for each slide that you want to display.
  5. Click OK to save slides.

Text

Click on DB TEXT under Design Blocks.
Click ADD.

  • In the DETAILS tab:
  1. Add a Name for the new record, which appears as the title.
  2. Enter descriptive text.
  • In the Styles tab choose a font and theme. You can also check the boxes next to Top Padding, Right Padding, Bottom Padding and Left Padding if you want to leave space in any of those areas.

Click OK to save.

Text and Image

Click on DB TEXT AND IMAGE under Design Blocks.
Click ADD.

  • In the DETAILS tab:
  1. Add a Name for the new record, which appears as the title.
  2. Enter descriptive text.
  3. Upload the image.
  • In the Styles tab choose a font and theme. You can also check the boxes next to Top Padding, Right Padding, Bottom Padding and Left Padding if you want to leave space in any of those areas.

Click OK to save.

Retrieved from "http://wiki.kmacloud.net/index.php?title=Design_Blocks&oldid=3855"