Advice and answers from the Moonfruit Team

The Responsive Editor [Beta]

By using responsive design you can adapt the layout of your site to different screen sizes from a single editor.

63 articles in this collection
Written by Charlotte, Grace, and Carlton
Getting Started

Responsive Editor: Adding and organising new pages

Add and organise your site pages in responsive pages quickly using the dropdown navigator.
Written by Carlton
Updated yesterday

Responsive Editor: Adding a navigation bar

Navigate your site's pages using the page menu and navigation bar.
Written by Carlton
Updated today

Responsive Editor: Adding a template to the header section

A header section can be used to insert a navbar or call to action on your site and will appear on every page of your responsive page.
Written by Carlton
Updated today

Responsive Editor: Adding a section, row or column

Responsive pages are made up of these components.
Written by Carlton
Updated today

Responsive Editor: Adding a footer section

Add an additional page menu or content to your site using a footer section in order for it to appear on every page of your responsive page.
Written by Carlton
Updated today

Responsive Editor: Repositioning a section or header

Arrange sections in real time or reposition a section to appear before the navigation bar.
Written by Carlton
Updated yesterday

Responsive Editor: Duplicate and delete functions

Learn how to duplicate and delete page items in responsive pages.
Written by Carlton
Updated yesterday

Responsive Editor: Freezing a navigation bar

A navigation bar can stay at the top of a page, not scroll with the page at all, or stay at the bottom of a page as you scroll.
Written by Carlton
Updated yesterday

Responsive Editor: Adding a text box

Add a text box in order to add headings, links and other text to your responsive page.
Written by Carlton
Updated today

Responsive Editor: Adding an image

Add or preview an image in the file manager before adding it to your responsive page.
Written by Carlton
Updated today

Responsive Editor: Adding a link button

Users can navigate your page using link buttons; visit an external URL, emai, go to page section or add a file download.
Written by Carlton
Updated today

Responsive Editor: Animating page items

Bring your site to life in responsive pages with page item animations like transitions, scroll and hover effects.
Written by Carlton
Updated today

Responsive Editor: Adding an image background

An image background can be added to different page areas and even text boxes in responsive pages.
Written by Carlton
Updated yesterday

Responsive Editor: Adding SEO meta data

Edit your page title, description and keywords, also known as search engine meta data or meta tag.
Written by Carlton
Updated yesterday

Responsive Editor: Testing and previewing

Preview your site on desktop, tablet or mobile view in order to test your design responsiveness.
Written by Carlton
Updated yesterday

Responsive Editor: How to undo and redo changes

Undo and redo changes in the press of a single button.
Written by Carlton
Updated yesterday

Responsive Editor: Adding a file download

Add a file download to a button, icon or image using the file link. PDF, MP3, Word and many others are supported in responsive pages.
Written by Carlton
Updated yesterday
Images

Responsive Editor: Replacing an existing image

Replace an existing image in responsive pages rather than deleting it to save time.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding a link to an image

Images on responsive pages can also be used as a link in the same way a button can.
Written by Carlton
Updated today

Responsive Editor: Adding a blur, dim or black and white filter to an image

An image filter can be applied to images when you hover over them.
Written by Carlton
Updated today

Responsive Editor: Enabling and disabling an image Lightbox

A Lightbox is a way to present your image in a pop-up window within your site.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding a colour overlay to an image

Add a fade to your images using a colour overlay.
Written by Carlton
Updated over a week ago

Responsive Editor: Editing image attributes

Edit the corners, brightness, contrast, saturation and opacity of an image in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding a text caption to an image

Overlay an image with text by using an image caption.
Written by Carlton
Updated over a week ago

Responsive Editor: Aligning an image within an image area

Adjust the width of an image while maintain its aspect ratio and align it within a section using responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Using Lobster images

Add high quality, licensed images to your website with Lobster images.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding an image gallery

Add an image gallery to your responsive page to display multiple images in a single image area.
Written by Carlton
Updated over a week ago

Responsive Editor: Using to the file manager

Add, sort and delete folders in the file manager as well as upload different file types to your responsive page.
Written by Carlton
Updated this week

Responsive Editor: Adding and removing images from an existing image gallery

Quickly add and remove images from an existing gallery in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding an image filmstrip

Autoplay your gallery images using a filmstrip using responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding an image slideshow

Autoplay your gallery images using a slideshow using responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding image icons

Image icons can be used to indicate inbound or outbound links to specific sites from your responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Using a spacer or page divider

Spacers and dividers help break up the sections of a responsive page.
Written by Carlton
Updated over a week ago
Text

Responsive Editor: Formatting a text box

Format a text box using the text box toolbar or by using the right sidebar to add a link, choose fonts, font size, letter spacing and more.
Written by Carlton
Updated over a week ago

Responsive Editor: Changing text box, highlighted text, link and link hover colour

More information on formatting text link colours in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Aligning text in text boxes

Left, centre, right or justify the alignment of text in text boxes in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Editing line and letter spacing

Edit line and letter spacing using the slider in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Choosing a border style for a text box

Add border lines to your text box in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding a background image to a text box

As well as adding an image background to your pages, you can add an image background to a text box in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Editing a text box font and font size

Edit an individual text box font and font size in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Editing font and font size using global styling

Apply changes across your site just once using global styling options in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Editing links, hovered links and their visited colour using global styling

Apply changes across your site just once using global styling options in responsive pages.
Written by Carlton
Updated over a week ago
Backgrounds

Responsive Editor: Choosing a background colour

Add a solid background colour to your page or page areas in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding a stock video background

Adding a stock video to your responsive page can bring your site to life with movement.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding scrolling effects to an image background

Add scroll effects to image backgrounds on your site in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding blur or opacity to a video background

Add blur or opacity to a video background using responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding a YouTube video background

Adding a YouTube video to your responsive page can bring your site to life with movement.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding a background to all pages using global styling

Apply changes across your site just once using global styling options in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Adding margins

Edit your page width with page margins in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Changing the section height

Expand the section or row height rather than have it automatically resized in responsive pages.
Written by Carlton
Updated over a week ago

Responsive Editor: Colour themes

Use a pre-existing colour theme to apply a colour palette across your whole site.
Written by Carlton
Updated this week