How can we help?

Add the Featured Content Module to a Page

To begin working with this module, go to Website > Website Editor and navigate to the page where you need the new content. Once there, in the upper right, click on +Add Content. Choose the Body Content area unless you are adding the module to your Header or Footer.

You'll see the Featured Content module near the top of the list. Click to Add the module.

The new module will open and show some placeholder content. You'll notice our sidebar where you can configure and load your content and see your changes as you make them as they'll appear on the page when you're done. The main panel of the Edit tab allows you to work with the following areas, and all changes will apply to the overall content on the page, for example, whatever Image Style you choose will be applied to all images you load in your columns. Here are the main areas you can edit:

1. Header- If you want a Header for the module, click the Eye icon in the upper right and enter the text you want for your Header and you'll see it on the page.

2) Columns- The module initially loads with 4 Columns for you, but you can remove any you don't need using the Delete icons on the right. If you use the + Button to add more, they will go to a second row for the module on the page. You can use the Stack icon on the right to drag and drop them into a different order if you need. If you click on the Title Bar for a column the Edit Column panel will open and you'll be able to work with column-specific content and configuration (see below).

3) Image Style - There are four styles for images, in order from left to right below, Rectangle, Circle, Rounded Corners, and Diagonal Corners. Please note, these cannot be set individually for different columns, this setting applies to all images in columns.

4) Text Box Background - By default this is White and has black text but you can change it to Black(shown below)if you would prefer that with white text.

5) Opacity- This setting controls how 'solid' the Text Box Background is, and by default is set to 75%, which is partially transparent. You can either enter the number you want or use the slider to set whatever opacity works best for you.

6) Button Style - If you don't wish to use buttons in your new content module, you can click the Eye button to hide them, by default they are visible. There are three Button Styles, in order from left to right below, Square, Rounded Corner, and Rounded.

7) Button Color - You can either set your buttons to be White or to be your Brand Color. Your Brand Color is set under Settings > Marketing in the Emails tab, near the top of the page in the Brand Color area. This may have already been set for you during your onboarding, if not, you can either enter a color hex code or click to use the color picker and find the color you want. This color is also used for any automated marketing emails and most automated system emails. The White button color contrasts nicely with the Black background color, as pictured below.

9) Cancel or Save- At any time, you can click Save to save whatever changes you've made and have them publish to the page. This initial module configuration panel is the only place this can be done. If you don't need to make or save adjustments, you can Cancel and go back to the page. Please note, as with other modules you add to pages, the Featured Content module will be at the bottom of whatever else is on the page in that area (Body, Header, or Footer) and you can use the up and down arrows to move it up or down the page, as needed.

 

Configuring Column Content

As described above, if you are in the opening Edit panel and click on the Title Bar of a Column, the view pictured below will open and allow you to edit and configure content.

Here is what you can configure in the Edit Column view:

1. Image - If you hover over the default placeholder Image or any image you have uploaded, you will see buttons to Delete or Download the image, if you need to. If there is already an image present, you will need to first delete it, then you will be able to upload a new one. The system will focus on the center of the image if it is tall or wide and render it as a square, as pictured above with the tall waterfall image. At present, there is not another way to display the images on the page.

2. Title - The Title for the column will render in your website's default Heading style, size, and font, and can go to multiple lines if needed. If you don't need a title, you can click the Eye Button to hide it.

3. Body - You can click in this field to add Body text, and it will appear at your default body text size and format for your site. If you don't need text, you can click the Eye Button to hide it.

4. Button Text - If buttons are active from the main Edit panel, you will be able to edit the button text here as in the example above.

5. Button Link - You can click the Button Link button on the far right to pop up the system Page for linking to an on-site web page or to any of your uploaded Files. Or you can copy the full URL of any web page and paste it where it says Button Link Here. Please Note: on-site links only need everything after your .com or whatever your domain extension is, so they should start with a slash and go to the end of the page address, such as /shop.htm for you main web store page. If you don't want the link to take the visitor away from the current page, you can check the box to have it Open in New Browser Tab.

6. Cancel or OK - If you don't need to make any changes, you can click Cancel to go back to the main Edit panel. If you are done configuring the column, click OK and your changes will be kept and you'll be returned to the main Edit panel. Please note, clicking the Back control at the top of the Edit Column panel will also return you to the main Edit panel with all of your changes in place.

 

Working With the Settings Tab

The Settings tab is accessible from the Gear button at the top of the main Edit panel and has the relevant functions from our old Settings page for each module. Please note, in the Module Toolbar on the page there is no button for Settings as with older modules, and that is because we have moved it here. Here is what you can configure in the Settings panel:

1. Module Width - This module places content within the center 1170 pixels of the page width and will responsively scale down for mobile devices viewing the website. If you have a large background, up to 1920 pixels wide, you might want to set the module Extra Wide to fill that width. The center content will remain its current width, but the background will expand out up to 1920 pixels wide, which is the width of full HD displays. If you aren't using a large background image, keeping this setting on Normal is recommended.

2. Background Color - You can set a Background Color here by entering the color's hex code complete with the pound-sign / hashtag at the front, as pictured with the light gray below.

3. Background Image - If you have a background image you would like to use for the module it is best to first size it to either 1920 pixels wide if you are using the Extra Wide setting above or to 1170 pixels wide. When you click on the area to Upload Image, you will be add an image either From Server (previously uploaded images), From Computer, or From Camera if you are working on a mobile device. Please note, the image will focus on the vertical center, so if your background image is taller than the module content, the top and bottom of the background will not appear. In the example below, we are only seeing the vertically-centered one-third of the height of the image, but its full width is exactly 1170 pixels. Also note that as with column images, when you hover over the image thumbnail in the sidebar you can remove it to upload a new one or you can download the image, if needed.

4. Background Repeat - If you don't need your image to repeat, as in the example above, you can leave this field blank. If you have loaded an image that would need to repeat, such as the repeatable 'tile' pictured below, you can use a repeat control from the list below to govern how it will repeat in the background. For an image like the one below, it will automatically repeat across the width of the module (repeat-x) if you leave the field blank.

If using a background image that is not as tall as the module, you can set the Background Repeat to simply 'repeat' and it will fill the available background as pictured here:

Here is how all repeat options would work:

• repeat - For small, 'tile' images that are made to match up if set next to each other. This option will have the image repeat infinitely to fill the space of the background.
• repeat-x - For images that are the same height or taller than the module, this option will repeat the image across the width of the module in a single row. For images that are significantly taller than the module, the bottom of the background image row will be cut off.
• repeat-y - For images that are like a bar the width of the module's content area (1170px) or more, this option will repeat the image vertically as a background in a single stack. If you are using the Extra Wide setting for Module Width you will want this image to be at least 1920 pixels wide.
• no-repeat - This option will allow the image to load only once: so if you want an off-balance image, such as a background that appears only on the left side of the module you would use this option.

5. View Revisions - Just as in the older Settings page for other modules, you can click this link to see a list of saved versions of this Featured Content module. You can click on a Revision to revert the module to that previous save. Be sure to save your work first if you might want to come back to the currently configured module.