Now that you have your awesome new slider, it is time to get that added to your website. With Responsive Content Slider, there are three options that you can use to place the slider on your website; Embedding, Standalone or Publish to S-Drive. Embedding is for adding a slider to an existing page (most of the time you will always be using this option) whereas Standalone generates a slider that is a website itself.
The Publish to S-Drive option works similar to Embedding but the files are stored on your S-Drive account (no need to manually upload files). Simply paste the HTML markup into any page and the slider will appear. This option is the best choice if you want to add your sliders to multiple pages across multiple domains.
Option1: For Embedding
Adding a Content Slider to an existing page.
Step 1:
Once you have created your slider and are ready to upload, you will need to export the slider by clicking the Export toolbar icon (COMMAND+R/CTRL+R) and select For Embedding.
Step 2:
Step 3:
Step 4:
Now, you will need to copy the provided markup from Responsive Content Slider to both the <body> and <head> and paste it onto the page where you want it to appear. Next open the "exported" folder and upload all files and folders contained within it to the same location as your page using a separate FTP client.
Option 2: Standalone
Uploading a Content Slider directly to your website.
Once you have created your slider and are ready to upload, you will need to export the slider by clicking the Export toolbar icon (SHIFT+COMMAND+R/SHIFT+CTRL+R) and select Standalone.
Step 1:
Step 2:
Step 3:
Open the "exported" folder and upload all files and folders contained within to your server using a separate FTP client.
Be Responsive!
For your slider to be responsive within page, your website also needs to be responsive. Our Responsive Site Designer provides a flexible core that can adapt based on the viewer’s screen size. You can build the structure of your website in Responsive Site Designer and use the comprehensive design tools to visually style elements without having to dive into the code.
With access to tools to add images, background images, gradients, shadow, radius, transitions and state functionality (hover, active, focused, visited). There are also cool features like a web inspector tool, a pane for adding metadata and footer code, plus features for integrating and customizing font icons (1200+ icons) and so much more.
Option 3: Publishing to S-Drive
Publishing your slide to S-Drive
Now that your slider is ready to go live, you’ll want to explore your options for putting it on the web. You can publish to S-Drive by entering your CoffeeCup Account information or export your slider and add it to any website server.
It’s amazingly simple to set this up. To connect to the CoffeeCup servers, click the Settings toolbar button and click the Publish icon. Once you’ve entered your CoffeeCup account information, you’ll be able to put your slider on the web with a single click!
Simply enter your CoffeeCup user name and password in the Email Address and Password fields, then click Go! If you don’t have a CoffeeCup account, you can sign up on the CoffeeCup website.
Important Note!
To be able to upload your slides to S-Drive, you must be on a paid account (sorry, no free accounts are allowed). If you don’t have a paid CoffeeCup plan, you can sign up on the CoffeeCup website for one. With your paid plan, you will gain access to form publishing, image hosting, email sending and more!
If you have more than one CoffeeCup web address you’ll be able to select the appropriate location. Once you log in with your CoffeeCup account information, Responsive Content Slider displays all of your web addresses that support slider publishing.
Select the one you wish to use for one-click publishing, and everything’s set up. Click refresh if you’ve enabled a web address that’s not in the list.
Now, when you’re ready to put your slider online, just click the Publish toolbar button.
If you haven’t saved the slider project, you’ll be prompted to do so. You can access these files later if you want to use your slider somewhere other than the CoffeeCup servers, such as a website project or uploading to a web server via FTP.
Responsive Content Slider will then publish your slider, letting you know what’s happening along the way.
Success!
If there are no errors, then your slider was successfully uploaded to your S-Drive account! You can click the link to view it online and move on to adding the slider to your page by following the steps under Post-Publishing Options.
Post-Publishing Options
When your slider has been successfully published, you’ll be given a link to view it online as well as an embed code that can be placed within any webpage, anywhere. Since all the slider’s files are hosted on S-Drive, you can use this embed code anywhere you want without having to upload your files to another server.
Adding the slider to your page
Now that you have published your slider to S-Drive, next you have to add the markup to your page for it to appear. Start with Step 1 and paste in the markup into the <head></head> section. Next, for Step 2, place the markup inside of the <body></body> tag where you want the slider to appear. And that is it! Just repeat the process for each page that you want to add the slider to.
