The toggle Borders would come in handy when you adjust the position of the elements within the build space.

You can always check your progress by clicking View full screen to check in full size window. Press Esc to exit the full screen mode.

Click Save to save the changes which are not deployed to the live registration site. This allows you to access this saved state when you reopen the Page Builder

You can also check the live registration page by clicking View live site

Once you are finished with the build progress, click Deploy button to publish the registration page.

You can click and hold to rearrange the elements within the Page builder.

Note: When you reorder an element within the section panel,
this will get reflected in the build space.

You can hide any element using this.

Note: The hidden element won't render in the final registration page
if you were to deploy it

You can also collapse or expand to view the elements that are dropped within the section.

Note: This will come in handy when you drop Basic blocks within a Section block

The Goldcast blocks provide an easy-to-build experience for the user. The user can drag and drop these blocks to quickly complete the registration page.

Note: Goldcast blocks draws its styling properties from properties from
branding tab. This allows you to change different properties seamlessly,
whenever you update your theme settings in the Branding tab.

You can also choose to have your own theme page for the registration page by changing the background colors and text properties. However, by doing this, you lose the updation ability with the branding tab.

Therefore, we recommend you to choose to design your reg page independently from the branding page early in the build process for best results.

Let's explore each Goldcast block. There are 7 of these. Each block comes with its own special properties. You can choose to know each of these by clicking the links below.

• Banner
• Goldcast Speakers
• Goldcast Booths
• Goldcast Agenda
• Godlcast register
• Goldcast Description
• Goldcast Nav-bar

Generally on top of the page, this section includes information on Event Title, Date, Location

Get Hero block on your builder by following these steps:

1. Click Add Blocks in the Toolbar on top
2. Navigate to Goldcast blocks. Click the dropdown arrow if hidden
3. Drag and drop this block  into the build page
4. Select the block to edit the properties. You can find more about this below in this section

Properties of Hero Block

The properties - location, date, Background image, gradient color, Text color - get automatically updated as you change in your Space or Branding tab in the admin panel. 

1. Show Location - Click the checkbox to show/hide the location of the event in the Hero image.
2. Show Date- Click the checkbox to show/hide the date of the event in the Hero image.
3. Show BG - Click the checkbox to show/hide the Background image uploaded in the Branding tab for your event in the admin panel.
4. Title size - Adjust the size of Title text font. The size of "GC Custom Reg page Builder Walkthrough" in the above image. Default:50 px
5. Block Height - Adjust the size of the whole Hero block. Default size - 410 px
6. Event Details Topspace - Increase the space between the 2 rows  Title text and Date/Location. 
7. Text color - Change the color of the font. Affects the Title text, Date and Location.

Note: The text-color stops changing automatically when you make changes in Branding tab if you override
using this property.

Goldcast speakers block includes information about your speakers for your event and their profiles.

Get Hero block on your builder by following these steps:

1. Click Add Blocks in the Toolbar on top
2. Navigate to Goldcast blocks. Click the dropdown arrow if hidden
3. Drag and drop this block  into the build page
4. Select the block to edit the properties. You can find more about this below in this section

Properties of Goldcast Speakers Block

The event data - profile photo, name, title, Linkedin profile, twitter profile - get automatically updated as you change in your Space or Branding tab in the admin panel. 

1. Section Title - You can change to your own title in the Speaker block using this property. It is Case Sensitive
2. Grid View- Click the checkbox to change the layout toggling between Grid view or list view of speakers.
3. Circle Images - Click the checkbox to change the profile photo type toggling between circles or square images.
4. Show Linkedin - Click the checkbox to show/hide the Linkedin image uploaded in the Space tab for your event in the admin panel. You can view this by clicking See Profile in a speaker card.
5. Show Twitter - Click the checkbox to show/hide the Linkedin image uploaded in the Space tab for your event in the admin panel. You can view this by clicking See Profile in a speaker card.

Sponsors block highlights the logos of your event sponsors

Get Hero block on your builder by following these steps:

1. Click Add Blocks in the Toolbar on top
2. Navigate to Goldcast blocks. Click the dropdown arrow if hidden
3. Drag and drop this block  into the build page
4. Select the block to edit the properties. You can find more about this below in this section

Properties of Goldcast Booths Block

The event data - logo image, background color  - get automatically updated as you change in your Space or Branding tab in the admin panel. 

1. Section Title - You can change to your own title in the Goldcast Booths block using this property. It is Case Sensitive

Goldcast Agenda block includes information about the agenda of your event with the list of sessions, tracks filtered by dates.

Get Hero block on your builder by following these steps:

1. Click Add Blocks in the Toolbar on top
2. Navigate to Goldcast blocks. Click the dropdown arrow if hidden
3. Drag and drop this block  into the build page
4. Select the block to edit the properties. You can find more about this below in this section

