How To Create Webpages With Adobe Spark

Overview

Adobe Spark offers powerful tools for building dynamic, professional-looking web sites. You can customize one of their existing templates with your own content (text, images, video, etc.), or you can begin with a blank canvas to build your site. This help page will help you get started and will explain some of the features that you can customize to build your beautiful web page(s).

Beginning a New Adobe Spark Web Page Project

To begin creating with adobe spark, head over to spark.adobe.com and either create or log-into an existing account. CSUCI faculty, students and staff can use their school enterprise accounts to sign into Adobe Spark to gain access to their provided Premium accounts. To do this, click the “Log in with school account” button and use your CSUCI login information to log in.

Once you have logged in, you will be taken to your account homepage.

Illustration of a account homepage for Adobe Spark web app
Illustration of a account homepage for Adobe Spark web app
Illustration of the "+" button for new project creation on the account homepage
Illustration of the “+” button

To create a new project, click on the “+” button at the top center of the page, this will take you to the Spark Templates page.

On the Spark Templates page, you will see that templates for projects are broken out into project types tabs; “All”, “Graphics”, “Web Pages” and “Videos”. Navigate to the “Web Pages” tab at the top center of the screen if you wish to use a pre-made template for your web page project. If you wish to refine your template search, use the search bar at the top of the Spark Templates page to type in a type of project like “presentation”, “report”, “portfolio”, etc. If you wish to start with a blank project, navigate to the “Start from scratch” button on the top left hand side of the page and choose “Web Page” from the dropdown menu.

Illustration of Adobe Spark Templates page with labels for locating options to create a new Adobe Spark Web Page
Illustration of Adobe Spark Templates page with labels for locating options to create a new Adobe Spark Web Page

Using the Adobe Spark Page Editor

Once you have chosen a template or a blank project, you will be taken to the Adobe Spark Page Editor where you can begin to assemble your web page.

Illustration of a new Spark Page within the Adobe Spark Page Editor
Illustration of a new Spark Page within the Adobe Spark Page Editor

The Cover Area

Regardless of wether you start with a themed or no-themed Spark Page, you will be presented with the Cover Area when you first enter the Adobe Spark Page Editor. The Cover Area has a title and a subtitle section already built into it since it will be the first thing people will see when they enter your webpage. Enter a text into the title or subtitle area, click on either placeholder text areas and start typing to replace the text with your own wording.

Animated Example of Adding a title and subtitle to a Adobe Spark Page Cover Area
Animated Example of Adding a title and subtitle to a Adobe Spark Page Cover Area

You can also add a photo background to your Cover Area by clicking on the “+” button at the bottom of the area and choosing “Photo” from the pop-up menu. This will bring up the “Add Photos” Menu on the right side of the editor where you can choose to add photos from free image resources, paid Adobe Stock, or your own photos either from your computer or file sharing accounts.

Animated example of adding a photo background to a Cover Area using the "+" button at the bottom of the Cover Area
Animated example of adding a photo background to a Cover Area using the “+” button at the bottom of the Cover Area

Building Out Your Webpage With The “+” Button

Adobe Spark Pages are designed as “linear” webpages, meaning that users will need to scroll up and down to navigate the page. Building out the webpage works in the same manner in the Adobe Spark Page Editor. To add a new “section” or more content to your page, scroll down until you see a new content section appear with its own “+” button. You’ll see more and more “+” buttons as you start building out more and more content on your page. This is where you can add media. Clicking or hovering over the sections’ “+” button will bring up the Media Menu with all of the options you have to add different pieces of media to your site.

Animated Example of scrolling down in the Adobe Spark Page Editor to reveal a new section and the sections' Media Menu
Animated Example of scrolling down in the Adobe Spark Page Editor to reveal a new section and the sections’ Media Menu

Adding Different Types of Media To Your Webpage Sections

Illustration of a "+" button opened up in a new content section with the Media Menu displayed
Illustration of a “+” button opened up in a new content section with the Media Menu displayed

