The Little Big Shop website builder allows you to ‘build’ pages on your website using content panels.
In this page we look at the editing tools you can use.
Panel background
The ‘Panel background’ editing tool allows you to change the background colour of your panel, or add an image as the background.
There are three ways you can change the background using this tool:
- Option 1: These are default colours. To select one, simply click on it and that background colour will be applied to that panel.
- Option 2: A hex code is a way of specifying colour using a hashtag and six-digit combination of numbers and letters. To enter the hex code, click into the ‘HEX Colour’ field and type the HEX code. Select ‘OK’ to apply this colour to your panel
- Option 3: The final option allows you to use an image as a panel background. There are two ways to do this:
- Drag and drop the file into the ‘Drag Image’ box and select OK to add this image as a background to the panel
- Click in the ‘Drag Image’ box to select a file from your computer and select ‘OK’ to apply
To lengthen the panel size, click into the panel box and select ‘Enter’ or ‘Return’ on your keyboard. Use the backspace key to reduce it.
Undo and Redo changes
Whilst working on a panel, you can ‘Undo’ and ‘Redo’ changes you’ve made.
- To ‘Undo’, or go back to a previous change, select the back arrow.
- To ‘Redo’, or reinstate a change, select the forward arrow.
Fullscreen
By selecting this option, the content panel will take up the whole screen and you won’t see the other content panels in the builder. To undo this option, click on the ‘Fullscreen’ icon.
Code view
By selecting this, you can view the HTML code of the panel.
Edit and remove links
You can add links in panels and to text or images. There are three icons used:
- Insert Link
- Edit Link
- Unlink
Insert link
To insert a link:
- Select the ‘Insert Link’ icon
- Enter the link/URL into the ‘URL’ field
- In the ‘Text’ field, enter the text that the user will click on to view the link
- If you want the user to be directed to a new tab when they click on the link, check the ‘Open in new tab’ box
- Select ‘Update’ to apply your changes
Edit link
To edit a link:
- Select the ‘Edit link’ icon
- Edit the URL and Text by clicking into the relevant field and updating the text/URL
- Select or deselect the box next to ‘Open in new tab’ if you want/don’t want a new tab to open when the user clicks the link
- Select ‘Update’ to apply your changes
Unlink
To remove a link:
- Hover over the link with your mouse and select the ‘Unlink’ button
- The link will automatically be removed
Style a link
In some instances you may be able to apply some of the colours you selected in global styles to the text in content panels.
This is what will happen when you select each option:
- Primary colour: the ‘Primary button colour’ you selected in Layout & style (in the ‘Buttons’ section) will be applied
- Secondary colour: the ‘Secondary button colour’ you selected in Layout & style (in the ‘Buttons’ section) will be applied
- Link colour: the ‘Link’ colour you selected in Layout & style (in the ‘Typography and colours section’) will be applied
- Reset colour: this option allows you to reset the colour back to the default colour of that panel
Standard text changes
Change text font
You can change the font of text in a panel. To do this:
- Highlight the text you wish to change
- Click the above drop-down menu and select the new font you want to use (you can scroll to view other font options)
Change font size
To change the font size of text in a panel:
- Highlight the text you wish to change
- Click the drop-down menu and select the new font size (scroll to view all options)
Bold, Underline, Italic
To make text bold, italic or add a line under it:
- Highlight the text you wish to change
- Click the relevant option and the changes will be applied
Change text colour
You can change the colour of your text by selecting a default colour, or you can enter a HEX colour.
To do this:
- Highlight the text you wish to change colour
- Select the above icon
- Option 1 contains a grid of default colours. To select one, simply click on it and the colour of your text will change. To revert back to the original text colour, highlight the text, select the ‘Text colour’ button and click the trash can icon.
- Option 2 is to add a hex code e.g. #f65f2e. Enter the hex code into the field and select ‘OK’ to apply it
More text options
The ‘More text’ icon allows you to see additional text editing options.
- Strike through: by selecting this icon, a line will appear through the middle of the text
- Subscript: Use this to shrink your text and lower it
- Superscript: Use this to shrink your text and raise it
- Background colour: select this to change the background colour of the text
- Clear formatting: this will clear all the styling you have applied and revert it back to the default style of that content panel
Ordered lists
The default option to order a list is numerical ordering. However, if you select the below option, you can view the other ordering options.
Unordered lists
Select this icon to order your lists using dot points, or variations of a dot point.
Paragraph Format
These options are for the text in the panel. You can choose from the following options:
- Normal: this is text that is a normal font size, or otherwise known as paragraph text
- Heading 1: the largest heading size and useful for highlighting the main topic of a panel
- Heading 2: the second largest heading size and useful for breaking up content
- Heading 3 and 4: the third and fourth largest heading sizes and useful for further breaking up content
- Code: by selecting this, your text will appear in coding font
More paragraph options
In ‘More paragraph options’ you can find further options to style the text and/or images in content panels:
- Align left: select this option to align the text or object to the left side of the panel or the container it is sitting in
- Align center: select this option to align the text or object to the middle of the panel or the container it is sitting in
- Align right: select this option to align the text or object to the right of the panel or to the right of the margin
- Align justify: when you choose this option, space is added between words to make each line align with the margins of that content area
- Line height: use this option to increase decrease the space between lines of text
- Decrease/Increase indent: select this option to decrease/increase the indent to the left or right
- Quote: select this option to transform text into a quote
Insert files
By selecting the ‘Insert files’ folder, you can view the 3 options for inserting a file:
- Upload files
- By URL
- Embedded code
Upload files
Once you have chosen a file from your computer to upload, the image will appear under the upload box. In this example, the image is titled ‘plants.jpg’. To insert this image:
- Check the box next to it
- Select ‘insert’ (the item with the arrow pointing upwards)
Upload by URL
You can upload an image using its URL.
To do this:
- Enter the image URL in the field under ‘https://’
- Select ‘Add’ and the image will appear underneath
- Select the check box next to it and then click the insert arrow to add it to the page
Embedded Code
Insert image
There are three ways you can insert an image into a content panel:
- Upload image
- By URL
- Browse
Upload image
To upload an image from your computer:
- Click into the box that says ‘Drop image (or click)’ and select a file from your computer
- Alternatively, you can drag and drop a file into the box from your computer
By URL
- Enter the URL to the image in the box under ‘https://’
- Select ‘Insert’ to add this image to the content panel
Insert video
There are two ways you can insert a video into a content panel:
- By URL
- Embedded code
URL
You can add a video via a URL
- In the field under ‘Paste in a video URL’ add the URL to the video
- If you want your video to play automatically, select the box next to ‘Autoplay’
- Click ‘Insert’ to add the video to your panel
Embedded code
More rich
By selecting the ‘More rich’ icon, you can view these content options
- Insert table: Select this to insert a table into the content panel. Once you do this, you will be able to click into the table and edit it further.
- Font Awesome: This option contains hundreds of icons you can use
- Special Characters: here you can find Latin, Greek, Cyrillic text, additional punctuation, currency, arrows, math symbols and miscellaneous symbols
- Insert Horizontal Line: as the name suggests, you can insert a horizontal line into a content panel. This is useful for breaking up content.
Don’t forget to SAVE your changes!
Visit our help page ‘Website builder’ to learn how to save a draft and more.
