Logging Into Editor Mode

Enter Webflow editor mode by entering /?edit after the URL

https://www.gdspropertyservices.com/?edit

Editing Other Page Content

Anatomy of the Editor toolbar

When you access the Editor, you’ll see your live website with the Editor toolbar (the gray bar) collapsed at the bottom of your screen. Through this toolbar, you can access the various Editor panels to manage page settings, dynamic content, forms, and your Editor account. You can also see and publish the changes you make through the Editor.The Editor toolbar features the following tabs and icons:

Pages - opens the Pages Panel, which lists your site’s static pages and dynamic Collection pages. From here, you can browse for a page, click to view the live page and manage the settings of any page.

Collections - opens the Collections Panel, which lists all your Collections. Clicking on a Collection opens a new tab in the toolbar, which opens the Collection items’ panel listing of all the items in that Collection. Here, you can edit any item or create new ones. This is very similar to the CMS Panel in the Designer.

Forms - opens the Forms Panel where you can see and download form submissions made on the site.

Account Settings (icon) - opens the Account Settings Panel where you can edit your Collaborator account info and upload a profile image.

Help & Support (icon) - opens the Help and Support Panel, where you can find answers to a few common questions about using the Editor.

Log out (icon) - logs you out of the Editor after confirmation.

Back to live site (button) — Switches from Editor mode to Live-site mode, which allows you to view your site as your site visitors will see it.

Saving/Saved - all changes are saved automatically in the Editor. The Saving... and Saved status at the bottom left show this.

Changelog - this shows the number of unpublished changes next to the publish button at the bottom left. Clicking the changelog reveals a list of items and pages with unpublished changes, and you can see which Collaborator made them.

Publish (button) - allows you to publish all the changes you make when in the Editor.

On-page editing

Editing right on the page is pretty intuitive with the Editor. As you hover over various elements, an edit icon will appear to the upper right of editable elements. To edit any of these elements, simply click the icon.

Editing and formatting text

When hovering over editable text elements, you’ll see a light-gray outline around the text element and a pencil icon in the upper right. You can edit the text by clicking into the box.

You can also format words or phrases by selecting them and choosing the formatting from the floating toolbar that appears.

Replacing images

You can also replace images right on the site. Just hover your cursor over the image you want to replace, then click the picture icon. This will allow you to select and upload a new image from your computer.

Viewing and publishing changes

After making all these changes, you will want to view them, make sure they're saved and ready to be published before clicking Publish.

Viewing changes on the live siteWhile working in the Editor, the Editor panel covers most of your website. To collapse the Editor panel and view your website, click the View Site button at the top.

Publishing

The changes made in the Editor won’t be made on the live site until you either publish the edited item(s) individually or press the Publish button to publish all staged changes. You will need to confirm that you want to publish all changes before the site is actually published. The green Published button will confirm this.

Typography

If you edit styles here, they will change across the site

H1

Lorem ipsum dolor sit amet

H2

Lorem ipsum dolor sit amet

H3

Lorem ipsum dolor sit amet

H4
Lorem ipsum dolor sit amet
H5
Lorem ipsum dolor sit amet
H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph
Lorem ipsum dolor sit amet
Block Quote
Lorem ipsum
Text Link

Raleway

Font names
View Project
Button
View Project
Button *//ALT

Color

Text colors

font color - dark
#222222
font color - dark
#aaaaaa

Main colors

BRAND COLOR 1
#3898ec
BRAND COLOR 3
#63ecc0
BRAND COLOR 2
#c860db
BRAND COLOR 4
#ffb08b

Neutral colors

LIGHT GREY 1
#ebebeb
DARK GREY 1
#636363
LIGHT GREY 2
#cccccc
DARK GREY 2
#333333

Logo

Gds logo grey
MAIN LOGO BLACK
DOWNLOAD
GDS logo in white
MAIN LOGO WHITE
DOWNLOAD