Close

Start your free trial

Already have an account? Log in

Snippet

Welcome to Snippets in the WebCommander Editor! Snippets are pre-designed sections that bring efficiency and style to your website creation journey. These ready-made elements, including Image Gallery, Slideshow, Product, Category, and Blog, serve as building blocks to streamline your design process. Whether you’re showcasing a stunning image gallery, creating engaging slideshows, displaying products or categories, or crafting a compelling blog section, Snippets are your go-to tools for adding functionality and visual appeal to your website. Let’s explore the versatility and convenience that Snippets offer in enhancing your web design experience.

Snippet Common Behaviors:

  • Edit: Click on the Edit icon to modify the content of the snippet.
  • Gear Icon: Use the Gear icon to provide a title for the snippet, enhancing organisational clarity.
  • Save: Click the Save icon to save any changes made to the snippet.
  • Recover Icon: Click the Recover icon to undo changes since the last save, reverting to the previous state.
  • Cross Icon: Click the Cross icon to close the edit mode for the snippet.

Element Common Behaviors within a Snippet:

  • Copy: Duplicate the selected element inside the snippet.
  • Right & Left Arrow: Exchange the position of similar elements within the snippet.
  • Delete: Remove the selected element from the snippet.

Text Element within Snippets:

  • Change Text Color: Flexibly change the colour of the text.
  • Change Font Size: Adjust the size of the text according to your preferences.
  • Text Alignment: Choose the alignment for the text within the element.
  • Margin: Customise the margins of the text element.
  • Padding: Set padding for the text element to control spacing.
  • Edit Text: Easily change the content of the text by clicking directly on it.
  • General Settings:
    • Change Text Color, Font Size, Text Alignment, Margin, Padding.
    • Link to a URL and configure link opening options.
  • Border Style: Choose Border Color, Style, Corner Radius, and Border Width.
  • Background Style: Add Background Images and background Color, and configure repeat and size properties.
  • Edit Text: Easily change the content of the link by clicking directly on it.

Image Element within Snippets:

  • Replace Existing Image: Replace the current image with a new one.
  • Adjust Image Properties: Fine-tune properties of the current image.
  • Add Image Description: Include descriptive text about the content of the image.
  • Link to a URL: Associate the image with a URL.
  • Configure Link Opening: Configure how the linked URL will open.
  • Margin & Padding: Customise margins and padding for the image element.

Container Element within Snippets:

  • General Settings: Customise Margin and Padding.
  • Border Style: Choose Border Color, Style, Corner Radius, and Border Width.
  • Background Style: Add Background Images, Background Color, and configure size properties.

Icon Element within Snippets:

  • Choose Icon Color: Flexibly choose the color of the icon.
  • Adjust Icon Size: Resize the icon according to your preferences.
  • Replace Icon: Replace the current icon with another icon.
  • Link to a URL: Associate the icon with a URL.
  • Configure Link Opening: Configure how the linked URL will open.

These customisation options empower you to create dynamic and visually appealing snippets within the WebCommander Editor.

Was this information helpful?

Related Articles

Getting Started With the Simple Editor
Sections
Snippet
Elements
Can't find your answers? Contact Us