Photos

Illustration of the "Photo" button
Illustration of the “Photo” button

You can add even more photos and images to your webpage by clicking on the “Photo” Button in the Media Menu. This will bring up the “Add Photos” Menu on the right side of the editor where you can choose to add photos from free image resources, paid Adobe Stock, or your own photos either from your computer or file sharing accounts.

Animated example of adding a photo to an Adobe Spark Page using the "Photo" Button in the Media Menu and the "Add Photos" Menu
Animated example of adding a photo to an Adobe Spark Page using the “Photo” Button in the Media Menu and the “Add Photos” Menu
Editing Photos

Once a photo is in the Adobe Spark Page Editor, it can be adjusted in a few ways. You can add a caption by clicking on the text box below the image. You can also delete, replace or adjust how the image is displayed within the webpage by clicking on the image and cycling through the display options that appear in the pop-up menu above the image. Keep in mind, if an image has a caption, it will automatically adjust how it is displayed when display options for its parent image changes.

Animated example of adding a caption to a image as well as modifying its display options on a Adobe Spark Page
Animated example of adding a caption to a image as well as modifying its display options on a Adobe Spark Page

Text

Illustration of the "Text" Button
Illustration of the “Text” Button

You can add text anywhere in your webpage by clicking on the “Text” Button in the Media Menu. This will provide you an empty text area where you can begin typing. You can press “ENTER” key on Windows keyboards or “RETURN” key on Mac keyboards to start a new line of text. By default, these new lines will be set to normal text.

Editing Text

The text area will have a few alignment and formatting controls such as; Heading 1 and Heading 2 formats, bullet points, numerical listing, Bolding, Italicizing, hyperlinking, and text justification.

Animated Example of adding and editing text within the Adobe Spark Page Editor
Animated Example of adding and editing text within the Adobe Spark Page Editor

To delete text, simply highlight it and delete it, you may have to press the backspace key one more time just to make sure the text area is truly off of the page. You can tell if a text area is completely gone if there is only one “+” on either side of the existing content.

Animated example of deleting text from the Adobe Spark Post Editor
Animated example of deleting text from the Adobe Spark Page Editor

Buttons

Illustration of the "Button" Button
Illustration of the “Button” Button

You can create a button that links to another Spark Page or external website by pressing on the “Button” Button.

Editing Buttons

You can click on a button in the Spark Page Editor to delete or edit the button.

Animated example of editing a button from the Adobe Spark Post Editor
Animated example of editing a button from the Adobe Spark Page Editor

Videos

Illustration of the "Video" Button
Illustration of the “Video” Button

You can add an external video (a video hosted on a different site) into your webpage by pressing on the “Video” Button. This will then prompt you to add a viewable URL from either YouTube, Vimeo or Adobe Spark Video were your desired video is hosted. Once the link has been saved, your video will be playable on your website

Animated example of adding a video into your webpage from the Adobe Spark Post Editor
Animated example of adding a video into your webpage from the Adobe Spark Page Editor
Editing Videos

Since videos are not hosted or created in the Spark Page Editor, there are very limited options to edit them. Clicking on a video in the Spark Page Editor will either allow you to change the URL you are taking the video from with the “Edit” Button, or deleting the video area entirely from your webpage with the “Delete” Button.

Illustration of the two edit options; "Edit" and "Delete", available for videos in the Adobe Page Editor
Illustration of the two edit options; “Edit” and “Delete”, available for videos in the Adobe Page Editor

Photo Grids

Illustration of the "Photo grid" Button
Illustration of the “Photo grid” Button

Photo grids are collections of multiple images that you can upload to your site that automatically adjust themselves to appear in a space saving grid together. To add a photo grid, press the “Photo grid” Button in the Media Menu. This will bring up the “Edit Grid” page. Just like regular photos, the “Add Photos” Menu on the right side of the editor where you can choose to add photos from free image resources, paid Adobe Stock, or your own photos either from your computer or file sharing accounts. Unlike regular photo options, photo grids will allow you to upload multiple photos at once. You will be able to preview and rearrange your photo grid on the left side of the editor.

