|
Shift4Shop's HTML Builder can help you add design elements to some of your content pages. This article will provide you some steps to get started with the builder and its interface.
Important
In order to use the HTML Builder, please make sure your store is using a CORE theme. Also make sure that your Store URL and Secure URL both match.
Where to find the HTML Builder
The HTML Builder is currently available for use on your store's Home page as well as your non-linked Site Content pages (i.e. Menu Link and Extra Pages) and blog articles.
To access the HTML Builder for the Home Page:
- Log into your Shift4Shop Online Store Manager
- Using the left-hand navigation menu, go to Content >Site Content
- Click on the "Edit" button located in the "Home Page" Section
- Once the page is open, click on the "Launch Page Editor" button
To Access the HTML Builder on your Menu Pages:
- Log into your Shift4Shop Online Store Manager
- Using the left-hand navigation menu, go to Content >Site Content
- Click on the "Edit" button located in the "Top Menu Links" section
- Locate the page you would like to use the HTML Builder on and click on its Action Wheel located on the far right of grid listing.
- Select "Content" from the Action Wheel to proceed.
- Once the page is open, click on the "Launch Page Editor" button
To Access the HTML Builder on your Extra Pages:
- Log into your Shift4Shop Online Store Manager
- Using the left-hand navigation menu, go to Content >Site Content
- Click on the "Edit" button located in the "Footer Extra Pages" section
- Locate the page you would like to use the HTML Builder on and click on its Action Wheel located on the far right of grid listing.
- Select "Content" from the Action Wheel to proceed.
- Once the page is open, click on the "Launch Page Editor" button
Important
In order to use the HTML Builder on your Menu Link and Extra Pages, those pages must be unlinked. In other words, they need to be regular content pages that are not linked to another page or URL.
Also, if the home or content pages contain content that was added through the older WYSIWYG editor, the new HTML Builder option will not appear. To fix this, you will need to go to the content page, turn WYSIWYG off, remove all of the previously created content and save the page. Once the page is saved and reloads, you will see the new HTML Builder editor.
To Access the HTML Builder on your Blog articles:
- Log into your Shift4Shop Online Store Manager
- Using the left-hand navigation menu, go to Content >Blog
- Click on the "Add New" button located in at the top right of the page to add a new blog post.
Note
Any existing blog articles written before the HTML editor function was added to blogs will need to be edited in the previous WYSIWYG method. To use the HTML builder on old articles, you would need to turn off WYSIWYG on the article, delete the article's data, save and start it anew with the HTML builder.
Also note that the HTML builder is only for the actual blog post/article. The short post will still use the previous WYSIWYG method.
When creating a new blog post/article with the HTML builder, the Short Post will automatically be taken from the HTML builder and added as short post (using WYSIWYG).
- Enter information for the blog post's Name, Author, Post Date, etc.
- Scroll down to the "Article Content" section and click on the "Launch Post Editor" button
Important
In order to use the HTML Builder on your Blog posts, your store will need to use HTTPS secure mode for both store URL and Secure Store URL.
Using the HTML Builder
When you first open up the HTML Builder, you will see an empty building space with a message labeled "Click to add content" in the center.
This is your work space for the HTML Builder. In the case of the Home Page, you will have this section available in the Header and Footer of the Home Page. For extra content pages, you will see only the one work space.
Adding Content
When you click on the initial work space, you'll see a few options of design elements to add including paragraph, image, headings and other common design elements.
Clicking on the "MORE..." button will show you additional elements to choose from. These will be categorized into Article, Headline, Photo, Profile and other formats to help you locate the elements you need.
Each element you add to the work space will be contained within a visible block. As you click on areas of the block, you will have various ways of controlling the content found in each block.
Additionally, on the right hand side of your page, you will also see content components which can be dragged into the work space as needed.
Note
For the purposes of this article, we will not be going over each of the elements available to you (there are far too many). Instead, we will be going over the control options you have available to you when you add an element.
Editing Tools
As mentioned, each element you added to the workspace will be contained in its own block. As you click on a design block, you will see some tools that will let you edit the element. The following is a brief description of these editing tools.
Text Control
When clicking an element, at the top of the workspace, you will see your Text Control tools
- Bold - Use this icon to bold the text:
- Italic - Use this to italicize your text:
- Hyperlink - This icon may be used to link selected text:
When clicking this, you'll have the following options
- URL - The path to the link's destination
- Open in New Window - Select this checkbox if you'd like the link to open up in a new browser tab
- Text - This will be the text that is used on the link
- Title - While this will be the title that is shown when someone hovers over the link
- Align - This icon will let you select the text's alignment (left, center, right, full):
- Color - This will let you select the text color as well as the background color behind the text
- Paragraph - Use this icon to select the text's heading size (heading 1, 2, pre, etc)
- Font - This icon will let you select the text's font
- Next - Click this icon to see the next set of Text Tools
- Previous - Click this icon to see the previous set of Text Tools
- Formatting - Use this icon to format the text's properties (underline, superscript, etc)
- List - This icon will let you set the text as a numbered or bulleted list, as well as indent and outdent the text.
- Text Settings - This icon will let you manipulate the following text properties:
- Font Size
- Line Height
- Letter Spacing
- Icon - This icon will let you select text based iconography to be used instead of text.
- Image - This icon will let you insert an image in place of text. You can either drag and drop the image into the box, or otherwise select the image from your store's File Manager.
Note
When using images, please be sure to properly add images by using a file path/url for the image. Do not copy/paste an image as it will break the functionality of the page.
- Clean - This icon will effectively reset and remove whatever formatting you may have placed on the text (before saving)
Element Controls
When clicking on each element block, you will have access to the following tools.
- Add - Let's you add a new element along/within the one you've selected
- Move Up, Down, Left Right - Let's you move the elements directionally.
Note that in some cases, moving the element into certain directions will place it into its own block. Experimentation may be required.
- Duplicate - Lets you copy and insert the element
- HTML - This icon will show the specific element's HTML coding in case you'd like to manually edit it. (Click OK after making edits)
- Delete - Use this icon to delete the whole entire element.
Note
If you delete all elements and lose your workspace, don't panic! Just refresh the page and the "EMPTY Click to add content" section will return.
Image Controls
When adding and selecting images on your work space, you will have access to these tools
- Link - Clicking on this icon will let you specify the image being used.
- URL - Specify the path to the image
- Select - Click this icon to browse your site's File Manager for the image
- Title - This will act as the image's ALT tag. It will also appear on the image when someone hovers over the image.
- Link - Use this field if you'd like the image to click through to another location.
(Use the "Open New Window" checkbox to have the link open as a new browser tab)
CSS Styling
The elements will also have a "Settings" icon that will take you to the element's Style Settings. Essentially these will let you edit the element's CSS attributes and effects like border settings, shadow, position, color and other styling effects.
Saving Your Work
Once you are done using the HTML builder on the page, click on the "Save" button at the top right to publish your work.
Note
Although it might appear like you are editing your site in "Live" mode, none of your changes will appear on the live store front until you click save.
|