¶ The Mini-Menu
The mini-Menu is the little menu that pops up when you press on one of the elements in the section, it holds a lot of function and designed in a way that you can control each peace of the section throw it.
¶ Title
The Title element is the main text element of the section/item. For SEO reasons it is important to add the title text of a section to the Title element, rather than to the Subtitle or Body elements.
To open the element’s Settings panel, click the element once, and choose Edit Title (double-click will work as well):
- T1/T2/T3 - You can apply a title preset to the specific Title element.
- Text’s Size - Choose the size of the text Text Color - Choose the color of text
- Clear Style - Reset the text’s style
- H1/H2/H3/H4/DIV - The <h1> to <h4> tags are used to define HTML headings. <h1> defines the most important heading. <h4> defines the least important heading. Div means ‘regular’ text with no special-attribute.
¶ Subtitle
The Subtitle element is the secondary text element of the section/item. For SEO reasons it is important to add the subtitle text of a section to the Subtitle element
To open the element’s Settings panel, click the element once, and choose Edit Subtitle (double-click will work as well):
- S1/S2/S3 - You can apply a subtitle preset to the specific Subtitle element.
- Text’s Size - Choose the size of the text Text Color - Choose the color of text
- Clear Style - Reset the text’s style
- H2/H3/H4/DIV - The <h2> to <h4> tags are used to define HTML headings.
¶ Body
Edit_text: Text edit.mp4
Unlike the Title and the Substilte elements, the Body element was designed to allow you to add longer texts. You can treat it as a paragraph element.
To open the element’s Settings panel, click the element once, and choose Edit Body (double-click will work as well):
- P1/P2/P3 - You can apply a subtitle preset to the specific Body element.
- Text’s Size - Choose the size of the text
- Text Color - Choose the color of text
- Clear Style - Reset the text’s style
- H1/H2/H3/H4/DIV - The <h1> to <h4> tags are used to define HTML headings. <h1> defines the most important heading. <h4> defines the least important heading
¶ Media
Using the Media element you can add an image, a video, a color or a Map.
A walk-through video: Media_panel.mp4
To open the element’s Settings panel, click the element once, and choose Edit Media (double-click will work as well):
Start by choosing the type of media you want to add. The settings of the element will adjust according to your choice.
¶ Image
- Image Source - Upload an image from your computer
¶ Image Settings & Effects
- Image Sizing - choosing the resizing of the image between different platforms.
- 1:1 - The image will be presented in its original size
- Cover - The image will cover the entire element’s area, when presented on all platforms. In most cases, the image will be cropped for the matter of having the resolution to over the entire element
- Contain - The image will be fully contained within the element’s area, when presented on all platforms
- Filter - Add a visual filter to the image
- Scroll Behaviour - How the image will act while the visitors scroll through the site
- Normal
- Fixed
- Parallax
- Image Focal Point - Allows you to adjust the focal point of the image.
- Horizontal Position (in %)
- Vertical Position (in %)
- Reset
¶ Video
- Video Source - Choose between 3 different sources
- YouTube - Note that you only need to add the Youtube ID of the video, and not the entire URL address
- Vimeo - Note that you only need to add the Youtube ID of the video, and not the entire URL address
- MP4-Adda video from a direct URL address. Here you need to add the full URL address.
- Video Settings & Effects
- Controls - Choose whether you want to show or hide the video’s control buttons
- Playback
- Autoplay - Will start playing the video when the site’s first loads
- Cover - Will stretch the video’s space to cover the entire Element’s Area
- Mute - Mute or unmute the video
- Loop - Will replay the video in loop
- Filter - Add a visual filter to the video
- Poster Image - Choose the image that will be presented before the video plays. A type of thumbnail
¶ Color
Choose Color - Choose the color that will cover the entire element’s area
¶ Map
Choose whether you wish to present a single location or multiple locations.
¶ Single - present a single location on the map
¶ Multi - Present multiple locations. Hit the + for each new location
- Set addresses
- Add Address
- Settings
- include phone CTA
- include direction link
- labels
- terrain
- controls
- Regular/Gray/Satellite
- Colors & Typography
- Box & Text Colors
- Button Colors
- Preset - Choose one of several map presets
¶ Icon
Icon panel: Icon_panel.mp4
The icon element allows you to add a small image to your item. It is usually used to upload logos. You need to upload the icon’s image from your hard drive. You will be able to customize the icon size, and the margin it will have from other elements.
¶ Divider
Divider panel: Divider panel.mp4
A divider will allow you to visually separate part of your item from another part. You will be able to customize its color, and choose its shape from several presets that we made.
¶ Button
Button panel: Button_panel.mp4
¶ Text
Button’s Text - Choose the button’s label
Choose Typography preset - Allows you to apply a preset that you made.
¶ Shape
Choose style - Change the button’s style (border, background and size) according to our presets.
¶ Colors
Choose button color preset - Customize the button’s color. 4.
¶ Pro
Functionality attribute value - If the molecule includes this content, an ability to assign certain PatientPop functionality to a button (open a scheduling popup as an example)
¶ Social
The Social element allows you to add social icons that will link to the site’s different social accounts.
¶ Add/Remove Items
- Add Media - Click the + sign to add a new social icon
- Delete Media - Hover above the social icon bar that you wish to remove, and click the bin button that pops
- Reorder Media - The change the location of a social icon, drag and drop the required social icon bar
- Update Media Address - To link a social icon to a social account, copy the social account address to the required bar
¶ Size and Spacing
Adjust the size and spacing of the social icons.
¶ Theme
Select your wanted theme for the social icons
Social panel: Social_panel.mp4
¶ Rating
¶ Rating
Choose maximum rating score
¶ Style
Choose the size of each rating icon and the margin between the icons.
¶ Presets
Choose the required rating icons style from several presets
Rating panel: Rating_settings.mp4