Animated example of adding a photo grid into your webpage from the Adobe Spark Page Editor
Editing Photo Grids

Once a photo grid is on a webpage you can add a caption to it by clicking the “Add a caption” prompt below the photo grid. You can also click the photo grid itself to bring up the “Edit” and “Delete” Buttons. Keep in mind, if you decide to delete a photo grid off of a page, the action cannot be undone and all the images will disappear from the webpage.

The “Edit” Button will take you back to the “Edit Grid” page were you can add, delete, enlarge, shrink or rearrange individual photos based on their individual edit parameters that appear when hovering over a select image. To save changes made to a photo grid, press the “Save” Button at the top right hand side of the “Edit Grid” page or press the “Cancel” Button next to the “Delete” Button to cancel the edits made.

Animated example of editing a pre-existing photo grid within the Adobe Spark Post Editor.
Animated example of editing a pre-existing photo grid within the Adobe Spark Page Editor.

Glideshows

Illustration of the "Glideshow" Button
Illustration of the “Glideshow” Button

Glideshows function as slideshows with images and accompanying text or media that users can vertically scroll through while navigating your webpage. To add a glideshow, press the “Glideshow” Button in the Media Menu. This will bring up the “Edit glideshow” page. Just like regular photos, the “Add Photos” Menu on the right side of the editor where you can choose to add photos from free image resources, paid Adobe Stock, or your own photos either from your computer or file sharing accounts. Unlike regular photo options, glideshows will allow you to upload multiple photos at once. You will be able to preview and rearrange the images in your glideshow on the left side of the editor.

Animated example of adding a glideshow into your webpage from the Adobe Spark Post Editor
Animated example of adding a glideshow into your webpage from the Adobe Spark Page Editor
Editing Glideshows

Once a glideshow is created within a webpage, you will be able to scroll through the images in the main Spark Post Editor and add text or other media in the media areas that appear above each image with the “+” buttons that is revealed when a user scrolls down the webpage. You can also click the glideshow itself to bring up the “Edit” and “Delete” Buttons. Keep in mind, if you decide to delete a glideshow off of a page, the action cannot be undone and all the images will disappear from the webpage.

The “Edit” Button will take you back to the “Edit glideshow” page were you can add, delete or rearrange individual photos based on their individual edit parameters that appear when hovering over a select image. To save changes made to a glideshow, press the “Save” Button at the top right hand side of the “Edit glideshow” page or press the “Cancel” Button next to the “Delete” Button to cancel the edits made.

Animated example of editing a pre-existing glideshow within the Adobe Spark Post Editor by adding text and videos
Animated example of editing a pre-existing glideshow within the Adobe Spark Post Editor by adding text and videos

Split Layouts

Illustration of the "Spit layout" Button
Illustration of the “Spit layout” Button

Split layouts are yet another way to an image with accompanying media and text at the same in your webpage. To add a split layout to your webpage, click on the “Split layout” button in the Media Menu. A split layout will add two boxes to your site that share the two halves of the entire screen. One box will be for a main image, the other box will be for text and other media, just like boxes within Glideshows. Clicking on the main image box labeled “Add your image” will bring up the “Add Photos” Menu on the right side of the editor where you can choose to add photos from free image resources, paid Adobe Stock, or your own photos either from your computer or file sharing accounts. Clicking on the “+” in the other box will allow you to add text or other media you want to accompany your main image in the spilt layout.

Animated example of adding a split layout into your webpage from the Adobe Spark Post Editor along with selecting a image and adding text to display in the split view
Animated example of adding a split layout into your webpage from the Adobe Spark Page Editor along with selecting a image and adding text to display in the split view
Editing Split Layouts
Illustration of the “exchange” button

Split Layouts can be edit by choosing which side of the website you want the main image and content to appear by using the “exchange” button in the middle of the two content areas of the Split Layout.

