Creating a web page using Adobe Express

Available Files

The following files are available for download:

Download Exercise Files

Adobe Express (previously called Adobe Spark) is a design application that enables quick creation of graphics, print layouts, videos, web pages, and more. In these materials, we'll focus on the web page creation features of Adobe Express.

Adobe Express can be used to make web pages for a wide variety of uses, including presentations, parts of academic projects, advertising for events, and more. Creating a web page with Adobe Express is simple, and experience using HTML is not necessary in order to use Adobe Express to create a web page. Additionally, your work is automatically saved as you go, and you can collaborate with others to create a page as a group.

These materials will guide you through making a page in Adobe Express, including uploading images to a page, adding text, and exploring different layout types.

NOTE: If you're working through this tutorial as part of an in-person training session and need pictures to work with, a collection of cat photos is available for you to use during today's session in the Available Files section of this page.

Logging into your Adobe account and navigating to Adobe Express

To start the process of creating a web page, you’ll need to log in to your Adobe account and navigate to Adobe Express. We’ll start out by going to the Adobe at IU page to accomplish this.

To navigate to the Adobe at IU page, click on the following URL:
https://adobe.iu.edu
To start the process of logging in to your Adobe account, near the top of the Adobe at IU page,
Click

A new browser tab will load and display the Adobe ID login page.

NOTE: If you've recently logged in to your Adobe account, the Adobe ID login page may appear briefly before taking you to the Adobe homepage. If this happens, you can skip the following steps and move to step 2.

To continue the process of logging into your Adobe account, in the Email address text entry field,
type your email address in the username@iu.edu format, Click
On the IU Login screen, enter your IU username and passphrase, and authenticate with Duo if necessary. (This screen may not appear if you’ve previously logged into your IU account today.)

Once you're successfully logged in, the Adobe home page will load.

To open the Creative Cloud site, underneath the Welcome heading on the Adobe homepage,
Click Open Creative Cloud
To open Adobe Express, under the Create on web heading in the navigation on the left side of the screen,
Click

A new browser tab will open, and the Adobe Express homepage will load.

NOTE: You can also access Adobe Express through the Creative Cloud Desktop application – to do this, under the Featured heading in the navigation on the left side of the Creative Cloud Desktop window, Click Adobe Express. Your default web browser will open and load Adobe Express.

The Adobe Express homepage will load, and will look similar to the following image:

Adobe Express home screen. Description in following paragraph.

At the top of the screen is the search bar, which allows you to search through available project templates that can be used to start a new project. On the left side of the screen is the navigation – from here, you can create a new project, as well as view existing projects and brands. In the middle of the screen, there are suggestions for creating new projects. Across the bottom of the page, we can see thumbnails representing projects we’ve recently edited.

Creating a new web page

Let's create a new web page. We’ll start the process using the Create a Project button at the top of the navigation on the left side of the page.

To start creating a new project, at the top of the navigation on the left side of the page,
Click
To create a new web page, near the bottom left side of the menu,
Click

At this point, Adobe Express will load the Web Page editor, and the text “Add a title” and “Add a subtitle” will be displayed on a gray background, as shown in the following image:

New page displayed in the Adobe Express Web Page editor.

We also have a toolbar across the top of the page with options for changing the page's settings, as well as previewing, presenting, and publishing the page.

In order to save the page, you’ll need to give the page a title – let’s go ahead and do that now.

To add the page’s title, in the Web Page editor,
Click the text “Add a title”, type in the desired title for your page
To add a subtitle for the page, if desired,
Click the text “Add a subtitle”, type in the desired subtitle for your page

A moment after you finish typing the title and subtitle for your page, Adobe Express will save your changes. This is a good point to stop and add editors to the page, if you plan on collaborating with others to create the page.

NOTE: If you’re not adding editors to the page, you can skip ahead to the section Adding content to your page.

Adding editors to a page

If you plan on working with other people to create your web page, you’ll need to add them to the page as editors before they can add content to the page. Editors can be added at any point after the web page has been created. We can add editors to a page from the Share button in the upper right corner of the Adobe Express web page editor.

Things to know before collaborating on a page using Adobe Express

One of the features of Adobe Express is that multiple people can be designated as content editors for a file or web page. However, while multiple people can be given the editor role for a file, only one person can edit a page at a time. The Adobe Express editor works differently than you may be used to when editing a Google Doc or Office 365 document, where multiple people can work on a document at the same time. If someone is currently editing a page, that page is locked and other editors are unable to make any edits until the person currently editing the page exits the Adobe Express web page editor. If you’re creating a page as part of a group, you’ll need to coordinate and take turns editing the page.

To start adding someone to a project as an editor, in the upper right corner of the Adobe Express web page editor,
Click
To indicate you want to invite a collaborator to the project, in the menu that appears,
Click
To add someone as a collaborator, in the "Add names or emails" field,
type the full email address of the person you want to invite, press: Enter key

NOTE: If you're inviting an IU user to edit the file, make sure to type their email address using the format username@iu.edu.

If desired, enter a message in the "Message (optional)" field.
To send the invitation, underneath the right side of the message field,
Click

How to find projects you've been added to as an editor

In order to find projects you've been added to as an editor, you'll need to navigate to the Your stuff section of Adobe Express. From here, you can view projects you've created as well as projects that have been shared with you. You can access "Your stuff" from the Adobe Express homepage - the following accordion contains instructions for doing this.

To navigate to the Adobe Express homepage, in the upper left corner of the Adobe Express web page editor,
Click
To access your files and content that's been shared with you, in the navigation on the left side of the Adobe Express homepage,
Click
To view projects that have been shared with you, near the top right side of the "Your stuff" page,
Click , Click Shared with you

A list of projects that have been shared with you will display.

Adding content to a page

Once you've created a new page to work with, you can add content to it. There are eight different types of content you can add to a page:

Photo: Upload an image from your computer, or search for an image from Adobe Stock.
Text: Add text to the page and apply basic formatting options, such as making text into a heading, making ordered or unordered lists, bold/italicized text, adding a link to text, and changing the alignment of text.
Button: Create a button that links to another site.
Gif: Embed an animated gif file from Giphy.
Video: Embed a video hosted on YouTube or Vimeo. (Unfortunately, Adobe Express doesn't allow for uploading a video from your computer here, or linking to videos hosted in Kaltura at IU.)
Photo grid: Create a small gallery of photos. You can upload your own or use the ones available in Adobe Stock.
Glideshow: Scrolling slideshow where, as you scroll, content will appear over an image of your choice.
Split layout: Create a section of the page that’s split between a photo and a number of other content types to choose from such as another photo, text, a button, or a video.

Depending on what you’re creating the web page for, you may end up using only a few of the different content types, or you may end up using all of them. Adding content is relatively straightforward — the following accordion folds explain how to add different types of content to a page.

To start adding a photo to a page,
Click , Click
To upload a photo from your computer, near the top of the Photos panel,
Click
In the Open dialog box, navigate to where the photo you want to upload is located on your computer.
To select an image, in the Open dialog box,
Click the file, Click Open

The image will be added, and image options will appear in a menu over the image:

Image options. Described in following paragraph.

From here, you can adjust how the image is displayed, move its position on the page, replace the image, and delete the image.

To add text to a page,
Click , Click

A blinking cursor will appear, as well as formatting options:

Text formatting options, including the option to format text as a level 1 or level 2 heading, quotation, unordered and ordered list, and make text bold or italic. Additionally, you can add a link to text or change text aligment.

From here, you can start typing the text you want to add and apply basic formatting using the formatting options bar. The text will automatically be saved as soon as you stop writing.

To add a button to a page,
Click , Click
To add the text to be displayed on the button, in the button text field,
type the text you want to appear on the button
To add the web page you want the button to link to, in the website field,
type the URL for the site you want to link to
Adjust the button’s alignment as needed by clicking on the desired alignment button.
To save the button and finish adding it to the page, at the bottom of the Add a button pop-up,
Click

To add a gif to a page,
Click , Click
Copy the URL of the gif you want to add to the page, then paste it into the URL field in the Embed Gif pop-up.
To finish adding the gif to the page, at the bottom of the pop-up,
Click

To add a video to a page,
Click , Click
Copy the URL of the video you want to add to the page, then paste it into the URL field in the Add an Embedded Video pop-up.
To finish adding the video to the page, at the bottom of the pop-up,
Click

To add a photo grid to a page,
Click , Click
To start uploading a photo to add to the grid, near the top of the Photos pane,
Click
In the Open dialog box, navigate to where the photo you want to upload is located on your computer.
To select an image, in the Open dialog box,
Click the file, Click Open
Repeat steps b-d to add more photos to the photo grid.

When you’re done adding photos to the grid, you can view the options for each photo in the grid by clicking on it. Once you click on an image, the following controls will appear at the bottom of the selected image:

Photo grid controls overlaying a thumbnail image of a kitten standing on a laptop. Controls are described in the following paragraph.

Using these controls, you can replace a photo, adjust a photo’s position, change what size it is in the grid, and remove a photo from the grid.

To add a glideshow to the page,
Click , Click
To upload a photo to use in the slideshow, near the top of the Photos pane,
Click
In the Open dialog box, navigate to where the photo you want to upload is located on your computer.
To select an image, in the Open dialog box,
Click the file, Click Open
Repeat steps b-d to add more photos to the glideshow.
To add the glideshow to the page, in the upper right corner of the window,
Click

The images will be added to the page, and each image in the glideshow will have a field where you can add text, another photo, a button, or a video that will overlay the image in the background.

To add a split layout section to a page,
Click , Click

The page view will change to display two content areas - one for an image, and a second to hold another image, text, a button or a video.

To add an image to one half of the split layout, in the image half,
Click
To upload a photo from your computer, near the top of the Photos panel,
Click
In the Open dialog box, navigate to where the photo you want to upload is located on your computer.
To select an image, in the Open dialog box,
Click the file, Click Open
To add content to the other half of the split layout,
Click , Click the button for the kind of content you want to add
Follow the instructions in the appropriate section above to add the content to the other half of the split layout.

Styling content using themes

If you want to change the appearance of your page's content, you can use a theme to accomplish this. Themes are bundles of fonts, colors, and other appearance characteristics that you can apply to your web page to change how it looks. Themes are accessible through the Themes panel in the Adobe Express web page editor, as highlighted in the following screenshot:

Adobe Express web page editor, with the Themes panel open on the left side of the screen and displaying a number of pre-created themes.

Applying a theme from the Themes panel is as simple as clicking on the thumbnail for a desired theme.

NOTE: When applying a theme, as of the time these materials were last updated in February 2024, there's currently no way to undo applying a theme if you apply a theme and then decide you want to go back to using the default page theme. To go back to the default theme for the page, in the Themes panel, scroll until you see the thumbnail for the Crisp theme, then Click the Crisp theme thumbnail to apply the theme to your page.

To open the Themes panel, in the right side of the toolbar at the top of the web page editor,
Click
To apply a theme to the web page currently being edited, in the Themes panel,
scroll through the list of theme thumbnails until you see the theme you like, Click on the thumbnail for the desired theme

The selected theme will be applied to the page, and the page's appearance will be updated to use the theme's colors and fonts.

Creating a custom theme

You also have the option to create a custom theme that you can apply to your web page. When creating a custom theme, you can change the colors used for various page elements, the fonts used for the page's text, and the appearance of buttons, links and photos.

You can create a custom theme by clicking on the Create new theme tile at the top of the Themes panel. The theme editor will open, as shown in the following image:

Theme editor, with a panel on the left side of the page containing different page elements that can be customized, and an example page on the right that will show what the theme will look like when applied to a web page.

From here, you'll be able to change the appearance of many different page elements, such as the page's background and title color, the fonts used for the page, and more – all of the page elements you can work with are contained in the Edit theme panel on the left side of the screen. Changing the appearance of the different page elements is relatively straightforward, and as you make the changes to the different theme elements, you'll see them reflected in the example page on the right side of the screen.

Publishing a completed page

Once you've finished working on your page, you can publish it so others can view it in their web browser.

It’s important to note that there’s a difference between what you see when working in the web page editor (also called the active page) and the version of your page other people can see (also known as the published page). The active page is something only you (and anyone you've added as an editor) can see. In order for others to be able to view the page, you need to publish it. Publishing the page generates a shareable link that others can use to view your page. This link is different than the URL visible in the address bar when you're editing the active page — if someone else were to try to visit the page that URL, they would encounter an error.

If you want to see what your page looks like while it’s a work in progress, you can preview it using the controls at the top of the web page editor. Once you're done working on the page and are ready to share it with others, you can publish it. The following accordion folds contain steps for how to preview and publish a page.

NOTE: If you make changes to a page after it's been published, you will need to re-publish the page in order for the changes to appear on the live version of the page.

To preview a page and see how it looks in its current state, at the top of the page,
Click

A preview of your page will load, and you can scroll through it to see how it looks.

When you’re done previewing your page, to go back to the Web Page editor, in the upper right corner of the page,
Click

To start the process of publishing a page, at the top of the web page editor,
Click , Click

The Publish options appear - here, you can adjust the page’s title, assign a category to the page if desired, toggle whether or not the author’s name is displayed on the page, and include any image credits, if necessary.

Make any necessary changes to the information shown in the Publish options, if desired.
To publish the page and create the shareable link,
Click

Adobe Express will publish your page, and after a moment, the link to your published page is displayed. You can copy it and paste it into your browser’s address bar to look at your site, or send it to someone else so they can view it as well.

Troubleshooting issues with Adobe Express

Occasionally, Adobe Express will encounter an issue with the web site editor where some parts of the editor will stop working as intended. The following accordion folds provide troubleshooting steps for issues that have been encountered in the Adobe Express web page editor.

Sometimes Adobe Express won't allow you to upload an image for your computer – and in some cases, Adobe Express won't allow you to choose a photo from the Photos panel either.

If this happens, Adobe recommends you clear your browser's cache and then restart your browser, and if that doesn't work, try logging into your Adobe account in an incognito (Chrome) or private (Safari, Firefox) browser window. You may also want to try using Adobe Express from a different browser than the one you typically use.

Creating a web page using Adobe Express

Available Files

Logging into your Adobe account and navigating to Adobe Express

Step 1. Navigate to the Adobe at IU page, then log in to your Adobe account.

Step 2. Using the Adobe Creative Cloud site, navigate to Adobe Express.

Creating a new web page

Step 1. Use the Create a New Project button to create a new web page.

Step 2. Add a title to the page, and a subtitle if desired.

Adding editors to a page

Things to know before collaborating on a page using Adobe Express

Step 1. Add an editor to a project.

How to find projects you've been added to as an editor

Accessing projects you've been added to as an editor

Adding content to a page

Adding a photo

Adding text

Adding a button

Adding a gif

Adding a video

Adding a photo grid

Adding a glideshow

Adding a split layout

Styling content using themes

Step 1. Open the Themes panel and apply a theme to the page.

Creating a custom theme

Publishing a completed page

How to preview a page

How to publish a page

Troubleshooting issues with Adobe Express

Adobe Express won't allow you to upload a picture from your computer and/or allow you to choose an image from the Photos panel