How do I log on to edit my website?
You will be given a website address with a login and password by the studio you are working with. It will look similar to the below image.
Once you are logged in you can then navigate to the website panel. Notice you can also order print, edit your templates, change passwords, view your quotes, shop and order print online.
Your websites will be shown here. All you need to do is click on the "Edit Website" button and this will open your website in edit mode!
Happy editing!
You will need to use a desktop computer with a Firefox, Chrome or Safari browser to open the Websites by printing.com editor. While the website will be visible on other browsers and to visitors on mobile and tablet devices and will load on other browsers, you'll need a desktop and major browsers to edit the website.
Changing text
In the Websites by printing.com editor, double click some text, and you'll see an Edit text toolbar option appear on the right hand side.
Click to edit your paragraph
The text editing options allow you to change the font to a range of Google web fonts, which are chosen because they are free for your use and work on all major browsers. You can also change the font size, colour and alignment.
The text editor has options for you to upload an image, add an icon, add a button or add a new text link.
Editing Images
Double click an image to change an image or edit the image size. We will also inform you if the image can be resized and optimized to make it smaller, meaning your website will load faster.
Some background images are part of the page design and are not editable with normal Websites by printing.com access. Contact your local studio if there's an image you need to change but are unable to.
Changing Icons
Double click an icon to change the icon, adjust it's colour or adjust its size.
Changing Buttons
Double click a button and you can edit the link, size, colour, icon and spacing.
Changing Links
Double click a link and we will open a url popup that lets you choose your link text, url location, tooltip and other options. You can make your link open an email, download a file or scroll to a specific part of the page.
Editing other pages
By default the Websites by printing.com editor will load your homepage.
If you want to edit any other page, press the page dropdown at the top of your editor. Just remember to save your changes before moving to another page.
Saving your changes
Once you've finished making changes, you can either Save or Publish Changes.
Pressing the Save icon will save your changes in the editor, but will not make those changes live on your website. You can use this to save changes that are half complete and aren't ready for public yet.
Press the Publish Changes button to publish all the recent changes in the editor onto your live website.
ADVANCED EDITING
This section of the how-to guide assumes you are familiar with editing content on Websites by printing.com sites.
WordPress will likely be used if your website requires ongoing content, but Websites by printing.com can also be used to create and manage several pages. If you will be adding pages regularly to Websites by printing.com, you will need to ask your local printing.com studio to upgrade your access level to allow advanced websites by printing.com editing privileges.
When you have advanced editing privileges, your websites by printing.com toolset will expand to allow you to:
- Create pages
- Duplicate pages
- Delete pages
- Edit menus
- Add & amend panels
- Add & amend block
Please beware: with advanced privileges you can radically alter the design, styles and every aspect of how the site looks. Contact your local studio if you make a mistake and we can revert the website to a previous time when it was last working as intended.
Creating, Duplicating and Deleting pages
Press the page icon at the top of your Websites by printing.com editor and enter your new page name to create a new page.
This will create a new blank page for you to start from. You can also press the duplicate icon to copy an existing page and use that as a starting point.
If you created a page you no longer want to use, select the page in your page dropdown then press the trash can icon to delete the page. This will delete whatever page is currently active in your Websites by printing.com editor. You can use the undo icon to revert this if you accidentally delete the wrong page.
Click to edit your paragraph
Editing menus
To edit your menus, go to Settings > Menus.
In the “Elements” section you will see the menus your website uses.
Press Add link to add a new menu item, or Add dropdown to add a new dropdown menu.
Adding panels & blocks
A panel is a full-width bar within which blocks are placed. Blocks are then filled with pre-designed website content that can be changed to be relevant to your client.
In the Websites by printing.com editor, panels are controlled and defined within purple lines while blocks are within green lines.
Adding Panels
To add a panel in Websites by printing.com, head to Add > Panels.
Select your preferred panel and drag it onto the page.
Customising Panels
Panel Options
When you hover over a panel, you’ll see options to customise it.
The first crosshair icon lets you move the position of the panel on your page. Hold it and drag your panel up or down the page.
The second copy icon lets you duplicate the panel. It will copy all the blocks and all the content, letting you customise again from a better starting place.
The third cog icon lets you configure the panel, more on this later.
The fourth x panel option deletes the panel, along with all the blocks and content it contains.
The #2 tells you what order the panel is. This order can be used as an anchor point in the text editor and menus.
Panel configuration options
Press the panel cog icon and a right sidebar will appear specifically for this panel.
Background
You can change the background colour, and even add a transparency. You can also add a background image. The top layer image scrolls with the page while the bottom layer image is static.
Dimension
Use dimensions to define your panel’s max height and amount of padding.
You can also set the block widths of each block on both the tablet or desktop. By changing the sliders you can choose how much of the device width each block should take up.
In the above example the 4 blocks within the panel will show in 4 columns for desktop, and in 2 rows of 2 columns for tablet.
Customising Blocks
There are also block specific options when you hover over them.
The first crosshairs icon lets you drag & drop your block within the panel, and even onto another panel.
The second magic wand icon lets you add custom animations.
The third cog icon lets you adjust the padding or margin of your block to give it more or less whitespace.
You can also add a background colour or upload a background image
And you can choose to hide some blocks from desktops, mobiles or tablets to create content specific to the device of your users.
The fourth copy icon lets you duplicate all the block content and creates a new copy next to your original.
The fifth rubber icon strips out the block content, but leaves a blank space in case you want a gap between two of your Blocks.
The sixth x icon deletes your block and all the content inside it.
NEED MORE HELP?
Just get in touch with us and we’ll work to find a solution.