Other options for editing include adding additional text and media into the content area or replacing/editing the focal point of the main image. If you wish to delete the Split Layout altogether, simply click on any blank area within the additional content box and click on the “Delete layout” button that appears above the “exchange” button in the middle of the two content areas.

Animated example of editing a pre-existing Split layout within the Adobe Spark Post Editor by exchanging the position of content area with the main image with the "exchange" button, replacing the main image, clicking a "+" button to add more media, and finally using the "Delete layout" button to delete the Split layout
Animated example of editing a pre-existing Split layout within the Adobe Spark Page Editor by exchanging the position of content area with the main image with the “exchange” button, replacing the main image, clicking a “+” button to add more media, and finally using the “Delete layout” button to delete the Split layout

Reviewing and Sharing Your Adobe Spark Page

Once your webpage is at a point to review or share, you will find all of your review and sharing options for your webpage at the top center area of the Adobe Spark Page Editor displayed as a set of four buttons.

Illustration of the "Settings", "Preview", "Present", and "Share" Buttons at the top center of the Adobe Spark Page Editor
Illustration of the “Settings”, “Preview”, “Present”, and “Share” Buttons at the top center of the Adobe Spark Page Editor

The Settings Button

Illustration of the "Settings" Button
Illustration of the “Settings” Button

The “Settings” Button will allow you to turn on and off the branded Header and Footer as part of your pre-existing brand that you have set up for your Spark account. Toggling on and off the “Header and footer” slider in the “Settings” Button drop down menu will determine wether or not your logo will be displayed at the top and bottom of your webpage when presented or shared with others.

Animated example of using the "Header and footer" slider in the "Settings" Button drop down menu to turn on and off branding for your webpage.
Animated example of using the “Header and footer” slider in the “Settings” Button drop down menu to turn on and off branding for your webpage.

The Preview Button

Illustration of the "Preview" Button
Illustration of the “Preview” Button

The “Preview” Button will allow you to preview how your webpage will look to people viewing it. Once the “Preview” Button is selected, the Spark Page Editor will drop away and the preview site will load and display on the screen. To exit preview mode, click on the circular “X” button in the top right hand corner of the preview to bring back the Spark Page Editor.

Animated example of using the "Preview" Button at the top center of the Adobe Spark Page Editor to preview a webpage
Animated example of using the “Preview” Button at the top center of the Adobe Spark Page Editor to preview a webpage

The Present Button

Illustration of the "Present" Button
Illustration of the “Present” Button

The “Present” Button will allow you to present your webpage as an animated slide show presentation that scrolls vertically (Unlike other slideshow applications like Powerpoint or Google Slides that scroll horizontally).

Pressing the “Present” Button will drop away the Adobe Spark Page Editor and open up a full screen window of the webpage in presentation mode with each section of the site acting as individual slides to present. The presentation can be advanced and reversed either by using a mouse scroll wheel, the left and right arrow keys on a keyboard, or the “up and down” arrow buttons at the bottom right hand corner of the presentation. To shrink the presentation back to a windowed size, click on the windowed mode button next to the “X” button on the top right hand corner of the presentation window. To exit the presentation mode of the webpage, click on the circular “X” button in the top right hand corner of the preview to bring back the Spark Page Editor.

Animated example of using the present button to open up a webpage in presentation mode and navigating through the presentation
Animated example of using the present button to open up a webpage in presentation mode and navigating through the presentation

The Share Button

Illustration of the "Share" Button
Illustration of the “Share” Button

When the webpage is ready to share with the reset of the world, you can use the “Share” Button to bring up a menu of your sharing options. You can either share a URL to your webpage, share the webpage directly to a social media account, embed the page on a website, or print out a PDF version of the site with each section of the webpage acting as individual pages of the PDF file.

Illustration of sharing options under the "Share" Button
Illustration of sharing options under the “Share” Button

Updated on August 22, 2019

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support
css.php