Website Content

Edit content for your website is the most easiest and frequent activity you may enjoy. The Content Editor is the very first and an always place to welcome you after logging in.

At Content tab, you will always be at the new added page or the latest one you edit previously.

image

Add page

Add new page

  1. In Content editor, click "+" on floating menu, and select New Page.

    image

  2. The "Add Page" panel appears;

    1. Page Name : Insert any name for this new page.
    2. "Show on menu" box : Check it to make this new page has its own Menu on website navigation. You can leave this unchecked if you don't want the page to be online, and point this page to a menu later.
    3. Save : To add this page.

      image

      • a) Below is sample of the new added page with "Show on menu" box checked. The new content editor will be ready to work that you can see it on current page name on the Right Menu, and its Menu is right on the website navigation.

      image

      • b) Below is sample of the new added page with "Show on menu" box UNCHECKED. The new content editor will be ready to work that you can see it on current page name on the Right Menu. This page will not have its Menu on the website navigation. You can add Menu for this page later (next section).

      image

  3. You can start content for this page now.

Link page to a menu

  • Link page to a current menu on navigation

    1. In Content editor, click "Menu" on floating menu, and select Menu.

      image

    2. The "Menu Setting" panel appears, click on the Menu you want to link to a page.

      image

    3. In "Menu Setting" panel, look at Link to part, select Page bullet. And select page name from Select Page part.

      image

    4. Close Menu Setting window, and Save it on Content editor page.

      image

  • Link page to a new menu

    1. In Content editor, click "Menu" on floating menu, and select Menu.

      image

    2. The "Menu Setting" panel appears. Click at "+" symbol on Website Navigation to add new menu.

      image

    3. The added menu information appears in "Menu Setting" panel.

      image

    4. In "Menu Setting" panel,look at Link to part, select Page bullet. And select page name from Select Page part.

      image

    5. Close Menu Setting window, and Save it on Content editor page.

      image


Add content and font

RVsitebuilder 7 provides full pack of content tools you would want.

Once you place mouse on a text area, you can immediately start your content with our cool text tools.

image

Text Tools

image

Clipboard

Paint format

The Paint Tool copies format from one place in your document to another. It's quite handy. RVsitebuilder lets you copy the format you've applied to a specific section of text to another section using the paint format tool. To use this tool, select the text that's formatted in the way that you want to copy

  1. Current cursor on format a line of text or cell in your desired appearance.
  2. Click the Paint Format icon.
  3. To apply this format to other text, simply highlight the text you want to apply the format to.
  4. Clicking Paint Format icon again, it will lock the format into place and every piece of text clicked will change to the new format.

    image

Paste from external

This will clean up HTML source code before pasting it into your document. Paste or drag content from Office documents, web pages and other programs into the box below (To paste use the keyboard shortcut, Ctrl + v on Windows or Command + v on a Mac). Please be patient, pasting from Office documents can take a considerable amount of time. When the paste is complete press Insert.

image

Undo and Redo

To reverse your last action and to reverse your last Undo.

image

HTML Mode

Insert HTML Code for each block. Please be careful to use the correct HTML code. As it will break an RVsitebuilder function, if your code doesn't use the correct syntax.

image

Font

Bold, Italic, Underline, Strikethrough

Add text to Bold, Italic, Underline, Strikethrough.

image

Font Color

Apply color to font by using our color picker or you can type a color code for the specific color.

image

Font Highlight

Hover the text and choose the color to highlight.

image

Clean formatting

Clearing text format, in case you copy the text from another website.

image

Font Family

Select font family from the drop-down list and you can use our new feature to add more font family from Google Font as well!

image

Add font family from Google Font

  1. Choose a font at Google Font.

  2. On Text tool, click "+" button next to font family.

    image

  3. Fill a font name and click Add.

    image

  4. You can select a new font from font list.

    image

Tips: You can add a maximum 5 font families.

Font Style

Font style creates the basic text structure, helping you organize thoughts on a page. You can apply style to text while you’re editing or adding it. Selecting 11 styles on the drop-down list to control the typography (font design), giving the words personality and flare.

image

Font Size

Increase or decrease font size by choosing on the drop-down list.

image

Paragraph

Insert Number

Add list by numbered.

image

Insert bullet

Add content to list by bulleted list icons.

image

Indent

In the Text tool, click the increase or decrease indent icons to indent text to the left or right.

image

Line Spacing

Change the space between lines.

image

Alignment

Align your text paragraph; left, center, right and justify.

image

Table Tools

image

Table Size

Adjust the table and boarder size, also select the boarder style on the drop-down list. You can choose a table unit size between percentage and pixel.

image

Table object

To Insert, merge, remove both row and column.

image

Table Color

Adjust the color on each cell or the whole table and table border color.

image

Table Alignment

Align text on the table both horizontal and vertical.

image


Content area design

Add new content section

image

On step Content, you can select a Section by drag and drop on the editor area. We provide 12 catagories section. In all 200+ layout designs, 130 designs are new from RVsitebuilder 7.

  1. Content: a normal section which contains a various layout.
  2. List: it allows you to add a group of product with descriptions and icons. It’s great for things like product descriptions, or can be used as a unique way to list the services you offer.
  3. Background: It will present the almost ready content layout with cool text and picture positions with the beautiful background image from Background image album.
  4. Team: Showing your staff members including profile images, job positions, member names and so on.
  5. Pricing: If you run a business or sell a product on your website, you probably have a dedicated pricing page for the whole thing. You'll notice the best pricing pages have clean layouts, use simple language that speaks to the customer, and aim to inspire trust between the business and the user.
  6. Contact: The goal of every contact us page is to convert by clearly and effectively presenting the method(s) of getting in touch with a company as quickly as possible.
  7. Table: If you are presenting data and information using columns and rows, then these best table website templates are ideal for you. Tables are a super convenient way of displaying any sort of statistics, specifications and other whatnots. Instead of creating them from scratch, we built many different variations that are just a click away
  8. Video: One of the best ways to catch the eye of your website visitors is by showcasing your videos in a featured video section.
  9. Full screen: Full-screen mode takes advantage of your available screen real estate and provides a useful platform for presenting visual content. One main benefit of a full screen page layout is visibility.
  10. Social: Putting your social media channel on your website can directly affect the response and engagement from your visitor.
  11. Blank: Custom design a section by yourself. We provide a blank section with a variety block layout.
  12. Blog: Adding more widget on your page for letting a visitor can easily access to read your blog.

Content section design

Content section is the main content area you can easily see section by section inside blue border line. You can edit section background for more attractive content.

Edit section background

  1. Click on the content section you want to edit. The blue border line will show its area.

    image

  2. Click Edit Section icon, and the Section Properties pops up which it allows you to change background image, set shadow, make section overlapping, and edit box border of this section.

    • Background

      Fluid (full screen): Enable or disable a full screen section.

      Color : Select background color by using color picker or choosing from a gradient color.

      Background Image: You can upload your own image or select one from Image Manager.

      Responsive Image Position: Image alignment on responsive mode.

      image

    • Shadow

      You can select 6 shadow preset styles which you can modify color and size on the below setting.

      image

    • Overlap

      You can make this section to overlap the above or below content section or being overlapped by them.

      image

    • Box

      Add and edit border of this section.

      image

Duplicate section

You can duplicate section fore more faster content making if it's used the same design and content layout.

  1. Click on the content section you want to edit. The blue border line will show its area.

    image

  2. Click Duplicate Section icon. The new section will be duplicated below this section you selected.

    image

  3. You can start edit this duplicated section, it will not overwrite content and design in the original one.

    image

Move section

You can use Move tool to freely move content section by drag and drop.

image

Remove section

CANNOT UNDO You can remove section if it's unwanted. But be careful and sure you want to remove it, it cannot be undo. If you accidentally press Remove Section icon DO NOT click main Save button (the blue Save button on the top right), just refresh this page, then the remove didn't save and take no effect.

image

Content block design

Content block is sub content areas inside content section that you can see they have their own tools appears while you're editing on each of them.

Edit block background

  1. Click on the content block you want to edit. The tools will show to edit this block.

    image

  2. Click Edit Block icon, and the Block Properties pops up which it allows you to change background image, set shadow, make section overlapping, and edit box border of this block.

    • Background

      Background Color : Select background color by using color picker or choosing from a gradient color.

      Background Image: You can upload your own image or select one from Image Manager.

      Responsive Image Position: Image alignment on responsive mode.

      image

    • Shadow

      You can select 6 shadow preset styles which you can modify color and size on the below setting.

      image

    • Overlap

      You can make this block to overlap the above or below content block or being overlapped by them.

      image

    • Box

      Add and edit border of this block.

      image

Duplicate block

You can duplicate section fore more faster content making if it's used the same design and content layout.

  1. Click on the content block you want to edit. The tools will show to edit this block.

    image

  2. Click Duplicate Block icon. The new block will be duplicated next to this block you selected.

    image

  3. You can start edit this duplicated block, it will not overwrite content and design in the original one.

    image

Move block

You can use Move block to freely move content block by drag and drop inside content section.

image

Add animation to block

You can make content block display animation effect for being more wow.

  1. Click on the content block you want to edit. then click on Animation icon.

    image

  2. Select an effect for your content block and give it the moving duration in second.

    image

Remove block

CANNOT UNDO You can remove block if it's unwanted. But be careful and sure you want to remove it, it cannot be undo. If you accidentally press Remove Block icon DO NOT click main Save button (the blue Save button on the top right), just refresh this page, then the remove didn't save and take no effect.

image


Insert blog widget

You can use Blog widget to insert your Blog Category List and Recent Post List among website content on the page you want for more connection and readers to your Blog.