Properties of Goldcast Agenda Block

The event data - profile photo, name, title, Linkedin profile, twitter profile - get automatically updated as you change in your Space or Branding tab in the admin panel. 

1. Section Title - You can change to your own title in the Agenda block using this property. It is Case Sensitive
2. Card gap - Adjust the space between 2 list items in the Agenda block. Default size - 8 px
3. Text color - Change the color of the font. Affects the Title text, Date, and list items.
4. Pill color - Change the color of the different track tabs in Agenda. Affects the background color of the tab.

Note: The text-color and Pill-color stops changing
automatically when you make changes in Branding tab
if you override using this property.

Get Hero block on your builder by following these steps:

1. Click Add Blocks in the Toolbar on top
2. Navigate to Goldcast blocks. Click the dropdown arrow if hidden
3. Drag and drop this block  into the build page
4. Click on "Register" button inside the builder to edit the properties. You can find more about this below in this section

Properties of Goldcast Register Block

The form data gets automatically updated as you change in your Registration tab in the admin panel.

1. Vertical spacing - Adjust the space between 2 form fields. Default size - 5 px
2. Text color- Change the color of the font. Affects the Label Font. 
3. Label Font size - Change the font size. Default size - 15
4. Background color - Change the color of the form background. 
5. Button Background - Change the background color of the Submit button. 
6. Button Disabled Background - Change the background color of the Submit button in the disabled state. 
7. Button Text Color - Change the font color of the Submit button.
8. Check color - Changes the color of the Checkbox.
9. Element inner color - Change the background color of the form field. 

Note: Each property in Register button stops changing
automatically when you make changes in Branding tab
if you override with that property.

Goldcast Description block includes information about your event description

Get Hero block on your builder by following these steps:

1. Click Add Blocks in the Toolbar on top
2. Navigate to Goldcast blocks. Click the dropdown arrow if hidden
3. Drag and drop this block  into the build page
4. Edit the properties. You can find more about this below in this section

Properties of Goldcast Description Block

The event description gets automatically updated as you change in your Space or Branding tab in the admin panel. 

1. Section Title - You can change to your own title in the Description block using this property. It is Case Sensitive
2. Font size - Adjust the size of the body text in the Description block. Default size - 20 px
3. Text color - Change the color of the font. Affects the Title text, Body text.

Note: The text-color stops changing automatically
when you make changes in Branding tab if you
override using this property.

Goldcast Nav block helps your attendees navigate to the section they need in the registration page.

Get Hero block on your builder by following these steps:

1. Click Add Blocks in the Toolbar on top
2. Navigate to Goldcast blocks. Click the dropdown arrow if hidden
3. Drag and drop this block  into the build page
4. Edit the properties. You can find more about this below in this section

Properties of Goldcast Navbar Block

The names of the tabs get automatically updated as you change the Section title of the respective tab and the order of the tab gets rearranged as you build accordingly.

1. Text color - Change the color of the font of all tabs. 
2. Background color - Change the color of the background.

Note: The text-color and background-color stops changing
automatically when you make changes in Branding tab
if you override using this property.

Basic blocks allow you to include your own content in different formats within the Reg-page builder. The definitions of each different block is defined below. The usage and properties of these blocks are accessible below.

• Section 1
• Section 2
• Section 3
• Section 3/7
• Nav- Linked Section
• Basic Grid
• Heading 1, Heading 2, Text
• Link Text, Button Text
• Image
• Video
• Map
• Timer
• Quote
• Divider

NavLinked Section is special with a Section title. This will appear in the Goldcast Navbar in Goldcast Blocks if it gets imported into the Page Builder. The Section Title is editable in the Properties panel on the right.

The Section Grid is a matrix of more than one section defined by the number of Rows and Columns in Properties.

The text can be changed by editing the text within the page builder. All these text blocks work best when imported within any of the section blocks. 

The text can be changed by editing the text within the page builder. A link text/Button has 2 special properties of its own.

• You can enter the URL usingHref . This allows you to connect the linked text to the desired URL.
• Target allows the user to open the linked URL in a new window or in the same window.

The Image block lets you upload an image from the Local Files folder.

On the left-side of the pop-up screen, you can double-click the image thumbnail, you will see the pop-up screen shown below. Here, you can double-click the box to bring up the files folder.

On the right-side of the pop-up screen, You can also find thumbnail of the images which were previously uploaded into the page builder.

Video block allows you to upload videos from the Video library.  You can double-click on the Video element. It opens a pop-up that lets you select videos from the Video library.

Video has the following properties of its own.

• Width - Sets the width of the video. Defaults 200 px
• URL - You can alternatively add mp4 videos by linking websites
• Autoplay - When checked, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
• Loop - When checked, the browser will automatically seek back to the start upon reaching the end of the video.
• Plays inline -  When checked, the video is to be played "inline", that is within the element's playback area. 

