Home

Website Builder Manual

Contents

1. Se EE Set how often the images should update As a rule of thumb you should set a long time between updates to avoid visitors on low or restricted bandwidth having to download your images regularly D Choose a size for your thumbnails D Select how large you want the images to be when a visitor clicks on them Page 67 Cz e Select how many thumbnails to display in the widget Twitter Twitter Widget Step 1 Click Widgets then expand the Social section to find the Twitter widget WIDGETS MEDIA Step 2 Drag the Twitter widget to the area of your web page you would like it to appear 2 Twitter Double click on the widget the settings screen will appear SETTINGS Twitter Search Retweets Fe ralphsfarm Mo a dl Tweets Type 1 50 Username Le Update Every 5 minutes D ER Enter a keyword or a username to search for lt gt Page 68 Select the type of search you can select usernames or keywords Choose how often you want the widget to update Decide if you want to show retweets in your widget Use the slide bar to choose how many tweets you want shown in your widget The widget will always show the most recent tweets first Add a tweet The Tweet this button will allow Share a link on Twitter Google Chrome E amp Twitter Inc US https twitter com intent tweet original_referer
2. Text i E i i d No Description Text Area This allows visitors to enter a large piece of text This is useful for feedback comments or messages to you Tex No D in scription Page 84 Select box Drop Down Menu This allows customers to select an item from a drop down menu Useful for selecting products or services or of you are creating an email form for selecting the type of enquiry en SE GE Please select e Please select Example Form In the following example we will create a feedback form containing the following fields e Name e Email Address e Telephone Number e Product e Date of Purchase e Rating WIDGETS MEDIA Step 1 Click Widgets then expand the Form 4 a Form Widget section to find the Form widget Step 2 Drag this widget to the area of your web page you would like it to appear Create New Form Step 3 8 Title Description Enter a name for your form and your Product Feedback Allows customers to provide feedb s Submit Button Text Email email address in the boxes provided Then click Create form Internal Link External Link Contact gt contact ji CREATE FORM Page 85 Add a Name Field Step 1 Drag the Text Box Widget onto your new form Quick tip Red dashed lines will appear around your form Drop the widget within these lines If the Create new form box appears cl
3. olffiside google_ad slot Tad TI1Ld1Lea the Embed widget then Copy and google_ad width 300 google ad height 600 C paste the code you retrieved in ter EE src http d pagead2 googlesyndiceation com pagead show _ads js gt lt script gt step 1 into the widget and click Save Changes Page 121 Creating your mobile site Click Mobile Site in the top left corner Preview Themes Manage Publish You mobile site editor will appear The editor has six main sections My Website Home Page Category menu This will select the types of actions available in the actions menu you can select Pages text Colours Images or Widgets Publish Preview Publish or preview your mobile site Mobile View These buttons allow you to change the aspect ratio of the editor to show your site in a mobile held vertically horizontally or from a tablet Undo Redo Allows you to undo any changes you have made Cz Page 122 A Action menu Shows all the actions available to you e Designer Allows you to edit and view your mobile site structure of a Mobile web page The mobile editor is not a Mobile Optimizer it s designed from the ground up to allow you to create and edit a website designed for SmartPhones and Tablets Each web page is split into three sections ES Company information This acts like a header and displays your company details Information you add it
4. Changing background colour Set a solid colour as your background Theme Background Type Color Z Theme Se Theme Background N Type Theme Wi sne Theme Po Centre HIT TTT Color Click on the colour chip then select a colour You can either select a colour from the colour picker or from the theme swatches Quick tip If you choose a colour from the colour swatch this will automatically change whenever you change the swatch in Theme Colours Choose a background Image Add an image as a background to your website To change the image simply drag your chosen image onto the Image Preview You can then choose how to align it on the page and if you want the image repeated horizontally vertically or both Page 24 Background m Theme Background CH Preview Image Type 3 Align Image Repeat Horizontally Theme Settings Repeat Vertically Theme Width Theme Position Quick tip This option will show your image at its actual size if you want your image to stretch to the entire background use the fullscreen mode Adding a two colour background Change your background to a two colour gradient Choose the two colours you want to use then adjust the angle of the gradient using the drop down menu or slider provided Quick tip If you choose a colour from the colour swatch this will automatically change whenever you change the swat
5. IAL LE pi LA D U RN e padding top E 3px H padding left Opx padding right 8px padding top 2px padding bottom 3px padding right Opx order style solid padding bottom Opx tezt shadow none background 44 944F Cursor pointer Once complete the widget formarea button section will look as follows widget formarea button L font family Arial sans serif font size 12px line height normal text decoration none font weight bold color white margin left 0px margin top 0px margin right 0px margin bottom 0pX padding left 8px padding top 3px padding right 8px padding bottom 3px border style solid border color ffffff border left width 3px border right width 3px border top width 3px border bottom width 3px border radius 5px text shadow none box shadow 2px 2px 10px 888888 Page 99 background 78a324 Step 8 Next we will update the widget font family Arial sans serif font size 12pxr line height normal text decoration none font weight bold color white Margin Opx formarea button hover section to show our hover style In this example the button should look the same but appear slightly lighter Click CSS then find the text that shows widget formarea button Step 9 Find the background attribute and change the colour In this example we have chosen a slightly lighter shade of green Kl Tel ee kel Ji NY
6. Step 2 Click Styles then select Add new type style from the drop down menu ei Title Give your new theme a name ES Clone Class Choose how you will be using the style For example If it is to be used as a paragraph select paragraph from the list Element Leave as set 4 Class Name Leave as is Once complete click Add Style Be Be Be Be Ta Be Be Ta Ba Be Be Be Be Ta De Ta Be Be e Be Be Ba Be Be Be P Add new style Paragraph Add new type style Title Lead Lede Paragraph Clone Class Paragraph Element P Class Name leadlede paragraph CANCEL ADD STYLE Your style will now be added to the styles list You should now edit this style to meet your needs Page 29 Editing a Text Style Step 1 Select a text box and click the Settings cog Step 2 Click Styles In the drop down menu Styles Add new style click Edit next to the style you want to edit Paragraph Heading 1 Heading 2 Heading 3 Heading 4 Preformatted Step 3 The Style Editor will appear Edit your text style STYLE EDITOR css HTML Editing Lead Lede Paragraph Theme Styles Custom Colo Lead Lede Paragraph Normal H Borders i B G e Normal H Visual FX Background Spacing DELETE SAVE CHAN ei Style Attributes Choose an attribute to edit lt gt Page 30 A Settings See and change the settings for each attribute sel Pe Previ
7. Click the Colors icon in the left hand menu bar Step 2 Expand the Background drop down menu Step 3 Select Image from the drop down menu Step 4 Click Choose image Page 135 Z Background Rb Add page B Add folder BR Home Page ei Publish Background Background x Gradient Solid Color Gradient Image Image No image chosen Step 5 Select an image either from the existing images or All images lt Recent First e upload a new one by clicking the Add images button Adding content Text Adding Text Step 1 Click the Text icon in the left menu bar Step 2 Choose the style of text you want to add HEADING 1 d and drag it over to the area of the page that you want to add it to lt gt STYLE A A we Se A Bol T Se co E Step 3 Type your heading into the box Fresh Vegetables provided Show 100 e Cancel Save Step 4 Format the text how you want using the toolbar Cz Page 136 Edit the raw HTML of the text Choose a theme style for your text Increase or decrease text size Align your text to the left right or center gt STYLE Seasonal Vegetables Step 5 Click Save to make your changes AT A gt Images Adaing an Existing Image Step 1 Click the Images icon in the left menu bar Page 137 BEE M lt Bf T Gei a Change the colour of the text and the background Make your te
8. E IS 1 Name Email Add Telephon Date of Purch Product Rating 2 1 Ralph ralph ral 221144 03 09 2013 Veg Adding Video Comments 3 This is a test To ensure that any video is visible to IPhone and IPod users it s best to embed a video from YouTube to your website This guide assumes that you have already uploaded a video onto YouTube Step 1 Visit your video on YouTube click Share then Embed Step 2 Next choose the size of your video player from the drop down menu 420 x 315 W Show sugg 480 x 360 video finishes 640 x 480 E Enable priv 960 x 720 E Use old eni__Custom size Step 3 Make a note of the code shown in the text box Page 105 Video size Four Seasons Vivaldi Evan Bennet 67 videos gt Eee 31 927 like 25 365 581 2 486 mg 111 794 du ki lt iframe width 4270 height 315 src www youtube com fembed GRsofEmo3HA frameborder 0 allowfullscreen gt 420 x 315 show suggested videos when the video finishes WIDGETS MEDIA Step 4 In your Website Builder control panel Click Widgets then expand the content section to find the Embed widget Step 5 Drag this widget to the area of your web page you would like it to appear Step 6 Double click on the widget to open the settings option Remove the demonstration code and copy in the code you retrieved in step 3 Step 7 Click Save Changes a Four Seasons Vival
9. blue tiles jpg 15 08 2013 08 41 Rs cow head png 15 08 2013 13 39 2 Libraries RK dairy jpg 07 08 2013 14 46 Documents e dairy farmer jpg 07 08 2013 14 50 a Music earlycarengine wav 09 02 2008 00 17 Pictures WI favicon ico 15 08 2013 14 17 S Videos Bul favicon png 15 08 2013 13 53 S kl file tile j 15 08 2013 08 28 After a few seconds you will EE SD File name favicon ico receive a message that your favicon has been loaded Click Website in the top left corner to return to the editor You will now see your Favicon in the BF Homepage web browser ralphsdomain com Account e Mobile site Preview Page 36 Editing pages Page Structure Each page is made from 8 rows Row Column Editing Row Visibility C3 Header 4 Rows are available for your immediate use lt Header2 if you want to add more rows to your site you lt Feature can simply make and of the remaining 4 rows lt SS Feature Z visible lt EI Click the Row viewer in the top right corner of lt Main2 the screen and use the check boxes to toggle lt Footer rows on and off lt Footer2 Only visible rows will appear on your website Page 37 Customer Support Website Builder Manual Each row has an inner and an outer part The Inner part of your row contains all your website content while the outer part of the row stretches to the outside of the
10. n De 8 k Ion z n e Bes P border style solid border color 4A94AF oe ee eee i border left width Opx EE EE Upas border right width Opx border right width Ups border top width Opx border top width Opx border bottom width Opx Bborder bottom width 3px Cexet shadow none S text shadow lt background background Step 10 Next we added some spacing around the text In this example we added 3 points of padding across the top and bottom and 8 points of padding to the left and right Find the padding attributes and add the padding you want Page 100 widget formarea button hover widget formarea button hover font family Arial sans serif font family Arial sans serif font size 17px font size 12px line height normal line height normal text decoration none text decoration none font weight bold font weight bold color white SESCH EEE eee Eee BOS Z padding top 3px padding right 8px padding bottom 3px erer top opz padding right Opx padding bottom ipx Step 11 Now add a white border to your style The hover section does not have a border attribute by default so the following lines will need to be added border style solid border color ffffff border left width 3px border right width 3px border top width 3px border bottom width 3px border radius 5px In the example we have added them under the background attribute
11. v Your Website To create a PayPal business account go to https www paypal business com and choose a suitable bi Site Status your account enter your Paypal business account email address below PayPal Business Email Address ralph ralphsdomainname com GBP British Pound EN GEO Redirects Favicon Google Analytics Ecommerce Reset Site Page 65 Once done click Save Social Flickr You can add thumbnail images from a particular user or from a collection by using the Flickr widget Clicking on a thumbnail will display a larger image Step 1 Click Widgets then expand the Social section to find the Flickr widget WIDGETS MEDIA Step 2 Drag the Flickr widget to the area of your web page you would like it to appear Double click on the widget the settings screen will appear e 2 Flickr Page 66 SETTINGS css Flickr Type Thumbnail size px Keyword 100 500 Search Preview Image Size ot E Medium re Quantity 4 100 Every 2 minutes Le Choose the type of search you want to make you can select Keywords Users or Sets Enter a keyword user or a Set ID number for your search Ea Note When displaying images by set you must use the set ID not the set name This can be found in the last part of the set URL so for the following URL the set ID will be 72157626756485350 http www flickr com photos WebsiteBuilder sets 72157626756485350
12. Baa Bs Be hahaa Ts a ha a Daa Bh aa a a hea a a a a shop e ane e SETTINGS STYLES CH Editing Page Link Selected Font S Spacing Borders Shadows Visual FX Step 9 SETTINGS STYLES Click Save Changes Now click edit next to SITE WIDE STYLES the Page Link Hover link Page Link Hover Step 10 SETTINGS STYLES Css Editing Page Link Hover Change the Font Colour to match Theme Styles Custom the colour of the background you Sa Spacing Set in step 8 Borders Shadows Visual FX Ecommerce You can connect your website to your PayPal account and make payments online Using the widget the first time The first time you click on a PayPal widget you will be asked for your PayPal Business email address and default currency Enter these in the boxes provided This information will be used to connect to your PayPal account when a customer places an order with you Add to cart Step 1 Click Widgets then expand the Premium section to find the PayPal Add to Cart widget Cz Page 62 WIDGETS MEDIA E ares Step 2 Drag the Add to Cart widget to the area of your web page you would like it to appear Double click on the Widget to PayPal Add to Cart open its settings The settings option allows you to enter product information SETTINGS STYLES Award Winning Edge Farm Stilton PayPal Add to Cart SCH 100g Product Name Description SP 4
13. RRE margin bottom Opx padding left 8px padding top 3px padding right amp px padding bottom px Li text shadow none background b3dd64 o Cursor pointer cursor SSES eae Bento border left width 3px border right width 3px border top width 3px border bottom width 3px A Step 12 By Default the CSS doesn t contain an attribute for the shadow so again we will need to add one Quick tip More information regarding this attribute and a tool to test your code is available at htto www w3schools com cssref css3 pr box shadow as Page 101 In this example we have set the shadow to a grey colour with a blur of 10px We have added a new line under the border radius attribute Bal lad e Bell De e L z n e Ji YY e Fell Je Za g H EA AK 6 border top width 3px border bottom width 3px border radius Spx gt Cursor pointer Once done the widget formarea button hover section will look as follows widget formarea button hover font family Arial sans serif font size 12px line height normal text decoration none font weight bold color white margin left 0px margin top 0px margin right 0px margin bottom 0px padding left 8px padding top 3px padding right 8px padding bottom 3px text shadow none background b3dd64 border style solid border color ffffff border left width 3px border right width 3px border
14. Step 2 Drag this widget to the area of your web page you would like it to appear Step 3 The comments widget will appear on your website You are unable to use the widget in design mode but you can enter preview mode to test this widget and post a test comment Page 74 Customer Support Website Builder Manual ae fui gt Edge Farm Award Winning Stilton Any comments will be displayed above the comments form Managing Comments Back in design mode visit the page showing your comments form Any comments made will be displayed above this form Quick tip If you can t see these comments navigate to a new page and back again New comments will have an Approve or Delete button next to them Ralph Smith Sep 3rd 2013 01 07 PM KL purchased this cheese for Christmas and its the best cheese ever I ll certainly De buying more soon 2 Thanks Ralphs Farm Shop ES Name a E mail Approve Make the comment ba Delete Remove the comment visible on your website Page 75 Quick tip If the comment has already been approved this button will change to decline The decline button will remove the post from the website but allow you to approve in the future Changing how comments look on your website You can control each aspect of how customer comments will appear on your webpage In this example we will make the co
15. 10 SITE WIDE STYLES Click the Edit button next to Comment Container Comment Text ee d i il Ge Comment Titel Comment Author Hover Comment Text Update the colour of the font to a SETTINGS STYLES CSS Editing Comment Text light grey and set the Font Style to Theme Styles Custom Italic Background Spacing Borders Shadows Visual FX y purchased this cheese for Christmas and its the best cheese ever TU certainly be buying more soon Thanks Ralphs Fann Shop Decline Delete i Step 11 SETTINGS STYLES CSS Next we will move the Editing Comment Text text to the right so that Big Background it lines up with the author Click Spacing Gelies shadows then add 60px of Visual FX padding to the Left x purchased this cheese for Christmas and its fhe Dest cheese ever MI certainly be buying more soon Thanks Ralphs Farm elt Ze w H Decline Delete Seet Ze Page 79 SETTINGS STYLES Step 12 SITE WIDE STYLES Click the Edit button next to Comment Date LOMMent Lontainer Comment Author In this example we are going to leave the font Comment Author Hover unaltered but move the date slightly to the left Comment Text to stop it spilling out of the container Comment Date Click Spacing and add 15px of Padding to the annee nore penn Editing Comment Date right Font Background l purchased this cheese for Christmas and its the best cheese ever
16. Click Add in the top left corner of the screen ADD and click Page from the drop down menu Folder Step 2 Enter the following Page 45 2 d e gem m oa fe nnam ge m sa VA h qT F iv WW rr Loi L e ei W mm et R L L L W kes KORGI uD III U WM ww 1 wit Me w Wel i bed WE MA vw Y be Y Enter a Title for your web Create page page this will be shown in Page Title Cheese SS J Page URL cheese d the browser tab Set this page as the homepage A a You can leave this set for Menu Title Cheese Show in Navigation Menu Page Status Active S CANCEL CREATE PAGE most purposes ES Check this box if you want this page to become the default page on your This is the title that will be shown on your website navigation bar RS Uncheck this box if you don t want your site to appear in your navigation menu ES Choose a page status from the drop down menu Active means that the page will lt be added to your website next time you publish your site More information on the feature can be found in our chapter Choosing what to publish Once done click Create Page to save your changes Page Settings Rename a page Step 1 Click triangle icon next to your page to display the page settings drop down menu Cz Page 46 ADD Home Step 2 About Select Name and URL from
17. Colors D E a E Custom e menu will appear E a m E Minimal 1 Theme Colors x Step 3 Select one of the pre made swatches from the list PR DW custom P E WW E nim Create a custom swatch Step 1 i Z Background Click the Site icon in the left hand menu bar Rb Add page ie Add folder b Home Page 87 Page 130 Theme Colors x Step 2 Click the Colors icon to bring up the aan R custom D Theme Colors menu RB E E D Minimal 1 Theme Colors x Step 3 Click on the cog icon next to the swatch EEE W Custom CH at the top p EE E hina E ECE E inma Theme Colors x Step 3 Custom G4 os i 26057 BR Click on the colour in the swatch that you want to Theme Colors x Step 4 Choose a colour using either GE The colour picker El A colour code Ke E 3 Custom Ad Page 131 Customer Support Website Builder Manual Background Solid Colour Step 1 Click the Site icon in the left hand menu bar Step 2 Expand the Background menu Step 3 Select Solid Colour from the drop down menu Step 4 A small square will appear showing the current background colour Click on it to change the background colour Background Rb Add page Ba Add folder i Home Page D Publish Background Publish Background AA gt God Color Background Solid Color Page 132 F EE ge rr in LAAF w BLR re Ep l
18. Cz Page 10 e How large is the image Reduce the image to the size that you need it e What quality do you need A camera may take a high resolution photo but your visitors will not need that level of details and their screens may not be able to display that much detail You can reduce the quality of photographs without any reduction to the quality of your visitors experience While many photo and image editing software will be able to do this for you If you don t have access to any existing software there are still plenty of free alternatives such as http webresizer com resizer available online O Important http webresizer com is a third party website with no affiliation with Fasthosts Uploading images WIDGETS MEDIA Step 1 ADD Q Click in the Media tab in the left hand side of the page then click Add Step 2 cor a CJJ L gt my website neg Ja Search Basekit Images Browse to the image you would like to pende D e Ft Favorites S Name i Date modified Ty add and click Open RE Desktop dairy jpg 07 08 2013 14 46 8 Downloads A dairy farmer jpg 07 08 2013 14 50 E Recent Places Ba meat png 07 08 2013 14 41 kl meat farmer jpg 07 08 2013 14 50 2 Libraries Vegetables jpg 07 08 2013 14 42 Documents im veg farmer jpg 07 08 2013 14 52 a Music t Pictures E Videos Ba Computer IR Filename dairy farmer jpg N Customised Files Page 1
19. L A l 8 l CTARA CN Wei w LAK fri KT VIR le VYOC Trey ke 1 INAY A YVUSLONIC SU LUDU 1 VVEDVDSILC DUIICCI Vidi lUd beer dercher e lantas S fea ww A V V S JL Laf LATTA A l V lC TO CA dicker Swatch i E GER E B E B ELE EN A colour from a a UU SSD swatch Sea es a A colour code 3 Custom TTT Step 5 Pick your background using either er The colour picker Ds ee eee gt EEE ES A custom colour Gradient Step 1 A Colors Background Click the Site icon in the left hand menu bar Rb Add page Ba Add folder i Home Page D Step o Publish Background Expand the Background menu Solid Color Publish Background Step 3 S Select Gradient from the drop down menu Be Background Solid Color solid Color Ik Add page fe AG Gradient Image Page 133 Eege Another drop down menu will appear from this you Vertical can choose if you want a vertical horizontal or circular Horizontal gradient Circular Vertical Step 5 Two boxes will appear each one represents a colour in the gradient Click the one that you want to edit Pic ker Swatch Step 6 ne Pick your background using either E B Ee The colour E E picker ES A colour from a ge m swatch l a E S a A colour code Custom gt UU A custom colour Page 134 Customer Support Website Builder Manual Images Step 1
20. NN NR NK NR N TJ NN NN RN AA AAA T mn a Note When you Publish your changes this file will be available for visitors to download Working with Templates Templates allow you to copy and edit content across several pages at once By Default you will have three templates already set up to use These contain your Header Logo and Footer information Page 19 Creating a new template Step 1 Click Widgets then click Add next to the WIDGETS MEDIA Templates section title Step 2 Enter a name for your new template and Create New Library item click Create Template widget CREATE UBRARY MEM Editing a template By Default your templates are locked To unlock them simply double click the template i DOUBLE CLICK TO UNLOCK Page 20 You can then edit your content as you wish Any change you make to your template will be reflected on other webpages that the template is used Adding a template to a web page Step 1 Click Widgets then expand the templates section to find the template you want to add Step 2 Drag the template onto your web page S ng WIDGETS MEDIA ca MMF footer Y m e MME footer TT me a y N header Themes Changing the look and feel of your site Colours When changing colours you will often see the colour picker The colour picker has four main sections Page 21 Click and drag to se
21. Page title a Home Page Page url home SEO title Le Home Page Page 127 Customer Support Website Builder Manual Copying a page Step 1 Click on the Site icon in the top left Step 2 Select the page you want to copy Step 3 Click the Add Page button Step 4 Click Clone current page Step 5 You can give the page a title within the Page Title box but this can also be left blank Click the Add Page button d A gt Fonts Ba Add folder Site Colors Background b Add page b Home Page ei b Add page ie Add folder i Home Page e ft A A gt Site Colors Background Fonts b Add page is Add folder Home Page ei Default Page Title Gei Cancel Add page Page 128 Customer Support Website Builder Manual Removing a page Step 1 Click on the Pages icon in the top left i Add page Ba Add folder i Home Page ei ib Add page is Add folder Step 2 Select the cog icon next to the page you want l S ESCH Home Page e to rename m Delete this page Step 3 Scroll to the bottom of the settings and click Delete this page Page 129 Customer Support Website Builder Manual Changing the look and feel of your site Colours Use an existing swatch Step 1 YA Background Click the Site icon in the left hand menu bar b Add page fis Add folder i Home Page ei Theme Colors x Step 2 Click the Colors icon the Theme
22. Ralphs Farm Shop here will be shown on every page on your mobile site Lorem Ipsum Dolor Pulvinar Vitae E Content This is where you add your page content This may include navigation menu s text images and widgets ES Footer Information in this section will be shown on each page of your mobile site Page 123 H a S A M a o BE NAr NAAN a UJ Adding company details Adding your Company Logo Step 1 Click on the default logo at the top of the My Website editor Home Page Step 2 Click Choose image and select your logo from the list of uploaded images If you have not yet uploaded your logo click Add images to upload your logo 3 Note The Mobile site does not support transparent colours in images If your image contains transparent sections edit this section to match your background colour and upload this new logo Step 3 Company logo optional Your logo will appear in the mobile editor Use the Zoom slider bar to change the size of your logo Show Text Show Logo Zoom Page 124 Adding your company name Step 1 Enter your company name in the text box provided Step 2 Click save at the top to save your changes Step 3 Click Edit Style Ensure that the Site Title section has been expanded and change the font to match your design In this example we have changed the font the Size and the colour Company
23. Se drop down menu Body Scripts Step 3 Page Scripts You will be presented with two text Site wide scripts boxes to add Javascript to each page on your site enter your script into the top text box To only add Javascripts to your chosen page in your site enter your script into Foss Bere Se the bottom text box Step 4 Once done click Save CANCEL Organising your pages Page Folders If you have a large number of pages it s useful to create folders and organise your pages into groups This feature is also used for two tier navigation menus Page 51 Step 1 Click Add in the top left corner of the screen and click Folder from the drop down menu Step 2 Enter a name for your folder If you check the box marked Create Folder Home Page a page called index will be created inside the folder So if you create a folder called Shop anyone visiting http vourdomain co uk shop will be directed to this home page Once done click Create Folder New Folder Location Top Level No Folder Le Name Password optional Shop Create Folder Home Page CANCEL CREATE FOLDER EA Note By default your new page will not appear in the navigation menu See the chapter titled Rename a page to name your new page and allow it to appear in your navigation menu Then follow the chapter on Creating a sub navigation menu Page 52 Password protecting pages Mobile
24. aw 5 99 plus 1 99 shipping Sourced locally from Edge Farms this award a l v4 K v winning Stilton is Creamy with a slightly nutty i f A Sourced locally from Edos Farms this e award winning Stilton is Creamy with a Slightly nutty overtone Perfect with Steaks and Port Price overtone Perfect with Steaks and Port Shipping Price Product information settings How this appears on your website The Styles button will allow you to edit the look and feel of any of the following e Item Name e Item Description e Price e Shipping Cart The PayPal Cart widget allows customers to view all the orders on their shopping cart before purchasing them There are no settings for this widget Step 1 Click Widgets then expand the Premium section to find the PayPal Cart widget Page 63 Cz Step 2 Drag the Add to Cart widget to the area of your web page you would like it to appear Quick tip To add the widget to your header simply double click the header to unlock the template and drag your widget across This will update your header template and include the button on every page that displays your header Theme Colors Theme Fonts Aa Background Row Column Editing finar Cort Z Home About Farms Shop Contact Us Buy now Buy now buttons allow customers to go directly to the PayPal payment page to purchase an Item Each button must be configured with your product details to work Step 1 Click Widge
25. from one image to another 5 Preview Pane This will show how your Slideshow will look Click the Preview button in the top left of this window to view transitions from one slide to the next Cz Page 116 ES Controls Buttons are used by website visitors to move your slideshow forwards or backwards The dots are used to show where the image displayed is within your slideshow Thumbnails will show small versions of the images in a film strip along the foot of your slideshow You can click on any of the button icons to replace the default icon with another image D Borders Allows you to create a border for the slideshow D Images film strip All the images within your slide show are displayed in this section Click add image to add an image to your slide show To re order an image simply drag it to its new location remove image ADD IMAGE f Si SEO Sitemaps and Google Analytics sitemap The sitemap widget creates a dynamic list of every page in your site that updates automatically as you add edit or remove pages Step 1 Click Widgets then expand the Content section to find the Sitemap widget Page 117 Cz WIDGETS Step 2 Drag the slideshow widget to the area of your cag web page you would like it to appear While this widget has no settings that you can configure you can alter the look of the links by double clicking on the widget and SETTINGS STYLES SITE WIDE STYL
26. gem i d h e 4 d a Cx hanp MPN SLOTICGr af ASTAR ELTI ch Geil w wT ww Google WIDGETS MEDIA Step 1 Click Widgets and expand the Social section to find the Google 1 widget Step 2 Drag this widget to the area of your web page you would like Google 1 it to appear Visitors will now be able to recommend your page publicly on Google The callout icon next to the button records how many visitors have recommended your page gal a Social Bookmarking The social bookmarks widget allows visitors to share your page with friends and colleagues in a number of different ways WIDGETS MEDIA 6 Step 1 Click Widgets and expand the Social section to find the Social Bookmark widget Step 2 Drag this widget to the area of Social Bookmarks your web page you would like it to appear Page 73 SHARE HYAA Click this button in preview mode to view the options available to your visitors Add ons and Widgets Comments The comments widget allows visitors to post comments on your website You have the option of approving or declining these comments The comments widget can be added to multiple pages comments created on one page will not be displayed on others making this useful for reviewing products WIDGETS MEDIA Step 1 Geier Click Widgets then expand the wl Content section to find the Ga W Comments Comments widget
27. guide we will show two examples of styling your navigation menu There are three styles to edit e Page Link Add new type style Preformatted e Page Link Selected e Page Link Hover Gd Link Hover Bullet List Wl tesch Sao 1 Double click on the navigation menu to unlock it Once unlocked double click on the menu again to enter the settings The settings options at the foot of the screen will allow you to change the look and style of your navigation menu Creating a Button style menu This example looks at the main menu and shows you how to turn it into a classic button design Home About Farms Shop First we will change the background of the row This is described in our chapter Row styles We have changed the Header style In this case we have added a Linear Gradient to the outer style so that the header stretches across the whole screen Cz Page 58 shadow Ze Opacity 0 100 Outer Sen aa Ge S Angle Distance 0 Angle Bhu WE Gutters Lock SAVE CHANGES CANCEL The page looks as follows __ Ralphs Farm BS Now we can style the navigation widget Step 1 Double click the widget to unlock it then double click on the widget again to open the settings menu Step 2 SETTINGS STYLES Click Styles Then select Edit next to the BAM Page Link style Page 59 Step 3 In the font section change the font colour to a light grey St
28. id lorem iaculis Donec elit mi posuere WW KA A KEN EECH El CN Step 2 Select the text you want to re format and choose how you would like to re format your text Add new type style Paragraph Heading 1 Heading 2 Headina 3 IO lorem T NNN NN NN NNN NN N NN NN N NN N Heading 4 nini pg HAEARN A Preformatted Styles Choose a theme style for your text This is useful to preserve a single feel across your website Our chapter on font styles will show how to edit or create new font styles on your website Page 7 b Formatting tool Adjust the font size and style of your text P 7 Justify Text Choose how to align your text within the text box S Lists Turn your selected text into an ordered or unordered list bullet points Creating Links Step 1 Double click the text box and select the text you want to turn into a link Step 2 Click the Add Link button NNN NNN N NN qualit tahles area di ar mad LAZ i Bees Lie i Page 8 Fa ag ji w a sr Ill j Ar V oan r c DUHUGIT IVIAITIUdI Add a link to another page on your website Step 3 In the Internal drop down menu select the web page you want to link to Step 4 Click Save Link Add a link to another location Step 3 Enter the URL you want to link to in the address box provided Step 4 Choose if you want the target link to open in a new window or in an existing window Generally it s b
29. m4v m4a m4b aiff mov wmv Tv swf ico Archive tar gz zip O Note You can t upload a file larger than 20MB WIDGETS MEDIA Step 1 ADD Q Click in the Media tab in the left hand side of the page then click Add cco 2 ee 49 1 K My Website Images E 4 Search Basekit Images D Step 2 Browse to the file you would like to add Ggs Pom Her lie D e s Eavorites Name g Date modified and click Open EE Desktop im dairy jpg 07 08 2013 14 46 NA Downloads dairy farmer jpg 08 2013 14 50 i Recent Places By meat png 07 08 2013 14 41 ei meat farmer jpg 07 08 2013 14 50 Libraries im Vegetables jpg 07 08 2013 14 42 Documents el veg farmer jpg 07 08 2013 14 52 a Music El Pictures ER Videos 1 Computer nll Filename dairy farmer jpg ka Customised Files x Page 18 gt ay H P P H ij CB TT Add a file To add a file to your website simply drag it to the location you want it on your website WIDGETS MEDIA makingthemostofyourwebsi 773 A KR 323 0 KS 440hz 5sec mp3 Oo C Ka V makingthemostofyourwebsite pt choudanse swf d os pa e To update the text describing your file click 7 S on the file then select the Settings cog go ch gt makingthemostofjourwebsite pdt Enter file download description here P U LJ NNN ADS NNN NN NR A NR A
30. name Custom Ralphs Farm Shop Cancel Company name Custom Ralphs Farm shop Navigation Font Merriweather e Weight Color Inherit e Size Line height inheri a Note By default this font is white so unless you have a dark background colour you will not see it You must change the Font Colour or Background colour to view your company name Page 125 Customer Support Website Builder Manual Page management Add a new page Step 1 Z Background Click on the Site icon in the top left b Add page ie Add folder b Home Page E Step 2 Click the Add Page button Rb Add page ie Add folder b Home Page ei Step 3 Choose whether you want your new page to be a default page or a clone of the current page Default Page Title Step 4 Cm Give your page a title and click Add page Cancel Add page Page 126 TR aA We e T CL WW mg We E T Na aa amp ee a fr fr rr fr d Be j wi H le ew 1 8 SEAN Lei 7 Sed Page Settings Rename a page Step 1 Click on the Site icon in the top left Rb Add page is Add folder b Home Page ei Ba Add folder Step 2 Select the cog icon next to the page you want to 7 e PRS b Home Page 6 rename Website Step 3 Publish Rename your page by typing in a new name in the Title in Navigation and Title in browser 2 Home Page i Settings boxes and click Save etting Save Cancel
31. oacauarncevansupesusveonsanaas 135 Menu EE 58 Mobile Add Call E 157 PAG SOO i eege ee 158 lun ET 151 DIAC CL E 164 HE E 150 deg 158 ALinkedIN dd 160 Background Page 156 ee EE 145 EI Ee HE 147 Lat 148 ENEE 145 Company OE EE 128 NOMS EE A E 129 Company Details 128 Divider Ee 164 Facebook EE 160 Eege 166 Footer ele e 134 E lt 11 Pe E E 132 Copyright 135 Descrip ON WEE 134 See ease censienaeceerenceconsebencinmenumecamencedeuaes 136 POM ET 136 ee eet 136 Ee e E 134 Kelereiber 136 IV AND WEEN 135 Beete 136 CS TS hsireriiersiniaine aiei 134 Tele Seege egene ege 135 s S P I EI N T TAT 131 Twitter 135 136 EE 136 Form EE 157 Format E E 150 Gallery eee eee 168 Google E 160 Import Ee 152 LinkedIn PONG lT 160 EIS GSS ee 162 Page 157 PSs D E 161 Vue SNE 156 Mobile se ee 165 Navigation sese eee eee 140 RE 163 Extended T 165 Ge 141 OOT H ees 143 Page TEE 137 E e 127 LOD AAE PE A N A A ATA 139 E 2 Serene are mre ere vee ener ene ee 140 EE eege 138 BEE 154 RSS Egeter 160 Site GE 126 MASNO se 167 eT Ee 143 Twitter Eege 159 160 YouTube e 0 nes eee nner Se eee nee a er ee 160 162 POULTON crerori tinier e ET 163 Moble Footer re UE 134 ETET I i E SE E 131 Moderate CONOC reri HHR 2 H ias 78 mov Upload EE 18 Move e 40 mp3 IG EE 18 mp4 Upload 18 N Navigation Ls t EERIE AERE EAA A AT 57 BUON EE 60 e TEE 140 EE 163 Extended osc tesa senssceecadeseemac
32. page specific SEO Data Step 1 Click triangle icon next to your page to display the page settings drop down menu Step 2 Select SEO from the drop down menu SEO Step 3 Keywords Cheers Stilton Edge Farm Award Quality Buy Page specific keywords and a description in Description Award winning Stilton from Edge farms Crumbly yet with nutty overtones its the perfect accompaniment to steak or post the text boxes provided and click Save one Page 119 Quick tip More information on SEO can be found in our guide Making the most from your website Google have also published a PDF that relates specifically to their search engine Google analytics Create a Google Analytics account and follow Google s instructions to find the Profile ID of your website domain ae Aig bappa Tree Jar e A apts Heed Ciel pee Rate S aera guerra d Can E hip Trzamesbapeszdemail eent 7 routegb itekntlesh con CH Dais 17 has aie Quick tip The profile ID will be a string of letters and numbers with the following format e XX 11111111 1 Make a note of this Profile ID but don t follow Google s instructions for adding a tracking code into your site Once you have the Profile ID log into your Website Builder control panel and click Manage In the left hand menu select Google analytics and Google Analytics Enter your Profile ID in the text box provided Paste only the ID UA XXXXXXXXX X Do n
33. site Step 1 Click Add in the top left corner of the screen and click Folder from the drop down menu L Page gc Tolo BW Folder Step 2 Enter the following New Folder Location Top Level No Folder Name Password optional i Create Folder Home Page g CANCEL Ge CREATE FOLDER If you have already created folders you can place your password protected folder inhere if not you can only create your new folder at the top level ja Enter a name for your password protected folder A Enter a password to use whenever you want to view content within this folder 4 Click Create home page aaa Once done click Create Folder Page 53 O Note By default your new page will not appear in the navigation menu See the chapter titled Rename a page to name your new page and allow it to appear in your navigation menu Then follow the chapter on Creating a sub navigation menu Any pages you add to this folder will require the visitor to enter the password you created in Step 2 before they can view the page Page redirects Page redirects allow you to direct customers who are visiting a URL on your site to be directed to another page on your site or another website For example you could direct customers who visit http ralohsdomainname com about us to http ralohsdomainname com contact us Adding a redirect Step 1 Click Manage at the top of the screen then select R
34. skills It comes with ready made templates that can be modified with text or images allowing you to create a website that suits your needs Website Builder is offered in three packages you can upgrade these at any time Customer Support Website Builder Manual Adding Content Text Click a block of text to open the text options Settings Button Click this to open the text box for SE et e In libero ipsum volutpat sit amet molestie sit amet vestibulum nec incum Quisque ef purus editing e Drag Handle Use this to drag the eu mauris dictum variu D nec elit mi posuere vel luctus vitae vestibulum in velit Vesti ulum id nis egetnt vel id lorem Text to a different row Delete Button Remove the text block from your web page Text Box Double click to edit the content or style of this text box Drag Boxes Drag these to alter the size and the shape of your text box Adding Text a Note Some software such as Microsoft word will add hidden formatting code to your text If want to copy and paste text into your website make sure that you Paste as Plain Text Page 5 To add new text Drag the Text block widget to the WIDGETS MEDIA area on your website that you would like to enter E ESA your text Text Block A new text box will appear where you dropped it You can still move this text box or resize it by dragging the ed
35. top width 3px border bottom width 3px border radius 5px box shadow 2px 2px 10px 888888 cursor pointer Your form and button will look as follows Page 102 Customer Support Website Builder Manual Let us know what you think Name Ain L dees Bea a nalla C What do you like to be called Email Address D What s your email address Telephone Number D What number iz best to contact you Product What did you purchase from us Please select a product EN WOR wey Date of Purchase When did you buy the product Rating How did you rate the product Comments Tell us about the product enter Form with new button style Testing a form You can test a form in preview mode Step 1 Click Preview at the top of the editor and enter some details into the form Once done click the button to submit your details Name Let us know what you think Name What do you like to be called Email Address TT a end sso What s your email address Telephone Number What number is best to contact you Product What did you purchase from us Date of Purchase When did you buy the product Rating How did you rate the product Comments Tell us about the product Enter E u de Please select a product ggas WHT Form with new button hover style Email address T
36. type Columns created using the Columns layout widget are not structural you can t add styles or insert widgets into this type of column This chapter describes how to create structural columns using the Row Layout menu Step 1 With row editing enabled Click the Row Layout Row Layouts button to the right of the row you are adding es 1 9 es 9 9 E 1 9 9 9 columns to Step 2 Select the number of columns you want You can select up to 6 columns per row Your Columns will be added to the selected row Page 40 E The Columns setting button will ES Drag the edges of your columns to appear for each column resize them highlighted Changing the look of a page Row styles Each row has an inner and outer style the inner style contains all your website content The outer style will extend from your content to the edge of your visitors browser window Creating a New style Step 1 With row editing enabled Click the Change header Row Style button to the right of the row you ege want to edit ul main Step 2 main Click the button at the foot of the menu Step 3 Add New Row Style Enter a name for your new row and click ADD Name ROW STYLE pes Shop content CANCEL ADD ROW STYLE The row style editor will open see the section i Row Style Editor Page 41 Editing an existing style Step 1 With row editing enabled Click the Change R
37. visitors browser window Unless you are designing specialist graphic effects you Can ignore the outer rows Editing Rows By default rows are locked so no accidental changes can be made to them To unlock the rows ready for editing click Row Editing in the top right of the screen tow Column Editing o 44 gt Once row editing is enabled the row menu will appear to the right hand side of any selected rows Page 38 Reordering Rows With row editing enabled press the reorder row button and drag your row to the new position Renaming Rows With row editing enabled Click the Row viewer in the top right corner of the screen and click on the row name Enter a new name for your row Adding columns CHALK DESIGN Ae rnrnkE RER K ennn gnen pas R RRR LEE TTL RRR RRR RRR RRR RRR EE EE RER EK KKK KKK RER LONDON UK Row Column Editing gt Row Visibility Header Hq Feature There are two different ways of creating columns WIDGETS MEDIA Using the Columns Layout Widget Page 39 Row layouts Using the Row Layout Menu Advantages of using the Row Layout menu to create columns While using the column widget is quicker there are a number of limitations to this over columns created using the Row Layout menu Columns created using the Row Layout menu are structural You can add additional widgets into these columns and apply different styles to each column of this
38. 1 Add an Image Once your image is listed simply drag it to the location you want it on your website You can move or resize the image by dragging the edges of the box to fit your needs E p T y ea Fe eae Gm Be i l A44 AT 4 a a bas a i E gm w UE gef i ww H Seng E Weg WIDGETS ADD roy meat farmer jpg Re 812 98 aE meat pn el Geif L A dairy farmerjpg Kaf Additional Image settings MEDIA dairy farmer jpg There are a number of additional options you can create with images These are available within the image settings panel Step 1 Click on your image Step 2 Click the Image Settings cog Page 12 Locking the image aspect ratio Locking the aspect ratio will stop your image being IMAGE Size WIH distorted if you are resizing it To lock the aspect ratio click the Padlock fl Shows that the aspect ratio is unlocked The height and width of your image can be changed independently of each other Shows that the aspect ratio is locked Changing the height of the image will affect the width of the image and vice versa Adding image tags Alt Tag Enter an alternative description of your image This tag is used by speech reading devices and browsers that are unable to display your image KN Title Tag Used to give your image a title this may be displayed in Search Engines Adding a rollover image A
39. 4 PayPal Account eege Eden 64 Ge 38 EE 116 Site Search E See Site Search SOMAD ae peawereaveeueatnesanctanwewaabineds 121 lte 119 c TT 110 ETI E T 21 RE GE D tee ee 150 eT O 29 e E 70 le e VUE 158 159 NEE 108 Widget e WS aE EE 155 YouTube Wale 0 soriressssesrneornspisreernrarnn e inea 162 Address Mobile POOTO E 134 Page 152 Bis EE 18 AIEN JEE EN See Format Text Aspect Ratio ME 13 Asynchronous Loading sss sees eee eee 17 B Background EL e 24 aile E 25 Cele TT 26 reet 25 EE 26 Mobile Kette 145 E ee cla eee erence cere ree ener ren rin rene renee ee 147 EE 148 el UL 0 EE 27 BE ut 27 Basic BG we ue DE 24 Basics et E 84 Mobile EE E E A S 127 See 126 nette 11 BOOK IMAL IC ee T See Favicon bullet points See format text See Format Text UUM ET 32 Facebook E 74 Google tr 76 Navic ge seente E NEE ES 60 Buy Now Ply RE 66 Page 153 C Calendar s5steszgea zra rgaz haat g atati vons See Date Picker CAS E 157 Carousel PG AE A E A E E E A 114 Colour Background sss eee eee 25 TE E REPE I A E 22 Column Ee 40 RT E EA E E E E ES 44 EE 45 EXIGLINIG eeben 45 VIS A4 Comments ee 77 Ma a E ecra chases stonwecesthaseateores 78 ue TE CC 78 SUV leis aitncsscesdncnnvntancassevansavesstedesdestnseseabansassenasvane s 79 Company Name te E 129 Copy Eege 48 le E 139 Copyright Mobile FOOT E 135 D Database FOT e E A EEE AEAEE 108 Date PICKE ee 86 Delete EE 49 le E 140
40. 5 Shopping cart GN T tascteaasaatatcavesstvascuaravecausstiassaatabcatessnueseuasauast 64 Ee eege See Favicon Site Search ele E See Site Search Sitemap PG ME 121 Sae EAE E E V AE E 122 Slideshow TE 119 Page 159 Voie 167 Social WHC GTS ee 68 Spacer Mobile Eegeregie 164 SUM IRS UNG arer aE EEEE EEEE 87 Lee PPIE IE E E E A T 95 Strapline Mobile FOOTON E 134 Style BUTON G reren EEEE EAE 32 e E 44 unn 79 Facebook Button sss 74 Facebook LEE sss sese 74 Del EE 98 Gre BE 99 Descriptions pacsssavdeasieastaedsssunndaasttaaeteinenionsaneas 98 TIE Serer een E terre tr tr 98 DO e A 32 MODIG corsare e E E AN E 143 Background ME 145 Navibe AION EE 59 ie 42 Styles RE NEE 29 swf OO E 18 SWF BEMIS ea E E O N 110 T tar ee EE 18 Telephone Mobile Rea EE 135 Template GE 20 EI eege 21 Juge ee Le de ME 20 V ee ere 20 Text Eege 6 te 150 E e 5 KH E 28 EI eee a E E EE AEE 7 FOMA EEN 7 179 REMOVE Paaren enra E EEEE EEE 6 Style EE 29 BUI EE 30 SUV IES eee 29 Texture GET Gl soser EAEE 27 Title Site ee 123 Twitter Eege 70 Wae TT 159 160 Add PRU scrisssavacceteaesntiesadesibeaxentenactiecdioadeetae 72 Mobile Ee 158 IS ele e 135 136 txt UTE E 18 U unordered list sse See Format Text Update Mobile Eeer 131 PayPal ACCOUNT geneet E E 67 Upload lt gt BEE 18 gt h E 18 le 18 CIO 18 SU ee A COPE E EE E 36 flv 18 gz 18 ico18 E EE 11 O EE 18 17T o PAE EEEE E EE E E E T 18 HHE E E
41. AA OAA 108 Mobile e AE E 136 Ee 98 EE 99 Descriptions sss se eee ee eee 98 VIE 98 WEST TEE 107 Format IE 7 tee 150 Forms Beete 84 G Gallery e as TT 168 Google Page 155 AdSense TT A 125 Analytics se aee E AE AE 124 Map le EE 156 Maps Mobile BOOED EE 135 Eere Penes rarr ET NOR 76 Google Maps POG EE 118 Google Add We EE 160 Mobile e E 136 gz le e E 18 H Headline Mobile POO FO a a 134 Home E TAATAAN OIIE A EAEAN E E T 49 Willi See links l ico UNO E 18 Image eege 12 e 151 Aspect RALIO EE 13 Asynchronous Loading sss sse sees 17 Background E 25 DEn 148 GE E 10 Carousel EE 114 Full Screen GET gell te EE 26 Gallery e 168 ele Ve See Rollover UO sc caacecocancecuxcaaeesun E E ENAS 14 Bil sec seert gece cane neptee eens asec eee T 15 Belleger 14 IE 12 SINCE e 119 e EE 167 NET 12 Hs eT T 11 D TT 17 Images BOSE ed 11 Inner e 39 J EVT 113 justify Eeer See format le See Format Text K Keywords Page Eeer 123 Site SET 123 L et eege eege 14 LinkedIn Add DVO TE 160 lt gt Buisiness le UE 162 Mobile FOOL CN operenie riis orr rnn Er EEEE RE 136 Personal NATO Ue poaseeteerececep teases desnatnsetemececeveatanccneens 161 Links PUG EE EA N toes E acon 8 HEEN 15 RT e E EAT EE TAAT E ANTS 32 Loading speedS sss sse eee eee 11 17 Logo Company DEE 128 M m4a OIG E 18 m4b GIG e 18 m4v lee EE 18 Manage Bell 78 Map e 156 OO CSI ate seed sun eavayeun couse cus
42. Description Mobile Kes WE 134 Page Eege 123 Site RE 123 Divider Add e TE 164 doc lee E 18 docx ODIO AG EE 18 Download eigene 108 Drop DOWN Menu esse sees e eee eee e See Select Box E ECON lu e 64 Edit Page els o srirresriieokeeree s nnrir RESER 138 ie 39 En OCS T 21 E E 7 EE 30 Embed LK ed E 113 Export Formi eil une 108 Extended Navigation te 165 F Facebook Add en 160 Button al EEE EEE 74 Like Hke BOT ON errea a tesa tenuate seamena steered eeeseee 73 Mobile POG KEINI PI E EE T TE T T 158 FOOTE E 136 Favicon EC i A E A 36 UDIO saron tense nactesnoediee 36 Feature le 166 File Add Downloadable AAA 19 Flash PG TTT 110 EMDE diegene 110 Flickr PGI E A A E E N 68 flv le TE 18 Eeer 52 Font IS Ce 28 Footer Content MOO UU 132 Map AE BEE 135 Mobile Ls e e 134 OO EO a aaea TET Eai eaa ani 135 DOSCHID HOM ER 134 21 N A 134 FACO DOOK eet 136 Rs cayeceasetreomanaupeeumoutereanstpeqenet antnaureseeaseas 136 Google 136 Ieai aiaa Eaa 134 ii E 136 Bee 136 TEI T A 134 Telephone anaon rrna enaa haear zit 135 Twitter 135 136 YOUTUDE E 136 Page 154 Titles MODIN TH 131 Update Eeer 131 Form Eege 84 COENE eege EE 96 Date of Purchase eee 93 Dee 86 Email EE 90 MODINE ssrin a en TRENEN 157 Name E 89 PROGUCE Men EE 94 Select BOX e See Select Box SLAM ROUNE serre a 87 95 Telephone Number 91 E e 87 VEX BOK TEE 87 DEES C E 108 Edit EEN 86 Ende E 88 Sela E apar a N EN E
43. E E E E 18 NOV EO EEE E A E E 18 D E AG 18 le EE 18 Eeer 18 Reesender Eege 18 DIS E 18 Se o A E E E E A E 18 ag APET A EE EA E A T A E E E E T 18 GV ee 18 tar18 txt 18 WV E ugeet 18 Ee 18 xls 18 MIS E 18 zip18 URE ICON scsvosrentsesssrsunpetvenedenexencertieentteonsrnnty See Favicon V Video Le D 108 W Website ICON E See Favicon Widget Mobile ale WE 155 Page 160 Widgets ee BE 68 wma Bl ee PE AE A PAE E 18 wmv UDIO EE 18 X xls UDIO EE 18 xlsx lee EE 18 Page 161 Y dei ENT e TEE See Video Add Mobile 160 162 Button Tee EEN 163 Mobile Sele EE 136 Z Zip GO a EE 18
44. E E E EAE T 69 EE TT 70 Dee 70 Eeee 73 SOG A OOM AIO EE 73 Addons and WING EC 74 EE 74 ecc 81 Creating a MEW TORI EE 81 Dae PUCK Sr Eeer 83 BI aE IN Sy geet oon xe aurea OENE ET N AEE seeecy ee E O A 84 WWE Ce EES 84 TCA E 84 Select box Drop DOWN Menu sss esse eee eee eee eee 85 ENN TIR se A EEE wa pasriauSienehveoies 85 Chaneine ihe look of aT OU EE 94 RE Tp re DEE 103 EXD OPENS ele ill ee dn E 104 POA VCO EE 105 Page 3 eieiei EE 106 SIS SOC E 108 TAO CO EE 109 CAS EE 110 FS CSO EE 112 GOODIES ENEE 114 CSO EE 115 SEO Sitemaps and RE ele ER EU d 117 eT 117 ho al Oe ee e 118 Google SiteMaps ee 118 EO De LE 118 GOO EE 120 GOOG FDS iS E 121 Creating your TE 122 Structure Of a Mobile web page sian xxsccnncinncainesieedsacteasslanvavedveddanssdncecnedsasnadsteanevadendduncadhcosasdsacteedflaasneades 123 Agdng company EE 124 Adding your COMPANY LOBO E 124 Adding your company Hate 125 Page management EE 126 EE A A N EEE EA E AEE E tea te bala cease A A AEE A EN E O 126 ET gl EE 127 Changing the look and feel Of your ee eee 130 Rei eT 130 ET te EE 132 EE 136 UE EN 136 luet 137 leg leie IV CONTEN E 138 Previewing YOUF SNE sorsi ncra nE a E a i r T ES 140 EE 141 els TAT e TTT 141 CUSTOMISING Wideets sse eee eee 142 RT e 142 MOEK EE 152 Introduction Website Builder is a powerful and feature rich application that allows you to create websites without the need to learn the HTML language or web design
45. ES selecting Styles Home Page Link Folder Link Page Link SEO Optimise your site Google SiteMaps MEDIA S D Sitemap Each time you publish your site We ll generate a new sitemap for Google and other search engines to access This gives you the same SEO results you would get from using the Google webmaster sitemap tools without lifting a finger 3 Note Only search engines are able to access this sitemap SEO Settings Adding additional information regarding your website can help understand search engines understand your site and improve your search rankings There are three types of information you can add e Title Site only The title tells users and search engines what the topic of your site is This should name your website or business and could contain other useful information such as its main focuses or offerings e Description The description should contain a brief summary of your page or site e Keywords Add a few keywords that are used to describe your page or site lt gt Page 118 You can edit these settings for each page and enter global settings for your website as a whole Adding Site wide SEO data Click Manage in the top navigation bar then select SEO settings from the left H hand menu Enter a Title Description and Separate each keyword with a comma Language Keywords in the text boxes provided Once done click Save Adding
46. M certainly be buying more soon SE Shadows Thanks Ralphs Farm Shop Visual FX Ze w H Decline Delete Se Ze Ze Click Save Changes once you are done SETTINGS STYLES Step 13 SITE WIDE STYLES Click the Edit button next to Comment Container Comment Text Comment Author Comment Autho Comment Text Comment Date Comment Avatar Click Borders In this example we SETTINGS STYLES css have added a slightly darker solid Editing Comment Avatar border with a width of 2px all round Dide Background style Solid Spacing shadows S S Reset Borders Visual FX purchased this cheese for Christmas and it s the best cheese ever ll E certainly be buying more soon E Thanks Ralphs Farm Shop Decline Delete Page 80 Customer Support Website Builder Manual Step 14 Finally we have rounded each of the corners by 15px purchased this cheese for Christmas and it s the best cheese ever I ll certainly be buying more soon Thanks Ralphs Farm Shop Once done click Save Changes Forms ER The Forms widget will create a wrapper for you form to use ES Once you have created a form you can add fields for customers to fill in using the remaining widgets Creating a new form The Forms widget will allow visitors to provide you feedback contact you or rate your products and services Unlike the comments widget the feedback cannot
47. Set the amount of padding Length Set the length of the widget Alignment Edit Style Page icons Home Page e S Alignment Line thickness inherit e Padding inherit e inherit e Page 150 Spacer The Spacer widget can be used to create S space between content on your page edasOna Vegetables Set the height of the widget Height Redirect c The Redirect widget can be used to create a redirect to the non mobile version of your website Text Enter the text you want the widget to Gute h to desktop display Page 151 A aac ODIO AG EE 18 Add Call Me DON TE 157 ATOMS E 114 ENEE 40 Sa LAN ihn PANTE EA 77 Facebook LiKe BUTTON E 73 e s ecctencie scares tiasenar eg sestsaccceeelaecancestenceee 158 File Downloadable Aua 19 Iaa a 110 Se 68 OIT a E E 84 CONME e 96 Date of Purchase sss 93 Date PICK E 86 Email ele eis peer ne emery enti nner nner ne ener 90 ten corio N 157 Name FON coerce ssounwetumcenwecaontsansesenuaencsennetemeees 89 Neel dE TEE 94 Select BOX E See Select Box Star EE 87 95 Telephone Number sese eee ee eee eee 91 ees 87 E ui e E E A S 87 Google Ad E 125 a Wd sciressreeicerssessrenepiirns rke reinan 124 Google Ee EE 118 IG 156 lt gt ont 12 e enle EE 113 int 8 Mobile le EE 164 EE 166 TT Te BEE 163 PRS ON E 165 SPACON ene nee ner ee eee 164 Navigation menu 57 Eege 46 MODIC cesigar A A 137 PayPal ACCOUN een 6
48. Step 2 Drag the RSS Feed widget to the E area of your web page you would like it to appear RSS Feed Double click on the widget the settings screen will appear Page 112 Page 113 SETTINGS STYLES RSS Feed Feed URL Posts http feeds bbci co uk r S Show full posts On refresh Show posts title Enter the URL of your RSS feed Choose how often the RSS feed should update This will depend largely upon how often new articles are added to the RSS feed Use the slider to choose how many posts to display It will display the newest posts first Check this box if you would like to see the full posts Leaving this unchecked will display only the posts titles This will toggle the title of the RSS feed on and off We are owed apology says Daily Mail A senior Daily Mail journalist says the paper is aw Once you have configured the RSS Widget click the Styles button to alter the look and feel of the Text displayed in the RSS feed You can edit the RSS text in the same way as editing the look and feel of text Google Maps Step 1 SETTINGS STYLES SITE WIDE STYLES Heading List Tithe Full Post Title Click Widgets then expand the Content section to find the Show a location widget Step 2 Drag the Show a location widget WIDGETS to the area of your web page you would like it to appear Double click on the widget the settings screen will
49. Type Company Name or LinkedIn E i l a Company Name e Company ID to lookup your LinkedIn i profile Enter your details 2 Enter your details Enter the details depending on what Type has been selected YouTube The YouTube widget allows you to embed a YouTube video into your website Page 148 Enter Youtube URL Enter the URL of the video you want to iframe embed src hittp Awww youtube come mbed j9Hjrs6vWO8M frameborder 0 allowfullscr en gt lt iframe Button The Button widget allows you to place a button on your page ES Link to Select what you want the button to link to You can choose from an Internal External or Mail link ES Icon You can pick an icon to display on your button ES Text Set the text and formatting of the button text Nav Menu The Nav Menu widget creates a f Home About Us Contact US navigation menu on your page Page 149 Alignment Align you widget on the left right or in the center of your page Edit Style Edit the style of the text in the Nav menu Pages Drag and drop your pages in the order you want them to appear Page Icons Choose an icon to display in your navigation menu Divider The Divider widget can be used to create a horizontal line on your page Alignment Align you widget on the left right or in the center of your page Line thickness Set the line thickness Padding
50. U 0 GU 350 Theme Background Type Image CHALK DESIGN LONDON UK espa R BH 6 blue tiles jpq LA Theme Settings Width 920px vw Position WIDGETS MEDIA enter e ADD Q v E C V U Ro Zap ke 2 dairy farmerjpg d o colorful kitchenware_4 jp dairy jpa 57 4 KB o colorful kitchenware jpg Dackoround Ges 1009 75 8 KB blue tiles jpg Step 5 Tick the boxes to repeat your image vertically and horizontally to fill your background Click outside the background options menu to close the menu and continue editing your site Page 27 Styles Changing your websites font Font sets allow you to change the default font of all the content on your website Simply Click Theme Fonts then Preview Themes Manage Publish choose a new font from the drop Theme Colors Theme Fonts Aq Background down menu Font Swatches ABC D efgh ABCD ar ABCD efgh ABCD etgh ABCD efgh Changing Text Styles There are a number of text styles that you can use to maintain a consistent look and feel across your website You can edit these styles yourself or create new styles for your text Create a new style set Step 1 Select a text box and click the Settings H H d 8 H H d D d oo U I 1 1 1 i lt o Dm S HI arar monr Soe Cf amaf rara Pi COOP JP apo lf R edd e t POG Ga USU U WY L Goi LOI IeELLELUET OI SC II EI GOL C m f J E Fr TO CP Pare af Frj EE Fo AC Page 28
51. age and click Save Changes Your Animation will appear on your website e SETTINGS Site search Step 1 Click Widgets then expand the content section to find the Site Search widget Step 2 Drag the Site Search widget to the area of your web page you would like it to appear Homepage Our Portfolio Contact Us Quick tip Add this search to a template if you want it to appear on each page Page 108 SETTINGS css Step 3 By default the text in the search box will be Search Site Search To change this double click on the widget and enter a Default Text Find Product new default text in the box provided Once done click Set Step 4 To test the search click Preview then enter a search in your new search box Contact Us Award winning cheeses Eros in quam lacinia sed dic L E E d E Embed The embed widget allows you to embed javascript lt iframe gt or HTML content directly into your website O Important Care must be taken in inserting code into your website Broken or incomplete code may cause your site to stop working Page 109 WIDGETS MEDIA y Step 1 Click Widgets then expand the lt Content section to find the Embed widget Step 2 Drag this widget to the area of your web page you would like the Flash to appear Step 3 Double click on the widget to open the settings option Remove the demonstrat
52. allow you to direct visitors to an internal page once they have completed a form and clicked submit If you want to redirect to another page enter the URL of the website you want to link to in the box provided Quick tip You can alter these details after you have created the form Simply double click on the form and enter your new details from the settings menu Once you have created your form you can start adding fields to it To add a field simply drag the field widget into your form a Note You must drag the form Field Widgets into your new form If you see the Create new Form options appear you have dragged the widget outside the form Click Cancel and drag the widget onto your form again Create New Form Title Description My new form No Description Submit Button Text Email Submit Internal Link External Link Select an internal page EN CANCEL CREATE FORM There are 5 different field types you can add to your form Date Picker The date picker provides visitors with a calendar that they can select a date from Page 83 Sep 2013 T W T lt Feet A 11 12 18 19 25 26 Text Fo Description D Star rating The star rating allows visitors to rate an item Text anani j SE ON No Vescripron Text Box This allows visitors to enter a short piece of text This is useful for fields like Name Email address website telephone number etc
53. appear MEDIA Page 114 SETTINGS CS5 Google Map Find Address Markers Zoom pan buttons ES Enter your postcode to centralize the map on your location EN Choose a map type from the drop down menu E Select the default zoom settings on your map ES Check this box to allow visitors to zoom view street view Or pan your map CS Drag a marker onto your map This will appear on the map for visitors to see D If you want to cruse a custom pointer on your map upload an image and drag it to this location Slideshow A slideshow can add movement and excitement to a web page although care should be taken to ensure it doesn t become a distraction from your main website content Step 1 Click Widgets then expand the Premium section to find the Slideshow widget Page 115 Cz Step 2 cue ES Drag the slideshow widget to the area of your web page you would like it to appear Fy Slideshow Double click on the widget the settings screen will appear 1 v APPEARANCE AND TRANSITIONS Slide duration Loop s S S Transition speed Transition EES Aspect ratio ors Please add images to your slideshow Size E o E Images handling Crop amp Zoom lt CONTROLS BORDER ADD IMAGE remove image Appearance and Transitions This section allows you to control how your images 1 appear with in the slideshow the speed of the show and how to change
54. around the text In this example we have added a padding of 3px to the top and bottom and a padding of 8px to the left and right Editing Link Font Background Borders Shadows Visual FX Step 6 Click Borders In this example we have added a solid White border with a width of 3px We then rounded the corners with a radius of 5px Editing Link Font Background Spacing Shadows Visual FX Reset Borders Step 7 Next click Shadows a Note Older web browsers are unable to display Shadows or Visual FX on your site In this example we have just increased the opacity of the Box shadow to 30 Page 33 Cz Editing Link Font Background Reset Shadows Spacing Borders Visual FX Step 8 Click Save Changes Step 9 Repeat the above steps but this time modifying the Link Hover style in Step 2 Quick tip A nice effect is to use the same spacing s borders and shadows for both styles Only changing the font or background colours for between Link and Link Hover Once done you can view your link in Preview mode Sourced from our local farms quality assured Sourced from our local farms quality assured Sourced from our local farms quality assured seasonal vegetables are available at the click of a SE N d AT Kabes AE a e An Seasonal vegetables are available at the click of a seasonal vegetables are available at the click ofa seasonal vegetables are available at the clic
55. ays small icons linking to all your social network pages ES LinkedIn Enter the URL of your Linkedin page Twitter Enter your twitter profile address Facebook Enter the link to your Facebook profile Fe RSS Enter the URL to your RSS feed Google Enter the URL of your Google account e Youtube Enter the URL of your youtube page Linkedin Personal The Linkedin Personal widget allows you Linkedin http Awww_linkedin com corr 0 Twitter Wi Je Facebook http 4acebook com ralphsta a oo Ke at http feeds bbci co uk news 0 Google ah https plus google com BB 6 U Youtube http www youtube com use 6 to embed a widget that displays basic Ralph smith information from your personal LinkedIn profile Director at Ralphs Farm Shop Gloucester United Kingdom View Profile Simply enter the URL of your LinkedIn public page Page 147 Enter your public profile URL Ea Si Y http www linkedin com pub ral Linkedin Business The Linkedin Personal widget allows you i BBC to embed a widget that displays basic B The BBC is the world s leading B D Le public Service broadcaster information from your personal LinkedIn profile oo Funded primarily through the television licence fee the BBC provides Broadcast Media 10 001 employees E Folow Type Select whether to use the
56. be displayed on your website automatically although you can configure your form to email you with the results or download all comments onto your computer Page 81 WIDGETS MEDIA Step 1 Click Widgets then expand the content section to find the E Sea E Form widget Form Widget Step 2 Drag this widget to the area of your web page you would like it to appear Create New Form Step 3 Title Description The new form Screen WW Ar new form No Description E l _ _ T IT will open Submit Button Text Email _ Submit S Internal Link External Link ess an internal page Le 9 CANCEL CREATE FORM Title Enter a unique name for each form on your website Important Creating two forms with the same name on your website will cause data collection problems on both forms ER Submit button Text Choose the text to show on the submit button on your form This is set as Submit by default E Internal link Optional This will allow you to direct visitors to an internal page once they have completed a form and clicked submit If you want to redirect to another page select a page on your website in from the drop down menu Cz Page 82 D Description Optional Enter a description for your form Email Optional If you would like to receive an email whenever a customer fills out a form enter your email address in this box External Link Optional This will
57. ces of visitors who like you From the drop down menu select the label on the button You can choose either B Like or Recommend Choose the colour theme to match your site How a like will appear on Facebook When a visitor likes your page using the Facebook widget their friends will be able to see this like These settings allow you to choose how this like will appear to their friends Page 71 Title displayed Description A Ralph s Farm Shop Highest quality locally grown food available at your doorstep Visit our shop view our farms and love food as much as we Image displayed do http image_basekit cor Site name ralphsdomainame com Site type L pas The Settings Section Ralph s Farm Shop ralphsdomainname com EES Highest quality locally grown food available at your doorstep Visit our shop view our farms and love food as_ much as we do ol Like Comment Share 18 minutes ago gt F Write a comment How these settings appear in Facebook Enter a title for the Link Enter the URL of the image to be used If you have already uploaded the image you can find its URL in our chapter Finding the URL of an image you have added Enter your site name this will appear just under the title for the site Select Website from the drop down menu Enter a brief description of you r site and why people way want to visit it Page 72 T d ee emm Badi Gewese Dn gp
58. ch in Theme Colors Changing a full screen background image Adds an image to the background and stretches to fit your entire web page To change the image simply drag your chosen image onto the Image Preview Page 25 Eege Theme Width Step 3 Click the Theme Width menu and choose a width for your theme While you can add more information into a wider screen is visitors with lower resolution monitors will not be able to see your whole website Quick tip At the time of writing a width of 920 1040 will be usable for most visitors while filling a large areas of their screen Step 4 l G Theme Position Click the Theme Position menu to choose the alignment of Centre l lt Centre Left Ve Right your website Creating a background pattern or texture To create a pattern or texture you need an image that is tiled or can be repeated If you haven t already got one you can create one at http patterns ava7 com Step 1 Upload your tiled image Step 2 Click the Website button to enter the design mode Mobile site Preview heme Manage Publish Page 26 Step 3 Preview Theme GIEL Publish Click Background Theme Colors Theme Fonts EI Background Theme Background Type The background options will E appear Step 4 In the type drop down menu select mage then drag your image into the Preview Window Theme Colors Theme Fonts Aq Background 0 50 100 150 G
59. ct items Step 6 e Scroll down ticking the content that you want to import to your mobile site Ralphs arm shop Page 139 Include Step 7 Everything Click the Import button Everything lt 5 images 6 text blocks Import b Previewing your site Publish Step 1 Click the Preview button in the top bar Step 2 Click through the different icons to change the view of the site Page 140 D Device toggle a Full Screen view Step 3 Click either the phone or tablet icon to switch between landscape and portrait view SI Ralphs Farm Shop Home Page About Us Widgets Adding Widgets Step 1 Click the Widgets icon in the left hand bar Widgets Templates Step 2 Drag and drop the widget you N EI TWITTER EZ L BUTTON NAV M ENU w want to add onto your page Page 141 Customising Widgets step 1 i x B Click the widget on your webpage that you A Et Mt ae e e oe Bao al Ge E want to customise SE Ea mai Wai Lambeth Burgess T E p He sw rto Lt gt Map data 2013 Google TemsofUse Step 2 The settings for the widget will appear on the left hand GL1 14AB side ZE Loam Custom Height Cancel Step 3 Adjust the widget settings and click Save at the top Custom Types of Widgets Map The Map widget allows you to embed a map within a page on your
60. di SETTINGS CSS Save Changes kiframe width 420 height 315 src www youtube com embed GRxofEmo3HA frameborder 0 allowfullscreen gt lt itrame gt Your video will be displayed on your website Adding Flash You can upload SWF files and add them to your website using the embed widget Cz Page 106 Step 1 Upload your SWF file as described in the chapter Upload a file for visitors to download WIDGETS MEDIA Step 2 ADD al Click Media then hover over the SWF file you want the URL for An Information icon will appear click this z m vegqetables large jpg Oo 1 77 MB Wi C The file URL will be displayed you can copy this link for use elsewhere Ctrl C Go to http image basekit comy Print Inspect element WIDGETS MEDIA Step 3 Click Widgets then expand the Content section to find the Embed widget Step 4 Drag this widget to the area of your web page you would like the Flash to appear Step 5 Double click on the widget to open the settings option Remove the demonstration code enter the following code lt object width 550 height 400 gt lt param name movie value Flash swi gt lt embed src Flash swi width 550 height 400 gt lt embed gt Page 107 lt object gt Step 6 Replace Flash swf with the URL you noted in Step 2 Seasonal Veg Step 7 Meat Special Offers Change the width and Kitchenware height to match your p
61. e mal Please enter your name Enter your email address Enter your telephone number Datepicker i db No Desenpiion DI TL LAAL JL Seer er ee Pee ee ee ee ee DI Ri er es D EREECHEN Step 3 Form Field Settings Enter Date of Purchase in the Title text Field Validation box and a description in the box below Title Step 4 Description Click OK Product menu Step 1 WIDGETS MEDIA r E abe Name Please enter your name Drag the Select box widget onto your form Email address Select Box Page 90 Step 2 Double click on the Form to open the settings Now when you hover the mouse over the text box another settings button will appear Click this button Step 3 Enter Product in the Title text box and a description in the box below At the bottom of this window are the options for creating your drop down menu select Options S Add new value to list Please select Name Please enber your name Email address Enter your email address Telephone Enter your telephone number Select E No Desenption Please select E Date of Purchase E When did you buy the product Form Field Settings Field Validation Title Product Description What did you purchase from us i Shows the Value associated with each product in the drop down menu This will appear in any emails to you or if you export
62. edesigner com Find the background attribute and change the colour from transparent to the colour you choose LU LAE LLM AE s SULLU Se R R ee 2 ee border color 4A942F border color white border left width Opx border left width Opx border right width Opx border right width Opx border top width Opx border top width Opx border bottom width 3px TTT border bottom width 3px text shadow P Cext sh iadow Step 3 Next we added some spacing around the text In this example we added 3 points of padding across the top and bottom and 8 points of padding to the left and right Find the padding attributes and add the padding you want widget formarea button widget formarea button i font family Arial sans serif font family Arial sans serif font size 12px font size 12px line height normal line height normal text decoration none text decoration none font weight bold font weight bold color white St color white margin Opx K pes padding Opx ee border style solid padding left SC background 78a324 padding top JPX padding right Bpa A ers Pe Solid background 78a324 Page 97 Cz Step 4 Now add a white border to your style Find the border color attribute and change the border colour anac G width ODE peed right serr Opx border top width Opx border top width DDS gt porder bottom width Opx BEEE border bo
63. edirects Step 2 Redirects Any redirects that you already have set mareste aos rar ESA AN up will be displayed To add a new o redirect click New Step 3 Enter the following a ETS TSR EA 4 669 ae ee e From Name of a page on your site that does not currently exist e To Choose the page that you would like visitors to be directed to e Type Choose the type of redirection This will usually be set to 301 Permanent Page 54 Once done click Create redirect Add a redirect d Bar redirect Your redirect will be visible on the Redirects summary screen sen abouts To conlact us D Visitors to ralphsdomain conv about us will be redirected IO ralphsoaomain c om contact us Type 301 Permanent D Removing a redirect Step 1 Click Manage at the top of the screen then select Redirects Mobile site Website e Shared Des ktop S Contact Details Preferred Domain ellis Image Albums ave Your Website Site Status SEO Step 2 Click the Change dropdown Then click Delete Page redirections for this site Advanced feature please read the documentation before proceeding New redirect Redirect from Redirect to Type Action ralphsdomain com websitebuilder partnersitehosting co_uk ralphsdomain com ralphsdomain websitebuilder partnersitehosting co uk home 207 Permanent Edit ED CED Page 55 Navigation Add a navigation widget to your page In the left hand pane click Widget
64. elephone Product Date of Purchase Rating Ralph raphsdomainame com mess Cheese O Cheese was very nice thank youl would be nice if you were to offer a gift box option so can give it to my friends as presents Quick tip If you have configured the form to send you an email you should receive an email at this point Step 2 Page 103 Custome Support Website Builder Manual Click Website at the top of the screen and double click on the form to open the settings Step 3 Click Database The details you just entered will be shown as a row in the database settings SETTINGS STYLES CSS DATABASE BR Name Be Email address Be Telephone Be Date of Purchase Be Product a O Raih ralph ralphsdomainname com 221144 mmm OO E Ralph ralph ralphsdomainname com 221144 2013 09 03 Cheese C Exporting completed forms You can export all completed forms as a CSV file This can then be opened in Excel for your use Step 1 In website editor mode double click on your form to open the form settings Step 2 Click Database A list of all your customer entries will be displayed Click Export Data at the foot of the screen SETTINGS P CSS DATABASE BR Hame BR Email address BR Telepi This will download a CSV file to your computer You can open this in Excel or any other spreadsheet to view the data Cz Page 104 LA A B LG D E
65. ep 4 Theme Styles Custom Background spacing Borders Shadows Visual FX About Farms Shop n a Dan a nn a a n ata aa n a a a aaa a a a aa a a a a n a a a a aa a a na a a Dn a a a a a a a a a a a as a a a a a na a a aaa aa Be a aes a a n SETTINGS STYLES Editing Page Link Font Click Spacing and add 20 points of Background padding to the Left and Right of your Borders Shadows links And 10 Points of Padding to the P top and bottom Step 5 Ds as ea a a n a a aa aa aa aa a aa e a n a eT a a a aaa aT es Ba aaa Ta aaa aa Bs aT aaa Be Ta aaa a aa a ha aa a Ta aaa BT B H Shop SETTINGS STYLES Editing Page Link Font Click Borders and choose a solid GE Grey border Make the borders 1 point thick on the left and right Spacing Shadows Visual FX Farms Home About A n a a n a a aa aT a n aa an Page 60 Step 6 SETTINGS STYLES Click Save Changes Now click edit next to SITE WIDE STYLES the Page Link Selected link Step 7 Change the font colour to light grey Step 8 Click Background Select a Linear Gradient In this example we have set the gradient to 90 to match the background Page 61 Page Link Page Link Selected Page Link Hover SETTINGS STYLES CSS Editing Page Link Selected Theme Styles Custom Background Spacing Borders Shadows Visual FX fa Bs Dass an a Ba n aA a
66. etter to open external links in a new window so that visitors can remain on your site Step 5 Click Save Link Page 9 Link Editor Internal Link Farms gt farms 9 select an internal page Home gt home About gt about Contact gt contact Vegetables gt vegetables Farms gt farms Opens in this window D CANCEL SAVE LINK Link Editor Internal Link select an internal page External Link http www yourwebsiteandemail com Link Target Opens in a new window SAVE UNK Images Click an Image to open the image options bei Replace Image Replace E D E H 5 _ this image with another RRB you have already Si Settings button Click this where you can add links alt tag title tag rollover or lightbox to an image Resize Image Reset your image to its original size Drag Handle Drag an image to a different row A Delete button Remove the image from your website e Drag Boxes Drag these to alter the size and the shape of your image Best Practices Images are important on a website however large images in file size rather than area can slow your website down and use up your visitors data transfer quotas if they have any When you add an image to your website you should always look at reducing the file size of the image before you upload it There are two main ways of reducing an images file size
67. ew pane View how the text will look on your website Step 4 Editing Heading 1 Theme Style Click the Save Changes button SE spacing once you have finished editing Borders shadows your text style visual FX CANCEL Changing the style of links If your links don t stand out visitors won t click on them The process for editing links is the same as for editing text styles There are two link styles to edit e Link Add new style e Link Hover Making your links look like buttons You can create images to use as button in your website but a quicker way of creating and editing buttons on your website is to change your link style to look like a button Page 31 Cz Step 1 Select a text box and click the Settings cog Step 2 Click Styles then click the Edit button Link Link Hov The look and style of your button is up to you For demonstration purposes we will create a green button for our website Step 3 On the Font button choose how you want the button text to appear You can view the text in the Preview Panel Editing Link Theme Styles Custom Background Spacing Borders Shadows Visual FX Step 4 Click Background and choose a color for your button In this example we will select a solid green colour but you could choose a two tone gradient or an image if you want Cz Page 32 Editing Link Foni ajid Cols Step 5 Click Spacing and add some spacing
68. f your friends to like this Cz Page 144 Facebook widget that will allow users to Like your website Page 145 Facebook Like Description Enter a description for Facebook to display Site name Enter a site name for Facebook to display URL to like Enter the URL for the Like widget Image Displayed The URL of an image you would like Facebook to display Title displayed Description ES Fresh local produce Ess Site Name Ralphs Farm Shop Fees URL to like D nitp v raipnstarmshop com Ee Image displayed ah http ralphsfarmshop com logo es S ES Show Faces Choose whether you Gr SES would like to show the faces of Verb to use Font people that have liked your site on i l f Arial lt 1 E Verb to use Select Like or Layout Recommend Standard u ET Font Select the font for the widget to use 4 Color Scheme Choose from a Light or Dark colour scheme Layout Choose from a Standard Horizontal or Vertical layout Tweet The Tweet widget allows you to embed a e N C weet widget that will allow users to tweet about your website ES Link Text Enter the text you want Link text shown on the Widget ES Tweet text Enter a prefix for the tweet Cer Alignment Align the widget to the Jett right or center Page 146 Social Bar The Social Bar widget allows you to embed a widget that displ
69. fasthosts Fasthosts Customer Support Website Builder Manual This is a designed as a definitive guide to all the features and tools available within Website Builder Contents It ee e Te TO d Adding Ke E 5 Eege 5 PCV EE 5 e 4 AEE E E E 6 EOE VO aea a AE E A E E E A E E E 6 eigene lat plock of KEE 7 RE El Hi 5 sess peas cetarsaisc EEE E AE E E E EEE E EE E E TA Ai 8 AE EE 10 Kd ng 10 lee elt EA ug 11 PUAN WON EE 12 eege Ee gg TE 12 Finding the URL of an image you have added sss sss eee 17 Ree e e e E 18 Upload a Tile for visitors to download EEN 18 EE ee 19 Working With Templates seirian 19 Cread anew 161 AUS EE 20 EGUO ge 20 Adding a template to a web page EE 21 Themes Changing the look and feel of your Site sssssssssssssssssssssssesesss eenn 21 eer 21 Changing all the colours in a theme sees eee ee eee eee 22 PAC TTT 23 Changing background colour sss sese eee ee eee eee 24 CHOOSE a background lu ETC 24 Adding a two colour background sss sese sees ee eee eee 25 Changing a full Screen background Image 25 Creating a background pattern OF texture sse ee eee eee ee eee 26 re EE 28 R IT TTT eT B Wy a SHES FON E 28 CIN e SENS S AE 28 CHa ee Me SIV IS OF MK Sixes caatanesvarasucectantanasvancnledsaadanatentaiunesentsnndswusinleds cabidaienisiadisontadademicedseabidaiemiactseuadetuinans 31 Making your links look like DUTTONS sp scsancsduacsnasdscsandsdvactensdedeaunsdous EE 31 FIC OI E 35 R See a F E 35 Uploadi
70. g No Desorption Page 92 Step 3 Enter Rating in the Title text box and a description in the box below Step 4 Click OK Comments Step 1 Drag the Text Area widget onto your form Step 2 Double click on the Form to open the settings Now when you hover the mouse over the text box another settings button will appear Click this button Page 93 5 E LA E E E E E m E m ka E E E ka LA ka E E d d E L E EA Form Field Settings Field Validation WIDGETS MEDIA E Date of Purchase 8 T a Ka e Ce ET S ge A When did you buy the product j ef gei kel Rating LT Ly Ld How woudl you rete the product Text Area makingthemostofyourwebsit Enter file download descripti Rating Www Ww Ww Ww How woud you rate the product Note No Desorption Se Be Ee Be e NNN De Be e E Be e Be e E e Dr Be E Be e E Be e Be Ee Be e Dr Ae Ee Be E Be e be be E Be e Du e Be e E NNN e Be e fr be e Se e Ee Customer Support Website Builder Manual Step 3 Form Field Settings Enter Rating in the Title Field Validation text box and a description in Title the box below Comments D Description Tellus about the produc Step 4 Click OK The form is now complete Let us know what you think What do y
71. ges of the box to fit your needs Removing Text Click the text you want to remove An options menu will appear above the text Click the Red Cross Ae m pm n mn Em pm fm Za vm mym om Sr za db gg S za rm em Mm utruMm feugiat sapien Donec at mi sit amet nisi rhonct S pat toen T TT T T B EW CI rei Cr ean like e oa n mi convallis Ut pellentesque Proin accumsan libero ac velil You will be asked to confirm you want to remove the text click Confirm to delete your text Editing Text Click the text you want to remove An options menu will appear above the text Click the cog to open the editing options wm utrum feugiat sapien L rn reall c L AO T P O TTT Convallis Ut pellentesa FTON S Dt TEEN a zTnal6e SU 21 Enter your text in the box Formatting a block of Text Quick tip This will show you how to change one block of text To change the styles of text across your site please see Font Sets and Font Styles Step 1 Double click the text you would like to format In libero ipsum volutpat sit amet molestie sit amet Eros in quam lacinia sed dictum eros vestibulum nec ipsum Quisque et purus eu neque augue sagittis eget tincidunt et mauris dictum varius Donec elit mi posuere m elit Sed cursus faucibus tellus ac tinc vel luctus vitae vestibulum in velit Vesti suscipit eget Duis lacinia quam et es ulum id nis egetnt vel
72. http 3A visitors to share links to your web pages on twitter easily and a Share a link with your followers quickly z Contact Us http ralphs farm shop com contact us visitor twitter users me uk F L E Remember me Forgot password New to Twitter Get instant updates from your friends industry experts favourite celebrities and what s happening around the world Step 1 What is Twitter Learn more Click Widgets and expand the Social section to find the Tweet this widget Page 69 WIDGETS MEDIA Step 2 Drag the Tweet this widget to the area of your web page you would like it to appear The button will appear on your webpage The callout icon next to the button records how many Tweet This visitors have tweeted from your page W Tweeten 0 Facebook Like Step 1 Click Widgets then expand the Social section to find the Facebook Like widget WIDGETS MEDIA Step 2 Drag the Facebook Like widget to the area of your web page you would like it to appear Click on the widget then click the settings cog to open the settings options Facebook Like Page 70 There are two types of settings to set How the button will appear on your website SETTINGS Facebook Like Button Choose a layout style Layout Style Verb to use to match your design Standard Color Scheme Show Faces Choose a width for your button Checking this box will show the fa
73. ick cancel and try again Step 2 WIDGETS MEDIA Text Box Double click the form to open up the settings menu and mouse over the text box and click the settings cog Step 3 Enter Name in the Title Text Box then add a brief description in the box below Form Field Settings Field Validation Title ame O Description What do you like the be calel 7 sid CANCEL Page 86 Step 4 Form Field Settings Click the Validation tab then enter an Validation error message to be shown if the form is submitted and the field is blank ti Error Message Please enter your name Step 5 Click OK Email Address Step 1 Drag the Text box widget onto your form g Like F Be the first of y Step 2 Double click on the Form to open the settings Now when you hover the mouse over the text box another settings button will appear Click this button Step 2 l Form Field Settings Enter Email Address in the Title text box ED Vaicstion and a description in the box below Description CANCEL Page 87 Step 4 Form Field Settings Click the Validation tab Select E mail Address ae from the drop down menu then enter an alidation E mail Address error message in the text box provided Step 5 Click OK owes Telephone Number Step 1 WIDGETS MEDIA Drag the Text box widget onto ote ES your for
74. ion code and enter your new code Quick tip We have specific examples using this widget in the following chapters e Add javascript to your page e Adding Video e Adding Flash e MP3 Third Partv Carousel The carousel widget is similar to the slideshow widget but does not support transitions or customisable buttons Step 1 Click Widgets then expand the Content section to find the Carousel widget Step 2 Drag the Carousel widget to the area of your web page you would like it to appear Cz Page 110 Double click on the widget the settings screen will appear SETTINGS C345 Carousel Widget Carousel Pages 7 Page Indicators Add Remove Next Prev buttons Interval AN ER Add and remove pages Each page is a space for an image on your carousel D Choose how many seconds you want to display each image for Toggle indicators on and off These appear as small radio buttons at the foot of a your carousel Step 3 Once you have adjusted your carousel settings drag your first image onto the carousel Page 111 Cz Customer Support Website Builder Manual stitton 1 jpg r a e Step 4 Click the Next button on the carousel Step 5 Drag your next image onto the widget Repeat steps 4 and 5 until each page of your carousel contains an image RSS Feed Step 1 Click Widgets then expand the Social section to find the RSS Feed widget WIDGETS MEDIA
75. k of a mar as button button View seasonal Vegetables gt ee E View seasonal Vegetables gt L Vonatattusa Original Text New Link New Link with Hover Page 34 Favicons A favicon Favourite Icon is a small square icon that you can associate with your website It is shown An example Favicon can be found when visiting http bbc co uk or when viewing your bookmarked sites File Show All Bookmarks Bookmark This Page www bbc co uk Subscribe to This Page H Bookmarks Toolbar BBC Homepage Creating a Favicon A favicon is a special 16 16 or 32 32 icon that has a ico file format Your image software maybe able to create these images for you if not there are a number of free online tools available such as http www favicon cc and http www favicon co uk Uploading your Favicon Step 1 Upload your favicon and then click Manage in the top menu bar Step 2 Click Favicon in the left hand menu Page 35 Favicon D A favicon is a small graphic that appears next to the web address in a browsers address bar The file type must be co Click Choose a file then select the to e i a ee eee e9 2 Ar Basekit Images i 8 v Search Basekit Images favicon you have saved on your Radin Bs G e l aran Name Date modified Breset R Desktop A 440Hz Ssec mp3 01 02 2008 18 17 com p ute r j 8 Downloads background tiles jpg 15 08 2013 08 25 S Recent Places
76. lect a colour Pei Move the slider to Selecta different hue ES Pick a colour from this colour swatch if you want the colour to change whenever you change the colour swatch Set the colour to Transparent DS Choose a custom colour Enter a Hex colour value Add your chosen colour to the custom colours swatch Changing all the colours in a theme Step 1 Click the Website button to enter the design mode Mobile site Preview Themes Manage Publish Step 2 Page 22 Click Theme Colors A drop down menu of colour swatches will appear Preview Themes Manage Theme Colors Theme Fonts Aq Color Swatches Colour swatches are groups of colours designed to _ minima complement each other they are used to set the WH WWII colours for a theme CRW S inima 2 EH BEDE II Professional 1 E Bae Professional 2 Simply click on a swatch to preview it on your site BM _ Professional 3 WB Flora 4 once you have chosen your swatch click anywhere on your web page to close the menu Background Step 1 Click the Website button to enter the design mode Preview Themes Manage Publish step 2 Preview Themes Manage Publish Click Background Theme Colors Theme Fonts Aa Background e a kor Theme Background CH Type The background options will appear Page 23 CA etrnmar GA Art Aah L el US IO mer ol it H AH DC 8 r Tt V V GL
77. m l Step 2 Text Box Double click on the Form to open the settings Now when you hover the mouse over the text box another settings cog will appear Click this cog ie ie E E E ie ie ie ie ie 7 ie i 3 ie E ie E E E E CT Please enter your name Enter your email address Text No Desorption i pees H ees Page 88 Step 3 Form Field Settings Enter Email Address in the Title text box Vaidstion and a description in the box below Title Telephone Number Description Enter a contact telephone number ome F Step 4 Form Field Settings Click the Validation tab Select Telephone Sch Number from the drop down menu then Validation enter an error message in the text box eee provided nn Step 5 Click OK Date of Purchase Step 1 WIDGETS MEDIA 4 Drag the Text box widget onto your form Name T a Please enter your name L ei v e rg Email address Step 2 Entero email address S Double click on the Form to open the settings Now when Leger you hover the mouse over the text box another settings button will appear Click this button Page 89 Ic D Ar e Ar Ca j A em ew pada V J Le L EN i V A i amp EUCLA sg iy pe we We 17 CX CA YU ke L O l H w I CR u H i KA i L V V e LI vi L v d kef RS W K AA AA E e LN e
78. me Styles jackground have finished editing your text style Spacing Borders shadows Visual FX CANCEL Changing the Submit button The submit button does not have a user interface to edit its style however you can make changes to it by editing the CSS As with links there are two styles e widget formarea button Standard button e widget formarea button hover The button when the mouse if hovering over it In this example we will make the button look the same as the links we created in the chapter Making your links look like buttons SETTINGS STYLES css DATABASE Step 1 Click CSS then find the text that shows widget formarea button widget formarea button font family Arial sans serif font size 12pz line height normal text decoration none font weight bold color white margin left Opx margin top Ops Margin right Ops margin bottom Opx padding left Opx padding top Opx padding right Ups padding bottom 4px have gl EN me A E or CS 8 oralara SAVE CHANGES RESET CS5 Page 96 Step 2 First we will change the background colour When we updated the links on the website we created a colour using the colour picker Within the colour picker is the Hexadecimal value of the colour In this example we will use this you could also get a value of a colour using online tools such as http www w3schools com tags ref colorpic CANCEL OK ker asp or http colorschem
79. mments stand out a little more to add depth to the site step 1 tortor Vestibulum malesuada nulla eaaa o indicates required field Click the comments l 3 Name widget then click on E mait g f this will not be published on the website the Settings cog Website i must start with http or www Step 2 The settings section will open Click Styles SETTINGS STYLES Step 3 SITE WIDE STYLES First we will change the container for the comments Click the Edit button next to Comment Comment Container Container SETTINGS STYLES LA Step 4 Editing Comment Container Click Background and select a light Font coloured background for the Geesen Container ode shadows visual FX Decline Delete f Page 76 SETTINGS STYLES CSS Editing Comment Container Step 5 Font Click Spacing and add a 5px Margin across Background the top right bottom and left of the Borders Shadows container Visual FX SETTINGS STYLES GE Editing Comment Container Step 6 Font STYLES Click Borders We have added a Solid Geen Si e S Spacing Color f White Border with a width of 5px top Shadows right bottom and left Visual FX In this example we have also added a rounded corner to the Top Left and Bottom Right Ra SC ak PA a E IR Sera ie ara a Ae ee erent sep 3rd 2073 01 01 PE L Ralph Smith x purchased this cheese for Christmas and it s the best cheese ever I ll certainly be buying mo
80. n version of the image you are editing You can test your lightbox in Preview Mode Image Links You can add links to images within the Image settings SETTINGS panel IMAGE Size VW H 306 Step 1 Click the Add button to open the new links tool Add a link to another page on your website Step 2 Link Editor In the Internal drop down menu select E Internal Link the web page you want to link to Farms gt farms select an internal page Home gt home Sepe About gt about Click Save Link Contact gt contact Vegetables gt vegetables Farms gt farms Opens in this window D CANCEL Page 15 Add a link to another location Step 2 Link Editor Enter the URL you want to link to in the zeae Internal Link address box provided Select an internal page Step 3 External Link Choose if you want the target link to ka lalaa ea ba open in a new window or in an existing Link Target window Opens in a new window Generally it s better to open external links in a new window so that visitors can remain on your site Step 4 Click Save Link No Follow The no follow attribute tells search engines not to follow the links from your image when ranking your site Setting the Link as No Follow shows that the link related to an unendorsed document or a paid for link Quick tip More information of this attribute can be found at http en wikipedia
81. ng your Uee 35 EONO ele E 37 IT E E E E E E A E 37 EAE O ee AE EE EEA E E A AE E E E E E E AEA 38 Reordering POW EE 39 REAA RON ea porns nos eciwes er eaweatiaatusinnsossaaneaon we uncilycamaustoatnesaeapamentud ealeundecaqontaonmneateyvecusnee ancamanveauant 39 Adding de E rn KC 39 Changing Me look OF d DAOC E 41 PRS sais csc ne sues nts aie tac tarot st eceees hat oats nes eas nee aaen acntaueannee ease en toct ain oe oeaneenidas snag ennieaees anemia 41 Bel ton nal e A A S OE E A E E A A 43 Se LAT DEn VT E 45 ele E Rafal TT 45 ee E 46 Renamed PARC need Eege 46 Boe a Ee 47 KLEIE EE EE 48 Choosing YOUR enn 48 CHO Osis What to TEE 49 Add javascript tO your page 50 Organising your pages Page Folders e eee 51 Password protecting pados EE 53 Fe ONO E 54 Padme Ee E a eee he er eT rT ea ee eT 54 REMOVING a redirect esse eee eee 55 INAV ATO IN ME 56 Add a Navigation Widget tO your Dade e see eee 56 Chaneine Ne order OF ACCS eege 56 Create a SUD navigation MenU eege 56 Changing the look of your Navigation Duttons sees eee eee 58 Creatine a BUTTON style MENU NEE 58 ECOMMETCE E 62 See AAA T A S S E 62 Using the widget the first time sees eee eee 62 een A Te GE 62 ee 63 SO e E 64 Changing your avr aC D EE 65 e asin cece ceapavencasceecuec see sheunscasiactcesssevucas E 66 ee 66 TUO a E E E E E E E A 68 Twitter Wideet ettres s ttrust terest t trest r tross rtresreressrreesreressreeene 68 PO ASO E E E E E E EAEE E E E EA
82. nu Step 3 Add New Column Style Enter a name for your new column and SE Name click ADD COLUMN STYLE CANCEL ADD COLUMN STYLE The column style editor will open see Page 43 the section Column Style Editor Editing an existing style Step 1 Column Styles With row editing enabled Click the No Style Change Column Style button to the middle feature right of the column you want to edit Step 2 Click the Edit Column Style cog next to the style you want to edit The column style editor will open see the section Column Style Editor Column Style Editor Background vive Margin shadow Inner Image A 0 5 Moe Opacity Outer EES s 7 S Angle 1 50 p IE i E j P eae es Row Styles Blur Padding Lef E Spread ock E i Mo Gutters Lock v S Wee 0 i Eh l 0 an 1 e D lan 50 SAVE CHANGES CANCEL our chapter Changing your Background AR o 2 1 e o Choose a background style or image This functionality is the same as described in Page 44 Choose the colour width and radius of your column Click the check box to apply E the same value to each group of sliders Set the margin and padding for your column Click the check box to apply the same value to each group of sliders Select and style a drop shadow for the column a 3 Note Older web browsers will not be able to display drop shadow on your site Page management Add a new page
83. org wiki Nofollow Simply toggle the no follow setting on and off to change the SE attribute in your image links rel nofollow Off default setting On nofollow Page 16 Optimizing loading speeds If your webpage is large and contains many images you can improve performance by changing the way your images load Asynchronous Loading has two settings e Off All the images on your web page will load at Asynchronous Loading Off defaut setting the same time On e On Images will load as visitors try and view them by scrolling down the screen Finding the URL of an image you have added From time to time you may need to find the URL of an image you have uploaded if you want to link to it from another site for example WIDGETS MEDIA Step 1 ADD a Click Media then hover over the image you want the URL for An Information icon will ZS KA N D vie bel meat farmerjpg o v 412 9 KB appear click this The image URL will be displayed you can copy this link for use elsewhere Ctrl C Copy Go to http image basekit com Print Inspect element Page 17 Downloadable Files Upload a file for visitors to download You can upload the following file types for visitors to download on your site Documents pdf doc docx le xlsx txt ppt pps pptx Media mp3 aac ogg wma mp4
84. ot paste any code into any field Do no y Do not paste code in this field This field is not required for normal use a Important Only enter the ID number Do not rn paste the tracking script into this box 11111111 1 Once done click Save Page 120 8 e 8 seg bag ks AT Nk A kd Lad UA Google AdSense Once you have created a Google Adsense account and created an advert unit you can use the embed widget to add this advert to your website Ad successfully created x Step 1 Ad code You can paste this code into any webpage or website that complies with our program policies Find your website code within Adsense Code type Synchronous Ad code 77 script type text javascript gt lt google_ad client na pob 0195240001540595 olffside U google_ad width 300 google ad height 600 script type text javascript src http pagead2 qooglesyndication com pagead show ads js gt For more help with implementing the code please see our Code Implementation Guide Close Step 2 Click Widgets then expand the Content section to find the Embed widget WIDGET S MEDIA Step 3 Drag the Embed widget to the area of your web page you would like it to appear Double click on the widget the settings screen will appear SETTINGS css Step 4 save Changes Remove any code that s already in google ad client vam pub Mi DEM Ga bd CAGEEd
85. ou like to be called What s your email address Please Enter a valid email address E reel What number is best fo contact you Please enter a valid phone number arer Please select a product B What did you purchase from us Wees WH i s When did you buy the product Please enter or select a valid date Rating GC How did you rate the product Comments Tell us about the product Changing the look of a form You can change the Text styles using the styles editor to change the look of the Submit button you will need to edit the CSS directly Page 94 Double click on a form to open the settings SETTINGS STYLES options Then click Styles SITE WIDE STYLES Form Field Name Form Field Description Name and Description styles Step 1 Form Field Name Hover your mouse over the style you want to Form Field Description change and click Edit Step 2 The Style Editor will appear Edit your text style STYLE EDITOR css HTML Editing Lead Lede Paragraph Theme Styles Custom Color Lead Lede Paragraph Background Normal Spacing Decoration N yone Borders B Weight Normal Shadows Visual FX DELETE SAVE CHANI EN Style Attributes Choose an attribute to edit De Settings See and change the settings for each attribute D Preview pane View how the text will look on your website Page 95 Editing Form Field Name Step 3 Click the Save Changes button once you Sate The
86. ow Style button to the right of the row header featur you want to edit Step 9 ge mainz Click the Edit Row Style cog next to the style you want to edit The row style editor will open see the section Row Style Editor Row Style Editor Row Styles Background ata Shadow Outer sss 0 5 Inner Image Outer FEA E Lock ee FL SAVE CHANGES CANCEL 1 Opacity Angle Distance Blur Spread 0 AR AR 0 AR Edit the inner or outer style Unless you are designing specialist graphic effects you should leave this set as inner style between any columns that you may have in your row lt gt Choose a background style or image This functionality is the same as described in our chapter Changing your background The gutter slider controls the width Page 42 5 Choose the colour width and radius of your row Click the check box to apply the same value to each group of sliders 4 Set the margin and padding for your row Click the check box to apply the same value to each group of sliders ES Select and style a drop shadow for the row 3 Note Older web browsers will not be able to display drop shadow on your site Column styles Creating a New style Step 1 Column Styles With row editing enabled Click the Change Column Style button at the top of the column you want to edit Step 2 Click the button at the foot of the me
87. publish your website you will publish any changes made to active web pages Inactive webpages will be removed during this process while pages marked as Draft will be unaltered a Note Your home page will always have an Active status Step 1 Click triangle icon next to ADD e Home your page to display the l About page settings drop down SESCH menu Page 49 Step 2 Select Name and URL from the drop down menu Name and URL Step 3 Select a page status Page Title Page URL Contact Us contact us from the dro p Menu Title http minestop com websitebuilder partnersite e con us Contact Us down menu and show in Navigation Menu click Save Make Homepage L Page Status Move Page to Top Level No Folder Add javascript to your page You can add javacript to any page on your website You can add Javascript to the page header or the body of the page itself a Important Adding incorrect code to your site may cause your site to break We are unable to provide a de bugging service for faulty scripts on your site Mobile site Step 1 Hover your mouse over the page you want to add ADD Homepage Javascript to and click on the triangle Our Portfolio Page 50 ADU Step 2 Homepage Depending upon where you want to enter your Dur Portfolio Clone Page Name and URL code select Page Scripts or Body Scripts from the T
88. re soon Thanks Ralphs Farm Shop Delete SETTINGS STYLES css Step 7 Editing Comment Container Font x ackground Click Shadows In this ae Spacing example we have just ae increased the opacity of Visual FX the Box shadow to 30 Sep 3rd 2013 01 01 P Ralph Smith Li purchased this cheese for Christmas and it s the best cheese ever I ll certainly be buying more soon Thanks Ralphs Farm Shop Delete Decline Page 77 a Note Older web browsers are unable to display Shadows or Visual FX on your site Once done click Save Changes SETTINGS STYLES Step 8 SITE WIDE STYLES Click the Edit button next to Comment Author Comment Container Comment Author In this example we are just changing the SETTINGS STYLES CSS Editing Comment Author font size and the colour Theme Styles Custom Background Spacing Borders Shadows Dedine Dei Visual FX Once done click Save Changes SETTINGS STYLES Step 9 SITE WIDE STYLES Click the Edit button next to Comment Lomment Lontamner Author Comment Author Comment Author Hover Edit Again we are just changing the font size to match the font we selected in Step 8 then choosing a complimentary colour e Ralph Smith 3 H Decline Delete z Page 78 Once done click Save Changes SETTINGS STYLES Step
89. rollover image can add movement to your site To add a rollover image simply drag the image onto the rollover pane Page 13 Customer Support Website Builder Manual WIDGETS MEDIA P meat farmerjpg SETTINGS meat png dairy farmer jpg Size W H Alt Tag gt 34 6 KB em meat farmerjp W E ad BS nk Title Taq is Set de ae image sbove colorful kitchenware_1 jp dairy jpg In this example the rollover image is lighter to the image used but otherwise identical You can test your rollover image in the preview screen Home About Contact Vegetables Farms Home About Contact Vegetables Farms D Z FA DAJN E Ralphs Farm l Ralphs Farm facebook twitter Quality assured local produce at Quality assured local produce at loca Sourced from our local farms quality assured Award winning Cheeses Sourced from our local farms quality assured Award winning Cheeses Standard Image Image Rollover Adding a lightbox A lightbox allows customers to view a high resolution image if they want without having it download on your web page by default To add a lightbox image simply drag the image onto the rollover pane Page 14 WIDGETS MEDIA ADD Q A meat farmer jpg SETTINGS meat png IMAGE dairy farmer jpg i NIH o BZ EE SL H J colorful kitchenware_1 jp Link Title Tag dairy jpg The image you add to the lightbox should be a large high resolutio
90. s then expand the Content section PE P l Navigation Menu Drag the Navigation menu widget over to where you want it to appear on your web page Changing the order of pages Step 1 Double click on the navigation menu to unlock it Once unlocked double click on the menu again to enter the settings Step 2 Drag the pages into any order by dragging and dropping them Create a sub navigation menu Sub navigation menus allow you to show any pages within a folder You must have already created a folder for your pages before you can create a sub menu Step 1 Cz Page 56 In the left hand pane click PES ES MEDIA Widgets then expand the Content section SIE ca Navigation Menu Drag the Navigation menu widget over to where you want it to appear on your web page SETTINGS STYLES Step 2 Navigation Widget Double click on the navigation Orientation Horizontal Vertical Step 3 Align menu to open the settings Left Centre select the folder you would like to Right In the pages drop down menu display Your Sub menu will be displayed on your page Home About Farms Shop W tweeten 6 AT 4 a WE em tar E del z gt Dike T ar pa Shop Cheeses Seasonal Veg Meat Special Offers Kitchenware Page 57 Changing the look of your Navigation buttons You can style your navigation to look however you want In this
91. the data The top value is the default Customers will not be able to see this value The top value is the default Page 91 Shows the text that will appear in the drop down menu for customers to choose lt gt D This button allows you to add a new value to your drop down menu 4 This button will allow delete a value from your menu Step 4 Add new values to your menu until complete Once your values have been entered click OK Star rating Step 1 Drag the Star rating widget onto your form Step 2 Double click on the Form to open the settings Now when you hover the mouse over the text box another settings button will appear Click this button SaNa Sa Sa a NNNMNNN NNN NNN S a a a S S S Sa NN el k Sa Me Sa e SES Se Ne Sa Ae Sa Se Se SMe SM MMe MSS See Se aaa SMe See HS 1 select Options EN Trtcase select a product Name aaa aniba Di e e Piesse enter your name Email address D a enter your emai acoress Telephone Enter your telephone numbe Product M ssel air iia ee What oie your n se irom Star Rating Name Flease enter your name Email address Enter your email address Telephone Enter your telephone number Po Please select a product S JL JLJ amp H H H H H H d H H H 6 H H H H H H H H d H H 6 s H H H H H H H Product What did your purchase from us Date of Purchase When did you buy the product Ratin
92. the drop down Contact menu Farms Cheese Name and URL Step 3 Page URL Enter a new Page and Menu title contact in the text boxes provided and Show in Navigation Mee click Save Make Homepage Page Status Mowe Page to Actia Top Level No Folder CANCEL Copying a page Step 1 Click triangle icon next to your page to display ADD Home the page settings drop down menu About Contact Step 2 Select Duplicate page and contents from the drop down menu Page 47 Name and URL Step 3 Page URL Enter a new Page and Menu title COMEC in the text boxes provided and Show in Navigation Mee click Save Make Hp re Dog Page Status Move Page to Acta Top Level Np Folder CANCEL ga Remove a page Step 1 Click triangle icon next to your page to display ADD Home the page settings drop down menu About Contact Step 2 Select Delete this page from the drop down menu Step 3 Click Confirm to delete the page Choosing your home page Step 1 Click triangle icon next to your chosen home page to display the page settings drop down Cz Page 48 menu ADD Home About Contact Step 2 Vegetables Select Name and URL from the drop down Farms menu Cheese Name and URL Step 3 Page Title Check the box marked Make Homepage and click Save show in Haagateon Menu Make He T 2 A Caden P rage Choosing what to publish When you
93. ts then expand the Premium section to find the PayPal Buy Now widget WIDGETS MEDIA Step 2 Drag the Buy Now widget to the area of your web page you would like it to appear E PayPal Buy Now E Double click on the Widget to open its settings SETTINGS Step 3 PayPal Buy Now Enter a Product name Price and Shipping Product Name Price price in the boxes provided and click Save Shipping Price Your Buy Now button is set up on your aie website Cz Page 64 Award Winning Edge Farm Stilton 100g 5 99 plus 1 99 shipping sourced locally from Edge Farms this award winning Stilton is Creamy with a slightly nutty overtone Perfect with Steaks and Port Changing your PayPal account If you have already entered a PayPal Business email address you can change this at any time within your Website Builder control panel Step 1 Click Manage in the top navigation menu Account e Mobile site Preview Themes Manage Publish ADD Theme Colors Theme Fonts E Background Step 2 In the left hand menu click Ecommerce Under the PayPal tab enter your details in the text boxes provided Account Mobile site Website Y Shared Ecommerce Contact Details Users PayPal Google Checkout Preferred Domain PayPal To use the PayPal widgets enter your PayPal business email This will not affect your account billing Use PayPal business account Image Albums
94. ttom width Opx text shadow none j Parranda eee EE background 788324 Step 5 In this example the border has a width of 3px Find the border width attributes There are four in total border g s solid ys wale 78 a324 order lert width pE erer erer solid border PATE MnS Opx border left width 3px L e Baa Karat border right width 3px border top width 3px r ado border bottom width 3px packground ech border radius 5px cursor pointer Step 6 By default the CSS does not contain a radius attribute so we need to add one In this example we have set the radius to 5 Under the Border bottom Width attribute add a new line with the following border radius 5px KU LUKE LG LN AK s SULLU border color ZEEEEEE Vereen apes SR B Has border right width 3px border left width 3px Ee rdi Ath 3 border right width 3px Ge a an si 4 E border top width 3px border bottom width 3px E text shadow none e background 78a324 an anne e78a324 Step 7 Page 98 By Default the CSS doesn t contain an attribute for the shadow so again we will need to add one Quick tip More information regarding this attribute and a tool to test your code is available at http www w3schools com cssref css3 pr box shadow as In this example we have set the shadow to a grey colour with a blur of 10px We have added a new line under the text shadow attribute
95. uvsaveattesneeqeeeseceecs 165 ET 141 e 143 Page ORG EE 57 eT ENEE E EE E E E EEE 59 SUD ET 58 New ToO EE 20 O Ogg le e E 18 Order ergeet 40 ordered St See Format Text Outer ie 39 D Page ees 46 Eege 48 AT 49 Eege 52 ele top EEA E E E 49 Import WTS c se sect zu caeus ssnesiecnrancasptaseeesscaucsces eanceece 152 Order Navigation 57 PASS WOU E 54 Publish Settings cccccssseccccssseceeeesseeeeseeeeeeees 50 REOG earen A E 47 Gel See Row STMEICUUING us ccc anuscazesdincaiveatscdiowatisadsmosewalsabisatvaatvs 38 Password Protection 54 Pattern Background sse eee eee 27 NU T 64 Account E 64 lee 67 BU let 66 Cart Add O E 64 TE 65 pdf le ee serrersririreii erei ioin EEan 18 Performance Loading speeds sss sees eee 11 17 DDS lee E EE 18 ppt lee E 18 pptx ONG EE 18 Preview e e 154 Publish NTA ut 50 R gl eee E 87 Redirect Add Vae 0 eebe 165 Remove GT 49 ie T 38 WHEW E 6 Rename Dee 47 ie 40 Row Page 158 PCG TTT 38 BC E 39 nt 39 MOVE siais Terre IEn APENES EAEEREN EEE 40 WOOT eege 40 e e eege 39 T nie 38 Rn E 40 ca T E E 42 EO E 43 LE A e EA EE E E taa EE 43 VIE 42 RSS Add MODIG oecce ces oncteetersacetucentewacsbnese eaveciesteee 160 Mobile See e E 136 RSS Feed TE 116 S Klee See Site Search Select BOK reoni See Select Box Seo DESCO e creirien n R 123 e acetates aces aereniwtaanuncataensacatisesaciipeeeiases 123 T e E A A E 123 Shopping Cart VIEN E E E 6
96. website Page 142 Form Enter the postcode of the location you want the map to show Set the level you want the map to Zoom in Set the height of the map widget The Form widget allows you to embed a contact form within your website Page 143 Enter the title you want to give the form Enter the text you want the submit button to display Enter the email address that the form will send to Choose what page to show after submission Address Custom sL1 1AB zoom Height Le FE o Ee Sa Your email Message Email Title Contact Form Button Text Send Email address Custom ralph ralphsfarmshop com Success Page Home Page Call Me The Call Me widget allows you to embed a widget that allows a mobile device to contact you via a phone number a Enter the phone number you want to use Bes Enter the text you want the widget to display Twitter The Twitter widget allows you to embed a poe BBC Twitter feed within your website Search Enter the search term you want to search twitter for Type Select to search for a Type Username or Topic Username e Update Choose the frequency to Update update the feed Every 30 minutes e Retweets Choose to display retweets or not Tweets Choose the number of tweets to be displayed Facebook The Facebook widget allows you to embed a ke DI Be the first o
97. xt Bold Italic or apply a strikethrough Create an ordered or unordered list Create external internal or e mail links Insert an image from your local computer ora URL iji ill Il gt Ill Ill d T Cancel Images Step 2 Select and drag the image that you want onto the page Adding a new Image Step 1 Click the Images icon in the left menu bar Images Add images Step 2 Click the Add images button All images Recent First s G You can drag and drop images from your desktop or Drag and drop JPG or PNG files from desktop here or upload them using the Choose files button Importing Content Step 1 Click the Import icon in the left menu bar Templates Import Page 138 From this page Step 2 Vi From the From this page drop down menu select the page Homepage e from the full website that you want to copy the content from To this page Step 3 L Home Page From the To this page drop down menu select the page from the mobile website that you want to copy content to e Select te l P US Images Tick the boxes depending on the type of content that you want to import Text Include Step 5 You can select to copy everything that is either text or Everything images or only content that meets a defined limit Larger than 5px Larger than 100px Larger than 250px Click to select or desele

Download Pdf Manuals

Related Search

Related Contents

Tulip Siphon Water Filter  Data Sheet and User Manual - TNS010 Easy TCP/IP chip for GPRS  Stir Kinetic Desk F1 User Manual  manual del usuario PROPHETE  Samsung AQV12PSLN User Manual  

Copyright © All rights reserved. Failed to retrieve file