3 ways to insert Blog widget for your Blog Category List or Recent Post List to content are; as Section, as Block and as element among the content.

  • As section

    1. Place mouse on content section you want to insert Blog widget.

      image

    2. Use Insert tool, and Widget.

      image

    3. By hovering mouse on Blog widget, place to insert Blog Category List or Recent Post List, and select Insert Section.

      image

    4. The inserted widget will be under the content section you clicked by number 1. You can edit how this list display and its design in the List Setting panel.

      image

    5. You can also edit section background the same way with section background of content.

      image

  • As block

    1. Place mouse on content block you want to insert Blog widget.

      image

    2. Use Insert tool, and Widget.

      image

    3. By hovering mouse on Blog widget, place to insert Blog Category List or Recent Post List, and select Insert Block.

      image

    4. The inserted widget will be next to content block you clicked by number 1. You can edit how this list display and its design in the List Setting panel.

      image

    5. You can also edit block background the same way with block background of content.

      image

  • As element among the content

    1. Place mouse on content area you want to insert Blog widget.

      image

    2. Use Insert tool, and Widget.

      image

    3. By hovering mouse on Blog widget, place to insert Blog Category List or Recent Post List, and select Insert Element.

      image

    4. The inserted widget will be at the mouse position among the content you clicked by number 1. You can edit how this list display and its design in the List Setting panel.

      image


Insert link to content and image

You can insert connect link or hyperlink to your content and image by using Insert tool.

image

Insert page as link

  1. Highlight short content or click on an image.

    image

  2. On Insert tool, place mouse on Link and select Page.

    image

  3. All 2 page types you can insert this content or image to link to.

    • Pages

      You can link to any page on your website and you can link to any system page on your website such as Login page, Register page, etc.

      image

    • Blog

      You can link to any blog post on your blog.

      image

  4. Set where link will be opened, and add the hover tooltips to display when mouse hover on it.

    image

Insert website as link

  1. Highlight short content or click on an image.

    image

  2. On Insert tool, place mouse on Link and select Website.

    image

  3. You can link to any website by inserting URL here.

    image

  4. Set where link will be opened, and add the hover tooltips to display when mouse hover on it.

    image

Insert send email as link

You can set the link to send email to you for more communication with your website visitors.

  1. Highlight short content or click on an image.

    image

  2. On Insert tool, place mouse on Link and select Email.

    image

  3. On Set Email tab, add Email address, subject to let your visitor write message directly to you here.

    image

  4. on Set Button tab, set where link will be opened, and add the hover tooltips to display when mouse hover on it.

    image

Insert file downloading as link

You can insert file to be downloaded for your website visitors.

  1. Highlight short content or click on an image.

    image

  2. On Insert tool, place mouse on Link and select Files.

    image

  3. Choose File to upload, and select it from select field.

    image

  4. Set where hover tooltips to display when mouse hover on it.

    image

Insert bookmark as link

  • Set content to a bookmark

    1. Highlight short content or click on an image.

      image

    2. On Insert tool, place mouse on Link and select Bookmark.

      image

    3. Choose a bookmark from dropdown list.

      image

    4. Set where hover tooltips to display when mouse hover on it.

      image

  • Set content as bookmark target

    1. Highlight short content or click on an image.

      image

    2. On Insert tool, place mouse on Link and select Bookmark Target.

      image

    3. Name this bookmark target for selection purpose.

      image


Insert button

You can add button in content area for more connections.

  1. At Content area, place mouse on position you want to insert button.

  2. On Center menu, click "Insert" and select "Button".

    image

  3. Select a design for your button.

    image

  4. Click on button itself for more setting such as set it linked to external website url.

    image

Edit button

Click on the button to activate Button tools.

image

  • Edit button design

    On the Button panel, you can edit button style as unique as you want.

    • Style

      You can change button design from here again.

      image

    • Design

      You can also customize the button to be more unique and attractive.

      Button Base Color : To customize the button color other than pre-installed designs

      Size and Border : To edit size of the button, and the border of the button that you can add color to it.

      Text Shadow : To add shadow and shadow color on the text in the button

      Box Shadow : To add shadow and shadow color on the border of the button.

      image

    • HTML Text

      You can add HTML code on this button for more functional.

      image


Insert image

Replace, Edit, Upload, Use image from facebook

Once some content done, let's make this page more interesting by adding images on it.

You can click directly on the image that comes with section.

image

The 3 image tools are right on the image you clicked; Upload, Replace, and Edit respectively.

image

  1. Upload

    Click this icon, you will see the Upload Image window to upload an image from your computer. Simply upload it.

  2. Replace

    Click this icon and you will see the Image manager panel that has 3 main parts to manage image.

    1) Image Manager panel ; Feel free to select one in free images from here.

    2) Upload button ; Feel free to upload new image from your computer.

    3) Other image folders ; folders to select images from such as our own built-images, images from your Instagram or facebook accounts.

    image

  3. Edit

    Click this button in order to edit this image.

    image

    From left to right.

    Zoom In : To Zoom this image for more closer.

    Zoom Out : To make this image more farther but not farther than the original.

    Rotate : To rotate this image.

    Flip Horizontal : To make this image flipped horizontally.

    Flip Vertical : To make this image flipped vertically.

    Resize : To make this image size matched this image box. It's not to resize image freely.

    Overwrite (Caution) : If you click Overwrite, it will entirely overwrite the original image by the new uploaded image. If you have the original image in any places of your website, it will be displayed the new uploaded image instead.

    FULL image Editor : You can insert text, crop, rotation and add a filter. Make your image more beautiful ever!