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.
Link Element within Snippets:
- 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.