Element

Elements are the smallest components of a web page.

Header

The uppermost part of a website which consists of the site title and the navigation bar.

image
Click the pencil icon to set up the header.

  1. Select "Site Title".
  2. Click the pencil icon.
  3. Select "Site title & logo".
  4. Customize your site title and logo through the options below:
- Site title
- Enable "Site Title".
- Edit your site title: enter your site title in the text field.
- Choose the font size for your site title: Anyweb provides three font sizes for site titles.
- Logo
- Enable "Logo".
- Edit/Add logo image: click "Add Image" to add a logo image.
- Modify logo size: drag to change the size of the logo (20 px – 320 px)

Layout

  1. Select "+" in the left navigation pane.
  2. Select "Site Title".
  3. Click the pencil icon.
  4. Select "Layout".
  5. Customize your header layout through the options below:
  • Make header sticky: enable this option to stick the header to the top.
  • Modify header position: click the arrow to expand the list and select the header position you prefer.
    image
  • Navigation title spacing: drag to change the title spacing in the navigation bar (20 px – 64 px).
  • Padding (Top/Bottom): drag to change the top/bottom padding of the site title (8 px – 128 px).

Style

  • If you want your site title to be transparent
    • Enable "Transparent".
    • Select the header text color, hover color, and select color.
  • If you want your site title to be opaque
    • Disable "Transparent".
    • Select a background color or click "Custom color" to customize the background color.
    • Select the header text color, hover color, and select color.

Text

We provide headline and paragraph elements.

  1. Select Elements in the left navigation pane.
  2. Select the Headline/Paragraph component under "Text".
  3. Drag the component to the canvas.
  4. Select the component.
  5. Click the pencil icon.
  6. Customize this component through the options below:
    image
  • Modify the style: select the text you want to format and click "Paragraph" to modify the text style. Anyweb currently offers one heading style and three paragraph styles.
  • Format the text: you can use the four options on the right-hand side of "Paragraph" to embolden, italicize, underline, or shade your text.
  • Add hyperlinks: select the text you want to add a hyperlink for and click 🔗 to add/modify a hyperlink.

Button

We provide two types of buttons: primary and secondary.

  1. Select "Elements" in the left navigation pane.
  2. Select the "Primary button/Secondary button" component under "Button".
  3. Drag the component to the canvas.
  4. Select the component.
  5. Click the pencil icon.
  6. Customize this component through the options below:

General settings

  • Button caption: click to edit the button's caption.
  • Jump to: in-site pages or external pages.
  • Open link in new tab: choose whether to open a link in a new tab.
  • Modify button size: Anyweb provides three sizes of buttons, i.e., small, medium, and large.
  • Customize width: go to "Customize Width" and drag to modify the button's width (36 px – 999 px).

Design settings

  • Alignment: choose how buttons are aligned to the top/bottom.
  • Button style: select a button style (Primary button or Secondary button).
  • Color customization
    • Customize button colors
      • Set pre-click and post-click button colors.
    • Edit button caption colors
      • Set pre-click and post-click button caption colors.

Image

Supported formats: JPG, PNG, and GIF | Maximum file size: 20 MB

  1. Select "Elements" in the left navigation pane.
  2. Click the "Image" component.
  3. Drag the component to the canvas.
  4. Select the component.
  5. Click the pencil icon.
  6. Customize this component through the options below:

Content

  • Add image: select and add images.
  • Crop image: crop images to adapt to the web page.
  • Show caption: enable "Show Caption" to show image captions.
  • Alt text: for blind or visually impaired readers and for image searches via text.

Design

  • Corner radius: drag to modify the corner radius (0 px – 999 px).
  • Resize: resize an image to either spread or adapt it to a certain area.
  • Padding: use "Padding" to set the white space for images.
  • Link To: set the linked page (in-site pages or external pages) that the user will be redirected to by clicking the image.
  • Open link in new tab: choose whether to open a link in a new tab.

Video

Supported formats: MP4, MPEG, and AVI | Maximum file size: 200 MB

  1. Select "Elements" in the left navigation pane.
  2. Click the "Video" component.
  3. Drag the component to the canvas.
  4. Select the component.
  5. Click the pencil icon.
  6. Customize this component through the options below:

Content

  • Add video
    • Add a video: upload a local video from your computer.
    • Add video via YouTube: upload a YouTube video via URL.
    • Add video via Vimeo: upload a Vimeo video via URL.
  • Autoplay: enable "Autoplay" to start playing the video as soon as the user sees the playback interface.

Design

  • Cover: click "Add Image" to add a cover image for the video (supported formats: JPG, PNG, and GIF; maximum file size: 20 MB).
  • Caption: enable "Caption" to add a description for the video. You can format your video descriptions by choosing the paragraph style and alignment as well as whether to embolden, italicize, underline, or highlight certain text.
  • Padding: use "Padding" to set the white space for videos.

Form

To collect the informationof visitors.

  1. Select "Form" in the left navigation pane.
  2. Click the "Form" component.
  3. Drag it onto the canvas.
  4. Select the component.
  5. Click the pencil icon.
  6. Customize this component through the options below:

General

  • Form name: edit the name of the form.
  • Button text: edit the button text in the form.
  • Button alignment: set the button positions in the form.
  • When a visitor submits a form
    • Show message: you can edit the content of the message when the visitor submits a form.
    • Link to page

Fields

Set up fields in the form.

  • Basic settings: click to expand the settings
    • Name
      • Set the prompt for the given name field.
      • Set the prompt for the family name field.
      • Required field: if enabled, this field will be displayed to visitors.
    • Email
      • Set the prompt for the email field.
      • Required field: if enabled, this field will be displayed to visitors.
    • Text area: collect multi-line text information from visitors.
      • Field tags: if there is more than one text field, we recommend adding tags to distinguish between different fields.
      • Set the prompt for the text field.
      • Required field: if enabled, this field will be displayed to visitors.
  • Add new field
    • Text: collect single-line text information from visitors.
    • Multiple choice
    • Single choice
    • True/False

Design

  • Button color (normal): the color of the form button when it is not clicked.
  • Button color (hover): the color of the form button when it is clicked.
  • Form style: click to select the form style you want.
    image
  • Padding: use "Padding" to set the white space for forms.
  • Add background: set the form's background color; you can choose from the theme colors or customize the color.

Was this helpful? Click here to give us feedback.