Note: The absence of this attribute does not imply that
the video will always be played in fullscreen.

• Show Controls - When checked, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.

Map can be used to specify the location

• Place - Type to search this field to specify the location

Timer sets the countdown time that can defined by the user

Timer has the following property

• Countdown to - End date and Time of the Countdown can be typing or selecting these in the calendar in the Properties Panel.

Quote indicates that the enclosed text is an extended quotation. You can edit the text within the builder

Divider allows you to divide two sections. The color of the divider can be changed by adjusting the border colors in dimension properties

The width CSS property sets an element's width. By default, it sets the width of the content area.

The height CSS property specifies the height of an element. By default, the property defines the height of the content area.

The padding sets the padding area on all four sides of an element at once.

For complete guidelines, please use these links below
Width - https://developer.mozilla.org/en-US/docs/Web/CSS/width
Height - https://developer.mozilla.org/en-US/docs/Web/CSS/width
Padding - https://developer.mozilla.org/en-US/docs/Web/CSS/padding
Margin - https://developer.mozilla.org/en-US/docs/Web/CSS/margin
Border - https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

Thefont-family  specifies a prioritized list of one or more font family names and/or generic family names for the selected element. It is Arial by default. 

The font-size sets the size of the font. You can define in em, erm, points based on the units you prefer. You can type these following values for the best results.

• small
• medium
• large

The font-weight options depend on the boldness of the font family set by you.

The font-color applies the color of the font. By default, it imports the Font color in the Branding settings within the Branding tab

The text-alignproperty sets the horizontal alignment of the inline-level content inside a block element or table-cell box. The contents within the selected element are aligned to the side you choose. For example, all the contents will align to the left if you select left in this control

The Line-height property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.

For complete guidelines, you can refer to the following pages.
Font size - https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
Font family - https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
Font weight - https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Text align - https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
Line height - https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

The Background-color of the selected element imports color from Branding Tab settings by default. If you proceed to change it manually, the color settings will be unlinked from the event & Branding tab and will not update when you make changes there. If you want to revert to using Branding tab settings, you can delete this Goldcast block and drag and drop a new Goldcast block.

The background-image of the selected container contains by default but can be set by the user

Note: The background-image is drawn over the Background-color. So, it overrides the effect.

For thebackground-image the following properties can be set

• background-size - (defined as 100% by default).
  • contain - Scales the image as large as possible within its container without cropping or stretching the image.
  • auto - Scales the background image in the corresponding direction such that its intrinsic proportions are maintained.
  • cover - Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.
• The background-repeat property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
• The background-position-x property sets the initial horizontal position for each background image. 
• The background-position-y property sets the initial vertical position for each background image.

For complete guidelines, you can refer to the following pages
Background image -  https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Background color - https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
Background-repeat - https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
Background-position-x - https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x
Background-position-y - https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y 

The position property sets how an element is positioned in a document

• static - The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
• relative- The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. 
• absolute- The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. 
• fixed - The element is removed from the normal document flow, and no space is created for the element in the page layout. 

For complete guidelines,
Position - https://developer.mozilla.org/en-US/docs/Web/CSS/position

The z-index property sets the z-order of a positioned element

The display property sets whether an element is treated

• Block - 
• Flexbox - when this is selected, all child items within the selected element are said to be in flex. This will have effect with additional properties shown below
• Grid box - 
• Inline Block -
• Null - 

The Grid-gap property sets the gaps between rows and columns.

For complete guidelines,
Z-index - https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Display - https://developer.mozilla.org/en-US/docs/Web/CSS/display
Grid-gap - https://developer.mozilla.org/en-US/docs/Web/CSS/gap

The flex-direction property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

The justify property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

• Flex start - Pack flex items from the start
• Center - Pack items around the center
• Flex End - Pack flex items from the end
• Space between - Distribute items evenly
  The first item is flush with the start,
  the last is flush with the end
• Space Around - Distribute items evenly
  Items have a half-size space
  on either end

The align property sets the distribution of space between and around content items along a Flexbox's cross-axis or a Grid's block axis.

• Flex start - The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-start side. This only applies to flex layout items. 
• Center - The items are packed flush to each other in the center of the alignment container along the cross axis.
• Flex end - The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-end side. This only applies to flex layout items. 
• Baseline - Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
• Stretch - If the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.

The flex-wrap property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

• nowrap - The flex items are laid out in a single line which may cause the flex container to overflow. This is the default value.

• wrap - The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.

• wrap-reverse - Behaves the same as wrap but the direction is reversed

For complete guidelines, use this link
Flex direction - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
Justify - https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Align - https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
Wrap - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap