Creating New Guides and Articles Inside the Designer

Last updated: 18/04/2019

Page Contents

  1. Using the Designer
  2. How to Create Another Guide Article
  3. How to Add Another Guide Block to the Index

Using the Designer

Before you start using the Webflow Designer:

Taking this course will allow you to get familiar with the tool and some basic web design & development concepts before getting your hands on the site.

How to Add Another Guide Article

Step 1: Create Another Guide Article

If you want to add another Guide Article page, the steps are:

  1. Copy an existing Guide page
  2. Update page content
  3. Update page cover photo
  4. Update pagination links
  5. Add new page link to sidebar

1.1 Copy an existing Guide page

Start by copying an existing Guide page that has similar content to the new Guide page.

Give the page a name – the slug will be created automatically based on the name – and choose the correct folder for the Guide page to live in. If the folder doesn't exist, create a new one.

Click CREATE to create the new page and be taken to it in the Designer.

1.2 Update page content

On the newly created page, delete the existing content inside the Rich Text Blog box and replace with new content – you can even copy and paste directly from an existing Medify page, including images.

Tip: If you want to add a blue info block, you must copy an existing block from another page. Go to another page, select the block called 'info block', and copy it.

Copy this

Then go back to the new page and paste it in underneath the Rich Text Blog block. To continue writing the article underneath the info block, just copy the Rich Text Blog block above and paste it in underneath the info block. Your HTML structure should then look like this:

1.3 Update page cover image

To update the cover image, select the Block Hero block, it will also have an additional class, e.g. apply to medical school

Duplicate the additional class by hovering over it and clicking on the arrow, then select Duplicate:

Then call the new class something that relates to the article title.

Next, change the background image by going to Backgrounds > Click on the image title.

This will open the cover image options. Next click Choose image:

Then either select an existing image or upload a new one:

Once you have selected a new image, click Cover to make sure the image always fills the entire block.

That's it!

1.4 Update pagination links and text

Next, update the text inside the pagination block. You can update the links for the pagination blocks by selecting the Pagination Block and going to the block settings.

5. Add new page link to sidebar

Tip: The sidebar is a symbol, which means if you update it on one page, it will update everywhere on the site.

Add a link to your new page by double clicking on the sidebar, then copy and paste the List Item that will sit directly above the new List Item. Once that's done, just update the text and the link for the new list item. That's it!

Step 2: Add Another Guide Block to the Index

Tip: This process works basically the same on all Guide index pages – e.g. Guides, Admissions Guide and Applying to Medical School.

The steps are:

  1. Copy and paste an existing Guide Block
  2. Update text
  3. Update thumbnail image
  4. Update links

2.1 Copy and paste an existing Guide Block

To add a new Guide Block, just copy and paste an existing Guide Collection Block Parent and drag it into position:

2.2 Update text

Update the text for the new Guide Block.

2.3 Update thumbnail image

Update the thumbnail image for the new Guide Block in the same way as updating the Guide Article cover image in Step 1.3

2.4 Update links

Update all the links for the new Guide Block, these are:

  1. Title link
  2. Featured Thumbnail link
  3. Read more link

Step 3: Publish and Test!

After you have published your changes, do a quick test on a variety of devices and browsers to make sure everything looks OK.